H5-添加商品到购物车

htmldev/dashboard/package-lock.json

@@ -3291,6 +3291,16 @@
         }
       }
     },
+    "call-bind": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npm.taobao.org/call-bind/download/call-bind-1.0.2.tgz?cache=0&sync_timestamp=1610403020286&other_urls=https%3A%2F%2Fregistry.npm.taobao.org%2Fcall-bind%2Fdownload%2Fcall-bind-1.0.2.tgz",
+      "integrity": "sha1-sdTonmiBGcPJqQOtMKuy9qkZvjw=",
+      "dev": true,
+      "requires": {
+        "function-bind": "^1.1.1",
+        "get-intrinsic": "^1.0.2"
+      }
+    },
     "call-me-maybe": {
       "version": "1.0.1",
       "resolved": "http://registry.npm.taobao.org/call-me-maybe/download/call-me-maybe-1.0.1.tgz",
@@ -7180,6 +7190,17 @@
       "integrity": "sha1-T5RBKoLbMvNuOwuXQfipf+sDH34=",
       "dev": true
     },
+    "get-intrinsic": {
+      "version": "1.1.1",
+      "resolved": "https://registry.npm.taobao.org/get-intrinsic/download/get-intrinsic-1.1.1.tgz",
+      "integrity": "sha1-FfWfN2+FXERpY5SPDSTNNje0q8Y=",
+      "dev": true,
+      "requires": {
+        "function-bind": "^1.1.1",
+        "has": "^1.0.3",
+        "has-symbols": "^1.0.1"
+      }
+    },
     "get-ready": {
       "version": "1.0.0",
       "resolved": "https://registry.npm.taobao.org/get-ready/download/get-ready-1.0.0.tgz",
@@ -11244,10 +11265,13 @@
       "dev": true
     },
     "qs": {
-      "version": "6.5.2",
-      "resolved": "https://registry.npm.taobao.org/qs/download/qs-6.5.2.tgz",
-      "integrity": "sha1-yzroBuh0BERYTvFUzo7pjUA/PjY=",
-      "dev": true
+      "version": "6.10.1",
+      "resolved": "https://registry.npm.taobao.org/qs/download/qs-6.10.1.tgz",
+      "integrity": "sha1-STFIL6jWR6Wqt5nFJx0hM7mB+2o=",
+      "dev": true,
+      "requires": {
+        "side-channel": "^1.0.4"
+      }
     },
     "query-string": {
       "version": "4.3.4",
@@ -11704,6 +11728,14 @@
         "tough-cookie": "~2.5.0",
         "tunnel-agent": "^0.6.0",
         "uuid": "^3.3.2"
+      },
+      "dependencies": {
+        "qs": {
+          "version": "6.5.2",
+          "resolved": "https://registry.npm.taobao.org/qs/download/qs-6.5.2.tgz",
+          "integrity": "sha1-yzroBuh0BERYTvFUzo7pjUA/PjY=",
+          "dev": true
+        }
       }
     },
     "require-directory": {
@@ -12278,6 +12310,25 @@
       "integrity": "sha1-Z6fQLHbJ2iT5nSCAj8re0ODgS+I=",
       "dev": true
     },
