前言

 以往的購(gou)物車，基本都是通(tong)過大量的 DOM 操作來實現。微信小程(cheng)序(xu)其實跟 vue.js 的用法(fa)非(fei)常像，接下(xia)來就看看小程(cheng)序(xu)可(ke)以怎樣實現購(gou)物車功能。

需求

先來弄清楚購物車(che)的需求(qiu)。

• 單選、全選和取消(xiao)，而(er)且會隨著選中的商品計算(suan)出總(zong)價

• 單個商品購買數量的增加(jia)和減少

• 刪除(chu)商(shang)品。當(dang)購物車為空時，頁面會變(bian)為空購物車的布局(ju)

 根(gen)據設計圖，我們可以(yi)先實現靜(jing)態(tai)頁(ye)面。接(jie)下來，再看看一個購物車(che)需要什么(me)樣的數據。

• 首先是一個商(shang)品列(lie)表(carts)，列(lie)表里(li)的單(dan)品需要：商(shang)品圖(image)，商(shang)品名(title)，單(dan)價(price)，數量(num)，是否選中(selected)，商(shang)品id(id)

• 然后左下角的全(quan)選，需要一個字段(selectAllStatus)表示是否全(quan)選了

• 右(you)下(xia)角(jiao)的總(zong)價(totalPrice)

• 最后需要知道(dao)購(gou)物車是否(fou)為空(hasList)

 知道了需要這些(xie)數據，在頁面初(chu)始化的時(shi)候我們先定義好(hao)這些(xie)。

代碼實現

初始化

Page({
    data: {
        carts:[],               // 購物車列(lie)表
        hasList:false,          // 列表是否(fou)有數(shu)據
        totalPrice:0,           // 總價，初始(shi)為0
        selectAllStatus:true    // 全選狀(zhuang)態(tai)，默認(ren)全選
    },
    onShow() {
        this.setData({
          hasList: true,        // 既然有數據了，那設為true吧
          carts:[
            {id:1,title:'新鮮芹(qin)菜 半斤(jin)',image:'/image/s5.png',num:4,price:0.01,selected:true},
            {id:2,title:'素(su)米(mi) 500g',image:'/image/s6.png',num:1,price:0.03,selected:true}
          ]
        });
      },
})

購(gou)物車(che)列表數據我們(men)一(yi)般是通過請求服務器拿到的數據，所以我們(men)放(fang)在生命周期函(han)數里給 carts 賦值。想(xiang)到每次進到購(gou)物車(che)都要獲取購(gou)物車(che)的最新狀(zhuang)態，而onLoad和onReady只在初(chu)始化的時候執行一(yi)次，所以我需要把請求放(fang)在 onShow 函(han)數里。(這里先拿點假(jia)數據冒充一(yi)下吧)

布局 wxml

修好之前(qian)寫(xie)好的靜(jing)態頁(ye)面，綁定(ding)數據。

 <view class="cart-box">
    <!-- wx:for 渲染購物車(che)列表 -->
    <view wx:for="{{carts}}">
    
        <!-- wx:if 是否選擇顯示不同圖標(biao) -->
        <icon wx:if="{{item.selected}}" type="success" color="red" bindtap="selectList" data-index="{{index}}" />
        <icon wx:else type="circle" bindtap="selectList" data-index="{{index}}"/>
        
        <!-- 點擊商品圖片(pian)可跳轉(zhuan)到商品詳情 -->
        <navigator url="../details/details?id={{item.id}}">
            <image class="cart-thumb" src="{{item.image}}"></image>
        </navigator>
        
        <text>{{item.title}}</text>
        <text>￥{{item.price}}</text>
        
        <!-- 增加減少數量(liang)按鈕 -->
        <view>
            <text bindtap="minusCount" data-index="{{index}}">-</text>
            <text>{{item.num}}</text>
            <text bindtap="addCount" data-index="{{index}}">+</text>
        </view>
        
        <!-- 刪除按(an)鈕(niu) -->
        <text bindtap="deleteList" data-index="{{index}}"> × </text>
    </view>
</view>

