要实现购物车首先对必要字段整理
1、商品数据列表 cartList（价格-price、数量num、是否选中isCheck）
2、全选按钮- isAllChecked
3、是否有数据 - hasList
4、总价 - totalPrice
一、初始化 默认有数据
onShow() {
// 默认有数据
this.setData({
hasList: true
})
}
二、商品增加、减少都会影响总价，定义计算总价方法
// 计算商品总价
getTotalPrice() {
let carts = this.data.cartList; // 获取购物车列表
let total = 0;
// 没有商品直接返回
if (!this.data.hasList) {
this.setData({
totalPrice: total
})
return
}
// 计算总价
for (let i = 0; i < carts.length; i++) { // 循环列表得到每个数据
if (carts[i].isCheck) { // 判断选中才会计算价格
// 注： 数量和价格必须为数值型
total += carts[i].num * carts[i].price; // 所有价格加起来
}
}
total = total + '00' // vant weApp 中 <van-submit-bar>组件价格默认单位‘分’
this.setData({ // 最后赋值到data中渲染到页面
totalPrice: +total
});
},
三、增加、减少商品数量后调用该方法 getTotalPrice() 即可计算商品总价
onAdd(e) {
let gid = e.currentTarget.dataset.goodid,
carts = this.data.cartList
carts.map(el => {
if (el.goodid == gid) {
el.num += 1
return
}
})
this.setData({
cartList: carts
})
this.getTotalPrice()
},
四、全选，改变该按钮状态时，设置cartList 每一项isCheck值为true，并调用计算总价方法即可
五、无数据时自定义空白页面
