一、商品勾選狀態(tài)，是否全選

PC端：
1.在store/shopcart/index.js中,修改商品勾選狀態(tài)

//修改某一個商品勾選狀態(tài)
     async changeChecked({ commit, state, dispatch }, { skuId, isChecked }) {
          let result = await reqUpdateChecked(skuId, isChecked);
          if (result.code == 200) {
               return 'ok';
          } else {
               return Promise.reject();
          }
     }

2.在shopCart/index.vue中綁定change事件

 // cart:商品id，$event：勾選狀態(tài)
<li class="cart-list-con1">
 <input
     type="checkbox"
     name="chk_list"
     :checked="cart.isChecked"
     @change="changeChecked(cart, $event)"
    />
</li>

3.在shopCart/index.vue中定義事件

 //修改某一個商品的勾選的狀態(tài)
    async changeChecked(cart, e) {
      //整理參數(shù)
      let params = {
        skuId: cart.skuId,
        isChecked: e.target.checked ? "1" : "0",
      };
      //發(fā)請求:修改商品的勾選的狀態(tài)
      try {
        await this.$store.dispatch("changeChecked", params);
        this.getData();
      } catch (error) {
         alert("修改失敗");
      }
    }

效果實現(xiàn)：

小程序
1.打開 my-goods.vue 組件的源代碼，為商品的左側圖片區(qū)域添加 radio 組件

<!-- 商品左側圖片區(qū)域 -->
<view class="goods-item-left">
  <radio checked color="#C00000"></radio>
  <image :src="goods.goods_small_logo || defaultPic" class="goods-pic"></image>
</view>

2.給類名為 goods-item-left 的 view 組件添加樣式，實現(xiàn) radio 組件和 image 組件的左右布局

.goods-item-left {
  margin-right: 5px;
  display: flex;
  justify-content: space-between;
  align-items: center;

  .goods-pic {
    width: 100px;
    height: 100px;
    display: block;
  }
}

3.封裝名稱為 showRadio 的 props 屬性，來控制當前組件中是否顯示 radio 組件

export default {
  // 定義 props 屬性，用來接收外界傳遞到當前組件的數(shù)據(jù)
  props: {
    // 是否展示圖片左側的 radio
    showRadio: {
      type: Boolean,
      // 如果外界沒有指定 show-radio 屬性的值，則默認不展示 radio 組件
      default: false,
    },
  }
}

4.使用 v-if 指令控制 radio 組件的按需展示

<!-- 商品左側圖片區(qū)域 -->
<view class="goods-item-left">
  <!-- 使用 v-if 指令控制 radio 組件的顯示與隱藏 -->
  <radio checked color="#C00000" v-if="showRadio"></radio>
  <image :src="goods.goods_small_logo || defaultPic" class="goods-pic"></image>
</view>

5.在 cart.vue 頁面中的商品列表區(qū)域，指定 :show-radio="true" 屬性，從而顯示 radio 組件

<!-- 商品列表區(qū)域 -->
<block v-for="(goods, i) in cart" :key="i">
  <my-goods :goods="goods" :show-radio="true"></my-goods>
</block>

6.修改 my-goods.vue 組件，動態(tài)為 radio 綁定選中狀態(tài)

<!-- 商品左側圖片區(qū)域 -->
<view class="goods-item-left">
  <!-- 存儲在購物車中的商品，包含 goods_state 屬性，表示商品的勾選狀態(tài) -->
  <radio :checked="goods.goods_state" color="#C00000" v-if="showRadio"></radio>
  <image :src="goods.goods_small_logo || defaultPic" class="goods-pic"></image>
</view>

7.修改當前商品的勾選狀態(tài)，此時用戶可以為 my-goods 組件綁定 @radio-change 事件，從而獲取當前商品的 goods_id 和 goods_state

<!-- 商品列表區(qū)域 -->
<block v-for="(goods, i) in cart" :key="i">
  <!-- 在 radioChangeHandler 事件處理函數(shù)中，通過事件對象 e，得到商品的 goods_id 和 goods_state -->
  <my-goods :goods="goods" :show-radio="true" @radio-change="radioChangeHandler"></my-goods>
</block>

8.在 my-goods.vue 組件中，為 radio 組件綁定 @click 事件處理函數(shù)如下

<!-- 商品左側圖片區(qū)域 -->
<view class="goods-item-left">
  <radio :checked="goods.goods_state" color="#C00000" v-if="showRadio" @click="radioClickHandler"></radio>
  <image :src="goods.goods_small_logo || defaultPic" class="goods-pic"></image>
</view>

9.在 my-goods.vue 組件的 methods 節(jié)點中，定義 radioClickHandler 事件處理函數(shù)

methods: {
  // radio 組件的點擊事件處理函數(shù)
  radioClickHandler() {
    // 通過 this.$emit() 觸發(fā)外界通過 @ 綁定的 radio-change 事件，
    // 同時把商品的 Id 和 勾選狀態(tài) 作為參數(shù)傳遞給 radio-change 事件處理函數(shù)
    this.$emit('radio-change', {
      // 商品的 Id
      goods_id: this.goods.goods_id,
      // 商品最新的勾選狀態(tài)
      goods_state: !this.goods.goods_state
    })
  }
}

10.在 store/cart.js 模塊中，聲明如下的 mutations 方法，用來修改對應商品的勾選狀態(tài)

// 更新購物車中商品的勾選狀態(tài)
updateGoodsState(state, goods) {
  // 根據(jù) goods_id 查詢購物車中對應商品的信息對象
  const findResult = state.cart.find(x => x.goods_id === goods.goods_id)

  // 有對應的商品信息對象
  if (findResult) {
    // 更新對應商品的勾選狀態(tài)
    findResult.goods_state = goods.goods_state
    // 持久化存儲到本地
    this.commit('m_cart/saveToStorage')
  }
}

11.在 cart.vue 頁面中，導入 mapMutations 這個輔助函數(shù)，從而將需要的 mutations 方法映射到當前頁面中使用

import badgeMix from '@/mixins/tabbar-badge.js'
import { mapState, mapMutations } from 'vuex'

export default {
  mixins: [badgeMix],
  computed: {
    ...mapState('m_cart', ['cart']),
  },
  data() {
    return {}
  },
  methods: {
    ...mapMutations('m_cart', ['updateGoodsState']),
    // 商品的勾選狀態(tài)發(fā)生了變化
    radioChangeHandler(e) {
      this.updateGoodsState(e)
    },
  },
}

效果實現(xiàn)：

image.png