+    "side-channel": {
+      "version": "1.0.4",
+      "resolved": "https://registry.npm.taobao.org/side-channel/download/side-channel-1.0.4.tgz",
+      "integrity": "sha1-785cj9wQTudRslxY1CkAEfpeos8=",
+      "dev": true,
+      "requires": {
+        "call-bind": "^1.0.0",
+        "get-intrinsic": "^1.0.2",
+        "object-inspect": "^1.9.0"
+      },
+      "dependencies": {
+        "object-inspect": {
+          "version": "1.10.3",
+          "resolved": "https://registry.nlark.com/object-inspect/download/object-inspect-1.10.3.tgz",
+          "integrity": "sha1-wqp9LQn1DJk3VwT3oK3yTFeC02k=",
+          "dev": true
+        }
+      }
+    },
     "signal-exit": {
       "version": "3.0.3",
       "resolved": "https://registry.npm.taobao.org/signal-exit/download/signal-exit-3.0.3.tgz",

htmldev/dashboard/package.json

@@ -36,6 +36,7 @@
     "path": "^0.12.7",
     "postcss-pxtorem": "^5.1.1",
     "qrcodejs2": "0.0.2",
+    "qs": "^6.10.1",
     "rimraf": "^3.0.2",
     "sass": "^1.26.11",
     "sass-loader": "^10.0.2",

htmldev/dashboard/src/api/request.js

@@ -66,15 +66,25 @@ request.interceptors.request.use(request => {
     request.headers.wechatToken = getCookieValue('afhousewechatToken')
   }
   request.url = requestUrl + (requestUrl.indexOf('?') > -1 ? '&' : '?') + 'nextUrl=' + encodeURIComponent(location.href)
+
   // 因为微信开发者工具重复授权，本地开发时写死
   if (/^(0|192|10|localhost)|(test$)/.test(domain)) {
     // request.url += '&owner_open_id=0c540a8d284b38f84d2f8ad262ab5d2c'
     request.headers.wechatToken = '0c540a8d284b38f84d2f8ad262ab5d2c'
   }
+
   // 判断当前请求是否设置了不显示Loading
   if (request.showLoading) {
     showLoading()
   }
+
+  if (/post/ig.test(request.method)) {
+    request.headers = {
+      ...request.headers,
+      'Content-Type': 'application/x-www-form-urlencoded'
+    }
+  }
+
   return request
 }, error => {
   // 判断当前请求是否设置了不显示Loading

htmldev/dashboard/src/utils/index.js

@@ -55,3 +55,26 @@ export function updateWechatToken () {
     Vue.cookie.set('afhousewechatToken', wechatToken)
   }
 }
+
+/**
+ * 数组展平
+ * @param arr 原始数组
+ * @returns {[]}
+ */
+export function formatArray (arr) {
+  let result = []
+  let i = 0
+
+  if (Array.isArray(arr)) {
+    while (i < arr.length) {
+      if (Array.isArray(arr[i])) {
+        result = result.concat(formatArray(arr[i]))
+      } else {
+        result.push(arr[i])
+      }
+      i++
+    }
+  }
+
+  return result
+}

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

@@ -56,6 +56,12 @@
             </div>
             <div class="des" v-html="food.product_desc"></div>
           </div>
+          <div class="detail cartcontrol-wrapper">
+            <div class="subtitle-wrap">
+              <h1 class="title">购买数量</h1>
+            </div>
+            <cartcontrol :food="food" @add="addFood"/>
+          </div>
         </div>
       </div>
       <div class="footer">
@@ -65,7 +71,8 @@
         <transition name="fade">
           <div
             class="buy"
-            @click.stop.prevent="addFirst">加入购物车
+            :class="payClass"
+            @click.stop.prevent="addFirst">{{ food.is_sell_out === 1 ? '售罄' : '加入购物车'}}
           </div>
         </transition>
       </div>
@@ -76,7 +83,11 @@
 <script type="text/ecmascript-6">
 import BScroll from 'better-scroll'
 import Vue from 'vue'
-import { Icon } from 'vant'
+import cartcontrol from '../cartcontrol/cartcontrol'
+import { Icon, Toast } from 'vant'
+import { mapGetters } from 'vuex'
+import { apiCartAdd } from '../goods/api'
+import { formatArray } from '../../../utils'
 
 export default {
   props: {
@@ -92,6 +103,18 @@ export default {
       objProductAttachs: {} // 商品附加
     }
   },
+  computed: {
+    ...mapGetters({
+      objCurrentBarInfo: 'common/objCurrentBarInfo'
+    }),
+    payClass () {
+      if (this.food.count < 1 || this.is_sell_out === 1) {
+        return 'not-enough'
+      } else {
+        return 'enough'
+      }
+    }
+  },
   methods: {
     show () {
       this.SKUId = ''
@@ -119,15 +142,40 @@ export default {
     hide () {
       this.showFlag = false
     },
-    addFirst (event) {
+    /**
+     * 添加商品到购物车
+     */
+    async addFirst (event) {
+      const { id } = this.objCurrentBarInfo
+      const count = this.food.count
+      const isSellOut = this.food.is_sell_out
+      const allAttach = JSON.parse(JSON.stringify(this.objProductAttachs[this.SKUId]))
+      const postData = {
+        bar_id: id, // 酒吧ID
+        product_id: this.food.id, // 商品ID
+        product_sku_id: this.SKUId, // 商品skuID
+        num: count, // 商品数量
+        product_attach: formatArray(allAttach).join(',') // 商品附加
+      }
       if (!event._constructed) {
         return
       }
-      console.log(111)
+      if (isSellOut === 1 || count < 1) {
+        return
+      }
+      try {
+        const { status, msg } = await apiCartAdd(postData)
+        if (status) {
+          this.hide()
+        } else {
+          Toast(msg)
+        }
+      } catch (err) {}
     },
+    addFood () {},
     /**
      * 选择SKU
-     * @param id SKU ID
+     * @param item SKU信息
      */
     selectSKU (item) {
       this.SKUId = item.id
@@ -163,6 +211,7 @@ export default {
     }
   },
   components: {
+    cartcontrol,
     'van-icon': Icon
   }
 }
@@ -302,6 +351,18 @@ export default {
   }
 }
 
+.cartcontrol-wrapper {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  padding-right: 20px;
+  margin-top: 20px;
+
+  .subtitle-wrap {
+    margin-top: 0;
+  }
+}
+
 .footer {
   position: absolute;
   left: 0;
@@ -331,14 +392,22 @@ export default {
     top: 18px;
     width: 110px;
     height: 32px;
-    background: #D32323;
     border-radius: 20px;
     font-size: 14px;
     font-family: PingFangSC-Medium, PingFang SC;
     font-weight: 500;
-    color: #FFFFFF;
     line-height: 32px;
     text-align: center;
+
+    &.not-enough {
+      color: #CCC6C6;
+      background: #736F6F;
+    }
+
+    &.enough {
+      color: #FFFFFF;
+      background: #D32323;
+    }
   }
 }
 </style>

htmldev/dashboard/src/views/sell/goods/api/index.js

@@ -1,4 +1,5 @@
 import request from '@/api/request'
+import qs from 'qs'
 
 /**
  * 商品列表接口
@@ -60,10 +61,10 @@ export const apiCartClear = (id) => request({
 export const apiCartUpdate = (id, type) => request({
   method: 'POST',
   url: '/api/v1/user/cart/update',
-  data: {
+  data: qs.stringify({
     id,
     type
-  }
+  })
 })
 /**
  * 添加商品到购物车
@@ -72,7 +73,5 @@ export const apiCartUpdate = (id, type) => request({
 export const apiCartAdd = (postData) => request({
   method: 'POST',
   url: '/api/v1/user/cart/add',
-  data: {
-    postData
-  }
+  data: qs.stringify(postData)
 })

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

@@ -175,7 +175,10 @@ export default {
       try {
         const { data, status, msg } = await apiProductDetail(food.id)
         if (status) {
-          this.selectedFood = data
+          this.selectedFood = {
+            ...data,
+            count: 1 // 默认购买数量1
+          }
         } else {
           Toast(msg)
         }