Refactor(ALL):Vue3同步调整为Vue2

pages/cart.vue

@@ -10,12 +10,12 @@
 
       <view class="flex jc-between">
         <view class="flex ai-center">
-          <CheckboxIcon style="margin-right: 24rpx;" :default-state="item['state']" @change="value => onChange(value, index, '')"/>
+          <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['merId'])">
+        <view class="flex ai-center" style="color:#E92727;font-size: 24rpx" @click="navToStore(item['hotelId'])">
           进店逛逛
           <image style="width: 24rpx;height: 24rpx" :src="webUrl+'/20240109234706982937.png'" mode="scaleToFill"/>
         </view>
@@ -24,16 +24,20 @@
       <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="value => onChange(value, 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" v-else/>
+          <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">{{ goods['productInfo']['storeName'] }}</view>
-            <view class="sku ai-center">规格：{{ goods['productInfo']['attrInfo']['sku'] }}</view>
+            <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;">
+              <view style="color:#E92727;font-size: 32rpx;" @click="navToGoods(goods['productId'])">
                 <text class="bold" style="font-size: 24rpx">￥</text>
                 {{ goods['truePrice'] }}
               </view>
@@ -63,8 +67,8 @@
 
     <view class="footer-fixed flex jc-between ai-center">
       <view style="margin-left: 32rpx;">
-        <CheckboxIcon style="margin-right: 24rpx;" :default-state="isAll" @change="value => onAllChange(value)"/>
-        <text style="color:#666666;font-size: 32rpx">已选({{ selectCount }})</text>
+        <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">合计:
@@ -76,120 +80,133 @@
   </view>
 </template>
 
-<script setup>
+<script>
 import {changeCartNum, getCartGroup, postCartDel} from "@/api/store";
-import {VUE_APP_RESOURCES_URL} from '../config/index'
 import CheckboxIcon from "@/components/CheckboxIcon.vue";
+import {VUE_APP_RESOURCES_URL} from '../config/index'
 
 const webUrl = VUE_APP_RESOURCES_URL
 
 export default {
-  name: 'CartIndex',
-  components: {
-    CheckboxIcon
-  },
+  components: {CheckboxIcon},
   data() {
     return {
-      webUrl,
       ready: false,
-      isAll: false,
-      selectCount: 0,
-      total: 0,
-      list: []
+      list: [],
+      isAll: false
+    }
+  },
+  computed: {
+    total() {
+      let price = 0
+      this.list.forEach(item => {
+        item['carts'].forEach(goods => {
+          if (goods.state) price += Math.round(goods['cartNum'] * goods['truePrice'] * 100) / 100
+        })
+      })
+      return Math.round(price * 100) / 100
+    },
+    selectCount() {
+      let count = 0
+      this.list.forEach(item => {
+        item['carts'].forEach(goods => {
+          if (goods.state) count++
+        })
+      })
+      return count
     }
   },
   onShow() {
-    this.ready = true
     this.getCart()
+    this.ready = true
   },
   methods: {
     async getCart() {
       const res = await getCartGroup()
       if (res.success) {
         this.list = res.data['valid']
-        this.list.map(item => {
-          item.state = false
-          if (item.carts) {
-            item.carts.map(child => {
-              child.state = false
-            })
-          }
-        })
-        this.handleAll(true)
+        this.handleAll(false)
       }
     },
-    onChange(state, index, childIndex) {
-      if (childIndex === '') {
-        this.list[index].state = state
-        this.list[index].carts.map(good => {
-          good.state = state
-        })
-      } else {
-        this.list[index].carts[childIndex].state = state
-        let count = 0
-        this.list[index].carts.map(good => {
-          if (good.state) {
-            count++
-          }
-        })
-        this.list[index].state = count === this.list[index].carts.length
-      }
-      this.$forceUpdate()
-      this.calcAll()
-    },
-    onAllChange() {
-      this.handleAll(!this.isAll)
-    },
+
     handleAll(state) {
-      this.list.map(item => {
-        item.state = state
-        if (item.carts) {
-          item.carts.map(good => {
-            good.state = state
-          })
-        }
-      })
       this.isAll = state
-      this.calcAll()
-    },
-    calcAll() {
-      let total = 0
-      let count = 0
-      let goodsAll = 0
-      this.list.map(item => {
-        if (item.carts) {
-          item.carts.map(good => {
-            goodsAll++
-            if (good.state) {
-              total += good.cartNum * good.truePrice
-              count++
-            }
-          })
-        }
+      this.list = this.list.map(item => {
+        item.state = state
+        item.carts = item.carts.map(goods => {
+          goods.state = state
+          return goods
+        })
+        return item
       })
-      this.total = total
-      this.selectCount = count
-      this.isAll = goodsAll === count
     },
+
     navToStore(id) {
+      if (id === 0) {
+        uni.showToast({
+          title: '店铺装修中~',
+          icon: 'none',
+          duration: 3000
+        })
+        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
+          })
+        }
+      }
+
+      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]]['state'] = count === length
+      }
+    },
+
+    changeNum(event) {
+      changeCartNum(event.name, event.value)
+    },
+
     handleIds() {
-      const ids = []
-      this.list.map(item => {
-        item.carts.map(good => {
-          if (good.state) {
-            ids.push(good.id)
-          }
+      if (this.selectCount === 0) {
+        uni.showToast({
+          title: "请选择产品",
+          icon: "none",
+          duration: 2000
+        })
+        return []
+      }
+
+      let ids = []
+      this.list.forEach(item => {
+        item['carts'].forEach(goods => {
+          if (goods['state']) ids.push(goods['id'])
         })
       })
       return ids
     },
+
     remove() {
-      const _this = this
-      const ids = _this.handleIds()
+      const ids = this.handleIds()
       if (ids.length === 0) return
 
       uni.showModal({
@@ -198,12 +215,15 @@ export default {
         showCancel: true,
         cancelText: '取消',
         confirmText: '确认',
-        success: async () => {
-          const res = await postCartDel(ids)
-          if (res.success) await _this.getCart()
+        success: async (result) => {
+          if (result.confirm) {
+            const res = await postCartDel(ids)
+            if (res.success) await this.getCart()
+          }
         }
       })
     },
+
     submit() {
       const ids = this.handleIds()
       if (ids.length === 0) return
@@ -264,9 +284,8 @@ view {
 
     .sku {
       display: inline-flex;
-      height: 42rpx;
       margin-top: 12rpx;
-      padding: 0 20rpx;
+      padding: 10rpx 20rpx;
       border-radius: 22rpx;
       background: #FDF1F3;
       color: #999999;