微信小程序實戰 購物車功能

代碼地址如下：
http://www.demodashi.com/demo/12400.html

一、准備工作

軟件環境：微信開發者工具
官方下載地址：https://mp.weixin.qq.com/debug/wxadoc/dev/devtools/download.html

基本需求

• 顯示圖書基本信息：名稱、作者、描述、價格、數量。
• 點擊復選框進行toggle操作。當前選中，則變成未選中；當前未選中，則變成選中。
• 圖書數量的加減操作。
• 根據選中商品進行價格匯總。
• 全選/全不選。

目錄結構

二、程序實現步驟

復選框進行toggle操作。當前選中，則變成未選擇；當前未選中，則變成選中。購物車商品全部選中，全選按鈕為選中狀態。購物車商品全部未選中，全選按鈕為未選中狀態。

  /**
   * 用戶選擇購物車商品
   */
  checkboxChange: function (e) {
    console.log('checkbox發生change事件，攜帶value值為：', e.detail.value);
    var checkboxItems = this.data.goodList;
    var values = e.detail.value;
    for (var i = 0; i < checkboxItems.length; ++i) {
      checkboxItems[i].checked = false;
      for (var j = 0; j < values.length; ++j) {
        if (checkboxItems[i].isbn == values[j]) {
          checkboxItems[i].checked = true;
          break;
        }
      }
    }

    var checkAll = false;
    if (checkboxItems.length == values.length) {
      checkAll = true;
    }

    this.setData({
      'goodList': checkboxItems,
      'checkAll': checkAll
    });
    this.calculateTotal();
  },

商品的加減操作。當前數量大於1，可以進行加減操作；當前數量為1時，只能進行加操作。

  /**
   * 用戶點擊商品減1
   */
  subtracttap: function (e) {
    var index = e.target.dataset.index;
    var goodList = this.data.goodList;
    var count = goodList[index].count;
    if (count <= 1) {
      return;
    } else {
      goodList[index].count--;
      this.setData({
        'goodList': goodList
      });
      this.calculateTotal();
    }
  },
  
  /**
   * 用戶點擊商品加1
   */
  addtap: function (e) {
    var index = e.target.dataset.index;
    var goodList = this.data.goodList;
    var count = goodList[index].count;
    goodList[index].count++;
    this.setData({
      'goodList': goodList
    });
    this.calculateTotal();
  },

用戶點擊全選/全不選，遍歷購物車所有商品設置當前選中狀態。

  /**
   * 用戶點擊全選
   */
  selectalltap: function (e) {
    console.log('用戶點擊全選，攜帶value值為：', e.detail.value);
    var value = e.detail.value;
    var checkAll = false;
    if (value && value[0]) {
      checkAll = true;
    }

    var goodList = this.data.goodList;
    for (var i = 0; i < goodList.length; i++) {
      var good = goodList[i];
      good['checked'] = checkAll;
    }

    this.setData({
      'checkAll': checkAll,
      'goodList': goodList
    });
    this.calculateTotal();
  }

選中商品數量發生改變時，進行商品總數量和總價格的計算。

  /**
   * 計算商品總數
   */
  calculateTotal: function () {
    var goodList = this.data.goodList;
    var totalCount = 0;
    var totalPrice = 0;
    for (var i = 0; i < goodList.length; i++) {
      var good = goodList[i];
      if (good.checked) {
        totalCount += good.count;
        totalPrice += good.count * good.price;
      }
    }
    totalPrice = totalPrice.toFixed(2);
    this.setData({
      'totalCount': totalCount,
      'totalPrice': totalPrice
    })
  },

三、運行效果

微信小程序實戰 購物車功能

代碼地址如下：
http://www.demodashi.com/demo/12400.html

注：本文著作權歸作者，由demo大師代發，拒絕轉載，轉載需要作者授權