微信小程序之渲染商品列表

张

张建站

2026/6/2 3:55:41

10分钟阅读

1.组件封装radio勾选状态打开vue组件的源代码为商品的左侧图片区域添加 radio 组件!-- 商品左侧图片区域 -- view classgoods-item-left radio checked color#c0c0c0/radio image:srcgoods.goods_small_loge||defaultPic classgoods_pic/image /view当用户点击radio 组件希望修改当前商品的勾选状态此时可以为 my-goods 组件绑定 radio-change 事件从而获取当前商品Idblock v-for(goods,i) in cart:keyi my-goods :goodsgoods :show-radiotrue radio-changeradioChange/my-goods /block声明如下 mutations 方法用来修改对应商品的勾选状态updateGoodsState(state,goods) { const findResultstate.cart.find(x x.goods_idgoods_id) if(findResult) { //更新对应商品的勾选状态 findResult.goods_stategoods.goods_state //持久化储存到本地 this .commit(m_cart/saveToStorage) } }为 my-goods组件封装 num-change 事件当用户修改NumberBox 的值以后可以将最新的商品数量更新到购物车中!-- 商品列表区域 -- block v-for(goods, i) in cart :keyi my-goods :goodsgoods :show-radiotrue :show-numtrue radio-changeradioChangeHandler num-changenumberChangeHandler /block在vue组件中为组件绑定change事件处理函数view classgoods-info-box !-- 价格 -- view classgoods-price${{goods.goods_price | tofixed}}/view !-- 数量-- uni-number-box :min1 :valuegoods.goods_countchangenumChangeHandler /uni-number-box /view2.信息储存创建用户相关的vuex模块命名为users.jsexport default { //开启命名空间 namespaced: true, // state 数据 state: () ({ // 收货地址 address: {}, }), //方法 mutations: { // 更新收货地址 updataAddress(state,address) { state.addressaddress }, }, // 数据包装器 getters: {}, }改造组件中的代码使用vuex提供的address计算属性代替data中定义的本地address对象// 按需导入 mapState 和 mapMutations 这两个辅助函数 import { mapState,mapMutations } fromvuex export default { data() { return { //address:{} } }, methods: { ...mapMutations(m_user,[updateAdderss]), //选择收货地址 async chooseAddress() { const [err,succ]await uni.chooseAddress().catch((err) err) //用户成功选择了收货地址 if(err nullsucc.errMsg chooseAddress:ok) { //this.addresssucc this.updateAddress(succ) } }, }, computed: { ...mapState(m_user,[address]), //收货详细地址的计算属性 addstr() { if(!this.address.provinceName)return return this.address.provinceNamethis.address.cityNamethis.address.counyryNamethis.address.detailInfa }, }, }将Store中的address持久化存储到本地export default { //开启命名空间 namespaced: true, // state 数据 state: () ({ // 收货地址 address: JSON.parse(uni.getStorageSy(address)|| {}), }), //方法 mutations: { // 更新收货地址 updataAddress(state,address) { state.addressaddress //通过this.commit()方法调用m_user模块下的 saveAddressToStorage 方法将 address持久化储存到本地 this.commit(m_user/saveAddressToStorage) }, saveAddressToStorage(state) { uni.setStorageSync(address,JSON.stringify(state.address)) }, }, // 数据包装器 getters: {}, }将addstr抽离为getters目的为了提高代码的复用性可以把收货的详细地址抽离为getters,方便在多个页面和组件之间实现复用// 数据包装器 getters: { //收货详细地址的计算属性 addstr(state) { if(!state.address.provinceName)return //拼接省市区的字符串并返回给用户 return this.address.provinceNamethis.address.cityNamethis.address.counyryNamethis.address.detailInfa } },通过 mapGetters 辅助函数函数将m_user 模块中 addstr 映射到当前组件中使用import { mapState,mapMutations,mapGetters } fromvuex export default { computed: { ...mapState(m_user,[address]), //将m_user 模块中的 addstr 映射到当前组件中使用 ...mapGetters(m_user,[addatr]) }, }解决地址授权失败的问题async reAuth() { //提示用户对地址进行授权 const [err2,confirmResult]await uni.showModal({ content:检测到您没打开地址权限是否去设置打开 confirmText:确认, cancelText:取消 }) //如果弹框异常则直接退出 if(err2)return //若点击“取消”按钮 if(confirmResult.cancl)return uni.$showMsg(您取消了地址授权) //若点击“确认”按钮 if (confirmResult.confirm)return uni.openSetting({ success: (settingResult){ if(settingResult.authSetting[scope.address])return uni.$showMsg(授权成功) if(!settingResult.authSetting[scope.address])return uni.$showMsg(您取消了地址授权) } }) }3.结算组件动态渲染已勾选商品的总数量checkedCount(state) { //先使用 filter 方法从购物车中过滤器已勾选的商品 //再使用 reduce 方法将已勾选的商品总数量进行累加 return state.cart.filter(x x.goods_state).reduce((total,item) totalitem.goods_count,0) }通过mapGetters 辅助函数将需要的getters映射到当前组件中使用import { mapGetters } fromvuex export default { computed: { ...mapGetters(m_cart,[checkedCount]) }, data() { return { } } }动态渲染全选按钮的选中状态使用 mapGetters 辅助函数将商品的总数量映射到当前组件中使用并定义一个叫做 isFullCheck 的计算属性import { mapGetters } fromvuex export default { computed: { ...mapGetters(m_cart,[checkedCount,total]), // 是否全选 isFullCheck() { return this.total this.checkedCount }, }, data() { return { }; } }定义一个getters,用来统计已勾选商品总价格//已勾选商品总价 checkedGoodsAmount(state) { //先使用 filter 方法从购物车中过滤器已勾选的商品 //再使用 reduce 方法将已勾选的商品数量 * 单价之后进行累加 //最后调用 toFixed(2)方法保留两位小数 return state.cart.filter(x x.goods_state) .reduce((total,item)totalitem.goods_count*item.goods_count * item.goods_price,0) .toFixed(2) }