小程序购物车简易实现

要实现购物车首先对必要字段整理
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，并调用计算总价方法即可
五、无数据时自定义空白页面