小程序-简单的购物车逻辑

1.data

/**
   * 页面的初始数据
   */
  data: { 
    hasList: true,//购物车是否为空
    totalPrice: 0, // 总价
    selectAllStatus: true,//全选状态
    items: [{ checked: false}],
    cartList: [] // 商品列表
  },
           

2.数量编辑

<!-- wxml --> 
		<view class="stepper">
          <!-- 减号 -->  
          <text 
          class="sign {{num <= 1 ? 'disabled' : 'normal'}}" 
          bindtap="delCount"
          data-index="{{index}}">-</text>  
          <!-- 数值 -->  
          <input 
          class="number" 
          type="number" 
          data-index="{{index}}"
          bindchange="bindManual" value="{{item.number}}"  
          />  
          <!-- 加号 -->  
          <text 
          class="sign {{num >= 10 ? 'disabled' : 'normal'}}"
          bindtap="addCount" data-index="{{index}}">+</text> 
        </view>
           

/* js */
  /* 点击减号 */
  delCount: function (e) {
    const index = e.target.dataset.index
    let num = this.data.cartList[index].number;
    // 如果大于1时，才可以减  
    if (num > 1) {
      num--;
    }
    // 只有大于一件的时候，才能normal状态，否则disable状态  
    var minusStatus = num <= 1 ? 'disabled' : 'normal';
    // 将数值与状态写回  
    const number = 'cartList[' + index + '].number'
    this.setData({
      [number]: num,
      minusStatus: minusStatus
    });
    this.getTotalPrice()

  },

  /* 点击加号 */
  addCount: function (e) {
    console.log(e)
    const index = e.target.dataset.index
    let num = this.data.cartList[index].number;
    // 不作过多考虑自增1  
    num++;
    // 只有大于一件的时候，才能normal状态，否则disable状态  
    let minusStatus = num < 1 ? 'disabled' : 'normal';
    // 将数值与状态写回  
    const number = 'cartList[' + index + '].number'
    this.setData({
      [number]: num,
      minusStatus: minusStatus
    });
    this.getTotalPrice()

  },

  /* 输入框事件 */
  bindManual: function (e) {
    console.log(e)
    const index = e.currentTarget.dataset.index
    const number = 'cartList[' + index + '].number'
    var num = e.detail.value;
    // 将数值与状态写回  
    this.setData({
      [number]: num
    });
    this.getTotalPrice()

    console.log(this.data.cartList)
  },
           

3.单条数据的选中和全选

// 计算总价
  getTotalPrice() {
    let carts = this.data.cartList;                  // 获取购物车列表
    let total = 0;
    for (let i = 0; i < carts.length; i++) {         // 循环列表得到每个数据
      if (carts[i].checked) {                     // 判断选中才会计算价格
        total += carts[i].number * carts[i].price;   // 所有价格加起来
      }
    }
    this.setData({                                // 最后赋值到data中渲染到页面
      cartList: carts,
      totalPrice: total.toFixed(2)
    });
  },
  // 全选
  checkAll:  function () {
    let selectAllStatus = this.data.selectAllStatus 
    selectAllStatus = !selectAllStatus 

    let cartList = this.data.cartList
    console.log(111,cartList)
    
    for(let i = 0;i<cartList.length;i++){
      cartList[i].checked = selectAllStatus
    }
   
    this.setData({
      selectAllStatus: selectAllStatus,
      cartList: cartList
    })
    this.getTotalPrice()
  },

  // 点击选择按钮切换选中状态
  checkboxChange: function (e) {
    const that = this
    const index = e.currentTarget.dataset.index
    const cartList = 'cartList[' + index +'].checked'
    that.setData({
      [cartList]: e.detail.value.length > 0 ? true : false
    });

    let arr = this.data.cartList.filter(v => {
      return v.checked === false
    })
	// 当列表切换状态时，相应的改变全选状态
      this.setData({
        selectAllStatus: arr.length?false:true
      })
    this.getTotalPrice()
  },