小程序多個商品數量之間的增減與總價

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
    })
  }