微信小程序---购物车模块

本文章以一个购物车页面为例，介绍购物车页面的实现逻辑。如商品加减，商品数量显示，商品删除、商品选择、商品总价计算等。先上图：（文章结尾附上完整源码）这是购物车里面有商品的时候

购物车为空时
页面排版不多说，看个人喜好决定。主要讲讲js部分。
1.商品数量＋
/**

绑定加数量事件
*/
addCount(e) {
const index = e.currentTarget.dataset.index;
let car = this.data.cars;
car[index].num = ++car[index].num;
this.setData({
cars: car
});
this.getTotalPrice();
},
1.1，购物车页面的数据是使用wx:for循环出来的，所以首先要拿到你想操作的那条数据的键
const index = e.currentTarget.dataset.index;
1.2，获取整个数组。
let car = this.data.cars;
1.3 将数组里对应那条数据中的商品数量加一
car[index].num = ++car[index].num;
1.4 改变数据
this.setData({
cars: car
});
1.5 调用计算总价方法，改变购物车总价。
this.getTotalPrice();

2.计算购物车总价
/**

计算总价
*/
getTotalPrice() {
let car = this.data.cars; // 获取购物车列表
let total = 0;
for (let i = 0; i < car.length; i++) { // 循环列表得到每个数据
if (car[i].selected) { // 判断选中才会计算价格
total += car[i].num * car[i].price; // 所有价格加起来
}
}
this.setData({ // 最后赋值到data中渲染到页面
cars: car,
totalPrice: total.toFixed(2)
});
}

完整代码：

JS部分

// page/component/new-pages/cart/cart.js
Page({
data: {
cars: [], // 购物车列表
hasList: false, // 列表是否有数据
totalPrice: 0, // 总价，初始为0
selectAllStatus: true, // 全选状态，默认全选
obj: {
name: “hello”
}
},
onShow() {
this.setData({
hasList: true,
cars: [
{ id: 1, name: ‘黄金香蕉’, image: ‘/img/xiangjiao1.jpg’, num: 4, price: 122.50, selected: true },
{ id: 2, name: ‘红玛瑙草莓’, image: ‘/img/caomei1.jpg’, num: 1, price: 10.08, selected: true }
]
}),
this.getTotalPrice();
},
// 点击商品图片进图商品详情
details: function () {
wx.navigateTo({
url: ‘/pages/details/details’
});
},

// 选中当前商品
selectThis(e) {
const index = e.currentTarget.dataset.index;
let car = this.data.cars;
// const selected = car[index].selected;
car[index].selected = !car[index].selected;
this.setData({
cars: car
});
this.getTotalPrice();
},
// 全选商品事件
selectAll(e) {
const selectAllStatus = !this.data.selectAllStatus;
console.log(selectAllStatus);
let car = this.data.cars;
for(let i = 0;i<car.length;i++){
car[i].selected = selectAllStatus;
}
this.setData({
cars:car,
selectAllStatus:selectAllStatus
})
this.getTotalPrice();
},

/**

绑定加数量事件
*/
addCount(e) {
const index = e.currentTarget.dataset.index;
let car = this.data.cars;
car[index].num = ++car[index].num;
this.setData({
cars: car
});
this.getTotalPrice();
},

/**

绑定商品数量减少事件
*/
jian(e){
const index = e.currentTarget.dataset.index;
let car = this.data.cars;
if (car[index].num <= 1) {
return false;
}
car[index].num = --car[index].num;
this.setData({
cars: car
});
this.getTotalPrice();
},
// 删除商品事件
del(e){
const index = e.currentTarget.dataset.index;
let car = this.data.cars;
car.splice(index,1);
this.setData({
cars: car
});
this.getTotalPrice();
if(!car.length){
this.setData({
hasList: false
})
}
},

/**

计算总价
*/
getTotalPrice() {
let car = this.data.cars; // 获取购物车列表
let total = 0;
for (let i = 0; i < car.length; i++) { // 循环列表得到每个数据
if (car[i].selected) { // 判断选中才会计算价格
total += car[i].num * car[i].price; // 所有价格加起来
}
}
this.setData({ // 最后赋值到data中渲染到页面
cars: car,
totalPrice: total.toFixed(2)
});
}

})

WXML部分

进口香蕉（份）（约1kg）商品描述，我很黄，但不暴力￥ 8.99 商品详情产品参数售后保障 {{goods.detail}} {{goods.parameter}} {{goods.service}}

<view class='add'>
  <image src='/img/tab33.png'></image>
  <button>加入购物车</button>
</view>

WXSS部分
.goods{
width: 100%;
height: 230rpx;
/* background: red; /
position: relative;
border: 1rpx solid silver;
}
.icon{
position: absolute;
left: 14rpx;
top: 80rpx;
width: 45rpx;
height: 45rpx;
}
.goods-img{
width: 180rpx;
height: 180rpx;
/ border-radius: 200rpx; /
margin-top: 12rpx;
margin-left: 74rpx;
}
.goods-name{
display: inline-block;
line-height: 50rpx;
overflow: hidden;
position: fixed;
margin: 40rpx 0 0 30rpx;
}
.price{
display: inline-block;
float: right;
margin: 40rpx 30rpx 0 0;
}
.btn-box button{
width: 60rpx;
height: 60rpx;
line-height: 66rpx;
display: inline-block;
/ border-radius: 20rpx; */
}
.goods-num{
display:inline-block;
border:1rpx;
width:80rpx;
height:60rpx;
line-height:60rpx;
text-align:center;
vertical-align:top;

}
.btn-box{
width: 410rpx;
position: absolute;
left: 280rpx;
bottom: 20rpx;
}
.del{
float: right;
}

/* 底部footer相关 */
.footer{
position: fixed;
bottom: 0;
left: 0;
width: 100%;
height: 90rpx;
line-height: 90rpx;
padding:0 0 0 10rpx;
box-sizing: border-box;
background: rgb(233, 233, 233);
font-size: 32rpx;
}
.footer-left{
width: 133rpx;
float: left;
margin-left:10rpx;
}
.footer-left icon{
vertical-align:top;
padding: 20rpx 0;
}
.footer-left text{
float: right;
}

.footer-right{
width: 340rpx;
float: right;
margin-left:10rpx;
}
/* .footer-right button{
float: right;
width: 100rpx;
} */
.jiesuan{
width: 120rpx;
background: #CD2626;
float: right;

text-align:center;
}

/* 没有数据时显示 */
.no-data{
padding: 40rpx 0;
color: #999;
text-align: center;
}

最后附上我的小程序demo源码地址:https://github.com/Yxiaogg/vioShop
大家一起学习小程序呀^_，欢迎讨论哦

微信小程序---购物车模块

猜你喜欢