UPDATE

package.json

@@ -9,7 +9,7 @@
   "dependencies": {
     "axios": "^1.4.0",
     "guess": "^1.0.2",
-    "vue": "^3.2.37"
+    "vue": "^3.2.47"
   },
   "devDependencies": {
     "@vitejs/plugin-vue": "^3.0.1",

src/App.vue

@@ -7,9 +7,12 @@
     <!-- <h1>App 根组件</h1> -->
     <!-- 商品列表 -->
     <Goods v-for="item in list" :key="item.id" :title="item.goods_name" :pic="item.goods_img" :chstate="item.goods_state"
-      :id="item.id"  @good_check_change="updateGoodState"></Goods>
+      :id="item.id" :price="item.goods_price" :count="item.goods_count" @good_check_change="updateGoodState"></Goods>
 
-      <Footer></Footer>
+    <Footer :full_checked="allChecked" :amount="amt" @changAllGoodsState="changeState"></Footer>
+    <div>
+      eventBus
+    </div>
   </div>
 </template>
 
@@ -18,11 +21,12 @@ import axios from 'axios' // 导入 axios 模块
 import Header from '@/components/Header/Header.vue' // 导入 Header 组件
 import Goods from '@/components/Goods/Goods.vue' // 导入 Goods 组件
 import Footer from '@/components/Footer/Footer.vue'
-
+import eventBus from './components/eventBus.js'
 export default {
   components: {
     Header, // 注册 Header 组件
     Goods, // 注册 Goods 组件
+    Footer,
   },
   data() {
     return {
@@ -32,28 +36,55 @@ export default {
   },
 
   methods: {
+    // 初始化购物车的方法，通过axios发送get请求获取数据
     async initBuyCars() {
-      // 通过 axios 请求数据
-      const { data: res } = await axios.get('https://www.escook.cn/api/cart')
+      // 发送异步请求获取购物车数据
+      const { data: res } = await axios.get('https://www.escook.cn/api/cart');
+
+      // 判断请求是否成功
       if (res.status === 200) {
-        // 请求成功，将数据赋值给 list
-        this.list = res.list
+        // 将获取到的数据赋值给组件数据的 list 属性
+        this.list = res.list;
+      }
+    },
 
+    // 更新商品状态的方法，接收一个对象作为参数
+    updateGoodState(e) {
+      // 遍历组件数据的 list 数组
+      this.list.some(item => {
+        // 如果当前遍历到的 item 对象的 id 和传入的参数 e 中的 id 相等
+        if (item.id === e.id) {
+          // 将当前遍历到的 item 对象的 goods_state 属性更新为传入的参数 e 中的 state 值
+          item.goods_state = e.state;
+          // 返回 true 结束循环
+          return true;
         }
+      });
     },
-    updateGoodState(e){
-      this.list.some(item=>{
-        if (item.id === e.id)
-        {
-          item.goods_state = e.state
-          return true
+
+    changeState(val){
+      this.list.forEach(item=>item.goods_state=val.value)
+
     }
-      })
+
+
+  },
+
+  computed:{
+    allChecked(){
+      return this.list.every(item=>item.goods_state)
+    },
+
+    amt(){
+      return this.list.filter(item=>item.goods_state).reduce((t,item)=>t+=item.goods_price * item.goods_count,0)
     }
   },
   created() {
     // 在实例创建之后请求数据
     this.initBuyCars()
+
+
+
   }
 }
 </script>

src/components/Counter/Counter.vue

@@ -3,14 +3,34 @@
     <!-- 减 1 的按钮 -->
     <button type="button" class="btn btn-light btn-sm">-</button>
     <!-- 购买的数量 -->
-    <span class="number-box">1</span>
+    <span class="number-box">{{num}}</span>
     <!-- 加 1 的按钮 -->
-    <button type="button" class="btn btn-light btn-sm">+</button>
+    <button type="button" class="btn btn-light btn-sm" @click="add">+</button>
   </div>
 </template>
 
 <script>
-export default {}
+
+import bus from '../eventBus.js';
+export default {
+  
+  
+  props:{
+    num:{
+      type: Number, 
+      default:1
+    },
+    count_id:{
+      type: Number, // 指定 id 只接受数字类型
+      required: true, // 指定 id 是必须的，必须传递 id 属性
+    }
+  },
+  methods:{
+    add(){
+    
+    }
+  },
+}
 </script>
 
 <style lang="less" scoped>

src/components/Footer/Footer.vue

@@ -2,14 +2,14 @@
   <div class="footer-container">
     <!-- 左侧的全选 -->
     <div class="custom-control custom-checkbox">
-      <input type="checkbox" class="custom-control-input" id="cbFull" :checked="true" />
+      <input type="checkbox" class="custom-control-input" id="cbFull" :checked="full_checked"  @change="changAppListGoodsSState"/>
       <label class="custom-control-label" for="cbFull">全选</label>
     </div>
 
     <!-- 中间的合计 -->
     <div>
       <span>合计：</span>
-      <span class="total-price">￥{{ 0 }}</span>
+      <span class="total-price">￥{{ amount.toFixed(2) }}</span>
     </div>
 
     <!-- 结算按钮 -->
@@ -18,7 +18,24 @@
 </template>
 
 <script>
-export default {}
+import bus from '../eventBus';
+export default {
+  props:{
+    full_checked:{
+      default:true,
+      type:Boolean,
+    },
+    amount:{
+      type:Number,
+      default:0
+    }
+  },
+  methods:{
+    changAppListGoodsSState(e){
+     this.$emit('changAllGoodsState',{value: e.target.checked})
+    }
+  }
+}
 </script>
 
 <style lang="less" scoped>

src/components/Goods/Goods.vue

@@ -18,14 +18,19 @@
       <h6 class="goods-title">{{ title }}</h6>
       <div class="goods-info-bottom">
         <!-- 商品价格 -->
-        <span class="goods-price">￥0</span>
+        <span class="goods-price">￥{{price}}</span>
+        <Counter :num="count" :count_id="id"></Counter>
       </div>
     </div>
   </div>
 </template>
 
 <script>
+import Counter from '@/components/Counter/Counter.vue'
 export default {
+  components:{
+    Counter,
+  },  
   props: {
     // 商品标题
     title: {
@@ -46,6 +51,14 @@ export default {
     id: {
       type: Number, // 指定 id 只接受数字类型
       required: true, // 指定 id 是必须的，必须传递 id 属性
+    },
+    price:{
+      type: Number, 
+      required: true, 
+    },
+    count:{
+      type: Number, 
+      default:1
     }
   },
   methods: {

src/components/eventBus.js

+
+const eventBus = 'hello'
+export default eventBus; // 导出 EventBus 对象