简单的一类商品购物车

简单的一类商品购物车

• 效果图

主要代码

• 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说明该商品已选择