• 设为首页
  • 点击收藏
  • 手机版
    手机扫一扫访问
    迪恩网络手机版
  • 关注官方公众号
    微信扫一扫关注
    公众号

微信小程序 “万利商城”实战之十: 商品列表页加入购物车功能的实现 ...

原作者: [db:作者] 来自: [db:来源] 收藏 邀请

加入购物车功能的基本实现是这样的:

用户点击“加入购物车” , 小程序将该商品信息发送到服务器记录下来,

同时页面上“加入购物车”的按钮变成一个输入框,用户可以增加/减少商品数量,

当用户点“购物车” Tabbar时,切换到shoppingcart/shoppingcart.wxml页面,

此页面显示购物车中的商品列表,页面效果如下 :

接下来我们就来编码完成加入购物车的功能。

先在index.wxml中加入如下的代码 ,见红色部分:

 1 <view class="detail1">
 2     <text>{{index}} {{item.productName}}</text>
 3     <text>{{item.price}}</text>
 4     <text>{{item.originalPrice}}</text>
 5     
 6     <view class="qtyinfo1" wx:if="{{item.inShoppingCart==0}}">
 7       <button class="button1" data-productid="{{item.productId}}" data-index="{{index}}" bindtap="addToShoppingCart">加入购物车</button>
 8     </view>
 9     <view class="qtyinfo1" wx:else>
10       <text class="minus1" data-productid="{{item.productId}}" data-index="{{index}}" bindtap="tapMinus">-</text>
11       <input class="qty1" type="text" data-productid="{{item.productId}}" data-index="{{index}}" value="{{item.productQty}}" />
12       <text class="plus1" data-productid="{{item.productId}}" data-index="{{index}}" bindtap="tapPlus">+</text>      
13     </view>
14 
15   </view>

  1 . 首先要在productList这个json数组中加入2个字段 “inShoppingCart”和"productQty" ,

“inShoppingCart”用来记录当前商品是否已经被加入了购物车,"productQty"用来记录用户购买的数量。

