From f1ece1392b7b3198527a2b97c0415e242a7f9ee5 Mon Sep 17 00:00:00 2001
From: ov <1010618168@qq.com>
Date: Thu, 21 Sep 2023 11:32:13 +0800
Subject: [PATCH] ov

---
 src/components/user/Cart.vue | 68 +++++++++++++++++++++++++-----------
 1 file changed, 47 insertions(+), 21 deletions(-)

diff --git a/src/components/user/Cart.vue b/src/components/user/Cart.vue
index 2c30d44..5857553 100644
--- a/src/components/user/Cart.vue
+++ b/src/components/user/Cart.vue
@@ -8,7 +8,7 @@
               :class="
                 checkAll ? 'iconfont icon-xuanzhong' : 'iconfont icon-fangkuang'
               "
-              @click="checkAll=!checkAll"
+              @click="selectAll()"
             ></i>
           </th>
           <th style="width: 30%">礼品信息</th>
@@ -27,7 +27,10 @@
                   ? 'iconfont icon-xuanzhong'
                   : 'iconfont icon-fangkuang'
               "
-              @click="checkList[index]=!checkList[index]"
+              @click="
+                selectOne(index),
+                  sumCoin(item.coin * item.total, checkList[index])
+              "
             ></i>
           </td>
           <td>
@@ -42,10 +45,10 @@
           <td>{{ item.coin }}</td>
           <td>
             <div class="step">
-              <button @click="addCart(item.id, item.total - 1)">-</button>
+              <span @click="modifyCart(item.id, item.total - 1)">-</span>
               <!-- <input type="text" disabled v-model="stepNum" /> -->
-              {{ item.total }}
-              <button @click="addCart(item.id, item.total + 1)">+</button>
+              <span>{{ item.total }}</span>
+              <span @click="modifyCart(item.id, item.total + 1)">+</span>
             </div>
           </td>
           <td>{{ item.coin * item.total }}</td>
@@ -55,7 +58,9 @@
         </tr>
       </tbody>
     </table>
-    <div class="total">总计：<span>鸡腿</span></div>
+    <div class="total">
+      总计：<span>{{ sum }}鸡腿</span>
+    </div>
     <div class="submit">提交</div>
   </div>
 </template>
@@ -92,21 +97,29 @@ let shopGoods = ref([]);
 //     stepNum.value += val;
 //   }
 // }
+// 商品长度
+let lengthGoods = ref(0);
 // 全选
 const checkAll = ref(false);
 // 单选按钮数组
 const checkList = reactive([]);
+// 合计
+let sum = 0;
+// console.log(shopGoods);
 
 // 展示购物车内的商品方法
 async function showYourGoods() {
   const res = await cartAPI();
-  console.log(res.data);
+  // console.log(res.data.length);
+  // 获取购物车商品列表
   shopGoods.value = res.data;
+  // 获取购物车商品列表长度
+  lengthGoods.value = res.data.length;
 }
 showYourGoods();
 
-async function addCart(id, num) {
-  // 发起加入购物车请求
+// 修改商品数量
+async function modifyCart(id, num) {
   if (num > 0) {
     const res = await cartAddAPI({
       productId: id,
@@ -118,13 +131,13 @@ async function addCart(id, num) {
     } else {
       alert(res.message);
     }
-  }else{
+  } else {
     alert("商品数量不能减少了哟~");
   }
-
   showYourGoods();
 }
 
+// 删除商品
 async function deleteCart(id) {
   const res = await deleteCartAPI(id);
   if (res.code == 0) {
@@ -134,17 +147,30 @@ async function deleteCart(id) {
   }
   showYourGoods();
 }
-
-// // 增加商品
-// function add() {
-//   shopGoods.value[index].total++;
-// }
-//减少商品
-function sub(index) {
-  if (shopGoods.value[index].total > 1) {
-    shopGoods.value[index].total--;
+// 全选
+function selectAll() {
+  checkAll.value = !checkAll.value;
+  if (checkAll.value == true) {
+    for (const i = ref(0); i.value < lengthGoods.value; i.value++) {
+      checkList[i.value] = true;
+    }
   } else {
-    alert("商品数量不能减少了哟~");
+    for (const i = ref(0); i.value < lengthGoods.value; i.value++) {
+      checkList[i.value] = false;
+    }
+  }
+}
+// 单选
+function selectOne(index) {
+  checkList[index] = !checkList[index];
+  // console.log(checkList);
+}
+// 合计
+function sumCoin(coin, status) {
+  if (status == true) {
+    sum += coin;
+  } else {
+    sum -= coin;
   }
 }
 </script>
-- 
Gitee