feat:购物车全选功能

subPackages/user/gwc.vue

@@ -1,8 +1,15 @@
 <template>
   <view class="bg">
-    <view class="guanli" v-if="list && list.length > 0" @click="guanli">{{
+    <view class="header-box" v-if="list && list.length > 0">
-      operate
+      <view class="all-select-box" @click="changeAllSelect">
-    }}</view>
+        <view class="selectBox flex-around" v-if="allSelect">
+          <img src="https://static.ticket.sz-trip.com/cgc/images/order/dui.png" />
+        </view>
+        <view class="noSelect" v-else></view>
+        <text class="all-select-text">全选</text>
+      </view>
+      <view class="guanli" @click="guanli">{{ operate }}</view>
+    </view>
     <view>
       <!-- 按供应商分组显示商品 -->
       <view
@@ -11,7 +18,17 @@
         :key="supplierIndex"
         v-if="supplierGroup.goods && supplierGroup.goods.length > 0"
       >
+        <view class="supplier-header">
+          <view class="supplier-title-box">
+            <view class="supplier-select-box" @click="changeSupplierSelect(supplierGroup)">
+              <view class="selectBox flex-around" v-if="isSupplierAllSelected(supplierGroup)">
+                <img src="https://static.ticket.sz-trip.com/cgc/images/order/dui.png" />
+              </view>
+              <view class="noSelect" v-else></view>
+            </view>
             <view class="title">{{ supplierGroup.supplierName }}</view>
+          </view>
+        </view>
         <view
           class="goodItem"
           v-for="(goodItem, goodIndex) in supplierGroup.goods"
@@ -218,18 +235,7 @@ export default {
     // 更改选中状态
     changeSelect(item) {
       item.is_select = !item.is_select;
-      // 检查是否所有商品都被选中
+      this.updateAllSelectStatus();
-      let allSelected = true;
-      for (let supplierGroup of this.list) {
-        for (let goods of supplierGroup.goods) {
-          if (!goods.is_select) {
-            allSelected = false;
-            break;
-          }
-        }
-        if (!allSelected) break;
-      }
-      this.allSelect = allSelected;
       this.$forceUpdate();
     },
     // 去商品详情
@@ -254,6 +260,37 @@ export default {
           else item.is_select = false;
         });
       });
+      this.$forceUpdate();
+    },
+    // 改变供应商全选
+    changeSupplierSelect(supplierGroup) {
+      const isAllSelected = this.isSupplierAllSelected(supplierGroup);
+      supplierGroup.goods.forEach((item) => {
+        item.is_select = !isAllSelected;
+      });
+      this.updateAllSelectStatus();
+      this.$forceUpdate();
+    },
+    // 检查供应商是否全选
+    isSupplierAllSelected(supplierGroup) {
+      if (!supplierGroup.goods || supplierGroup.goods.length === 0) {
+        return false;
+      }
+      return supplierGroup.goods.every(item => item.is_select);
+    },
+    // 更新全选状态
+    updateAllSelectStatus() {
+      let allSelected = true;
+      for (let supplierGroup of this.list) {
+        for (let goods of supplierGroup.goods) {
+          if (!goods.is_select) {
+            allSelected = false;
+            break;
+          }
+        }
+        if (!allSelected) break;
+      }
+      this.allSelect = allSelected;
     },
     // 删除失效商品
     delLoseGood(id, index) {
@@ -478,6 +515,57 @@ export default {
   background-color: #f8f8f8;
 }
 
+.header-box {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  height: 76rpx;
+  padding: 0 20rpx;
+  margin-bottom: 20rpx;
+}
+
+.all-select-box {
+  display: flex;
+  align-items: center;
+
+  .noSelect {
+    width: 37rpx;
+    height: 37rpx;
+    border-radius: 50%;
+    border: 2rpx solid #666666;
+    box-sizing: border-box;
+    margin-right: 15rpx;
+    transition: all 0.3s ease;
+
+    &:active {
+      transform: scale(0.9);
+    }
+  }
+
+  .selectBox {
+    width: 37rpx;
+    height: 37rpx;
+    margin-right: 15rpx;
+    transition: all 0.3s ease;
+
+    &:active {
+      transform: scale(0.9);
+    }
+
+    img {
+      width: 100%;
+      height: 100%;
+    }
+  }
+
+  .all-select-text {
+    font-size: 32rpx;
+    font-family: PingFang SC;
+    font-weight: 500;
+    color: #6ca5aa;
+  }
+}
+
 .guanli {
   height: 76rpx;
   text-align: right;
@@ -505,11 +593,52 @@ export default {
   padding: 25rpx 20rpx;
   box-sizing: border-box;
 
+  .supplier-header {
+    margin-bottom: 20rpx;
+
+    .supplier-title-box {
+      display: flex;
+      align-items: center;
+
+      .supplier-select-box {
+        margin-right: 15rpx;
+
+        .noSelect {
+          width: 37rpx;
+          height: 37rpx;
+          border-radius: 50%;
+          border: 2rpx solid #666666;
+          box-sizing: border-box;
+          transition: all 0.3s ease;
+
+          &:active {
+            transform: scale(0.9);
+          }
+        }
+
+        .selectBox {
+          width: 37rpx;
+          height: 37rpx;
+          transition: all 0.3s ease;
+
+          &:active {
+            transform: scale(0.9);
+          }
+
+          img {
+            width: 100%;
+            height: 100%;
+          }
+        }
+      }
+
       .title {
         font-size: 30rpx;
         font-weight: 600;
         color: #333333;
       }
+    }
+  }
 
   .goodItem {
     width: 100%;