xcx

package-lock.json

@@ -5206,6 +5206,11 @@
       "integrity": "sha1-fjL3W0E4EpHQRhHxvxQQmsAGUdc=",
       "dev": true
     },
+    "qrcodejs2": {
+      "version": "0.0.2",
+      "resolved": "https://registry.npmjs.org/qrcodejs2/-/qrcodejs2-0.0.2.tgz",
+      "integrity": "sha1-Rlr+Xjnxn6zsuTLBH3oYYQkUauE="
+    },
     "qs": {
       "version": "6.5.1",
       "resolved": "https://registry.npmjs.org/qs/-/qs-6.5.1.tgz",

package.json

@@ -11,6 +11,7 @@
   "dependencies": {
     "better-scroll": "^1.12.6",
     "node-sass": "^4.9.3",
+    "qrcodejs2": "0.0.2",
     "sass-loader": "^7.1.0",
     "swiper": "^4.3.5",
     "vant": "^1.1.16",

src/components/calcMenu/index.vue

@@ -1,37 +1,39 @@
 <template>
   <div class="calcMenu" :class="{'show':show}">
-    <div>
-      <div class="top">
-        <i class="iconfont icon-guanbi"></i>
-        <span>当前已点菜单</span>
-      </div>
-      <div class="content">
-        <span class="noData" v-if="!data.length">暂未选择任何商品哦~~~快去下单！</span>
-        <div class="emptyMenus">
-          <a>
-            <i class="iconfont icon-qingkong"></i>
-            <span>清空已点菜单</span>
-          </a>
-        </div>
-        <div class="list flex-h">
-          <div class="flex-item">
-            <div>
-              <ul>
-                <li class="flex-h" v-for="(item,index) in data" :key="index">
-                  <span>{{item.name}}</span>
-                  <span v-if="item.specName !== null">{{item.specName}}</span>
-                  <span>{{item.defaultPrice !== null ? item.defaultPrice : item.price}}元/份</span>
-                  <div class="flex-item">
-                    <div>
-                      <i class="iconfont icon-jian" @click="subtract(item)"></i>
-                      <input type="tel" v-if="item.defaultNum !== null" v-model="item.defaultNum">
-                      <input type="tel" v-else v-model="item.num">
-                      <i class="iconfont icon-jia active" @click="add(item)"></i>
-                    </div>
+    <div class="centerLabel flex-h">
+      <div class="flex-item">
+        <div>
+          <div class="top">
+            <span>确认下单信息</span>
+            <span>下单完成后共计使用<em>{{totalNum}}</em>次</span>
+          </div>
+          <div class="content">
+            <span v-if="!data.length">您还没有点单哦~</span>  
+            <ul>
+              <li class="flex-h" v-for="(item,index) in data" :key="index">
+                <span>{{item.name}}</span>
+                <span v-if="item.specName !== null">（{{item.specName}}）</span>
+                <div class="flex-item">
+                  <div>
+                    <span>x{{item.defaultNum === null ? item.num : item.defaultNum}}</span>
                   </div>
-                </li>
-              </ul>
+                </div>
+              </li>
+            </ul>
+          </div>
+          <div class="bottom">
+            <div class="flex-h" v-if="data.length">
+              <span>备注：</span>
+              <div class="flex-item">
+                <div>
+                  <textarea cols="30" rows="3"></textarea>
+                </div>
+              </div>
             </div>
+            <ul class="flex-h">
+              <li class="flex-item" @click="close">再看看</li>
+              <li class="flex-item" @click="placeOrder">下单</li>
+            </ul>
           </div>
         </div>
       </div>
@@ -43,7 +45,7 @@
 
 export default {
   name: '',
-  props: ['show', 'data'],
+  props: ['show', 'data', 'totalNum'],
   data () {
     return {
 
@@ -59,40 +61,11 @@ export default {
 
   },
   methods: {
-    add (item) { // 增加
-      this.calc(item, true)
-    },
-    subtract (item) { // 减
-      this.calc(item, false)
+    close () { // 关闭菜单
+      this.$emit('closeCalcMenu')
     },
-    calc (item, bool) { // 增减
-      var target = null
-      if (item.defaultPrice === null) {
-        bool ? item.num += 1 : item.num > 0 ? item.num -= 1 : item.num = 0
-        target = {
-          name: item.name,
-          id: item.id,
-          specId: item.specId,
-          specName: item.specName,
-          num: item.num,
-          defaultNum: null,
-          price: item.price,
-          defaultPrice: null,
-        }
-      } else {
-        bool ? item.num += 1 : item.num > 0 ? item.num -= 1 : item.num = 0
-        target = {
-          name: item.name,
-          id: item.id,
-          specId: null,
-          specName: null,
-          num: null,
-          defaultNum: item.defaultNum,
-          price: null,
-          defaultPrice: item.defaultPrice,
-        }
-      }
-      this.$emit('returnData', target)
+    placeOrder () { // 点单
+      this.$emit('placeOrder')
     },
   }
 }

src/components/calcMenu/page.scss

@@ -11,141 +11,137 @@
     display: block;
   }
   &>div{
-    width: 100%;
-    border-top-left-radius: .1rem;
-    border-top-right-radius: .1rem;
+    width: 3.2rem;
+    border-radius: .1rem;
     background: #fff;
     position: absolute;
-    left: 0;
-    bottom: 0;
     overflow: hidden;
-    .top{
-      width: 100%;
-      position: relative;
-      overflow: hidden;
-      text-align: right;
-      padding: .05rem 0;
-      border-bottom: .01rem solid #eee;
-      i{
-        font-size: .2rem;
-        color: #666;
-        display: inline-block;
-        position: absolute;
-        right: .1rem;
-        top: 50%;
-        transform: translateY(-50%);
-        -webkit-transform: translateY(-50%);
-        z-index: 501;
-      }
-      span{
-        width: 100%;
-        display: block;
-        line-height: .4rem;
-        text-align: center;
-        font-size: .15rem;
-        color: #666;
-        position: relative;
-        z-index: 500;
-      }
-    }
-    .content{
-      width: 100%;
-      max-height: 3rem;
-      position: relative;
-      overflow-y: scroll;
-      -webkit-overflow-scrolling: touch;
-      transform: translateZ(0);
-      -webkit-transform: translateZ(0);
-      padding-bottom: .1rem;
-      &>span.noData{
-        width: 100%;
-        line-height: .4rem;
-        text-align: center;
-        display: block;
-        font-size: .13rem;
-        color: #ccc;
-      }
-      .emptyMenus{
+    &>div{
+      margin: 0 .2rem;
+      &>div{
         width: 100%;
         position: relative;
         overflow: hidden;
-        text-align: right;
-        a{
-          font-size: 0;
-          white-space: nowrap;
-          display: inline-block;
-          margin-right: .1rem;
-          margin-top: .1rem;
-          &>*{
-            line-height: .2rem;
-            vertical-align: middle;
-            font-size: .13rem;
+        .top{
+          width: 100%;
+          position: relative;
+          overflow: hidden;
+          margin: .1rem auto 0;
+          padding-bottom: .05rem;
+          border-bottom: .01rem solid #eee;
+          span{
+            width: 100%;
+            display: block;
+            text-align: center;
+            font-size: .11rem;
             color: #666;
-            margin-left: .05rem;
+            line-height: .22rem;
+            &:first-child{
+              line-height: .26rem;
+              font-size: .15rem;
+              color: #333;
+            }
+            em{
+              color: #f1644b;
+              font-size: .11rem;
+            }
           }
         }
-      }
-      .list{
-        &>div.flex-item{
-          margin: 0 .1rem;
-          &>div{
+        .content{
+          width: 100%;
+          max-height: 2rem;
+          position: relative;
+          overflow-y: scroll;
+          -webkit-overflow-scrolling: touch;
+          transform: translateZ(0);
+          -webkit-transform: translateZ(0);
+          border-bottom: .01rem solid #eee;
+          padding-bottom: .1rem;
+          &>span{
             width: 100%;
-            position: relative;
-            overflow: hidden;
-            ul{
-              margin: .1rem auto 0;
-              li{
-                align-items: center;
-                padding: .1rem 0;
-                span{
-                  line-height: .24rem;
-                  font-size: .13rem;
-                  color: #666;
-                  margin-right: .1rem;
-                  &:nth-child(1){
-                    max-width: 1.5rem;
-                    overflow: hidden;
-                    white-space: nowrap;
-                    text-overflow: ellipsis;
-                  }
-                  &:nth-child(2),
-                  &:nth-child(3){
-                    font-size: .11rem;
-                    color: #ccc;
-                  }
-                }
-                &>*{
-                  margin-right: .05rem;
-                  &:last-child{
-                    margin-right: 0;
-                  }
+            display: block;
+            line-height: .4rem;
+            text-align: center;
+            font-size: .15rem;
+            color: #ccc;
+          }
+          ul{
+            margin: .1rem auto 0;
+            li{
+              &>*{
+                line-height: .34rem;
+                font-size: .14rem;
+                &:first-child{
+                  width: 30%;
+                  text-align: center;
                 }
-                i{
-                  font-size: .2rem;
-                  color: #ccc;
-                  line-height: .24rem;
-                  display: inline-block;
-                  vertical-align: middle;
-                  &.active{
-                    color: #fc6243;
-                  }
+                &:nth-child(2){
+                  font-size: .11rem;
+                  color: #666;
                 }
+              }
+              &>div{
+                margin-right: .2rem;
                 &>div{
-                  font-size: 0;
-                  text-align: right;
-                  white-space: nowrap;
-                  input{
-                    width: .3rem;
-                    text-align: center;
-                  }
-                  &>*{
-                    vertical-align: middle;
+                  width: 100%;
+                  position: relative;
+                  overflow: hidden;
+                  span{
+                    width: 100%;
+                    display: block;
+                    text-align: right;
+                    font-size: .14rem;
+                    color: #666;
                   }
                 }
               }
             }
           }
         }
+        .bottom{
+          margin: .1rem auto 0;
+          &>div.flex-h{
+            align-items: flex-start;
+            &>span{
+              line-height: .2rem;
+              font-size: .13rem;
+              color: #666;
+            }
+            &>div{
+              &>div{
+                width: 100%;
+                position: relative;
+                overflow: hidden;
+                textarea{
+                  width: 100%;
+                  line-height: .2rem;
+                  font-size: .13rem;
+                  color: #666;
+                }
+              }
+            }
+          }
+          ul{
+            width: 100%;
+            position: relative;
+            overflow: hidden;
+            margin-bottom: .25rem;
+            li{
+              line-height: .36rem;
+              border: .01rem solid #333;
+              padding: 0 .15rem;
+              font-size: .15rem;
+              border-radius: .04rem;
+              text-align: center;
+              &:nth-child(1){
+                margin-right: .1rem;
+              }
+              &:nth-child(2){
+                margin-left: .1rem;
+              }
+            }
+          }
+        }
       }
     }
   }

src/module/user/orderList/index.vue

@@ -0,0 +1,28 @@
+<template>
+  <div class="mainPage flex-v">
+    1
+  </div>
+</template>
+
+<script>
+
+export default {
+  name: '',
+  data () {
+    return {
+      
+    }
+  },
+  computed: {},
+  components: {},
+  created () { },
+  methods: {
+    
+  }
+}
+</script>
+
+<!-- Add "scoped" attribute to limit CSS to this component only -->
+<style lang="scss" scoped>
+@import "page.scss";
+</style>

src/module/user/orderList/page.scss

@@ -0,0 +1,3 @@
+.mainPage{
+  
+}

src/module/user/placeOrder/index.vue

@@ -53,7 +53,6 @@
           </div>
         </div>
       </div>
-      <calcMenu :show="showCalcMenu" :data="settlementList" @returnData="calcMenus"></calcMenu>
     </div>
     <div class="flex-h">
       <div class="flex-item">
@@ -64,12 +63,13 @@
           <span>共</span>
           <span>{{totalPrice}}</span>
           <span>元</span>
-          <i class="iconfont icon-jiantou-up"></i>
+          <i class="iconfont" :class="{'icon-jiantou-up': !showCalcMenu,'icon-jiantou-down': showCalcMenu}" @click="showCalcMenu = true"></i>
         </div>
       </div>
-      <a>下单</a>
+      <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>
   </div>
 </template>
 
@@ -85,48 +85,13 @@ export default {
   data () {
     const _self = this
     return {
-      showCalcMenu: true, // 显隐已点菜单弹窗
+      totalCupNum: 0, // 共计使用杯数
+      showCalcMenu: false, // 显隐已点菜单弹窗
       currentSpec: null, // 当前选择规格
       showPopup: false, // 显隐选规格弹窗
       totalNum: 0, // 总杯数
       totalPrice: 0, // 总价格
-      settlementList: [{
-    "name": "商品名称",
-    "id": "1-1",
-    "specId": "1-1-3",
-    "specName": "正常",
-    "num": 3,
-    "defaultNum": null,
-    "price": "20",
-    "defaultPrice": null
-}, {
-    "name": "商品名称",
-    "id": "1-1",
-    "specId": "1-1-4",
-    "specName": "多冰",
-    "num": 1,
-    "defaultNum": null,
-    "price": "25",
-    "defaultPrice": null
-}, {
-    "name": "商品名称",
-    "id": "1-3",
-    "specId": null,
-    "specName": null,
-    "num": null,
-    "defaultNum": 2,
-    "price": null,
-    "defaultPrice": "100"
-}, {
-    "name": "商品名称",
-    "id": "1-4",
-    "specId": null,
-    "specName": null,
-    "num": null,
-    "defaultNum": 3,
-    "price": null,
-    "defaultPrice": "100"
-}], // 商品选择清单
+      settlementList: [], // 商品选择清单
       slideMenusActive: 0, // 左侧菜单选中索引值
       menuList: [{ // 商品数据
         value: '咖啡',
@@ -261,6 +226,15 @@ export default {
   },
   created () { },
   methods: {
+    placeOrder () { // 下单
+      this.$router.push({name: 'orderList', query: {}})
+    },
+    closeCalcMenu () { // 关闭已选菜单
+      this.showCalcMenu = false
+    },
+    emptyMenus () { // 清空菜单
+      this.settlementList = []
+    },
     closePopup () { // 关闭规格弹窗
       this.showPopup = false
       this.currentSpec = null
@@ -301,9 +275,6 @@ export default {
         }
       }
       this.settlementList = arr
-      // this.$set(this.settlementList, arr)
-      console.log(arr.length)
-      console.log(this.settlementList.length)
       // console.log(JSON.stringify(this.settlementList))
       this.calcTotalNum()
     },

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 orderList from './orderList/index' // 城咖啡-点单列表
 import userCenter from './mainPage/userCenter/index' // 个人中心
 import bindMobile from './bindMobile/bindMobile' // 绑定手机号
 import lessonOrder from './lessonOrder/index' // 我的订单
@@ -46,6 +47,11 @@ const router = new Router({
     name: 'placeOrder',
     component: placeOrder,
     children: []
+  },{ // 城咖啡-点单列表
+    path: '/orderList',
+    name: 'orderList',
+    component: orderList,
+    children: []
   },{ // 项目专题
     path: '/majorProjects',
     name: 'majorProjects',