小程序多个商品数量之间的增减与总价

wxml:

<view class="container">
  <block  wx:for="{{carts}}"  wx:key="key">
    <view class='carts'>
      <text class='name'>{{item.title}}</text>
      <view class='subadd'>
        <text class='sub' data-index="{{index}}" bindtap='sub'>-</text>
        <text class='num'>{{item.num}}</text>
        <text class='add' data-index="{{index}}" bindtap='add'>+</text>
      </view>
      <text class='deleted' bindtap="deleteList" data-index="{{index}}">X</text>
    </view>
  </block>
  <view>总价：{{totalPrice}}</view>
</view>

js文件设置一些初始值，模拟从服务器上获取的值，以便进行操作

data: {
    carts:[
      {
        id:1,
        title:"新鲜芹菜 半斤1",
        num:0,
        price:1,
        selected:false
      },
      {
        id: 2,
        title: "新鲜芹菜 半斤2",
        num: 0,
        price: 1,
        selected: false
      },
      {
        id: 3,
        title: "新鲜芹菜 半斤3",
        num: 0,
        price: 1,
        selected: false
      },
      {
        id: 4,
        title: "新鲜芹菜 半斤4",
        num: 0,
        price: 1,
        selected: false
      },
      {
        id: 5,
        title: "新鲜芹菜 半斤5",
        num: 0,
        price: 1,
        selected: false
      },
    ],
    text:"nihao",
    selectAllStatus:false,
    totalPrice:0
  },

商品数量之间的加减操作

sub(e){
    const index = e.currentTarget.dataset.index;
    let carts = this.data.carts;
    let num = carts[index].num;
    if(num<=0){
      return false;
    }
    num = num - 1;
    carts[index].num = num;
    this.setData({
      carts:carts
    })
    this.getTotalPrice()
  },
  add(e){
    const index = e.currentTarget.dataset.index;
    let carts = this.data.carts;
    let num = carts[index].num;
    num = num + 1;
    carts[index].num = num;
    this.setData({
      carts: carts
    })
    this.getTotalPrice()
  },

计算所有商品的总价格

getTotalPrice(e){
    let carts = this.data.carts;
    let sum = 0;
    for(let i=0;i<carts.length;i++){
      sum += carts[i].num*carts[i].price;
    }
    this.setData({
      totalPrice:sum.toFixed(2),
      carts:carts
    })
  },

各个商品的删除操作

deleteList(e){
    const index = e.currentTarget.dataset.index;
    let carts = this.data.carts;
    carts.splice(index,1);//splice(2,0)=>添加 splice(2，1)=>删除 splice(2,1,"Toll")=>将下标为2的值修改为Toll
    this.setData({
      carts:carts
    })
 },

购物车中全选与全不选功能

selectAll(e){
//设置selectAllStatus的状态，来进行判断选中与不选中之间的差别
    let carts = this.data.carts;
    let selectAllStatus = this.data.selectAllStatus;
    selectAllStatus = !selectAllStatus;
    for(let i=0;i<carts.length;i++){
      carts[i].selected = selectAllStatus
    }
    this.setData({
      selectAllStatus:selectAllStatus,
      carts:carts
    })
  }