代码如下:

 1 var products=[
 2           {\'productId\':111,\'productName\':\'女装T恤简洁11\',\'price\':12.9,\'originalPrice\':22.9,\'imageUrl\':\'../../images/product11.jpg\',
 3           \'inShoppingCart\':0,\'productQty\':1},
 4           {\'productId\':122,\'productName\':\'女装T恤简洁22\',\'price\':15.9,\'originalPrice\':25.9,\'imageUrl\':\'../../images/product22.jpg\',
 5           \'inShoppingCart\':1,\'productQty\':1},
 6           {\'productId\':133,\'productName\':\'女装T恤简洁33\',\'price\':18.9,\'originalPrice\':38.9,\'imageUrl\':\'../../images/product33.jpg\',
 7           \'inShoppingCart\':0,\'productQty\':1},
 8           {\'productId\':144,\'productName\':\'女装T恤简洁44\',\'price\':18.9,\'originalPrice\':38.9,\'imageUrl\':\'../../images/product44.jpg\',
 9           \'inShoppingCart\':0,\'productQty\':1}
10         ];

 

2 . 当用户点“加入购物车”按钮时候要将按钮隐藏起来,变成可以加减商品数量的控件,所以在index.wxml中需要做一个判断,

微信小程序在标签中加判断用wx:if这个属性,可以搭配wx:else来使用,这里我们用wx:if="{{item.inShoppingCart==0}}"

做判断

3 . <button class="button1" data-productid="{{item.productId}}" data-index="{{index}}"

bindtap="addToShoppingCart">加入购物车</button>是一个按钮控件,

上面定义了一个点击函数addToShoppingCart,需要在index.js中完成相关逻辑,

data-productid="{{item.productId}}" 是将当前商品的productId值传给addToShoppingCart 函数,

小程序的传值非常简单,任意定义一个变量(这里是productId),在变量前面加上data- 作为属性,后面放值就可以了。

然后在addToShoppingCart 函数中就可以用下面的方式取值来用:

let productId = options.currentTarget.dataSet.productid; 

4 . <view class="qtyinfo1" wx:else></view>用来显示一个输入框和加/减数量的按钮,让用户可以增减商品数量。

5 . bindtap="tapMinus"bindtap="tapPlus" 定义了2个方法tapMinustapPlus

分别对应增加数量和减少数量的操作,我们要在index.js中实现这个逻辑。

data-productid="{{item.productId}}" data-index="{{index}}"是传递给函数的值。

 

index.wxss中定义的样式如下 :

 1 .button1   /*加入购物车按钮样式,height和line-height设置成一样让文字垂直居中对齐*/ 2 {
 3   height: 80rpx;
 4   line-height: 80rpx;
 5   background-color: antiquewhite;
 6 }
 7 .qtyinfo1    /*加减数量区块的样式及标签布局方式*/
 8 { 
 9   display: flex;
10   flex-direction: row;
11   flex-wrap: nowrap; 
12   margin-left: 60rpx;
13 }
14 .plus1{      /*加数量的样式*/
15   width: 80rpx;
16   height: 80rpx;
17   line-height: 80rpx;
18   border:solid 4rpx #c0c0c0;
19   border-left: 0;
20   background-color: aquamarine;
21   font-size: 20pt;
22   text-align: center;
23   border-top-right-radius: 20rpx;   /*右上边框设置成圆角*/
24   border-bottom-right-radius: 20rpx;  /*右下边框设置成圆角*/
25 }
26 .qty1{
27   width: 120rpx;
28   height: 80rpx;
29   line-height: 80rpx;
30   border:solid 4rpx #c0c0c0;
31   background-color: aquamarine;
32   text-align: center;
33 }
34 .minus1{
35   width: 80rpx;
36   height: 80rpx;
37   line-height: 80rpx;
38   border:solid 4rpx #c0c0c0;
39   border-right:0;
40   background-color: aquamarine;
41   font-size: 20pt;
42   text-align: center;
43   border-top-left-radius: 20rpx;   /*左上边框设置成圆角*/
44   border-bottom-left-radius: 20rpx;   /*左下边框设置成圆角*/
45 }

 

index.js中给对应的事件编码 :

 1   addToShoppingCart: function (options) { 
 2     let productId = options.currentTarget.dataset.productid;
 3     let index = options.currentTarget.dataset.index;
 4 
 5     this.saveShoppingCart(1, index, productId, 1);
 6   },
 7 
 8   tapMinus: function (options) { 
 9     let productId = options.currentTarget.dataset.productid;
10     let index = options.currentTarget.dataset.index;
11 
12     let qty = this.data.productList[index].productQty
13     let newQty = qty-1; 
14     if(newQty<1)
15     {
16       wx.showToast({title: \'数量不能小于1!\' });
17       return false;
18     }
19  
20     this.saveShoppingCart(2, index, productId, newQty);
21   },
22   tapPlus: function (options) { 
23     let productId = options.currentTarget.dataset.productid;
24     let index = options.currentTarget.dataset.index;
25 
26     let qty = this.data.productList[index].productQty
27     let newQty = qty+1;
28     if(newQty>99)
29     {
30       wx.showToast({title: \'数量不能大于99!\'});
31       return false;
32     }
33  
34     this.saveShoppingCart(3, index, productId, newQty);
35   },
36 
37   saveShoppingCart: function (operationType, productIndex, productId, productQty) {  
38     var _this=this;
39     wx.request({
40       url: \'http://www.tm.com/webapi/shoppingcart\',
41       data:{
42         \'operationType\':operationType,
43         \'productIndex\':productIndex,
44         \'productId\':productId,
45         \'productQty\':productQty
46       },
47       method:\'GET\',
48       success:function(res){
49 
50         _this.setData({[\'productList[\'+productIndex+\'].productQty\']:productQty});
51         wx.showToast({title: \'Success\'});
52         if (operationType=1)
53         {
54           _this.setData({[\'productList[\'+productIndex+\'].inShoppingCart\']:1});
55         }
56       }
57     })
58   },

 

不论是添加商品到购物车,还是增减购物车中商品数量,都需要将商品信息(包括商品名称、价格、数量)保存到服务器,

本质上都是对数据库中商品的数量做的修改,所以我们定义了一个公共的函数

saveShoppingCart: function (operationType, productIndex, productId, productQty) { } 来执行数据库操作,各个函数说明如下:

加入购物车:

1 addToShoppingCart: function (options) { 
2     let productId = options.currentTarget.dataset.productid;  //获取index.wxml中 传递过来的productId值,注意名称与data-productId一致
3     let index = options.currentTarget.dataset.index;  //获取index.wxml中 传递过来的index值
4     //将当前商品的索引值 、productId值、数量传递到函数中(加入购物车可以理解为商品数量是0+1),然后更新到服务器上处理。
5     this.saveShoppingCart(1, index, productId, 1);  
6   },

 减少商品数量

 1 tapMinus: function (options) { 
 2     let productId = options.currentTarget.dataset.productid;  //获取index.wxml中 传递过来的productId值,注意名称与data-productId一致
 3     let index = options.currentTarget.dataset.index;  //获取index.wxml中 传递过来的index值
 4     
 5     let qty = this.data.productList[index].productQty;  //抓取当前数量
 6     let newQty = qty-1; //数量-1
 7     if(newQty<1)  //数量小于1时给出提示并终止后面的操作
 8     {
 9       wx.showToast({title: \'数量不能小于1!\' });
10       return false;
11     }
12     //将当前商品的索引值 、productId值、数量传递到函数中,然后更新到服务器上处理。
13     this.saveShoppingCart(2, index, productId, newQty);
14   },

增加商品数量 :

 1 tapPlus: function (options) { 
 2     let productId = options.currentTarget.dataset.productid;  //获取index.wxml中 传递过来的productId值,注意名称与data-productId一致
 3     let index = options.currentTarget.dataset.index;  //获取index.wxml中 传递过来的index值
 4 
 5     let qty = this.data.productList[index].productQty;  //抓取当前数量
 6     let newQty = qty+1;  //数量+1
 7     if(newQty>99)  //数量大于99时给出提示并终止后面的操作
 8     {
 9       wx.showToast({title: \'数量不能大于99!\'});
10       return false;
11     }
12     //将当前商品的索引值 、productId值、数量传递到函数中,然后更新到服务器上处理。
13     this.saveShoppingCart(3, index, productId, newQty);
14   },

 更新服务器 :

 1 saveShoppingCart: function (operationType, productIndex, productId, productQty) {  
 2     var _this=this;
 3     wx.request({
 4       url: \'http://www.tm.com/webapi/shoppingcart\',
 5       data:{  //将服务器需要的数据都传递过去,实际项目可以根据需要加其他的参数
 6         \'operationType\':operationType,
 7         \'productIndex\':productIndex,
 8         \'productId\':productId,
 9         \'productQty\':productQty
10       },
11       method:\'GET\',
12       success:function(res){
13         //服务器更新成功就用setData()函数将数量设置到该商品的输入框中, 只有调用此函数页面的值才会变化,
14         _this.setData({[\'productList[\'+productIndex+\'].productQty\']:productQty});
15         wx.showToast({title: \'Success\'});
16         if (operationType=1)
17         {//点加入购物车的按钮时需要用setData()函数更新inShoppingCart的值,按钮就会变成加减和输入框,让用户知道购买了此商品并可以去修改数量
18           _this.setData({[\'productList[\'+productIndex+\'].inShoppingCart\']:1});
19         }
20       }
21     })
22   },

 至此,添加商品到购物车的功能就完成了, 在服务器端需要设计一个购物车表 ,基本结构如下 :

字段 说明
product_id 商品编号
product_qty 购买数量
shoppingcart_key 购物车编号,多个商品加入购物车的时候这个值是相同的
add_time 创建时间
add_user 创建人

 

 服务器端的代码在介绍后端开发的时候单独讲,这里略过。

 


鲜花

握手

雷人

路过

鸡蛋
该文章已有0人参与评论

请发表评论

全部评论

专题导读
热门推荐
阅读排行榜

扫描微信二维码

查看手机版网站

随时了解更新最新资讯

139-2527-9053

在线客服(服务时间 9:00~18:00)

在线QQ客服
地址:深圳市南山区西丽大学城创智工业园
电邮:jeky_zhao#qq.com
移动电话:139-2527-9053

Powered by 互联科技 X3.4© 2001-2213 极客世界.|Sitemap