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:
32
rpx;
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:
30
rpx;
padding-right:
30
rpx;
margin-bottom:
30
rpx;
}
.section-good {
margin-bottom:
100
rpx;
}
.good {
float:
left;
width:
100%;
height:
300
rpx;
margin-top:
20
rpx;
margin-bottom:
20
rpx;
border-bottom:
1px
solid
#ccc;
background-color:
#fff;
}
/* 第一个盒子 */
.good
.good_title {
float:
left;
box-sizing:
border-box;
padding:
0;
width:
100%;
height:
70
rpx;
line-height:
70
rpx;
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:
8
rpx;
width:
56
rpx;
height:
56
rpx;
}
.good
.good_title
.shanchu
.shanchu_trash
image {
width:
100%;
height:
100%;
}
/* 第二个盒子 */
.good
.good_content {
box-sizing:
border-box;
float:
left;
width:
100%;
height:
226
rpx;
background-color:
#f5f5f5;
}
.good_content
.good:last-child {
border-bottom:
none;
}
.good_content
.good_checkbox {
float:
left;
width:
70
rpx;
height:
224
rpx;
line-height:
278
rpx;
}
.good_content
.checkbox {
float:
left;
width:
48
rpx;
height:
48
rpx;
}
.good_content
.good_img {
float:
left;
margin-top:
16
rpx;
width:
215
rpx;
height:
190
rpx;
}
.good_content
.good_img
image {
width:
100%;
height:
100%;
}
.good_content
.content {
box-sizing:
border-box;
float:
left;
margin-top:
16
rpx;
margin-left:
20
rpx;
width:
384
rpx;
height:
90
rpx;
}
.good_content
.content
.titles {
float:
left;
text-overflow:
ellipsis;
overflow:
hidden;
font-size:
15px;
width:
369
rpx;
height:
86
rpx;
color:
#000;
line-height:
44
rpx;
}
.good_content
.good_footer {
box-sizing:
border-box;
float:
left;
margin-top:
16
rpx;
margin-left:
20
rpx;
width:
354
rpx;
height:
90
rpx;
}
.good_content
.content
.price {
font-size:
36
rpx;
color:
#e4452a;
margin-top:
10
rpx;
}
.good_content
.good
.stepper {
float:
left;
margin-top:
15
rpx;
margin-left:
60
rpx;
width:
162
rpx;
height:
50
rpx;
}
.good_content
.good_footer
.price {
float:
left;
width:
30%;
height:
50
rpx;
margin-top:
15
rpx;
color:
#FF5501;
font-size:
17px;
}
.good_content
.good_footer
.stepper {
float:
left;
margin-top:
10
rpx;
width:
50%;
margin-left:
70
rpx;
}
.good_content
.stepper
.add,
.stepper
.subtract {
float:
left;
width:
50
rpx;
height:
50
rpx;
line-height:
50
rpx;
text-align:
center;
font-size:
28
rpx;
border:
1px
solid
#ccc;
box-sizing:
border-box;
}
.good_content
.stepper
.disabled {
float:
left;
color:
#eee;
}
.good_content
.stepper
.count {
float:
left;
width:
60
rpx;
height:
50
rpx;
line-height:
50
rpx;
/* 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:
28
rpx;
}
/*******底部******************************************** */
.section-bottom {
display:
flex;
flex-direction:
row;
align-items:
center;
width:
100%;
height:
100
rpx;
position:
fixed;
bottom:
0;
left:
0;
margin-bottom:
0;
background-color:
#fff;
box-sizing:
border-box;
z-index:
99;
}
.section-bottom
.btn {
width:
160
rpx;
height:
100
rpx;
line-height:
100
rpx;
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:
30
rpx;
vertical-align:
top;
font-size:
0px;
}
.section-bottom
.check-all-text {
display:
inline-block;
vertical-align:
top;
margin-left:
10
rpx;
height:
23px;
line-height:
23px;
font-size:
28
rpx;
}
.section-bottom
.total {
flex:
1;
text-align:
center;
font-size:
26
rpx;
}
.total
.totalCount {
font-size:
26
rpx;
display:
inline-block;
vertical-align:
middle;
}
.total
.totalPrice {
display:
inline-block;
font-size:
26
rpx;
margin-left:
20
rpx;
vertical-align:
middle;
}
.total
.totalCount
text {
color:
#e4452a;
vertical-align:
middle;
}
.total
.totalPrice
text {
color:
#e4452a;
font-size:
36
rpx;
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 () {
},
})