小程序实践（六）— 购物车
今天分享一下购物车功能实现思路，首先购物车是离不开checkbox,而不同的框架封装了不同的api,今天分享的就是小程序的checkbox是怎么实现购物车的功能的。
我们在购物的时候常见的购物车无非也就包含以下几个功能点：
1）单选、全选、取消以及结算。
2）单个商品购买数量的增加与减少
3）删除所选商品，购物车为空时的提示
接下来我们就可以围绕着需求一步一步的去实现
代码实现
页面布局wxll
这里我是根据数据的length进行判断，length>0则渲染列表，当然也可以根据自己自定义参数来进行设置。这里不多说。
<view class='car-list'>
<block wx:if="{{cartList.length>0}}">
<!-- wx:for 渲染购物车列表 -->
<block wx:for="{{cartList}}" wx:key="id">
<navigator hover-class="none" url="/pages/product-con/index?goods_id={{item.product_id}}">
<view class='list-item flex'>
<view class='select-btn flex' data-index='{{index}}' catchtap='switchSelect'>
<label class="checkbox">
<checkbox value="{{index}}" checked="{{item.checked}}" />
</label>
</view>
<view class='picture'>
<image src='{{item.pic}}'></image>
</view>
<view class='pro-info flex'>
<view class='pro-title'>{{item.product_name}}</view>
<view class='pro-des' wx:if="{{item.unique}}">{{item.sku}}</view>
<view class='pro-price' wx:if="{{item.unique}}">
<text>￥</text>{{item.price}}</view>
<view class='pro-price' wx:else>
<text>￥</text>{{item.price}}</view>
</view>
<!--商品数量的增加与减少-->
<view class='count-wrapper flex'>
<text data-index="{{index}}" catchtap="numDescClick" class='{{minusStatus}}'>-</text>
<input class='num' data-index='{{index}}' type="number" value='{{item.num}}' catchtap='changeInput' bindblur='bindblur'/>
<text class='add' data-index="{{index}}" catchtap="numAddClick">+</text>
</view>
</view>
</navigator>
</block>
</block>
<block wx:else>
<view class="notice">购物车空空如也</view>
</block>
</view>
<view class='foot'>
<view class='pay-wrapper flex' hidden='{{foothidden}}'>
<view class='left-wrapper flex'>
<view class='all-select' catchtap="allChecked">
<label class="checkbox">
<checkbox value="Boolean" checked="{{isAllSelect}}" />
</label>
</view>
<view class='txt'>全选</view>
<view class='count-num'>
<text>合计:</text>￥{{countmoney}}
</view>
</view>
<navigator class='flex' hover-class="none" url="/pages/order-confirm/order-confirm?id={{cartIdsStr}}&max_price={{countmoney}}">
<view class='pay-btn'>立即结算</view>
</navigator>
</view>
<view class='delete-wrapper flex'>
<view class='left-wrapper flex'>
<view class='all-select' catchtap="allChecked">
<label class="checkbox">
<checkbox value="Boolean" checked="{{isAllSelect}}" />
</label>
</view>
<view class='txt'>全选</view>
</view>
<view class='right-wrapper flex'>
<view class='delete-btn' catchtap='cartDelAll' data-code='del'>删除</view>
</view>
</view>
</view>
初始化数据
Page({
data: {
foothidden: false,//管理标签控制属性
countmoney: '',//合计金额
cartNum: "0",//购物数量
isAllSelect: false,//是否全选
minusStatus: 'disabled',
cartList: [],//购物车列表
},
onLoad: function (options) {
this.setData({
cartList: [{
num: 1,
pic: "../images/p2.jpg",
price: "2000.00",
product_name: "Iphone 5s",
},
{
num: 1,
pic: "../images/p3.jpg",
price: "1000.00",
product_name: "Iphone 4"
}],
})
},
})
购物车列表数据一般都是通过请求服务器拿到的数据，所以我们放在生命周期函数里给 cartList赋值。有一点需要注意的是，生命周期函数onLoad和onReady只在初始化的时候执行一次，可以根据业务需求实际情况来决定在哪个函数初始化数据。这里我每次进来只需要加载一次，所以在onLoad函数初始化列表数据（模拟数据只为实现效果）
计算总价
总价 = 选中的商品1的 价格 * 数量 + 选中的商品2的 价格 * 数量 + …
根据公式，可以得到
//总共价钱；
countmoney() {
var carmoney = 0;
var array = this.data.cartList;// 获取购物车列表
for (var i = 0; i < array.length; i++) {// 循环列表得到每个数据
if (array[i].checked == true) {// 判断选中才会计算价格
if (array[i]) {
carmoney += parseFloat(array[i].num * array[i].price);// 所有价格加起来
}
}
}
this.setData({
countmoney: carmoney.toFixed(2)//渲染到页面
})
},
页面中涉及到总价格的只要调用此方法便可。
选择事件
点击时选中，再点击又变成没选中状态，其实就是改变 selected 字段。通过 data-index="{{index}}" 把当前商品在列表数组中的下标传给事件。
//单选；
switchSelect: function (e) {
var index = e.currentTarget.dataset.index;// 获取data- 传进来的index
this.data.cartList[index].checked = !this.data.cartList[index].checked;//改变当前选中商品的状态
var len = this.data.cartList.length;
var selectnum = [];
for (var i = 0; i < len; i++) {
if (this.data.cartList[i].checked == true) {
selectnum.push(true);
}
}
if (selectnum.length == len) {
this.data.isAllSelect = true;
} else {
this.data.isAllSelect = false;
}
this.setData({
cartList: this.data.cartList,
isAllSelect: this.data.isAllSelect
});
// 重新获取总价
this.countmoney();
this.carnum();//更新购物车选中的数量
},
全选事件
根据全选状态 selectAllStatus 去改变每个商品的 selected
//全选
allChecked: function (e) {
var selectAllStatus = this.data.isAllSelect;//是否全选状态
selectAllStatus = !selectAllStatus;
var array = this.data.cartList;
for (var i = 0; i < array.length; i++) {
array[i].checked = selectAllStatus;
};
this.setData({
cartList: this.data.cartList,
isAllSelect: selectAllStatus
})
this.carnum();
this.countmoney();
},
增减数量
点击+号，num加1，点击-号，如果num > 1，则减1
//加
numAddClick: function (event) {
var index = event.currentTarget.dataset.index;
this.data.cartList[index].num = +this.data.cartList[index].num + 1;
var minusStatus = this.data.cartList[index].num <= 1 ? 'disabled' : 'normal';
this.setData({
cartList: this.data.cartList,
minusStatus: minusStatus
});
this.carnum();
this.countmoney();
var buy_num = this.data.cartList[index].num;
},
//减
numDescClick: function (event) {
var index = event.currentTarget.dataset.index;
this.data.cartList[index].num = this.data.cartList[index].num <= 1 ? 1 : +this.data.cartList[index].num - 1;
var minusStatus = this.data.cartList[index].num <= 1 ? 'disabled' : 'normal';
this.setData({
cartList: this.data.cartList,
minusStatus: minusStatus
});
this.carnum();
this.countmoney();
var buy_num = this.data.cartList[index].num;
},
删除商品
点击删除按钮则从购物车列表中删除当前元素，购物车如果为空，全选状态isAllSelect赋值为false
/**删除购物车 */
cartDelAll: function (code) {
var array = this.data.cartList;
var cart_id = [];
var cont = '删除成功';;//提示语
var that = this;
for (var i = 0; i < array.length; i++) {
array.splice(i, 1);
}
that.setData({
cartList: array,
isAllSelect: false
})
}
购物车购买数量更新
购买商品进行增加减少的时候调用此方法，更新所选中商品的数量值
//购物车数量
carnum() {
var carnum = 0;
var array = this.data.cartList;
for (var i = 0; i < array.length; i++) {
if (array[i].checked == true) {
carnum += parseInt(array[i].num);
}
}
this.setData({
cartNum: carnum
})
},
最后看一下效果图吧：
总结
看似简单的购物车功能，却涉及到微信小程序的很多知识点，此功能新手可用来练习掌握小程序相关的知识点，大家有什么好的意见可留言评论，一起学习交流哦！！！！
1380
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
