Auto commit

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
+        }
+       }); 
+      
     });
   },
 };

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);
     },
   }
 }

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 });
     },
   },
 }