1.购物车功能基本上算是每个商城都有的功能，也是整个商城系统最重要的部分，购物车的做法有很多种，一般存放在本地缓存和数据库中比较常见，本文就是存放到了数据库中；

2.先放一张效果图：

3.

4.先分析下要实现的功能：

5.1.数量的加减

6.2.单选、多选、全选

7.3.根据选中商品单价和数量计算金额

8.wxml:

blockwx:if='{{hasList}}'!--购物车列表--viewclass="carts-list"viewwx:for="{{carts}}"class="carts-item"wx:key='cart'wx:item='item'!--//复选框--viewclass="carts-radio"imageclass="carts-select"bindtap="bindCheckbox"data-index="{{index}}"src="{{item.isSelect?'/img/icon/select.png':'/img/icon/n_select.png'}}"//view!--//商品信息--viewclass="carts-cnt"imageclass="carts-image"src="{{imghref}}{{item.goods_img}}"mode="aspectFill"/viewclass="carts-info"viewclass="carts-titleclamp2"{{item.goods_name}}/viewtextclass="carts-guige"{{item.guige}}ml/textviewclass="carts-subtitle"textclass="carts-pricec--f60"￥{{item.price}}/text/view/view/view!--//数量加减--viewclass="carts-num"textclass="minus"bindtap="bindMinus"data-index='{{index}}'-/textinputtype="number"bindinput="bindIptCartNum"data-index='{{index}}'value="{{item.num}}"/textclass="plusnormal"data-index='{{index}}'bindtap="bindPlus"+/text/view!--//删除--iconclass="carts-del"type="clear"size="16"color="#ccc"data-index="{{index}}"bindtap="bindCartsDel"//view/viewviewclass="carts-footer"viewclass="bottomfixed"viewclass="inner"viewclass="chkAll"bindtap="bindSelectAll"imageclass="allselect"src="{{selectAllStatus?'/img/icon/select.png':'/img/icon/n_select.png'}}"/text全选/text/viewviewclass="total"合计：em￥{{totalMoney}}/em/viewviewwx:if="{{totalCount!=0}}"class="btn-pay"bindtap='bindjiesuan'去结算({{totalCount}})/viewviewwx:elseclass="btn-paydisabled"去结算({{totalCount}})/view/view/view/view/blockblockwx:elseviewclass="content"viewstyle="margin-top:50px;width:100%;"viewstyle='font-size:15px;'购物车没有商品!/view/view/view/block

9.hasList用于判断购物车中是否有数据

!--//复选框--viewclass="carts-radio"imageclass="carts-select"bindtap="bindCheckbox"data-index="{{index}}"src="{{item.isSelect?'/img/icon/select.png':'/img/icon/n_select.png'}}"//view

10.这里的选择框我用了两个图片代替，一个是选中状态的图片，一个是非选中状态的图片，需要的话可以自行到iconfont去下载

11.wxss:

