var cart_info=[{'id':this.data.id,'cart_num':this.data.cart_num,'logo':this.data.good_info.logo,'market_price':this.data.good_info.market_price,'title':this.data.good_info.title,'checked':true}];
shopcart.js
data: { 'goodList': [],
'checkAll': false,
'totalCount': 0,
'totalPrice': 0
},
onLoad: function (options) {
var that = this;
this.setData({
navH: app.globalData.navHeight
});
//设置商品列表高度
wx.getSystemInfo({
success: function (res) {
that.setData({
goodList:wx.getStorageSync('cart_info')
})
},
});
},
/**
* 计算商品总数
*/
calculateTotal: function () {
var goodList = this.data.goodList;
var totalCount = 0;
var totalPrice = 0;
for (var i = 0; i < goodList.length; i++) {
var good = goodList[i];
if (good.checked) {
totalCount += good.cart_num;
totalPrice += good.cart_num * good.market_price;
}
}
totalPrice = totalPrice.toFixed(2);
this.setData({
'totalCount': totalCount,
'totalPrice': totalPrice
})
},
/**
* 用户点击商品减1
*/
subtracttap: function (e) {
var index = e.target.dataset.index;
var goodList = this.data.goodList;
var count = goodList[index].cart_num;
if (count <= 1) {
return;
} else {
goodList[index].cart_num--;
this.setData({
'goodList': goodList
});
this.calculateTotal();
}
},
/**
* 用户点击商品加1
*/
addtap: function (e) {
var index = e.target.dataset.index;
var goodList = this.data.goodList;
var count = goodList[index].cart_num;
goodList[index].cart_num++;
this.setData({
'goodList': goodList
});
this.calculateTotal();
},
/**
* 用户选择购物车商品
*/
checkboxChange: function (e) {
console.log('checkbox发生change事件,携带value值为:', e.detail.value);
var checkboxItems = this.data.goodList;
var values = e.detail.value;
for (var i = 0; i < checkboxItems.length; ++i) {
checkboxItems[i].checked = false;
for (var j = 0; j < values.length; ++j) {
if (checkboxItems[i].id == values[j]) {
checkboxItems[i].checked = true;
break;
}
}
}
var checkAll = false;
if (checkboxItems.length == values.length) {
checkAll = true;
}
this.setData({
'goodList': checkboxItems,
'checkAll': checkAll
});
this.calculateTotal();
},
/**
* 用户点击全选
*/
selectalltap: function (e) {
console.log('用户点击全选,携带value值为:', e.detail.value);
var value = e.detail.value;
var checkAll = false;
if (value && value[0]) {
checkAll = true;
}
var goodList = this.data.goodList;
for (var i = 0; i < goodList.length; i++) {
var good = goodList[i];
good['checked'] = checkAll;
}
this.setData({
'checkAll': checkAll,
'goodList': goodList
});
this.calculateTotal();
}
shopcart.wxss
/* pages/shopcart/shopcart.wxss */
page {
height: 100%;
background: #fff;
font-family: -apple-system-font, Arial, Helvetica, sans-serif;
color: #333;
font-size: 32rpx;
line-height: 1.42857;
}
.container {
width: 100%;
min-height: 100%;
display: flex;
flex-direction: column;
box-sizing: border-box;
}
.section {
display: flex;
flex-direction: column;
padding-left: 30rpx;
padding-right: 30rpx;
margin-bottom: 30rpx;
}
.section-good {
margin-bottom: 100rpx;
}
.good {
display: flex;
flex-direction: row;
align-items: center;
position: relative;
height: 250rpx;
border-bottom: 1px solid #ccc;
}
.good:last-child {
border-bottom: none;
}
.checkbox {
width: 48rpx;
height: 48rpx;
}
.cover {
width: 100%;
height: 80%;
border-radius: 10rpx;
margin-left: 20rpx;
}
.content {
flex: 1;
margin-left: 20rpx;
}
.content .text {
color: #363636;
width: 450rpx;
text-overflow: ellipsis;
overflow: hidden;
white-space: nowrap;
}
.content .name {
color: #333;
font-size: 36rpx;
}
.content .author {
font-size: 28rpx;
color: #363636;
margin-top: 10rpx;
}
.content .desc {
color: #363636;
font-size: 28rpx;
margin-top: 10rpx;
}
.content .press {
font-size: 28rpx;
color: #363636;
margin-top: 10rpx;
}
.content .price {
font-size: 36rpx;
color: #e4452a;
margin-top: 10rpx;
}
.good .stepper {
display: flex;
position: absolute;
right: 0;
bottom: 20rpx;
flex-direction: row;
text-align: center;
}
.stepper .add, .stepper .subtract {
width: 50rpx;
height: 50rpx;
line-height: 50rpx;
font-size: 28rpx;
border: 1px solid #ccc;
box-sizing: border-box;
}
.stepper .disabled {
color: #eee;
}
.stepper .count {
width: 60rpx;
height: 50rpx;
line-height: 50rpx;
border: 1px solid #ccc;
text-align: center;
box-sizing: border-box;
min-height: 1rem;
font-size: 28rpx;
}
.section-bottom {
display: flex;
flex-direction: row;
align-items: center;
width: 100%;
height: 100rpx;
position: fixed;
bottom: 0;
left: 0;
margin-bottom: 0;
background-color: #fff;
box-sizing: border-box;
z-index: 99;
}
.section-bottom .btn {
width: 160rpx;
height: 100rpx;
line-height: 100rpx;
text-align: center;
color: #fdfffd;
background-color: #fbb304;
}
.section-bottom .btn-default {
color: #363636;
background-color: #eee;
}
.section-bottom .btn-primary {
color: #fdfffd;
background-color: #fbb304;
}
.section-bottom .checkbox-allcheck {
display: inline-block;
margin-left: 30rpx;
vertical-align: top;
font-size: 0px;
}
.section-bottom .check-all-text {
display: inline-block;
vertical-align: top;
margin-left: 10rpx;
height: 23px;
line-height: 23px;
font-size: 28rpx;
}
.section-bottom .total {
flex: 1;
text-align: center;
font-size: 26rpx;
}
.total .totalCount {
font-size: 26rpx;
display: inline-block;
vertical-align: middle;
}
.total .totalPrice {
display: inline-block;
font-size: 26rpx;
margin-left: 20rpx;
vertical-align: middle;
}
.total .totalCount text {
color: #e4452a;
vertical-align: middle;
}
.total .totalPrice text {
color: #e4452a;
font-size: 36rpx;
vertical-align: middle;
}
shopcart.wxml
<!--pages/shopcart/shopcart.wxml-->
<navbar parameter='{{parameter}}'></navbar>
<view class='container'>
<view class='section section-good'>
<checkbox-group bindchange="checkboxChange">
<view class='good' wx:for='{{goodList}}' wx:for-item="good" wx:key="good.name">
<label class="checkbox">
<checkbox value="{{good.id}}" checked="{{good.checked}}" hidden='hidden' />
<icon type="circle" size="23" wx:if="{{!good.checked}}"></icon>
<icon type="success" size="23" wx:if="{{good.checked}}"></icon>
</label>
<image class='cover' mode="aspectFill" src='{{good.logo}}'></image>
<view class='content'>
<view class='text name'>{{good.title}}</view>
<view class='text price'>¥{{good.market_price}}</view>
</view>
<view class='stepper'>
<view class='subtract {{good.cart_num == 1 ? "disabled": ""}}' data-index='{{index}}' catchtap='subtracttap'>-</view>
<input class='count' type='number' value='{{good.cart_num}}'></input>
<view class='add' data-index="{{index}}" catchtap='addtap'>+</view>
</view>
</view>
</checkbox-group>
</view>
<view class='section-bottom'>
<checkbox-group bindchange="selectalltap">
<label class='checkbox-allcheck'>
<checkbox value="{{!checkAll}}" checked="{{checkAll}}" hidden='hidden' />
<icon type="circle" size="23" wx:if="{{!checkAll}}"></icon>
<icon type="success" size="23" wx:if="{{checkAll}}"></icon>
<text class='check-all-text'>全选</text>
</label>
</checkbox-group>
<view class="total">
<view class='totalCount'>已选择
<text>{{totalCount}}</text>件商品
</view>
<view class='totalPrice'>总价:
<text>¥{{totalPrice}}</text>
</view>
</view>
<view class='btn {{totalCount > 0 ? "btn-primary" : "btn-default"}}'>去结算</view>
</view>
</view>
具体例子,我把代码打包放在这里,如果好用,记得回来给个赞!