简单的一类商品购物车
- 效果图
主要代码
- js
// pages/user/shoppingCart/shoppingCart.js
const computedBehavior = require('miniprogram-computed')
Component({
behaviors: [computedBehavior],
data: {
payment: false,
allState:false,
num:0,
shoppingList: [{//商品列表
state:false,
price:55,
number:5
},
{
state: false,
price: 54,
number: 1
},
{
state: false,
price: 1.7,
number: 3
}]
},
// 计算属性但不允许修改data里面的值所以我们使用watch属性
watch: {
//监听所有子数据字段的变化,使用通配符 **
'shoppingList.**': function(data){
let length = data.length
//flag等于length时说明商品为全选
let flag=0
for (let i=0;i<length;i++){if (data[i].state === true) { flag++}}
// 利用长度判断是否为全选状态
if (flag === length && length!=0){
this.setData({
allState: true
})
}
else {
this.setData({
allState: false
})
}
}
},
computed: {
totalPrice(data) {
// 注意: computed 函数中不能访问 this ,只有 data 对象可供访问
// 这个函数的返回值会被设置到 this.data.sum 字段中
let total=0.00
//计算购物车总价格
data.shoppingList.forEach((item)=> {
// 如果item.state为true说明该商品已选择
if(item.state===true){
total = item.price * item.number + to