.c--f60{color:#f60;}.clamp1,.clamp2,.clamp3{display:-webkit-box!important;overflow:hidden;-webkit-box-orient:vertical;}.clamp1{-webkit-line-clamp:1;}.clamp2{-webkit-line-clamp:2;}.clamp3{-webkit-line-clamp:3;}.carts-list{padding:020rpx;}.carts-list.carts-item{border-top:1rpxsolid#e3e3e3;box-sizing:border-box;display:flex;align-items:center;justify-content:space-between;padding:20rpx10rpx;width:100%;position:relative;}.carts-list.carts-item:nth-child(1){border-top:0;}.carts-select{margin-top:5px;width:30px;height:30px;}.carts-item.carts-cnt{flex:1;padding:020rpx;}.carts-cnt.carts-image{float:left;margin-right:20rpx;height:150rpx;width:150rpx;}.carts-cnt.carts-info{display:flex;flex-direction:column;justify-content:space-between;min-height:150rpx;}.carts-cnt.carts-title{font-size:15px;}.carts-cnt.carts-guige{font-size:12px;}.carts-cnt.carts-subtitle{display:flex;flex-direction:row;font-size:15px;}.carts-list.carts-item.carts-del{position:absolute;top:20rpx;right:10rpx;}/*数量加减*/.carts-num{border:1rpxsolid#aaa;border-radius:5rpx;display:flex;align-items:center;align-self:flex-end;text-align:center;height:50rpx;}.carts-numinput{border-left:1rpxsolid#aaa;border-right:1rpxsolid#aaa;font-size:30rpx;font-family:arial;height:50rpx;line-height:50rpx;width:80rpx;}.carts-num.minus,.carts-num.plus{color:#000;text-align:center;line-height:50rpx;width:40rpx;}.carts-num.minus{font-size:30rpx;}.carts-num.minus.disabled{color:#ccc;}.carts-num.plus{font-size:34rpx;}.bottomfixed{position:fixed;display:flex;flex-direction:column;bottom:0;width:100%;height:120rpx;line-height:120rpx;background:#f5f5f5;}.bottomfixed.inner{display:flex;flex-direction:row;align-items:center;}.bottomfixed.inner.chkAll{font-size:28rpx;margin-right:40rpx;margin-left:20rpx;display:flex;flex-direction:row;align-items:center;}.bottomfixed.inner.chkAll.allselect{width:30px;height:30px;}.bottomfixed.inner.total{font-size:28rpx;}.bottomfixed.inner.totalem{color:#f60;}.btn-pay{position:absolute;right:0px;background:#FF5E3A;color:#fff;padding:010px;font-size:28rpx;}.disabled{background:#ccc;}.content{width:100%;height:100%;position:absolute;left:0;font-size:15px;color:#999;text-align:center;}

12.js:

Page({/***页面的初始数据*/data:{hasList:true,//购物车是否有数据totalMoney:0,//总金额selectAllStatus:false,//是否全选uid:0,//用户IDtotalCount:0,//数量carts:[],},//设置文本框值bindIptCartNum:function(e){constindex=e.currentTarget.dataset.index;varnum=e.detail.value;letcarts=this.data.carts;carts[index].num=num;this.setData({carts:carts});},/*点击减号*/bindMinus:function(e){constindex=e.currentTarget.dataset.index;letcarts=this.data.carts;letnum=carts[index].num;if(num=1){returnfalse;}num=num-1;carts[index].num=num;this.setData({carts:carts});this.getTotalPrice();},/*点击加号*/bindPlus:function(e){constindex=e.currentTarget.dataset.index;letcarts=this.data.carts;letnum=carts[index].num;num=num+1;carts[index].num=num;this.setData({carts:carts});this.getTotalPrice();},//删除商品bindCartsDel(e){varthat=this;wx.showModal({title:'提示',content:'您确定要删除吗？',success:function(res){if(res.confirm){//网络请求删除购物车数据}}})},//计算总价getTotalPrice(){letcarts=this.data.carts;//获取购物车列表lettotal=0;letnum=0;for(leti=0;icarts.length;i++){//循环列表得到每个数据if(carts[i].isSelect){//判断选中才会计算价格total+=carts[i].num*carts[i].price;//所有价格加起来num+=carts[i].num;}}this.setData({//最后赋值到data中渲染到页面carts:carts,totalCount:num,totalMoney:total.toFixed(2)});},//绑定单选bindCheckbox:function(e){varthat=this;constidx=e.currentTarget.dataset.index;letcarts=that.data.carts;constisSelect1=carts[idx].isSelect;carts[idx].isSelect=!isSelect1;that.setData({carts:carts,selectAllStatus:false});that.getTotalPrice();},//绑定多选bindSelectAll:function(e){varthat=this;letselectedAllStatus=that.data.selectAllStatus;letcarts=that.data.carts;selectedAllStatus=!selectedAllStatus;for(vari=0;icarts.length;i++){carts[i].isSelect=selectedAllStatus;}that.setData({carts:carts,selectAllStatus:selectedAllStatus});that.getTotalPrice();},//购物车结算bindjiesuan:function(){varthat=this;letcarts=that.data.carts;letjscart=[];varj=0for(vari=0;icarts.length;i++){if(carts[i].isSelect){jscart[j]=carts[i];j++;}}if(jscart.length=0){wx.showToast({title:'未选择商品',icon:'success',duration:1000})return;}wx.setStorageSync('jscart',jscart);//存入缓存//转到结算页面wx.navigateTo({url:'jiesuan?amount='+that.data.totalMoney});},/***生命周期函数--监听页面加载*/onLoad:function(options){},//加载购物车getCart:function(){varthat=this;varuid=that.data.uid;//网络请求获取购物车数据}})

13.微信赞赏：

14.