<!-- 底部(bu)操作欄 -->
<view>
    <!-- wx:if 是否全選(xuan)顯示不同(tong)圖標 -->
    <icon wx:if="{{selectAllStatus}}" type="success_circle" color="#fff" bindtap="selectAll"/>
    <icon wx:else type="circle" color="#fff" bindtap="selectAll"/>
    <text>全選</text>
    
    <!-- 總價 -->
    <text>￥{{totalPrice}}</text>
</view>

計算總價

總價 = 選中的商品1的 價格 數量 + 選(xuan)中的(de)商品2的(de) 價格 數量 + ...
根據(ju)公式，可(ke)以得到

getTotalPrice() {
    let carts = this.data.carts;                  // 獲取(qu)購物車列表
    let total = 0;
    for(let i = 0; i<carts.length; i++) {         // 循環列表得到每個數據
        if(carts[i].selected) {                   // 判斷選中才會計(ji)算價(jia)格
            total += carts[i].num * carts[i].price;     // 所有價(jia)格加起來
        }
    }
    this.setData({                                // 最后賦值(zhi)到data中(zhong)渲染到頁面(mian)
        carts: carts,
        totalPrice: total.toFixed(2)
    });
}

頁面中的其(qi)他操作會導致總價格變化的都需要調用(yong)該方(fang)法。

選擇事件

點擊(ji)時選中，再點擊(ji)又變(bian)成沒(mei)選中狀態(tai)，其實就是改變(bian) selected 字段。通過 data-index="{{index}}" 把當前(qian)商(shang)品在列表數組中的下標傳給事件。

selectList(e) {
    const index = e.currentTarget.dataset.index;    // 獲取data- 傳(chuan)進來的index
    let carts = this.data.carts;                    // 獲取購物車列表
    const selected = carts[index].selected;         // 獲取當前商品(pin)的選中狀態
    carts[index].selected = !selected;              // 改變狀態
    this.setData({
        carts: carts
    });
    this.getTotalPrice();                           // 重新獲(huo)取總價
}

全選事件

全選(xuan)就是根據全選(xuan)狀(zhuang)態 selectAllStatus 去改變每個商品(pin)的(de) selected

selectAll(e) {
    let selectAllStatus = this.data.selectAllStatus;    // 是否(fou)全(quan)選狀態
    selectAllStatus = !selectAllStatus;
    let carts = this.data.carts;

    for (let i = 0; i < carts.length; i++) {
        carts[i].selected = selectAllStatus;            // 改變所(suo)有(you)商品狀態
    }
    this.setData({
        selectAllStatus: selectAllStatus,
        carts: carts
    });
    this.getTotalPrice();                               // 重新(xin)獲(huo)取總價
}

增減數量

點(dian)擊+號(hao)，num加1，點(dian)擊-號(hao)，如(ru)果num > 1，則減1

// 增加數量
addCount(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();
},
// 減少(shao)數(shu)量(liang)
minusCount(e) {
    const index = e.currentTarget.dataset.index;
    let carts = this.data.carts;
    let num = carts[index].num;
    if(num <= 1){
      return false;
    }
    num = num - 1;
    carts[index].num = num;
    this.setData({
      carts: carts
    });
    this.getTotalPrice();
}

刪除商品

點擊(ji)刪(shan)除(chu)按(an)鈕則從購物車列表中(zhong)刪(shan)除(chu)當(dang)前(qian)元素，刪(shan)除(chu)之后如(ru)果購物車為(wei)空，改(gai)變購物車為(wei)空標識(shi)hasList為(wei)false

deleteList(e) {
    const index = e.currentTarget.dataset.index;
    let carts = this.data.carts;
    carts.splice(index,1);              // 刪除購(gou)物車(che)列表里這個商品
    this.setData({
        carts: carts
    });
    if(!carts.length){                  // 如果購(gou)物(wu)車為空
        this.setData({
            hasList: false              // 修改標識為false，顯示購物(wu)車為空頁(ye)面(mian)
        });
    }else{                              // 如果(guo)不為空
        this.getTotalPrice();           // 重新(xin)計算總價格
    }   
}

總結

雖然(ran)一個購物車功能比較簡單，但是里面涉(she)及到微信小程序的知(zhi)識點還是比較多的，適合新手(shou)練習(xi)掌握。

完整的小程(cheng)序商城demo含購物(wu)車，請戳：wxapp-mall

項目下載：wxapp-mall-master.zip