xcx

src/components/orderListItem/index.vue

@@ -1,16 +1,24 @@
 <template>
   <div class="orderListItem">
     <div class="title flex-h">
-      <div class="orange">
+      <div class="orange" v-if="data.status === 0">
         <i class="iconfont icon-dengdai"></i><br>
         <span>制作中</span>
       </div>
+      <div class="grey" v-if="data.status === 1">
+        <i class="iconfont icon-quxiao"></i><br>
+        <span>已取消</span>
+      </div>
+      <div class="green" v-if="data.status === 2">
+        <i class="iconfont icon-gouxuan"></i><br>
+        <span>已完成</span>
+      </div>
       <div class="flex-item">
         <div>
-          <span>悦见山</span>
+          <span>{{data.caseName}}</span>
         </div>
       </div>
-      <span>02/16 14:20</span>
+      <span>{{data.creatTime}}</span>
     </div>
     <div class="line">
       <div>
@@ -20,10 +28,10 @@
     <div class="list flex-h">
       <div class="flex-item">
         <ul>
-          <li>
-            <span>商品名称</span>
+          <li v-for="(subItem,subIndex) in data.goodsList" :key="subIndex">
+            <span>{{subItem.name}}</span>
             <div>
-              <span>￥20 x 2</span>
+              <span>￥{{subItem.price === null ? subItem.specPrice : subItem.price}} x {{subItem.num === null ? subItem.specNum : subItem.num}}</span>
             </div>
           </li>
         </ul>

src/module/user/orderList/index.vue

@@ -7,8 +7,8 @@
       <div class="flex-h">
         <div class="flex-item">
           <ul>
-            <li v-for="(item,index) in 10" :key="index">
-              <orderListItem></orderListItem>
+            <li v-for="(item,index) in list" :key="index">
+              <orderListItem :data="item"></orderListItem>
             </li>
           </ul>
         </div>
@@ -31,6 +31,90 @@ export default {
         showSelect: false,
         userName: 'xxx'
       },
+      list: [{
+        status: 0,
+        caseName: '案场名称',
+        creatTime: '02/16 14:20',
+        goodsList: [{
+          name: '商品名称1',
+          specName: '加冰',
+          price: null,
+          specPrice: 20,
+          num: null,
+          specNum: 2,
+        },{
+          name: '商品名称2',
+          specName: null,
+          price: 100,
+          specPrice: null,
+          num: 1,
+          specNum: null,
+        },{
+          name: '商品名称3',
+          specName: null,
+          price: 100,
+          specPrice: null,
+          num: 1,
+          specNum: null,
+        },{
+          name: '商品名称4',
+          specName: null,
+          price: 100,
+          specPrice: null,
+          num: 1,
+          specNum: null,
+        },{
+          name: '商品名称5',
+          specName: null,
+          price: 100,
+          specPrice: null,
+          num: 1,
+          specNum: null,
+        },{
+          name: '商品名称6',
+          specName: null,
+          price: 100,
+          specPrice: null,
+          num: 1,
+          specNum: null,
+        }],
+      },{
+        status: 1,
+        caseName: '案场名称',
+        creatTime: '02/16 14:20',
+        goodsList: [{
+          name: '商品名称1',
+          specName: '加冰',
+          price: null,
+          specPrice: 20,
+          num: null,
+          specNum: 2,
+        }],
+      },{
+        status: 2,
+        caseName: '案场名称',
+        creatTime: '02/16 14:20',
+        goodsList: [{
+          name: '商品名称1',
+          specName: '加冰',
+          price: null,
+          specPrice: 20,
+          num: null,
+          specNum: 2,
+        }],
+      },{
+        status: 0,
+        caseName: '案场名称',
+        creatTime: '02/16 14:20',
+        goodsList: [{
+          name: '商品名称1',
+          specName: '加冰',
+          price: null,
+          specPrice: 20,
+          num: null,
+          specNum: 2,
+        }],
+      }],
     }
   },
   computed: {},

src/module/user/placeOrder/index.vue

@@ -66,7 +66,8 @@
           <i class="iconfont" :class="{'icon-jiantou-up': !showCalcMenu,'icon-jiantou-down': showCalcMenu}" @click="showCalcMenu = true"></i>
         </div>
       </div>
