一、商品勾选状态，是否全选
PC端：
1.在store/shopcart/index.js中,修改商品勾选状态
//修改某一个商品勾选状态
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：勾选状态
<li class="cart-list-con1">
<input
type="checkbox"
name="chk_list"
:checked="cart.isChecked"
@change="changeChecked(cart, $event)"
/>
</li>
3.在shopCart/index.vue中定义事件
//修改某一个商品的勾选的状态
async changeChecked(cart, e) {
//整理参数
let params = {
skuId: cart.skuId,
isChecked: e.target.checked ? "1" : "0",
};
//发请求:修改商品的勾选的状态
try {
await this.$store.dispatch("changeChecked", params);
this.getData();
} catch (error) {
alert("修改失败");
}
}
效果实现：
小程序
1.打开 my-goods.vue 组件的源代码，为商品的左侧图片区域添加 radio 组件
<!-- 商品左侧图片区域 -->
<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 组件添加样式，实现 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 属性，用来接收外界传递到当前组件的数据
props: {
// 是否展示图片左侧的 radio
showRadio: {
type: Boolean,
// 如果外界没有指定 show-radio 属性的值，则默认不展示 radio 组件
default: false,
},
}
}
4.使用 v-if 指令控制 radio 组件的按需展示
<!-- 商品左侧图片区域 -->
<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 页面中的商品列表区域，指定 :show-radio="true" 属性，从而显示 radio 组件
<!-- 商品列表区域 -->
<block v-for="(goods, i) in cart" :key="i">
<my-goods :goods="goods" :show-radio="true"></my-goods>
</block>
6.修改 my-goods.vue 组件，动态为 radio 绑定选中状态
<!-- 商品左侧图片区域 -->
<view class="goods-item-left">
<!-- 存储在购物车中的商品，包含 goods_state 属性，表示商品的勾选状态 -->
<radio :checked="goods.goods_state" color="#C00000" v-if="showRadio"></radio>
<image :src="goods.goods_small_logo || defaultPic" class="goods-pic"></image>
</view>
7.修改当前商品的勾选状态，此时用户可以为 my-goods 组件绑定 @radio-change 事件，从而获取当前商品的 goods_id 和 goods_state
<!-- 商品列表区域 -->
<block v-for="(goods, i) in cart" :key="i">
<!-- 在 radioChangeHandler 事件处理函数中，通过事件对象 e，得到商品的 goods_id 和 goods_state -->
<my-goods :goods="goods" :show-radio="true" @radio-change="radioChangeHandler"></my-goods>
</block>
8.在 my-goods.vue 组件中，为 radio 组件绑定 @click 事件处理函数如下
<!-- 商品左侧图片区域 -->
<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 节点中，定义 radioClickHandler 事件处理函数
methods: {
// radio 组件的点击事件处理函数
radioClickHandler() {
// 通过 this.$emit() 触发外界通过 @ 绑定的 radio-change 事件，
// 同时把商品的 Id 和 勾选状态 作为参数传递给 radio-change 事件处理函数
this.$emit('radio-change', {
// 商品的 Id
goods_id: this.goods.goods_id,
// 商品最新的勾选状态
goods_state: !this.goods.goods_state
})
}
}
10.在 store/cart.js 模块中，声明如下的 mutations 方法，用来修改对应商品的勾选状态
// 更新购物车中商品的勾选状态
updateGoodsState(state, goods) {
// 根据 goods_id 查询购物车中对应商品的信息对象
const findResult = state.cart.find(x => x.goods_id === goods.goods_id)
// 有对应的商品信息对象
if (findResult) {
// 更新对应商品的勾选状态
findResult.goods_state = goods.goods_state
// 持久化存储到本地
this.commit('m_cart/saveToStorage')
}
}
11.在 cart.vue 页面中，导入 mapMutations 这个辅助函数，从而将需要的 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']),
// 商品的勾选状态发生了变化
radioChangeHandler(e) {
this.updateGoodsState(e)
},
},
}
效果实现：
image.png
