H5-添加商品到购物车

htmldev/dashboard/public/index.html

@@ -46,7 +46,7 @@
     if (/^0|192|10|localhost|test/.test(domain)) {
       document.body.appendChild(erudaEl)
       erudaEl.onload = function () {
-        eruda.init()
+        // eruda.init()
       }
     }
     if (u.toLowerCase().indexOf('alipay') !== -1) {

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

@@ -1,11 +1,11 @@
 <template>
   <div class="cartcontrol">
     <transition name="move">
-      <div class="cart-decrease" v-show="food.count>0" @click.stop.prevent="decreaseCart">
+      <div v-show="food.product_num>0" class="cart-decrease" @click.stop.prevent="decreaseCart">
         <span class="inner icon-remove_circle_outline"></span>
       </div>
     </transition>
-    <div class="cart-count" v-show="food.count>0">{{food.count}}</div>
+    <div v-show="food.product_num>0" class="cart-count">{{food.product_num}}</div>
     <div class="cart-add icon-add_circle" @click.stop.prevent="addCart"></div>
   </div>
 </template>
@@ -24,10 +24,10 @@ export default {
       if (!event._constructed) {
         return
       }
-      if (!this.food.count) {
-        Vue.set(this.food, 'count', 1)
+      if (!this.food.product_num) {
+        Vue.set(this.food, 'product_num', 1)
       } else {
-        this.food.count++
+        this.food.product_num++
       }
       this.$emit('add', event.target)
     },
@@ -35,8 +35,8 @@ export default {
       if (!event._constructed) {
         return
       }
-      if (this.food.count) {
-        this.food.count--
+      if (this.food.product_num) {
+        this.food.product_num--
       }
     }
   }

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

@@ -66,7 +66,7 @@
       </div>
       <div class="footer">
         <div class="price">
-          <span class="now">￥{{ price * food.count | fen2Yuan }}</span>
+          <span class="now">￥{{ price * food.product_num | fen2Yuan }}</span>
         </div>
         <transition name="fade">
           <div
@@ -108,7 +108,7 @@ export default {
       objCurrentBarInfo: 'common/objCurrentBarInfo'
     }),
     payClass () {
-      if (this.food.count < 1 || this.is_sell_out === 1) {
+      if (this.food.product_num < 1 || this.is_sell_out === 1) {
         return 'not-enough'
       } else {
         return 'enough'
@@ -147,7 +147,7 @@ export default {
      */
     async addFirst (event) {
       const { id } = this.objCurrentBarInfo
-      const count = this.food.count
+      const count = this.food.product_num
       const isSellOut = this.food.is_sell_out
       const allAttach = JSON.parse(JSON.stringify(this.objProductAttachs[this.SKUId]))
       const postData = {

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

@@ -82,9 +82,6 @@
       </div>
       <shopcart
         ref="shopcart"
-        :deliveryPrice="seller.deliveryPrice"
-        :minPrice="seller.minPrice"
-        :selectFoods="selectFoods"
         @handleJumpPay="handleJumpPay"/>
     </div>
     <food
@@ -106,7 +103,6 @@ import { apiProductList, apiProductDetail } from './api'
 import { mapGetters } from 'vuex'
 import { Toast, Button } from 'vant'
 
-const mockDataJson = require('../../../mock/data.json')
 // todo 登录成功不会掉接口
 export default {
   data () {
@@ -114,8 +110,7 @@ export default {
       goods: [],
       listHeight: [],
       scrollY: 0,
-      selectedFood: {},
-      seller: {}
+      selectedFood: {}
     }
   },
   computed: {
@@ -132,17 +127,6 @@ export default {
         }
       }
       return 0
-    },
-    selectFoods () {
-      const foods = []
-      this.goods.forEach((good) => {
-        good.products.forEach((food) => {
-          if (food.count) {
-            foods.push(food)
-          }
-        })
-      })
-      return foods
     }
   },
   watch: {
@@ -153,9 +137,7 @@ export default {
       }
     }
   },
-  async activated () {
-    this.seller = mockDataJson.seller
-  },
+  async activated () {},
   methods: {
     selectMenu (index, event) {
       if (!event._constructed) {
@@ -177,7 +159,7 @@ export default {
         if (status) {
           this.selectedFood = {
             ...data,
-            count: 1 // 默认购买数量1
+            product_num: 1 // 默认购买数量1
           }
         } else {
           Toast(msg)

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

@@ -1,24 +1,44 @@
 <template>
   <div>
     <div class="shopcart">
-      <div class="content" @click="toggleList">
+      <div class="content"
+           @click="toggleList">
         <div class="content-left">
           <div class="logo-wrapper">
             <div class="logo">
               <img src="./image/shop_car@2x.png" alt="">
             </div>
-            <div class="num" v-show="totalCount>0">{{totalCount}}</div>
+            <div
+              v-show="totalCount>0"
+              class="num">{{totalCount}}
+            </div>
+          </div>
+          <div
+            :class="{'highlight':totalPrice > 0}"
+            class="price">￥{{ totalPrice | fen2Yuan }}
           </div>
-          <div class="price" :class="{'highlight':totalPrice>0}">￥{{totalPrice}}</div>
         </div>
-        <div class="content-right" @click.stop.prevent="pay">
-          <div class="pay" :class="payClass">去结算</div>
+        <div
+          class="content-right"
+          @click.stop.prevent="pay">
+          <div
+            :class="payClass"
+            class="pay">去结算
+          </div>
         </div>
       </div>
       <div class="ball-container">
-        <div v-for="(ball, index) in balls" :key="index">
-          <transition name="drop" @before-enter="beforeDrop" @enter="dropping" @after-enter="afterDrop">
-            <div class="ball" v-show="ball.show">
+        <div
+          v-for="(ball, index) in balls"
+          :key="index">
+          <transition
+            name="drop"
+            @enter="dropping"
+            @before-enter="beforeDrop"
+            @after-enter="afterDrop">
+            <div
+              v-show="ball.show"
+              class="ball">
               <div class="inner inner-hook"></div>
             </div>
           </transition>
@@ -35,17 +55,24 @@
           </div>
           <div class="list-content" ref="listContent">
             <ul>
-              <li v-for="(food, idx) in selectFoods" :key="idx" class="food">
+              <li
+                v-for="(food, idx) in selectFoods"
+                :key="idx"
+                class="food">
                 <div class="icon">
-                  <img width="60" height="60" :src="food.icon" alt="">
+                  <img
+                    :src="food.product_img_url"
+                    alt=""
+                    height="60"
+                    width="60">
                 </div>
                 <div class="name-wrap">
                   <div class="name">
-                    <p>曼哈顿</p>
-                    <p>(微辣+可乐+胡椒粉)</p>
+                    <p>{{ food.product_name }}</p>
+                    <p>{{ food.product_attach ? '(' + food.product_attach + ')' : '' }}</p>
                   </div>
                   <div class="price">
-                    <span class="now">￥1000</span>
+                    <span class="now">￥{{ food.product_price * food.product_num | fen2Yuan }}</span>
                   </div>
                   <div class="cartcontrol-wrapper">
                     <cartcontrol @add="addFood" :food="food"></cartcontrol>
@@ -69,29 +96,11 @@
 <script type="text/ecmascript-6">
 import BScroll from 'better-scroll'
 import cartcontrol from '../cartcontrol/cartcontrol'
+import { Toast } from 'vant'
+import { mapGetters } from 'vuex'
+import { apiCartList } from '../goods/api'
 
 export default {
-  props: {
-    selectFoods: {
-      type: Array,
-      default () {
-        return [
-          {
-            price: 10,
-            count: 1
-          }
-        ]
-      }
-    },
-    deliveryPrice: {
-      type: Number,
-      default: 0
-    },
-    minPrice: {
-      type: Number,
-      default: 0
-    }
-  },
   data () {
     return {
       balls: [
@@ -112,26 +121,37 @@ export default {
         }
       ],
       dropBalls: [],
-      fold: true
+      fold: true,
+      scroll: null,
+      selectFoods: [],
+      pagenum: 1,
+      pagesize: 20,
+      numFetchStatus: 0,
+      arrFetchStatus: ['正在努力加载～', '到底了'],
+      booFetchData: false,
+      finished: false
     }
   },
   computed: {
+    ...mapGetters({
+      objCurrentBarInfo: 'common/objCurrentBarInfo'
+    }),
     totalPrice () {
       let total = 0
       this.selectFoods.forEach((food) => {
-        total += food.price * food.count
+        total += food.product_price * food.product_num
       })
       return total
     },
     totalCount () {
       let count = 0
       this.selectFoods.forEach((food) => {
-        count += food.count
+        count += food.product_num
       })
       return count
     },
     payClass () {
-      if (this.totalPrice < this.minPrice) {
+      if (this.totalPrice < 1) {
         return 'not-enough'
       } else {
         return 'enough'
@@ -142,22 +162,70 @@ export default {
         this.fold = true
         return false
       }
-      const show = !this.fold
-      if (show) {
-        this.$nextTick(() => {
-          if (!this.scroll) {
-            this.scroll = new BScroll(this.$refs.listContent, {
-              click: true
-            })
-          } else {
-            this.scroll.refresh()
-          }
-        })
+      return !this.fold
+    }
+  },
+  watch: {
+    'objCurrentBarInfo.id': {
+      immediate: true,
+      handler: function (newVal) {
+        newVal && this.fetchCartList()
       }
-      return show
     }
   },
   methods: {
+    init () {
+      this.selectFoods = []
+      this.pagenum = 1
+      this.pagesize = 20
+      this.numFetchStatus = 0
+      this.booFetchData = false
+      this.finished = false
+
+      this.$nextTick(() => {
+        this.fetchCartList()
+      })
+    },
+    async fetchCartList () {
+      const { id } = this.objCurrentBarInfo
+      if (this.finished) {
+        return
+      }
+      try {
+        const { status, msg, data } = await apiCartList(id, this.pagenum, this.pagesize)
+        if (status) {
+          const { list } = data
+          this.pagenum++
+          this.booFetchData = true
+          if (Array.isArray(list)) {
+            this.selectFoods = this.selectFoods.concat(list)
+            if (list.length <= 0) {
+              this.finished = true
+            }
+            this.$nextTick(() => {
+              if (!this.scroll) {
+                this.scroll = new BScroll(this.$refs.listContent, {
+                  click: true,
+                  pullUpLoad: {
+                    threshold: -20
+                  },
+                  scrollbar: true
+                })
+
+                this.scroll.on('pullingUp', () => {
+                  this.fetchCartList()
+                })
+              } else {
+                this.scroll.refresh()
+                this.scroll.finishPullUp()
+              }
+            })
+          }
+        } else {
+          Toast(msg)
+        }
+      } catch (err) {}
+    },
     drop (el) {
       for (let i = 0; i < this.balls.length; i++) {
         const ball = this.balls[i]
@@ -180,11 +248,11 @@ export default {
     },
     empty () {
       this.selectFoods.forEach((food) => {
-        food.count = 0
+        food.product_num = 0
       })
     },
     pay () {
-      if (this.totalPrice < this.minPrice) {
+      if (this.totalPrice < 1) {
         return
       }
       this.$emit('handleJumpPay')
@@ -399,7 +467,7 @@ export default {
   }
 
   .list-content {
-    max-height: 217px;
+    height: 217px;
     padding: 0 20px;
     overflow: hidden;
 
@@ -417,6 +485,7 @@ export default {
       }
 
       .name-wrap {
+        width: calc(100% - 70px);
         margin-left: 10px;
       }
 
@@ -424,9 +493,8 @@ export default {
         display: flex;
         align-items: center;
         flex-wrap: nowrap;
-        max-width: 100%;
+        width: 100%;
         white-space: nowrap;
-        overflow: hidden;
 
         p {
           &:nth-of-type(1) {
@@ -442,6 +510,9 @@ export default {
             font-size: 12px;
             color: #736F6F;
             line-height: 17px;
+            white-space: nowrap;
+            overflow: hidden;
+            text-overflow: ellipsis;
           }
         }
       }