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

版权声明:本文为博主原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。
本文链接:https://blog.csdn.net/weixin_39815001/article/details/84620068

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

购物车为空时
页面排版不多说,看个人喜好决定。主要讲讲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
大家一起学习小程序呀_,欢迎讨论哦

展开阅读全文

没有更多推荐了,返回首页