微信小程序 “萬利商城”實戰之十三： 購物車商品清單的顯示及生成訂單的編碼實現

總體設計 ：用戶點到購物車頁面后顯示添加到購物車的商品清單，

用戶可以刪除某個商品，更改購買的商品數量，並勾選商品進行支付。

頁面如下 ：

 

頁面代碼如下 ：

<view class="container">
 
 
 4 <checkbox-group class="cbgroup1" bindchange="bindCheck">
 <view class="list1" wx:for="{{productList}}" wx:key="produceId">
 6 <view> 7 <checkbox checked="true" value="{{item.productId}}"></checkbox> 8 </view>
   <view>
     <image class="image1" src="{{item.imageUrl}}" 
     data-productid="{{item.productId}}" bindtap="tapDetail"></image>
   </view>
   <view class="detail1">
14 <text>{{index+1}}. {{item.productName}}</text>

16 <view class="priceInfo1"> 17 <text class="price1">￥{{item.price}}</text> 18 <text class="oriPrice1">{{item.originalPrice}}</text> 19 </view>

     <view class="qtyinfo1">
       <text class="minus1" data-productid="{{item.productId}}" data-index="{{index}}" bindtap="tapMinus">-</text>
       <input class="qty1" type="text" data-productid="{{item.productId}}" data-index="{{index}}" value="{{item.productQty}}" />
       <text class="plus1" data-productid="{{item.productId}}" data-index="{{index}}" bindtap="tapPlus">+</text>      
     </view>
 
    </view>

  </view>
30 </checkbox-group>


 
34 <view class="orderInfo1"> 35 <view> 36 <text>總金額:</text> 37 <text class="amount1">{{amount}}</text> 38 </view> 39 <view> 40 <button class="order1" bindtap="bindOrder">下訂單</button> 41 </view> 42 </view>
 
 </view>

和之前的index.wxml不同，此頁面中加入一些新的頁面控件（具體見紅色代碼標注的部分 ），

1 .

在小程序中，多選框要放到 <checkbox-group class="cbgroup1" bindchange="bindCheck"> </checkbox-group>之中，

當用戶選擇或取消選擇的時候，會觸發bindchange事件，在該事件要將總金額從新計算后更新到頁面中。

2 .

顯示商品名稱和序號的地方<text>{{index+1}}. {{item.productName}}</text>我們將索引+1使得頁面的編號是從1開始的，

這樣比較符號用戶習慣。

3 .

顯示價格的地方我們對價格的字體加大並用紅色顯示，提醒賣家注意，同時將原價加了刪除線，讓買家有個對比，

增加賣家購買的幾率。

 

<view class="priceInfo1"> <text class="price1">￥{{item.price}}</text> <text class="oriPrice1">{{item.originalPrice}}</text> </view>

4 .

對於底部價格下訂單的部分標記如下：

 

34 <view class="orderInfo1"> 35 <view> 36 <text>總金額:</text> 37 <text class="amount1">{{amount}}</text> 38 </view> 39 <view> 40 <button class="order1" bindtap="bindOrder">下訂單</button> 41 </view> 42 </view>

 

我們定義了一個orderInfo1的樣式，該樣式如下：

.orderInfo1
{
  position:fixed; 
  bottom: 0; 
  width: 100%;
  background-color: #f0f0f0;

  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;  
  justify-content: space-between;
}

第3-4行是將該標簽中的內容在頁面底部固定，即使有多個商品滑動，這里也是固定的，便於用戶的操作。

第8-11行是將標簽中的元素分別靠左右兩端展示，便於用戶操作，其余css略。

 

接下來我們再來看shoppingcart.js中的代碼：

  data: {
    productList: [],
    selectedProductId:"0",
    amount:0
  },

在data屬性中定義三個變量，productList用來記錄添加到購物車中的商品清單，amount用來記錄商品總金額 ，

selectedProductId用來記錄用戶選中的商品ID，多個以“，”分割，第一次進入時全部選中。

 

多選框的bindCheck事件函數代碼如下：

  bindCheck:function(options)
  {
    let productIds = options.detail.value; 
    this.countAmount(productIds);
  },

  countAmount:function(ids)
  { 
    let arr1 = this.data.productList;

    if(arr1.length<1){return false;}

    let amt=0.00;
    let selectIds=""; 
    for(let i=0;i<arr1.length;i++) {
      if (ids=="0" || ids.indexOf(arr1[i].productId.toString())>=0)
      {
        amt += arr1[i].price*arr1[i].productQty;
      }
      selectIds += ","+arr1[i].productId;
    }
    selectIds = selectIds.substring(1);

    //從bindCheck函數調用本函數
    if(ids!="0") selectIds=ids;

    this.setData({amount:amt.toFixed(2)});
    this.setData({selectedProductId:selectIds});
  },

函數 bindCheck:function(options){}只有兩行代碼，第一行是獲取選中的商品productId值，多個值用“,”連接，
第二行調用countAmount:function(ids){}去重新計算商品總金額，加總后的金額用函數
this.setData({amount:amt.toFixed(2)});設置給data屬性中定義的amount變量達到更新頁面金額的目的。this.setData({selectedProductId:selectIds});的作用是將用戶選中的productId設置到data屬性
中的selectedProductId變量，當用戶點下訂單的時候根據selectedProductId去更新數據庫中購物車表，
確保生成訂單中的商品是用戶勾選的商品，沒有勾選的商品不要生成訂單。

 

注 ：用戶第一次進入到購物車頁面的時候要調用countAmout()函數計算amount，見第4行，
（另外，用戶在增加或減少商品數量時也要編寫相關的函數去更新金額）

success:function(res){
        var products=res.data;
        _this.setData({productList:products}); 
        _this.countAmount("0");
}

下訂單事件函數 bindOrder的代碼如下 ：

 1   bindOrder: function () {
 2     let ids = this.data.selectedProductId;
 3     if(ids=="") return false;
 4 
 5     var _this=this;
 6     wx.request({
 7       url: 'http://www.tm.com/webapi/generateOrder',
 8       data:{
 9         'selectedProductId':ids,
10         'selectedProductQty':'11,1'
11       },
12       method:'GET',
13       success:function(res){
14         //var products=res.data;
15         wx.redirectTo({
16           url: '../shoppingcart/orderDetail',
17         })
18       }
19     }) 
20     
21   },

此函數功能很簡單，先根據用戶選擇的商品及數量去更新數據庫並生成商品訂單，
更新成功后調用系統API函數wx.redirectTo()跳轉到訂單支付頁。
我們在shoppingcart文件夾中新建頁面orderDetail就可以看到執行的效果了。