微信小程序 “万利商城”实战之十三： 购物车商品清单的显示及生成订单的编码实现

总体设计 ：用户点到购物车页面后显示添加到购物车的商品清单，

用户可以删除某个商品，更改购买的商品数量，并勾选商品进行支付。

页面如下 ：

 

页面代码如下 ：

<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就可以看到执行的效果了。