工作之余,写个小程序购物车
Cart.wxml
<view class="main">
<view wx:if="{{hasList}}">
<!--hasList判断是否存在购物列表-->
<view class="cart-box">
<view class="cart-list" wx:for="{{carts}}" wx:key="{{index}}">
<icon wx:if="{{item.selected}}" type="success" color="red" data-index="{{index}}" class="cart-pro-select" bindtap="selectList"/>
<icon wx:else type="circle" class="cart-pro-select" data-index="{{index}}" bindtap="selectList"/>
<!--item.selected判断是否选中-->
<!--../details/details?id={{item.id}} 跳转具体商品页-->
<navigator url="../details/details?id={{item.id}}"><image class="cart-thumb" src="{{item.image}}"></image></navigator>
<text class="cart-pro-name">{{item.title}}</text>
<text class="cart-pro-price">¥{{item.price}}</text>
<view class="cart-count-box">
<!--data-obj 自定义属性-->
<text class="cart-count-down" bindtap="minusCount" data-obj="{{obj}}" data-index="{{index}}">-</text>
<text class="cart-count-num">{{item.num}}</text>
<text class="cart-count-add" bindtap="addCount" data-index="{{index}}">+</text>
</view>
<text class="cart-del" bindtap="deleteList" data-index="{{index}}">×</text>
</view>
</view>
<view class="cart-footer">
<!--全选功能-->
<icon wx:if="{{selectAllStatus}}" type="success_circle" color="#fff" class="total-select" bindtap="selectAll"/>
<icon wx:else type="circle" color="#fff" class="total-select" bindtap="selectAll"/>
<!--全选功能-->
<!--调转支付页面-->
<view class="order-icon">
<navigator url="../orders/orders"><image src="/image/icon3.png"></image></navigator>
</view>
<!--调转支付页面-->
<text>全选</text>
<text class="cart-toatl-price">¥{{totalPrice}}</text>
</view>
</view>
<view wx:else>
<view class="cart-no-data">购物车是空的哦~</view>
</view>
</view>
Cart.wxss
.cart-box{
padding-bottom: 100rpx;
}
.cart-list{
position: relative;
padding: 20rpx 20rpx 20rpx 285rpx;
height: 185rpx;
border-bottom: 1rpx solid #e9e9e9;
}
.cart-list .cart-pro-select{
position: absolute;
left: 20rpx;
top: 90rpx;
width: 45rpx;
height: 45rpx;
}
.cart-list .cart-thumb{
position: absolute;
top: 20rpx;
left: 85rpx;
width: 185rpx;
height: 185rpx;
}
.cart-list .cart-pro-name{
display: inline-block;
width: 300rpx;
height: 105rpx;
line-height: 50rpx;
overflow: hidden;
}
.cart-list .cart-pro-price{
display: inline-block;
float: right;
height: 105rpx;
line-height: 50rpx;
}
.cart-list .cart-count-box{
position: absolute;
left: 285;
bottom: 20rpx;
width: 250rpx;
height: 80rpx;
}
.cart-list .cart-count-box text{
display: inline-block;
line-height: 80rpx;
text-align: center;
}
.cart-count-down,.cart-count-add{
font-size: 44rpx;
width: 50rpx;
height: 100%;
}
.cart-count-num{
width: 150rpx;
}
.cart-del{
position: absolute;
right: 20rpx;
bottom: 20rpx;
width: 80rpx;
height: 80rpx;
line-height: 80rpx;
text-align: center;
font-size: 44rpx;
}
.cart-footer{
position: fixed;
bottom: 0;
left: 0;
width: 100%;
height: 90rpx;
line-height: 90rpx;
padding:0 100rpx 0 80rpx;
box-sizing: border-box;
background: #AB956D;
color: #fff;
}
.total-select{
position: absolute;
left: 20rpx;
top: 25rpx;
width: 45rpx;
height: 45rpx;
}
.order-icon{
position: absolute;
right: 40rpx;
top: 25rpx;
width: 45rpx;
height: 45rpx;
}
.order-icon image,.order-icon navigator{
display: block;
width: 45rpx;
height: 45rpx;
}
.cart-toatl-price{
float: right;
width: 120rpx;
}
.cart-no-data{
padding:40rpx 0;
color: #999;
text-align: center;
}
Cart.js
Page({
data: {
carts:[], // 购物车列表
hasList:false, // 列表是否有数据
totalPrice:0, // 总价,初始为0
selectAllStatus:true, // 全选状态,默认全选
obj:{
name:"hello"
}
},
onShow() {
this.setData({
hasList: true,
carts:[
{id:1,title:'新鲜芹菜 半斤',image:'/image/s5.png',num:4,price:0.01,selected:true},
{id:2,title:'素米 500g',image:'/image/s6.png',num:1,price:0.03,selected:true}
]
});
this.getTotalPrice();
},
/**
* 当前商品选中事件
*/
selectList(e) {
console.log(e)
const index = e.currentTarget.dataset.index;
let carts = this.data.carts;
const selected = carts[index].selected;
carts[index].selected = !selected;
this.setData({
carts: carts
});
this.getTotalPrice();
},
/**
* 删除购物车当前商品
*/
deleteList(e) {
const index = e.currentTarget.dataset.index;
let carts = this.data.carts;
carts.splice(index,1);
this.setData({
carts: carts
});
if(!carts.length){
this.setData({
hasList: false
});
}else{
this.getTotalPrice();
}
},
/**
* 购物车全选事件
*/
selectAll(e) {
let selectAllStatus = this.data.selectAllStatus;
selectAllStatus = !selectAllStatus;
let carts = this.data.carts;
for (let i = 0; i < carts.length; i++) {
carts[i].selected = selectAllStatus;
}
this.setData({
selectAllStatus: selectAllStatus,
carts: carts
});
this.getTotalPrice();
},
/**
* 绑定加数量事件
*/
addCount(e) {
const index = e.currentTarget.dataset.index;
let carts = this.data.carts;
let num = carts[index].num;
num = num + 1;
carts[index].num = num;
this.setData({
carts: carts
});
this.getTotalPrice();
},
/**
* 绑定减数量事件
*/
minusCount(e) {
const index = e.currentTarget.dataset.index;
const obj = e.currentTarget.dataset.obj;
let carts = this.data.carts;
let num = carts[index].num;
if(num <= 1){
return false;
}
num = num - 1;
carts[index].num = num;
this.setData({
carts: carts
});
this.getTotalPrice();
},
/**
* 计算总价
*/
getTotalPrice() {
let carts = this.data.carts; // 获取购物车列表
let total = 0;
for(let i = 0; i<carts.length; i++) { // 循环列表得到每个数据
if(carts[i].selected) { // 判断选中才会计算价格
total += carts[i].num * carts[i].price; // 所有价格加起来
}
}
this.setData({ // 最后赋值到data中渲染到页面
carts: carts,
totalPrice: total.toFixed(2)
});
}
})
效果图如上。有需要的朋友直接复制代码,直接可以运行(图片之类的记得更换)
欢迎大家一起交流~~~~