H5-购物车：创建订单页

htmldev/dashboard/src/store/index.js

@@ -3,13 +3,15 @@ import Vuex from 'vuex'
 import cloneDeep from 'lodash/cloneDeep'
 import common from './modules/common'
 import placeCheck from './modules/placeCheck'
+import shopcart from './modules/shopcart'
 
 Vue.use(Vuex)
 
 export default new Vuex.Store({
   modules: {
     common,
-    placeCheck
+    placeCheck,
+    shopcart
   },
   mutations: {
     // 重置vuex本地储存状态

htmldev/dashboard/src/store/modules/shopcart.js

@@ -0,0 +1,29 @@
+const state = {
+  selectFoods: [], // 购物车数据
+  placeNum: '' // 桌号
+}
+
+const getters = {
+  selectFoods (state) {
+    return state.selectFoods
+  },
+  placeNum (state) {
+    return state.placeNum
+  }
+}
+
+const mutations = {
+  UPDATE_SELECTFOODS (state, value) {
+    state.selectFoods = value
+  },
+  UPDATE_PLACENUM (state, value) {
+    state.placeNum = value
+  }
+}
+
+export default {
+  namespaced: true,
+  state,
+  getters,
+  mutations
+}

htmldev/dashboard/src/views/sell/editTableNum/index.vue

@@ -18,7 +18,7 @@
         <van-button class="active" type="default">手动输入</van-button>
       </div>
       <van-field
-        v-model.trim="place_num"
+        v-model.trim="placeNum"
         :border="false"
         input-align="center"
         name="用户名"
@@ -48,8 +48,17 @@ export default {
   },
   data () {
     return {
-      showFlag: false,
-      place_num: ''
+      showFlag: false
+    }
+  },
+  computed: {
+    placeNum: {
+      get () {
+        return this.$store.getters['shopcart/placeNum']
+      },
+      set (val) {
+        this.$store.commit('shopcart/UPDATE_PLACENUM', val)
+      }
     }
   },
   methods: {
@@ -65,7 +74,7 @@ export default {
           success: function (result) {
             setTimeout(() => {
               const { resultStr } = result
-              vm.place_num = resultStr
+              vm.placeNum = resultStr
             }, 1000)
           },
           fail: err => {
@@ -79,7 +88,7 @@ export default {
           }, function (result) {
             const { codeContent } = result
             if (codeContent) {
-              vm.place_num = codeContent
+              vm.placeNum = codeContent
             }
           })
         } else {
@@ -90,7 +99,8 @@ export default {
       }
     },
     onsubmit () {
-
+      this.showFlag = false
+      this.$router.push({ name: 'SellPay' })
     }
   }
 }

htmldev/dashboard/src/views/sell/pay/index.vue

@@ -2,21 +2,31 @@
   <div class="pay-detail">
     <div class="order-status">
       <p>待支付</p>
-      <p>取消订单</p>
+      <router-link
+        :to="{name: 'SellGoods'}"
+        replace
+        tag="p">取消订单
+      </router-link>
     </div>
     <ul class="goods-list">
-      <li>
+      <li
+        v-for="(food, index) in selectFoods"
+        :key="index">
         <div class="goods-cover">
-          <img alt="" height="60" src="" width="60">
+          <img
+            :src="food.product_img_url"
+            alt=""
+            height="60"
+            width="60">
         </div>
         <div class="info">
           <p class="top">
-            <span>曼哈顿</span>
-            <span>￥1000</span>
+            <span>{{ food.product_name }}</span>
+            <span>￥{{ food.product_price * food.product_num | fen2Yuan }}</span>
           </p>
           <p class="bottom">
-            <span>标准+茉莉初雪+标准糖</span>
-            <span>*2</span>
+            <span>{{ food.product_attach }}</span>
+            <span>*{{ food.product_num }}</span>
           </p>
         </div>
       </li>
@@ -35,7 +45,7 @@
       </li>
       <li>
         <p class="label">小计</p>
-        <p class="label">¥2700</p>
+        <p class="label">¥{{ totalPrice | fen2Yuan }}</p>
       </li>
     </ul>
     <payment class="margin-top-20"
@@ -107,6 +117,21 @@ export default {
       downPaymentPopup: false // 选择预约款弹窗
     }
   },
+  computed: {
+    selectFoods () {
+      return this.$store.getters['shopcart/selectFoods']
+    },
+    placeNum () {
+      return this.$store.getters['shopcart/placeNum']
+    },
+    totalPrice () {
+      let total = 0
+      this.selectFoods.forEach((food) => {
+        total += food.product_price * food.product_num
+      })
+      return total
+    }
+  },
   methods: {
     handlePayment (val) {
       this.order_pay_type = val

htmldev/dashboard/src/views/sell/shopcart/shopcart.vue

@@ -177,6 +177,13 @@ export default {
       handler: function (newVal) {
         newVal && this.fetchCartList()
       }
+    },
+    selectFoods: {
+      immediate: true,
+      deep: true,
+      handler: function (newVal) {
+        this.$store.commit('shopcart/UPDATE_SELECTFOODS', JSON.parse(JSON.stringify(this.selectFoods)))
+      }
     }
   },
   methods: {
@@ -283,6 +290,13 @@ export default {
     },
     // 单个商品减少
     decreaseFood (target, food) {
+      const index = this.selectFoods.findIndex(item => item.id === food.id)
+      if (food.product_num <= 0 && index > -1) {
+        this.selectFoods.splice(index, 1)
+        if (this.scroll) {
+          this.scroll.refresh()
+        }
+      }
       this.cartUpdate(food.id, 0)
     },
     /**