?
?本篇抽取demo部分功能展示，在文章结尾附上完整DEMO
一、效果图：
二、.WXML代码示例,
<view class="main">
<view wx:if="{{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"/>
<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">
<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>二、.JS代码示例
Page({
data: {
carts: [], // 购物车列表
hasList: false, // 列表是否有数据
totalPrice: 0, // 总价，初始为0
selectAllStatus: true, // 全选状态，默认全选
obj: {
name: "hello"
}
},
onShow() {
this.setData({
hasList: true,
carts: [ //模拟数据
{
id: 1,
title: ‘测试土豆 1斤‘,
image: ‘/pages/images/s5.png‘,
num: 4,
price: 10.00,
selected: true
},
{
id: 2,
title: ‘测试黑米 1斤‘,
image: ‘/pages/images/s6.png‘,
num: 1,
price: 5.0,
selected: true
}
]
});
this.getTotalPrice();
},
/**
* 当前商品选中事件
*/
selectList(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)
});
}
})三、.XWSS代码示例
.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;
}?四、.JSON代码示例
{
"navigationBarTitleText": "购物车"
}? ?DEMO
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? -END
?