From be888d61a8c75b463a304dd7260b44054beb30ba Mon Sep 17 00:00:00 2001
From: 642b59b229c89a1824b83ed8 <642b59b229c89a1824b83ed8@devide>
Date: Thu, 4 May 2023 13:03:55 +0000
Subject: [PATCH] Auto commit

---
 src/App.vue                      | 31 ++++++++++++++++++++++---------
 src/components/Footer/Footer.vue |  2 +-
 src/components/Goods/Goods.vue   |  2 +-
 3 files changed, 24 insertions(+), 11 deletions(-)

diff --git a/src/App.vue b/src/App.vue
index e6a10b2..b6874f4 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -2,10 +2,12 @@
   <div class="app-container">
     <Header title="购物车案例"></Header>
     <!-- 循环渲染每个商品 -->
-    <Goods v-for="item in list" :key="item.id" :title="item.goods_name" :thumbnail="item.goods_img" :isChecked="item.goods_state"
-      :id="item.id" :price="item.goods_price" :count="item.goods_count" @change-state="updateGoodState"></Goods>
+    <Goods v-for="item in list" :key="item.id" :title="item.goods_name" :thumbnail="item.goods_img"
+      :isChecked="item.goods_state" :id="item.id" :price="item.goods_price" :count="item.goods_count"
+      @change-state="updateGoodState"></Goods>
     <!-- 渲染底部组件 -->
-    <Footer :checked="allChecked" :total-amount="totalAmount" :total-count="totalCount" @change-all-state="changeAllState"></Footer>
+    <Footer :checked="allChecked" :totalPrice="totalAmount" :totalCheckedCount="totalCount"
+      @change-all-state="changeAllState"></Footer>
   </div>
 </template>
 
@@ -37,8 +39,14 @@ export default {
     },
     // 更新商品状态的方法
     updateGoodState({ id, state }) {
-      const item = this.list.find(item => item.id === id); // 查找到对应 id 的商品
-      item.goods_state = state; // 更新对应商品的状态
+      console.log(id,state);
+      this.list.some(item => {
+        if (item.id === id) {// 查找到对应 id 的商品
+          item.goods_state = state; // 更新对应商品的状态
+          return true
+        }
+      });
+
     },
     // 修改全选状态的方法
     changeAllState(state) {
@@ -52,11 +60,11 @@ export default {
     },
     // 计算选中商品的总价
     totalAmount() {
-      return this.list.filter(item => item.goods_state).reduce((total, item) => total  = item.goods_price * item.goods_count, 0); // 过滤出已选商品，然后用 reduce 计算商品总价
+      return this.list.filter(item => item.goods_state).reduce((total, item) => total += item.goods_price * item.goods_count, 0); // 过滤出已选商品，然后用 reduce 计算商品总价
     },
     // 计算选中商品的数量
     totalCount() {
-      return this.list.filter(item => item.goods_state).reduce((total, item) => total  = item.goods_count, 0); // 过滤出已选商品，然后用 reduce 计算商品数量总和
+      return this.list.filter(item => item.goods_state).reduce((total, item) => total += item.goods_count, 0); // 过滤出已选商品，然后用 reduce 计算商品数量总和
     },
   },
   created() {
@@ -64,8 +72,13 @@ export default {
     this.initBuyCars();
     // 监听事件总线的 'goods-count-change' 事件，当事件触发时更改对应商品的数量
     eventBus.on('goods-count-change', ({ id, value }) => {
-      const item = this.list.find(item => item.id === id); // 查找到对应 id 的商品
-      item.goods_count = value; // 更新对应商品的数量
+       this.list.some(item => {// 查找到对应 id 的商品
+        if(item.id === id){
+          item.goods_count = value; // 更新对应商品的数量
+          return true
+        }
+       }); 
+      
     });
   },
 };
diff --git a/src/components/Footer/Footer.vue b/src/components/Footer/Footer.vue
index b2325bb..3a87835 100644
--- a/src/components/Footer/Footer.vue
+++ b/src/components/Footer/Footer.vue
@@ -36,7 +36,7 @@ export default {
   methods:{
     // 切换所有商品的选中状态
     toggleAllGoods(e){
-     this.$emit('change-all-state', { value: e.target.checked });
+     this.$emit('change-all-state',  e.target.checked);
     },
   }
 }
diff --git a/src/components/Goods/Goods.vue b/src/components/Goods/Goods.vue
index 335f768..8b4ceb6 100644
--- a/src/components/Goods/Goods.vue
+++ b/src/components/Goods/Goods.vue
@@ -69,7 +69,7 @@ export default {
     // 切换商品选中状态
     toggleGoodsChecked(e) {
       // 触发一个自定义事件，将商品 ID 和选中状态传递给父组件
-      this.$emit('change-state', { id: this.id, isChecked: e.target.checked });
+      this.$emit('change-state', { id: this.id, state: e.target.checked });
     },
   },
 }
-- 
GitLab