微信小程序之购物车--商城系列
index.wxml
<!--pages/shopcart/shopcart.wxml-->
<view class='container' hidden="{{iscart}}">
<!-- 上部分 -->
<view class='section section-good'>
<checkbox-group bindchange="checkboxChange">
<view class='good' wx:for='{{goodList}}' wx:for-item="good" wx:key="good.name">
<!--第一个盒子 -->
<view class='good_title'>
<view class='shangjia'>京东到家</view>
<view class='shanchu'>
<view class='shanchu_trash' bindtap="deleteList"><image src='/assets/images/trash.png'></image></view>
<!-- 删除 -->
</view>
</view>
<!-- 第二个盒子 -->
<view class='good_content'>
<view class='good_checkbox'>
<label class="checkbox">
<checkbox value="{{good.isbn}}" 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>
</view>
<view class='good_img'>
<image class='cover' src='{{good.cover}}'></image>
</view>
<view class='content'>
<view class='titles'>{{good.desc}}</view>
</view>
<view class='good_footer'>
<view class='price'>¥{{good.price}}</view>
<view class='stepper'>
<view class='subtract {{good.count == 1 ? "disabled": ""}}' data-index='{{index}}' catchtap='subtracttap'>-</view>
<input class='count' type='number' value='{{good.count}}'></input>
<view class='add' data-index="{{index}}" catchtap='addtap'>+</view>
</view>
</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>
<navigator url='../checkout/index'>
<view class='btn {{totalCount > 0 ? "btn-primary" : "btn-default"}}'>去结算</view>
</navigator>
</view>
</view>
<!--如果购物车内没有数据，就显示没有数据-->
<view class="cartList" hidden="{{!iscart}}">
<image src="/assets/images/iconfont-cart-empty.png"/>
<view>购物车什么都没有，赶快去购物吧~٩(๑❛ᴗ❛๑)۶~</view>
</view>
index.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 {
float: left;
width: 100%;
height: 300rpx;
margin-top: 20rpx;
margin-bottom: 20rpx;
border-bottom: 1px solid #ccc;
background-color: #fff;
}
/* 第一个盒子 */
.good .good_title {
float:left;
box-sizing:border-box;
padding:0;
width:100%;
height:70rpx;
line-height:70rpx;
border-bottom:1px solid #ccc;
}
.good .good_title view:first-of-type {
float: left;
}
.good .good_title view:last-of-type {
float: right;
}
.good .good_title .shanchu .shanchu_trash {
float: left;
margin-top: 8rpx;
width: 56rpx;
height: 56rpx;
}
.good .good_title .shanchu .shanchu_trash image {
width: 100%;
height: 100%;
}
/* 第二个盒子 */
.good .good_content {
box-sizing: border-box;
float:left;
width:100%;
height:226rpx;
background-color:#f5f5f5;
}
.good_content .good:last-child {
border-bottom: none;
}
.good_content .good_checkbox {
float:left;
width:70rpx;
height:224rpx;
line-height: 278rpx;
}
.good_content .checkbox {
float: left;
width: 48rpx;
height: 48rpx;
}
.good_content .good_img {
float:left;
margin-top:16rpx;
width:215rpx;
height:190rpx;
}
.good_content .good_img image {
width: 100%;
height: 100%;
}
.good_content .content {
box-sizing: border-box;
float:left;
margin-top:16rpx;
margin-left:20rpx;
width:384rpx;
height:90rpx;
}
.good_content .content .titles {
float:left;
text-overflow:ellipsis;
overflow:hidden;
font-size:15px;
width:369rpx;
height:86rpx;
color:#000;
line-height: 44rpx;
}
.good_content .good_footer {
box-sizing:border-box;
float:left;
margin-top:16rpx;
margin-left:20rpx;
width:354rpx;
height:90rpx;
}
.good_content .content .price {
font-size: 36rpx;
color: #e4452a;
margin-top: 10rpx;
}
.good_content .good .stepper {
float: left;
margin-top: 15rpx;
margin-left: 60rpx;
width: 162rpx;
height: 50rpx;
}
.good_content .good_footer .price {
float: left;
width: 30%;
height:50rpx;
margin-top:15rpx;
color:#FF5501;
font-size:17px;
}
.good_content .good_footer .stepper {
float: left;
margin-top: 10rpx;
width: 50%;
margin-left: 70rpx;
}
.good_content .stepper .add, .stepper .subtract {
float: left;
width: 50rpx;
height: 50rpx;
line-height: 50rpx;
text-align: center;
font-size: 28rpx;
border: 1px solid #ccc;
box-sizing: border-box;
}
.good_content .stepper .disabled {
float: left;
color: #eee;
}
.good_content .stepper .count {
float: left;
width: 60rpx;
height: 50rpx;
line-height: 50rpx;
/* border: 1px solid #ccc; */
border-top: 1px solid #ccc;
border-bottom: 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: #e83632;
}
.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;
}
/* 空购物车 */
.cartList {
padding: 100px 0 0 0;
display: flex;
justify-content: center;
flex-direction: column;
align-items: center;
color: #999;
}
.cartList image {
width: 66px;
height: 66px;
margin-bottom: 20px;
}
index.js
// pages/shopcart/shopcart.js
Page({
/**
* 页面的初始数据
*/
data: {
'iscart': false, //控制购物车有没有数据
'goodList': [
{
'cover': '/assets/images/img/132-12.jpg',
'isbn': '9787535482051',
'desc': '【光山馆】2斤大连烟台樱桃新鲜水果现摘现发产地直供孕妇水果儿童水果当季水果早大果红灯美早车厘子大樱桃 2斤 AAA级 果径28mm以上',
'price': 25.9,
'count': 1,
'checked': false
},
{
'cover': '/assets/images/img/0112-154.jpg',
'isbn': '9787540455958',
'desc': '【第二件立减20元】新鲜采摘 国产 美早 车厘子 大樱桃新鲜水果1kg 单果26-28mm',
'price': 20.5,
'count': 1,
'checked': false
},
{
'cover': '/assets/images/img/132-12.jpg',
'isbn': '9787539982830',
'desc': '农家新语 新鲜烟台大樱桃2斤现摘当季水果车厘子美早 顺丰空运',
'price': 24.1,
'count': 1,
'checked': false
},
{
'cover': '/assets/images/img/0112-154.jpg',
'isbn': '9787550013247',
'desc': '【第二件5折】岂鲜大连美早大樱桃500g大果28-30mm 新鲜水果礼盒',
'price': 17.2,
'count': 1,
'checked': false
},
{
'cover': '/assets/images/img/123123.jpg',
'isbn': '9787208061644',
'desc': '优仙果 山东美早大樱桃 1000g装果径26-28mm 新鲜水果车厘子',
'price': 17.7,
'count': 1,
'checked': false
}
],
'checkAll': false,
'totalCount': 0,
'totalPrice': 0,
},
/**
* 删除购物车当前商品
*/
deleteList(e) {
const index = e.currentTarget.dataset.index;
let goodList = this.data.goodList;
goodList.splice(index, 1);
this.setData({
goodList: goodList
});
if (!goodList.length) {
this.setData({
iscart: true
});
} else {
this.calculateTotal();
}
},
/**
* 计算商品总数
*/
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.count;
totalPrice += good.count * good.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].count;
if (count <= 1) {
return;
} else {
goodList[index].count--;
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].count;
goodList[index].count++;
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].isbn == 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();
},
/**
* 生命周期函数--监听页面加载
*/
onLoad: function (options) {
},
/**
* 生命周期函数--监听页面初次渲染完成
*/
onReady: function () {
this.calculateTotal();
},
/**
* 生命周期函数--监听页面显示
*/
onShow: function () {
},
/**
* 生命周期函数--监听页面隐藏
*/
onHide: function () {
},
/**
* 生命周期函数--监听页面卸载
*/
onUnload: function () {
},
/**
* 页面相关事件处理函数--监听用户下拉动作
*/
onPullDownRefresh: function () {
},
/**
* 页面上拉触底事件的处理函数
*/
onReachBottom: function () {
},
/**
* 用户点击右上角分享
*/
onShareAppMessage: function () {
},
})