-      <a @click="showCalcMenu = true">下单</a>
+      <router-link :to="{name: 'placeOrderDetail', query: {info: JSON.stringify(settlementList)}}">下单</router-link>
+      <!-- <a @click="showCalcMenu = true">下单</a> -->
     </div>
     <orderPopup :show="showPopup" :data="currentSpec" @closePopup="closePopup" @returnData="calcMenus"></orderPopup>
     <calcMenu :show="showCalcMenu" :totalNum="totalCupNum" :data="settlementList" @returnData="calcMenus" @emptyMenus="emptyMenus" @closeCalcMenu="closeCalcMenu" @placeOrder="placeOrder"></calcMenu>

src/module/user/placeOrderDetail/index.vue

@@ -0,0 +1,103 @@
+<template>
+  <div class="mainPage">
+    <div class="content">
+      <h2>确认下单信息</h2>
+      <div class="list flex-h">
+        <div class="flex-item">
+          <ul>
+            <li class="flex-h" v-for="(item,index) in 10" :key="index">
+              <div class="flex-item">
+                <div><span>美式特浓</span></div>
+              </div>
+              <div class="flex-item">
+                <div><span>加冰</span></div>
+              </div>
+              <div class="flex-item">
+                <div><span>x1</span></div>
+              </div>
+              <div class="flex-item">
+                <div><span>￥20</span></div>
+              </div>
+            </li>
+            <li class="flex-h">
+              <div class="flex-item">
+                <div><span>选择商品券</span></div>
+              </div>
+              <a class="active" @click="showSelect = true">
+                <span>{{postData.ticketName === '' ? '1张饮品券' : postData.ticketName}}</span>
+                <i class="iconfont icon-jiantou-right"></i>
+              </a>
+            </li>
+          </ul>
+        </div>
+      </div>
+      <h6>添加备注</h6>
+      <div class="remark flex-h">
+        <div class="flex-item flex-h">
+          <div class="flex-h">
+            <textarea class="flex-item" cols="30" rows="10"></textarea>
+          </div>
+        </div>
+      </div>
+      <span>下单人：小五子 18267901393</span>
+      <div class="bottom">
+        <a>取消</a>
+        <a>确定</a>
+      </div>
+    </div>
+    <div class="selectLayer" :class="{'show': showSelect}">
+      <div>
+        <van-picker
+          show-toolbar
+          title="选择优惠券"
+          :columns="ticketList"
+          @cancel="showSelect = false"
+          @confirm="onConfirm"
+          value-key="value"
+        />
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+
+export default {
+  name: '',
+  data () {
+    return {
+      postData: {
+        ticketId: '',
+        ticketName: '',
+      },
+      ticketList: [{
+        value: '优惠券1',
+        id: '1',
+      }, {
+        value: '优惠券2',
+        id: '2',
+      }, {
+        value: '优惠券3',
+        id: '3',
+      }],
+      showSelect: false,
+      orderInfo: JSON.parse(this.$route.query.info)
+    }
+  },
+  created () {
+
+  },
+  methods: {
+    onConfirm (value, index) {
+      this.postData.ticketName = value.value
+      this.postData.ticketId = value.id
+      this.showSelect = false
+    },
+  }
+}
+</script>
+
+<!-- Add "scoped" attribute to limit CSS to this component only -->
+<style lang="scss" scoped>
+@import "page.scss";
+</style>

src/module/user/placeOrderDetail/page.scss

