Fix(购物车):[#1016]商品购买限制数量

main.js

@@ -15,8 +15,10 @@ import {
     WX_LIVE_APPID
 } from "@/config";
 import uView from "uview-ui";
+import GooSkeleton from '@/components/GooSkeleton/index.vue'
 
-Vue.use(uView);
+Vue.use(uView)
+Vue.component('GooSkeleton', GooSkeleton)
 Vue.mixin(mixin)
 
 // 注册全局组件

pages/cart.vue

@@ -1,95 +1,166 @@
 <template>
-  <view class="pages-cart" v-if="ready">
-    <u-navbar leftIcon="trash" title="购物车" fixed @leftClick="remove"/>
-
-    <view class="tc" style="margin-top: 300rpx" v-if="list.length===0">
-      <image style="width: 420rpx;height: 418rpx" :src="$VUE_APP_RESOURCES_URL+'/20240106211138206789.png'" mode="scaleToFill"/>
-    </view>
-
-    <view class="group-item" v-for="(item,index) in list" :key="index">
-
-      <view class="flex jc-between">
-        <view class="flex ai-center">
-          <CheckboxIcon style="margin-right: 24rpx;" :default-state="item['state']" :mark="[index]" @change="onChange"/>
-          <image class="store-cover" :src="item['merAvatar']"
-                 mode="scaleToFill"/>
-          <view style="color:#333333;font-size: 30rpx">{{ item['merName'] }}</view>
-        </view>
-        <view class="flex ai-center" style="color:#E92727;font-size: 24rpx" @click="navToStore(item['hotelId'])">
-          进店逛逛
-          <image style="width: 24rpx;height: 24rpx" :src="$VUE_APP_RESOURCES_URL+'/20240109234706982937.png'" mode="scaleToFill"/>
-        </view>
+  <view class="pages-cart">
+    <u-navbar
+      leftIcon="trash"
+      title="购物车"
+      fixed
+      @leftClick="remove"
+    />
+    <view v-if="isLoad">
+      <view
+        v-if="list.length === 0"
+        class="tc"
+        style="margin-top: 300rpx"
+      >
+        <image
+          :src="$VUE_APP_RESOURCES_URL + '/20240106211138206789.png'"
+          style="width: 420rpx;height: 418rpx"
+          mode="scaleToFill"
+        />
       </view>
-
-      <view class="goods-box">
-        <view class="goods flex ai-center" v-for="(goods,gIndex) in item['carts']" :key="gIndex">
-          <CheckboxIcon style="margin-right: 24rpx;" :default-state="goods['state']" :mark="[index,gIndex]"
-                        @change="onChange"/>
-          <image class="goods-cover flex-0" :src="goods['productInfo']['attrInfo']['image']" mode="scaleToFill"
-                 @click="navToGoods(goods['productId'])"
-                 v-if="goods['productInfo']['attrInfo']['image']"/>
-          <image class="goods-cover flex-0" :src="goods['productInfo']['image']" mode="scaleToFill"
-                 @click="navToGoods(goods['productId'])" v-else/>
-
-          <view style="width: 100%">
-            <view class="one-t" @click="navToGoods(goods['productId'])">{{ goods['productInfo']['storeName'] }}</view>
-            <view class="sku ai-center" @click="navToGoods(goods['productId'])">
-              规格：{{ goods['productInfo']['attrInfo']['sku'] }}
-            </view>
-            <view class="flex jc-between ai-center" style="width: 100%;margin-top: 26rpx;">
-              <view style="color:#E92727;font-size: 32rpx;" @click="navToGoods(goods['productId'])">
-                <text class="bold" style="font-size: 24rpx">￥</text>
-                {{ goods['truePrice'] }}
+      <view
+        v-for="(item, index) in list"
+        :key="index"
+        class="group-item"
+      >
+        <view class="flex jc-between">
+          <view class="flex ai-center">
+            <CheckboxIcon
+              :default-state="item['state']"
+              :mark="[index]"
+              style="margin-right: 24rpx;"
+              @change="onChange"
+            />
+            <image
+              :src="item['merAvatar']"
+              class="store-cover"
+              mode="scaleToFill"
+            />
+            <view style="color:#333333;font-size: 30rpx">{{ item['merName'] }}</view>
+          </view>
+          <view
+            class="flex ai-center"
+            style="color:#E92727;font-size: 24rpx"
+            @click="navToStore(item['hotelId'])"
+          >
+            进店逛逛
+            <image
+              :src="$VUE_APP_RESOURCES_URL + '/20240109234706982937.png'"
+              style="width: 24rpx;height: 24rpx"
+              mode="scaleToFill"
+            />
+          </view>
+        </view>
+        <view class="good-box">
+          <view
+            v-for="(good, gIndex) in item['carts']"
+            :key="gIndex"
+            class="good flex ai-center"
+          >
+            <CheckboxIcon
+              :default-state="good['state']"
+              :mark="[index, gIndex]"
+              style="margin-right: 24rpx;"
+              @change="onChange"
+            />
+            <image
+              v-if="good['productInfo']['attrInfo']['image']"
+              :src="good['productInfo']['attrInfo']['image']"
+              class="good-cover flex-0"
+              mode="scaleToFill"
+              @click="navToGood(good['productId'])"
+            />
+            <image
+              v-else
+              :src="good['productInfo']['image']"
+              mode="scaleToFill"
+              class="good-cover flex-0"
+              @click="navToGood(good['productId'])"
+            />
+            <view style="width: 100%">
+              <view
+                class="one-t"
+                @click="navToGood(good['productId'])"
+              >{{ good['productInfo']['storeName'] }}</view>
+              <view
+                class="sku ai-center"
+                @click="navToGood(good['productId'])"
+              >
+                规格：{{ good['productInfo']['attrInfo']['sku'] }}
+              </view>
+              <view
+                class="flex jc-between ai-center"
+                style="width: 100%;margin-top: 26rpx;"
+              >
+                <view
+                  style="color:#E92727;font-size: 32rpx;"
+                  @click="navToGood(good['productId'])"
+                >
+                  <text class="bold" style="font-size: 24rpx">￥</text>
+                  {{ good['truePrice'] }}
+                </view>
+                <u-number-box
+                  :value="good.cartNum"
+                  :max="good['productInfo']['attrInfo']['stock']"
+                  integer
+                  disabledInput
+                  iconStyle="color: #fff"
+                  class="num-step"
+                  @change="e => changeNumHandle(index, gIndex, good, e)"
+                >
+                  <template v-slot:minus>
+                    <view class="num-btn flex jc-center ai-center">
+                      <u-icon name="minus" size="12" color="#FFFFFF"/>
+                    </view>
+                  </template>
+                  <template v-slot:input>
+                    <view class="num-input tc">{{ good['cartNum'] }}</view>
+                  </template>
+                  <template v-slot:plus>
+                    <view class="num-btn flex jc-center ai-center">
+                      <u-icon name="plus" size="12" color="#FFFFFF"/>
+                    </view>
+                  </template>
+                </u-number-box>
               </view>
-              <u-number-box class="num-step" v-model="goods['cartNum']" :name="goods['id']"
-                            :max="goods['productInfo']['attrInfo']['stock']" integer disabledInput
-                            iconStyle="color: #fff" @change="changeNum">
-                <template v-slot:minus>
-                  <view class="num-btn flex jc-center ai-center">
-                    <u-icon name="minus" size="12" color="#FFFFFF"/>
-                  </view>
-                </template>
-                <template v-slot:input>
-                  <view class="num-input tc">{{ goods['cartNum'] }}</view>
-                </template>
-                <template v-slot:plus>
-                  <view class="num-btn flex jc-center ai-center">
-                    <u-icon name="plus" size="12" color="#FFFFFF"/>
-                  </view>
-                </template>
-              </u-number-box>
             </view>
           </view>
         </view>
       </view>
-    </view>
-
-
-    <view class="footer-fixed flex jc-between ai-center">
-      <view style="margin-left: 32rpx;">
-        <CheckboxIcon style="margin-right: 24rpx;" :default-state="isAll" :mark="[-1]" @change="onChange"/>
-        <text style="color:#666666;font-size: 32rpx">全选({{ selectCount }})</text>
-      </view>
-      <view class="flex ai-center">
-        <view style="margin-right: 20rpx;color:#666666;font-size: 32rpx">合计:
-          <text class="bold" style="color:#E92727">￥{{ total }}</text>
+      <view class="footer-fixed flex jc-between ai-center">
+        <view style="margin-left: 32rpx;">
+          <CheckboxIcon
+            style="margin-right: 24rpx;"
+            :default-state="isAll"
+            :mark="[-1]"
+            @change="onChange"
+          />
+          <text style="color:#666666;font-size: 32rpx">全选({{ selectCount }})</text>
+        </view>
+        <view class="flex ai-center">
+          <view style="margin-right: 20rpx;color:#666666;font-size: 32rpx">合计:
+            <text class="bold" style="color:#E92727">￥{{ total }}</text>
+          </view>
+          <view class="btn-submit bold flex jc-center ai-center" @click="submit">结算</view>
         </view>
-        <view class="btn-submit bold flex jc-center ai-center" @click="submit">结算</view>
       </view>
     </view>
+    <goo-skeleton
+      v-else
+      :show-avatar="false"
+    />
   </view>
 </template>
-
 <script>
-import {changeCartNum, getCartGroup, postCartDel} from "@/api/store";
-import CheckboxIcon from "@/components/CheckboxIcon.vue";
-import {VUE_APP_RESOURCES_URL} from '../config/index'
+import {changeCartNum, getCartGroup, postCartDel} from '@/api/store'
+import CheckboxIcon from '@/components/CheckboxIcon.vue'
 export default {
-  components: {CheckboxIcon},
+  components: {
+    CheckboxIcon
+  },
   data() {
     return {
-      ready: false,
-      webUrl: VUE_APP_RESOURCES_URL,
+      isLoad: false,
       list: [],
       isAll: false
     }
@@ -98,8 +169,8 @@ export default {
     total() {
       let price = 0
       this.list.forEach(item => {
-        item['carts'].forEach(goods => {
-          if (goods.state) price += Math.round(goods['cartNum'] * goods['truePrice'] * 100) / 100
+        item['carts'].forEach(good => {
+          if (good.state) price += Math.round(good['cartNum'] * good['truePrice'] * 100) / 100
         })
       })
       return Math.round(price * 100) / 100
@@ -107,38 +178,42 @@ export default {
     selectCount() {
       let count = 0
       this.list.forEach(item => {
-        item['carts'].forEach(goods => {
-          if (goods.state) count++
+        item['carts'].forEach(good => {
+          if (good.state) count++
         })
       })
       return count
     }
   },
+  created() {
+    this.getCart()
+  },
   onShow() {
+    if (!this.isLoad) {
+      return
+    }
     this.getCart()
-    this.ready = true
   },
   methods: {
     async getCart() {
       const res = await getCartGroup()
       if (res.success) {
+        this.isLoad = true
         this.list = res.data['valid']
         this.handleAll(false)
       }
     },
-
     handleAll(state) {
       this.isAll = state
       this.list = this.list.map(item => {
         item.state = state
-        item.carts = item.carts.map(goods => {
-          goods.state = state
-          return goods
+        item.carts = item.carts.map(good => {
+          good.state = state
+          return good
         })
         return item
       })
     },
-
     navToStore(id) {
       if (id === 0) {
         uni.showToast({
@@ -148,65 +223,70 @@ export default {
         })
         return
       }
-
       uni.navigateTo({
         url: '/pagesInn/inn/innHome?id=' + id
       })
     },
-
     onChange(state, mark) {
       if (mark.length === 1) {
         if (mark[0] === -1) {
           this.handleAll(state)
         } else {
           this.list[mark[0]]['state'] = state
-          this.list[mark[0]]['carts'] = this.list[mark[0]]['carts'].map(goods => {
-            goods.state = state
-            return goods
+          this.list[mark[0]]['carts'] = this.list[mark[0]]['carts'].map(good => {
+            good.state = state
+            return good
           })
         }
       }
-
       if (mark.length === 2) {
         this.list[mark[0]]['carts'][mark[1]]['state'] = state
         const length = this.list[mark[0]]['carts'].length
         let count = 0
-        this.list[mark[0]]['carts'] = this.list[mark[0]]['carts'].map((goods, gIndex) => {
-          if (gIndex === mark[1]) goods['state'] = state
-          if (goods['state']) count++
-          return goods
+        this.list[mark[0]]['carts'] = this.list[mark[0]]['carts'].map((good, gIndex) => {
+          if (gIndex === mark[1]) good['state'] = state
+          if (good['state']) count++
+          return good
         })
         this.list[mark[0]]['state'] = count === length
       }
     },
-
-    changeNum(event) {
-      changeCartNum(event.name, event.value)
+    changeNumHandle(index, gIndex, good, e) {
+      const { type } = e
+      const value = good.cartNum + (type === 'plus' ? 1 : -1)
+      const id = good.id
+      uni.showLoading()
+      changeCartNum(id, value).then(res => {
+        const { success } = res
+        if (success) {
+          this.$set(this.list[index].carts[gIndex], 'cartNum', value)
+        }
+      }).catch(() => {
+        uni.hideLoading()
+      }).finally(() => {
+        uni.hideLoading()
+      })
     },
-
     handleIds() {
       if (this.selectCount === 0) {
         uni.showToast({
-          title: "请选择产品",
-          icon: "none",
+          title: '请选择产品',
+          icon: 'none',
           duration: 2000
         })
         return []
       }
-
-      let ids = []
+      const ids = []
       this.list.forEach(item => {
-        item['carts'].forEach(goods => {
-          if (goods['state']) ids.push(goods['id'])
+        item['carts'].forEach(good => {
+          if (good['state']) ids.push(good['id'])
         })
       })
       return ids
     },
-
     remove() {
       const ids = this.handleIds()
       if (ids.length === 0) return
-
       uni.showModal({
         title: '确认删除已选商品?',
         content: '',
@@ -215,20 +295,24 @@ export default {
         confirmText: '确认',
         success: async (result) => {
           if (result.confirm) {
-            const res = await postCartDel(ids)
-            if (res.success) await this.getCart()
+            uni.showLoading()
+            postCartDel(ids).then(res => {
+              const { success } = res
+              if (success) {
+                this.getCart()
+              }
+            }).finally(() => {
+              uni.hideLoading()
+            })
           }
         }
       })
     },
-
     submit() {
       const ids = this.handleIds()
       if (ids.length === 0) return
-
-      const param = ids.join(',')
       uni.navigateTo({
-        url: '/pages/order/OrderSubmission/index?id=' + param
+        url: '/pages/order/OrderSubmission/index?id=' + ids.join(',')
       })
     }
   }
@@ -261,11 +345,11 @@ view {
   }
 }
 
-.goods-box {
-  .goods {
+.good-box {
+  .good {
     margin-top: 24rpx;
 
-    .goods-cover {
+    .good-cover {
       width: 160rpx;
       height: 160rpx;
       margin-right: 16rpx;

uni_modules/uview-ui/components/u-number-box/u-number-box.vue

@@ -275,6 +275,9 @@
 			},
 			// 发出change事件
 			emitChange(value) {
+				const {
+					type
+				} = this
 				// 如果开启了异步变更值，则不修改内部的值，需要用户手动在外部通过v-model变更
 				if (!this.asyncChange) {
 					this.$nextTick(() => {
@@ -284,6 +287,7 @@
 					})
 				}
 				this.$emit('change', {
+					type,
 					value,
 					name: this.name,
 				});