优化购物车列表

src/pages/service/cart.vue

@@ -35,8 +35,13 @@
                             <text class="text">合计：</text>
                             <text class="price">¥ {{ utils.formatNumber(item.total, 2) }}</text>
                         </view>
-                        <view class="button" :class="{ active: item.total > 0 }" @click="createOrder(index)">
-                            <text>去下单</text>
+                        <view class="button-group">
+                            <view v-show="item.canUse" class="button del" @click="deleteCheckedCart(index)">
+                                <text>删除</text>
+                            </view>
+                            <view class="button normal" :class="{ active: item.canUse }" @click="createOrder(index)">
+                                <text>去下单</text>
+                            </view>
                         </view>
                     </view>
                 </view>
@@ -107,6 +112,7 @@ export default {
                 total: 0,
                 list: goods,
                 checked: false,
+                canUse: false,
             });
         });
     },
@@ -132,13 +138,17 @@ export default {
                 currentItem.checked = currentState;
 
                 // 判断是否需要选中组
-                let allChecked = true;
+                let allChecked = true,
+                    canUse = false;
                 this.list[parentIndex].list.forEach((item, index) => {
                     if (!item.checked) {
                         allChecked = false;
+                    } else {
+                        canUse = true;
                     }
                 });
                 this.list[parentIndex].checked = allChecked;
+                this.list[parentIndex].canUse = canUse;
 
                 this.updateTotal(parentIndex);
             }
@@ -174,20 +184,22 @@ export default {
             }
         },
         /**
-         * 删除购物车
+         * 公共删除
          */
-        deleteCart(parentIndex, itemIndex) {
+        commonDeleteCart(parentIndex, itemIndexes) {
             const that = this;
             uni.showModal({
                 title: "确定删除该商品？",
                 content: "数据删除后不可恢复，请谨慎操作！",
-                complete(res) {
-                    if (res.confirm) {
-                        let parentItem = that.list[parentIndex];
-                        let currentItem = parentItem.list[itemIndex];
-                        that.$models.cart.delete(currentItem.id).then(() => {
+                async complete(res) {
+                    if (!res.confirm) return;
+                    let parentItem = that.list[parentIndex];
+                    itemIndexes = itemIndexes.sort((a, b) => b - a);
+                    for (let i = 0; i < itemIndexes.length; i++) {
+                        let currentItem = parentItem.list[itemIndexes[i]];
+                        await that.$models.cart.delete(currentItem.id).then(() => {
                             that.$store.dispatch("cart/update", true);
-                            parentItem.list.splice(itemIndex, 1);
+                            parentItem.list.splice(itemIndexes[i], 1);
                             if (parentItem.list.length > 0) {
                                 that.updateTotal(parentIndex);
                             } else {
@@ -198,6 +210,25 @@ export default {
                 },
             });
         },
+        /**
+         * 删除购物车
+         */
+        deleteCart(parentIndex, itemIndex) {
+            this.commonDeleteCart(parentIndex, [itemIndex]);
+        },
+        /**
+         * 删除选中购物车
+         */
+        deleteCheckedCart(parentIndex) {
+            let currentItem = this.list[parentIndex];
+            let indexes = [];
+            currentItem.list.forEach((item, itemIndex) => {
+                if (item.checked) {
+                    indexes.push(itemIndex);
+                }
+            });
+            this.commonDeleteCart(parentIndex, indexes);
+        },
         /**
          * 购物车下单
          */
@@ -290,18 +321,30 @@ export default {
             color: #ec7655;
         }
     }
+    .button-group {
+        display: flex;
+    }
     .button {
-        width: 183rpx;
         height: 54rpx;
         line-height: 54rpx;
-        background: linear-gradient(-90deg, #8194f2, #8194f2);
         text-align: center;
         border-radius: 23rpx;
         font-size: 24rpx;
+        box-sizing: border-box;
+        margin-left: 20rpx;
+    }
+    .button.del {
+        width: 90rpx;
+        color: #666666;
+        border: 2rpx solid #e0e0e0;
+    }
+    .button.normal {
+        width: 183rpx;
         color: #ffffff;
+        background: linear-gradient(-90deg, #8194f2, #8194f2);
         opacity: 0.7;
     }
-    .button.active {
+    .button.normal.active {
         opacity: 1;
     }
 }