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

2020-11-15 18:02:16 阅读：252 来源： 互联网

标签：function 编码微信 ids 购物车 amount selectedProductId data 页面

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

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

页面如下：

页面代码如下：

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

标签：function,编码,微信,ids,购物车,amount,selectedProductId,data,页面
来源： https://www.cnblogs.com/pfm33/p/13976275.html

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

ICode9

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

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