重点难点：增减商品数量，商品勾选状态，是否全选
一、增减商品数量
PC端：
1.在shopCart/index.vue中
<template>
<li class="cart-list-con5">
<a class="mins" @click="minusSkuNum(cart)">-</a>
<input
autocomplete="off"
type="text"
:value="cart.skuNum"
minnum="1"
class="itxt"
@input="changeSkuNum(cart, $event)"
/>
<a @click="addSkuNum(cart)" class="plus">+</a>
</li>
</template>
<script>
//按需引入lodash节流函数
import throttle from "lodash/throttle";
//按需引入lodash防抖函数
import debounce from "lodash/debounce";
export default {
methods: {
//获取购物车的数据请求函数
getData() {
this.$store.dispatch("getShopCart");
},
//修改商品数据->加的操作
async addSkuNum(cart) {
//整理参数
let params = { skuId: cart.skuId, skuNum: 1 };
//发请求:通知服务器修改当前商品的个数
//再次获取购物车的最新的数据：保证这次修改数据完毕【成功以后在获取购物车数据】
try {
//修改商品个数成功
await this.$store.dispatch("addOrUpdateCart", params);
//再次获取最新的购物车的数据
this.getData();
} catch (error) {
alert("修改数量失败");
}
},
//修改商品数据-减的操作
minusSkuNum: throttle(async function (cart) {
if (cart.skuNum > 1) {
//整理参数:至少加入购物车的数量最低1个
let params = { skuId: cart.skuId, skuNum: -1 };
//修改商品的数据
try {
//修改商品的个数、成功以后再次获取购物车的数据
await this.$store.dispatch("addOrUpdateCart", params);
this.getData();
} catch (error) {
alert("修改数量失败");
}
}
}, 2000),
changeSkuNum: debounce(async function (cart, e) {
//整理参数
let params = { skuId: cart.skuId };
//计算出SkuNum携带的数据
let userResultValue = e.target.value * 1;
//用户输入完毕，最终结果【非法条件】
if (isNaN(userResultValue) || userResultValue < 1) {
params.skuNum = 0;
} else {
//正常情况 (输入数量 - 购物车本身数量)
params.skuNum = parseInt(userResultValue) - cart.skuNum;
}
//发请求：修改商品的个数
try {
//修改商品的个数、成功以后再次获取购物车的数据
await this.$store.dispatch("addOrUpdateCart", params);
this.getData();
} catch (error) {
alert("修改失败");
}
}, 500)
}
</script>
效果实现：
小程序：
1.修改 my-goods.vue 组件的源代码，在类名为 goods-info-box 的 view 组件内部渲染 NumberBox 组件的基本结构
<view class="goods-info-box">
<!-- 商品价格 -->
<view class="goods-price">￥{{goods.goods_price | tofixed}}</view>
<!-- 商品数量 -->
<uni-number-box :min="1"></uni-number-box>
</view>
2.美化页面的结构：
.goods-item-right {
display: flex;
flex: 1;
flex-direction: column;
justify-content: space-between;
.goods-name {
font-size: 13px;
}
.goods-info-box {
display: flex;
align-items: center;
justify-content: space-between;
}
.goods-price {
font-size: 16px;
color: #c00000;
}
}
3.在 my-goods.vue 组件中，动态为 NumberBox 组件绑定商品的数量值：
<view class="goods-info-box">
<!-- 商品价格 -->
<view class="goods-price">￥{{goods.goods_price | tofixed}}</view>
<!-- 商品数量 -->
<uni-number-box :min="1" :value="goods.goods_count"></uni-number-box>
</view>
4.在 my-goods.vue 组件中，封装名称为 showNum 的 props 属性，来控制当前组件中是否显示 NumberBox 组件：
// 定义 props 属性，用来接收外界传递到当前组件的数据
props: {
// 是否展示价格右侧的 NumberBox 组件
showNum: {
type: Boolean,
default: false,
},
}
5.在 my-goods.vue 组件中，使用 v-if 指令控制 NumberBox 组件的按需展示
<view class="goods-info-box">
<!-- 商品价格 -->
<view class="goods-price">￥{{goods.goods_price | tofixed}}</view>
<!-- 商品数量 -->
<uni-number-box :min="1" :value="goods.goods_count" @change="numChangeHandler" v-if="showNum"></uni-number-box>
</view>
6.在 cart.vue 页面中的商品列表区域，指定 :show-num="true" 属性，从而显示 NumberBox 组件
<!-- 商品列表区域 -->
<block v-for="(goods, i) in cart" :key="i">
<my-goods :goods="goods" :show-radio="true" :show-num="true" @radio-change="radioChangeHandler"></my-goods>
</block>
7.将最新的商品数量更新到购物车中，此时用户可以为 my-goods 组件绑定 @num-change 事件，从而获取当前商品的 goods_id 和 goods_count：
<!-- 商品列表区域 -->
<block v-for="(goods, i) in cart" :key="i">
<my-goods :goods="goods" :show-radio="true" :show-num="true" @radio-change="radioChangeHandler" @num-change="numberChangeHandler"></my-goods>
</block>
8.在 my-goods.vue 组件中，为 uni-number-box 组件绑定 @change 事件处理函数如下
<view class="goods-info-box">
<!-- 商品价格 -->
<view class="goods-price">￥{{goods.goods_price | tofixed}}</view>
<!-- 商品数量 -->
<uni-number-box :min="1" :value="goods.goods_count" @change="numChangeHandler"></uni-number-box>
</view>
9.在 my-goods.vue 组件的 methods 节点中，定义 numChangeHandler 事件处理函数
methods: {
// NumberBox 组件的 change 事件处理函数
numChangeHandler(val) {
// 通过 this.$emit() 触发外界通过 @ 绑定的 num-change 事件
this.$emit('num-change', {
// 商品的 Id
goods_id: this.goods.goods_id,
// 商品的最新数量
goods_count: +val
})
}
}
- 修改购物车中商品的数量,在 store/cart.js 模块中，声明如下的 mutations 方法，用来修改对应商品的数量
// 更新购物车中商品的数量
updateGoodsCount(state, goods) {
// 根据 goods_id 查询购物车中对应商品的信息对象
const findResult = state.cart.find(x => x.goods_id === goods.goods_id)
if(findResult) {
// 更新对应商品的数量
findResult.goods_count = goods.goods_count
// 持久化存储到本地
this.commit('m_cart/saveToStorage')
}
}
11.在 cart.vue 页面中，通过 mapMutations 这个辅助函数，将需要的 mutations 方法映射到当前页面中使用
import badgeMix from '@/mixins/tabbar-badge.js'
import { mapState, mapMutations } from 'vuex'
export default {
methods: {
numberChangeHandler(e) {
this.updateGoodsCount(e)
},
}
}
