Sat Apr 29 05:51:00 UTC 2023 inscode

src/App.vue

@@ -7,7 +7,9 @@
     <!-- <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"></Goods>
+      :id="item.id"  @good_check_change="updateGoodState"></Goods>
+
+      <Footer></Footer>
   </div>
 </template>
 
@@ -15,6 +17,7 @@
 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'
 
 export default {
   components: {
@@ -37,6 +40,15 @@ export default {
         this.list = res.list
 
       }
+    },
+    updateGoodState(e){
+      this.list.some(item=>{
+        if (item.id === e.id)
+        {
+          item.goods_state = e.state
+          return true
+        }
+      })
     }
   },
   created() {

src/components/Goods/Goods.vue

@@ -4,8 +4,9 @@
     <div class="thumb">
       <div class="custom-control custom-checkbox">
         <!-- 复选框 -->
-        <input type="checkbox" class="custom-control-input" :id="'cb' +id" :checked="chstate" />
-        <label class="custom-control-label" :for="'cb' +id">
+        <input type="checkbox" class="custom-control-input" :id="'cb' + id" :checked="chstate" @change="goodsChecked" />
+        <!-- 将复选框和图片绑定在一起，实现点击图片也可以选中商品 -->
+        <label class="custom-control-label" :for="'cb' + id">
           <!-- 商品的缩略图 -->
           <img :src="pic" alt="" />
         </label>
@@ -14,11 +15,10 @@
     <!-- 右侧信息区域 -->
     <div class="goods-info">
       <!-- 商品标题 -->
-      <h6 class="goods-title">{{title}}</h6>
+      <h6 class="goods-title">{{ title }}</h6>
       <div class="goods-info-bottom">
         <!-- 商品价格 -->
         <span class="goods-price">￥0</span>
-        <!-- 商品的数量 -->
       </div>
     </div>
   </div>
@@ -26,22 +26,33 @@
 
 <script>
 export default {
-  props:{
-    title:{
-      type:String, // 指定 title 只接受字符串类型
-      default:'商品名称', // 如果没有传入 title，则默认显示 '商品名称'
+  props: {
+    // 商品标题
+    title: {
+      type: String, // 指定 title 只接受字符串类型
+      default: '商品名称', // 如果没有传入 title，则默认显示 '商品名称'
     },
-    pic:{
-      type:String, // 指定 pic 只接受字符串类型
-      default:'', // 如果没有传入 pic，则默认为空字符串
+    // 商品缩略图
+    pic: {
+      type: String, // 指定 pic 只接受字符串类型
+      default: '', // 如果没有传入 pic，则默认为空字符串
     },
-    chstate:{
-      type:Boolean, // 指定 chstate 只接受布尔类型
-      default:true, // 如果没有传入 chstate，则默认为 true
+    // 商品选中状态
+    chstate: {
+      type: Boolean, // 指定 chstate 只接受布尔类型
+      default: true, // 如果没有传入 chstate，则默认为 true
     },
-    id:{
-      type:Number, // 指定 id 只接受数字类型
-      required:true, // 指定 id 是必须的，必须传递 id 属性
+    // 商品 ID
+    id: {
+      type: Number, // 指定 id 只接受数字类型
+      required: true, // 指定 id 是必须的，必须传递 id 属性
+    }
+  },
+  methods: {
+    // 处理商品选中状态改变的方法
+    goodsChecked(e) {
+      // 触发一个自定义事件，将商品 ID 和状态传递给父组件
+      this.$emit('good_check_change', { id: this.id, state: e.target.checked })
     }
   }
 }
@@ -50,14 +61,14 @@ export default {
 
 <style lang="less" scoped>
 .goods-container {
-  + .goods-container {
-    border-top: 1px solid #efefef;
-  }
+  border-top: 1px solid #efefef;
   padding: 10px;
   display: flex;
+
   .thumb {
     display: flex;
     align-items: center;
+
     img {
       width: 100px;
       height: 100px;
@@ -70,13 +81,16 @@ export default {
     flex-direction: column;
     justify-content: space-between;
     flex: 1;
+
     .goods-title {
       font-weight: bold;
       font-size: 12px;
     }
+
     .goods-info-bottom {
       display: flex;
       justify-content: space-between;
+
       .goods-price {
         font-weight: bold;
         color: red;
@@ -84,5 +98,4 @@ export default {
       }
     }
   }
-}
-</style>
+}</style>