当前位置 博文首页 > 文章内容

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

    作者: 栏目:未分类 时间:2020-11-15 18:00:09

    本站于2023年9月4日。收到“大连君*****咨询有限公司”通知
    说我们IIS7站长博客,有一篇博文用了他们的图片。
    要求我们给他们一张图片6000元。要不然法院告我们

    为避免不必要的麻烦,IIS7站长博客,全站内容图片下架、并积极应诉
    博文内容全部不再显示,请需要相关资讯的站长朋友到必应搜索。谢谢!

    另祝:版权碰瓷诈骗团伙,早日弃暗投明。

    相关新闻:借版权之名、行诈骗之实,周某因犯诈骗罪被判处有期徒刑十一年六个月

    叹!百花齐放的时代,渐行渐远!



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

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

    页面如下 :

     

    页面代码如下 :

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