微信小程序 “万利商城”实战之十三: 购物车商品清单的编码实现

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

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

页面如下 :

 微信小程序 “万利商城”实战之十三: 购物车商品清单的编码实现

页面代码如下 :

 1 <view class="container">
 2  
 3  
 4  <checkbox-group class="cbgroup1" bindchange="bindCheck">
 5  <view class="list1" wx:for="{{productList}}" wx:key="produceId">
 6    <view>
 7      <checkbox checked="true" value="{{item.productId}}"></checkbox>
 8    </view>
 9    <view>
10      <image class="image1" src="{{item.imageUrl}}" 
11      data-productid="{{item.productId}}" bindtap="tapDetail"></image>
12    </view>
13    <view class="detail1">
14     <text>{{index+1}}. {{item.productName}}</text>
15 
16     <view class="priceInfo1">
17       <text class="price1">¥{{item.price}}</text>
18       <text class="oriPrice1">{{item.originalPrice}}</text>
19     </view>
20 
21      <view class="qtyinfo1">
22        <text class="minus1" data-productid="{{item.productId}}" data-index="{{index}}" bindtap="tapMinus">-</text>
23        <input class="qty1" type="text" data-productid="{{item.productId}}" data-index="{{index}}" value="{{item.productQty}}" />
24        <text class="plus1" data-productid="{{item.productId}}" data-index="{{index}}" bindtap="tapPlus">+</text>      
25      </view>
26  
27     </view>
28 
29   </view>
30   </checkbox-group>
31 
32 
33  
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>
43  
44  </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的样式,该样式如下:

 1 .orderInfo1
 2 {
 3   position:fixed; 
 4   bottom: 0; 
 5   width: 100%;
 6   background-color: #f0f0f0;
 7 
 8   display: flex;
 9   flex-direction: row;
10   flex-wrap: nowrap;  
11   justify-content: space-between;
12 }

第3-4行是将该标签中的内容在页面底部固定,即使有多个商品滑动,这里也是固定的,便于用户的操作。

第8-11行是将标签中的元素分别靠左右两端展示,便于用户操作,其余css略。

 

接下来我们再来看shoppingcart.js中的代码:

1   data: {
2     productList: [],
3     selectedProductId:"0",
4     amount:0
5   },

在data属性中定义三个变量,productList用来记录添加到购物车中的商品清单,amount用来记录商品总金额 ,

selectedProductId用来记录用户选中的商品ID,多个以“,”分割,第一次进入时全部选中。

 

多选框的bindCheck事件函数代码如下:

 1   bindCheck:function(options)
 2   {
 3     let productIds = options.detail.value; 
 4     this.countAmount(productIds);
 5   },
 6 
 7   countAmount:function(ids)
 8   { 
 9     let arr1 = this.data.productList;
10 
11     if(arr1.length<1){return false;}
12 
13     let amt=0.00;
14     let selectIds=""; 
15     for(let i=0;i<arr1.length;i++) {
16       if (ids=="0" || ids.indexOf(arr1[i].productId.toString())>=0)
17       {
18         amt += arr1[i].price;
19       }
20       selectIds += ","+arr1[i].productId;
21     }
22     selectIds = selectIds.substring(1);
23 
24     //从bindCheck函数调用本函数
25     if(ids!="0") selectIds=ids;
26 
27     this.setData({amount:amt.toFixed(2)});
28     this.setData({selectedProductId:selectIds});
29   },

函数 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行。
1 success:function(res){
2     var products=res.data; 
3    _this.setData({productList:products});
4    _this.countAmount("0");
5 }


下订单事件函数 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中新建页面orders就可以看到执行的效果了。

 

 

 

上一篇:入侵检测综述


下一篇:ODOO Tree Form 自定义按钮【基于odoo12,odoo13】