@@ -0,0 +1,170 @@
+.mainPage{
+  >div.content{
+    width: 100%;
+    position: absolute;
+    left: 0;
+    top: 0;
+    bottom: 0;
+    overflow-y: scroll;
+    -webkit-overflow-scrolling: touch;
+    transform: translateZ(0);
+    -webkit-transform: translateZ(0);
+    >h2{
+      width: 100%;
+      display: block;
+      line-height: .3rem;
+      font-size: .17rem;
+      text-align: center;
+      margin: .28rem auto 0;
+    }
+    .list{
+      >div.flex-item{
+        margin: 0 .2rem;
+        position: relative;
+        overflow: hidden;
+        &>ul{
+          width: 100%;
+          position: relative;
+          overflow: hidden;
+          margin: .18rem auto 0;
+          &>li{
+            align-items: center;
+            padding: .08rem 0;
+            border-bottom: .01rem solid #eee;
+            >div{
+              >div{
+                width: 100%;
+                position: relative;
+                overflow: hidden;
+                >span{
+                  width: 100%;
+                  display: block;
+                  line-height: .26rem;
+                  font-size: .11rem;
+                  text-align: right;
+                }
+              }
+              &:nth-child(1){
+                >div{
+                  span{
+                    text-align: left;
+                    font-size: .14rem;
+                    overflow: hidden;
+                    text-overflow: ellipsis;
+                    white-space: nowrap;
+                  }
+                }
+              }
+              &:nth-child(2){
+                margin: 0 .05rem;
+                >div{
+                  span{
+                    text-align: center;
+                    color: #666;
+                    overflow: hidden;
+                    text-overflow: ellipsis;
+                    white-space: nowrap;
+                  }
+                }
+              }
+            }
+            a{
+              font-size: 0;
+              white-space: nowrap;
+              *{
+                display: inline-block;
+                line-height: .26rem;
+                font-size: .11rem;
+                color: #ccc;
+              }
+              &.active{
+                *{
+                  color: #fd684a;
+                  font-size: .14rem;
+                }
+              }
+            }
+          }
+        }
+      }
+    }
+    h6{
+      width: 100%;
+      display: block;
+      line-height: .34rem;
+      font-size: .14rem;
+      text-indent: .2rem;
+      margin: .3rem auto 0;
+    }
+    .remark{
+      >div{
+        margin: 0 .2rem;
+        >div{
+          width: 100%;
+          position: relative;
+          overflow: hidden;
+          background: #f2f2f2;
+          border-radius: .06rem;
+          textarea{
+            margin: 0 .1rem;
+            width: 100%;
+            line-height: .2rem;
+            padding: .1rem 0;
+            background: none;
+          }
+        }
+      }
+    }
+    >span{
+      width: 100%;
+      display: block;
+      line-height: .36rem;
+      font-size: .13rem;
+      color: #666;
+      text-indent: .2rem;
+    }
+    .bottom{
+      width: 100%;
+      position: relative;
+      overflow: hidden;
+      text-align: center;
+      font-size: 0;
+      white-space: nowrap;
+      margin: .1rem auto .4rem;
+      a{
+        display: inline-block;
+        line-height: .32rem;
+        border-radius: .05rem;
+        border: .01rem solid #333;
+        padding: 0 .4rem;
+        font-size: .15rem;
+        color: #333;
+        &:nth-child(2){
+          color: #fd684a;
+          border-color: #fd684a;
+          margin-left: .4rem;
+        }
+      }
+    }
+  }
+  .selectLayer{
+    width: 100%;
+    position: absolute;
+    left: 0;
+    top: 0;
+    bottom: 0;
+    z-index: 100;
+    background: rgba(0,0,0,.5);
+    display: none;
+    &.show{
+      display: block;
+    }
+    >div{
+      width: 100%;
+      position: absolute;
+      left: 0;
+      bottom: 0;
+      overflow: hidden;
+    }
+  }
+}

src/module/user/router.js

@@ -8,6 +8,7 @@ import majorProjects from './majorProjects/index' // 项目专题
 import majorProjectsDetail from './majorProjectsDetail/index' // 项目专题
 import coffeeIndex from './mainPage/coffeeIndex/index' // 城咖啡
 import placeOrder from './placeOrder/index' // 城咖啡-点单
+import placeOrderDetail from './placeOrderDetail/index' // 城咖啡-点单详情
 import orderList from './orderList/index' // 城咖啡-点单列表
 import userCenter from './mainPage/userCenter/index' // 个人中心
 import bindMobile from './bindMobile/bindMobile' // 绑定手机号
@@ -47,6 +48,11 @@ const router = new Router({
     name: 'placeOrder',
     component: placeOrder,
     children: []
+  },{ // 城咖啡-点单详情
+    path: '/placeOrderDetail',
+    name: 'placeOrderDetail',
+    component: placeOrderDetail,
+    children: []
   },{ // 城咖啡-点单列表
     path: '/orderList',
     name: 'orderList',