微信小程式的購物車功能

購物車

資料結構

Let list = [
  {
    id: 1,
    goods_name: "九江雙蒸 29.5°地道米酒 500ml*12瓶"
    num: 2,
    price: 120
  },
  {
    id: 1,
    goods_name: "天龍泉35度 500ml*6瓶"
    num: 1,
    price: 90
  },
]

單選

<view wx:for='{{list}}' wx:key='index' class='card'>
  <radio checked="{{item.isSelect}}"
         color="#c50c1e"
         bindtap="radioSelect"
         id='{{index}}'
         data-isSelect='{{item.isSelect|| false}}'>
  </radio>
</view>

對應的單選功能

// 單選
radioSelect(e) {
    let index = e.currentTarget.id;
    this.setData({
      	['list['+index+'].isSelect']: !e.currentTarget.dataset.isSelect
    });
    this.selectAllCheck(); // 是否全選
},

全選

<radio checked="{{isSelectAll}}"
       color="#c50c1e"
       bindtap="radioSelectALL">全選
</radio>

對應的全選功能

// 全選
radioSelectALL() {
    let isSelectAll = !this.data.isSelectAll;
    let list = this.data.list;
    list.forEach(item =>item.isSelect = isSelectAll);
    this.setData({
        isSelectAll,
        list
    })
},

全選檢查// 單選要檢查是否已單選完所有選項

// 是否全選
selectAllCheck() {
    let isSelectAll = !this.data.list.filter(item =>!item.isSelect).length;
    if (this.data.isSelectAll != isSelectAll){
        this.setData({
          	isSelectAll
        })
    }
},

計價

<view style="color:red;">共計：{{total||0.00}}元</view>

對應計價功能
函式reduce有兩個位置引數，第一個是累加器，另一個是迭代值，它返回累加值

// 計價
calculateTotalPrice() {
    let total = 0;
    let list = this.data.list.filter(item =>item.isSelect);
    total = list.reduce((sum, x) => sum + x.price*x.num, 0);
    this.setData({
      	total: total.toFixed(2)
    })
},

先篩選獲取已選的選項，總價為選項的單價*數量，累計起來 =>或是這樣:

// 計價
calculateTotalPrice() {
    let total = 0;
    let goods = this.data.list;
    for(let i in goods) {
        if (goods[i].isSelect) {
          total+= goods[i].price*goods[i].num;
        }
    }
    this.setData({
      	total: total.toFixed(2)
    })
},

商品數量增減

<view class='num-box'>
  <p bindtap='increaseOrDecrease' id='-1' data-index='{{index}}'>-</p>
  <input value="{{item.num}}"
         placeholder="1"
         type='number'
         maxlength="3"
         bindblur="userInput"
         data-index="{{index}}">
  </input>
  <p bindtap='increaseOrDecrease' id='1' data-index='{{index}}'>+</p>
</view>

對應的加減

 // 數量增減按鈕
increaseOrDecrease(e) {
    let index = e.currentTarget.dataset.index;
    let item = this.data.list[index];
    let number = ~~item.num + ~~e.currentTarget.id;
    this.setData({
      	['list['+index+'].num']:  number>0?number:1
    });
    // TODO 提交後臺更新數量...
    // 如果選中就重新計價...
},

 // 數量輸入
userInput(e) {
    let number = e.detail.value;
    let index = e.currentTarget.dataset.index;
    if (!number||number<1||isNaN(number)) number = 1; // 輸入校驗
    this.setData({
      ['list['+index+'].num']:  number
    });
    // TODO 提交後臺更新數量...
    // 如果選中就重新計價...
},

刪除商品

// 刪除 
deleteCartItem() {
  // 是否勾選有商品....
  wx.showModal({
    cancelColor: '提示！',
    content: '是否要刪除該商品？',
    success: res =>{
      if (res.confirm) {
        wx.showLoading({title:'正在刪除'});
        let list = this.data.list;
        for (let i = 0; i < list.length; i++) {
            if (list[i].isSelect) {
              // TODO 請求後臺刪除...
              list.splice(i, 1);
              i--;
            }
        } 
        this.setData({list});
      }
    }
  })
},