mycart.js代码
// pages/mycart/mycart.js
Page({
/**
* 页面的初始数据
*/
data: {
goods: [{
id: 1,
name: "拼色短袖T恤",
model: "白色,S",
price: 22,
num: 1,
imgurl: "/image/src/good1.png"
},
{
id: 2,
name: "拼色短袖T恤",
model: "黑色,S",
price: 25,
num: 1,
imgurl: "/image/src/good2.png"
},
{
id: 3,
name: "拼色短袖T恤",
model: "蓝色,S",
price: 28,
num: 1,
imgurl: "/image/src/good4.png"
},
{
id: 4,
name: "拼色短袖T恤",
model: "紫色,S",
price: 32,
num: 1,
imgurl: "/image/src/good6.png"
}
],
//所有商品的数
goodscount: 0,
is_edit: 0,
//是否全选,s是编辑模式
is_check_all_s: 0,
is_check_all_d: 0,
//结算时被选中的件数
select_scount: 0,
money: 0,
num_input: 1
},
/**
* 生命周期函数--监听页面加载
*/
onLoad: function(options) {
let goods = this.data.goods
let goodscount = 0
for (let i = 0; i < goods.length; i++) {
goodscount += goods[i].num
//添加一个新的属性默认值为0,这个属性用来判断在编辑模式商品是否被选中
goods[i].dot_s = 0
//在非编辑模式下商品是否被选中
goods[i].dot_d = 0
}
this.setData({
goodscount: goodscount,
goods: goods
})
},
goshopping_func() {
wx.navigateTo({
url: '/pages/shop/shop',
})
},
//改变购物车模式
change_edit_func() {
let is_edit = this.data.is_edit
let goods = this.data.goods
let is_check_all_s = this.data.is_check_all_s
let is_check_all_d = this.data.is_check_all_d
if (is_edit == 1) {
for (let i = 0; i < goods.length; i++) {
//添加一个新的属性默认值为0
goods[i].dot_s = 0
}
} else {
for (let i = 0; i < goods.length; i++) {
//添加一个新的属性默认值为0
goods[i].dot_d = 0
}
}
this.setData({
is_edit: !is_edit,
goods: goods,
is_check_all_s: 0,
is_check_all_d: 0,
//改变购物车模式时,所有选中商品数清零
select_scount: 0,
money: 0
})
},
//商品在俩个模式中被选中时的处理
select_goods_func(e) {
let id = e.currentTarget.dataset.id
let goods = this.data.goods
let is_edit = this.data.is_edit
if (is_edit) {
for (let i = 0; i < goods.length; i++) {
if (goods[i].id == id) {
goods[i].dot_s = !goods[i].dot_s
}
}
} else {
for (let i = 0; i < goods.length; i++) {
if (goods[i].id == id) {
goods[i].dot_d = !goods[i].dot_d
}
}
//非编辑模式下统计选中商品数量和总金额
this.count_money(goods)
}
this.setData({
goods: goods,
})
},
//统计结算金额和结算商品数量
count_money(goods) {
let select_scount = 0
let money = 0
//在非编辑模式下每次选中商品重新统计被选中商品的件数
for (let i = 0; i < goods.length; i++) {
if (goods[i].dot_d) {
select_scount += goods[i].num
money += goods[i].num * goods[i].price
}
}
this.setData({
select_scount: select_scount,
money: money
})
},
//在不同模式下点击全选
is_check_all_func() {
let is_edit = this.data.is_edit
let goods = this.data.goods
let is_check_all_s = this.data.is_check_all_s
let is_check_all_d = this.data.is_check_all_d
if (is_edit) {
if (is_check_all_s) {
for (let i = 0; i < goods.length; i++) {
goods[i].dot_s = 0
}
} else {
for (let i = 0; i < goods.length; i++) {
goods[i].dot_s = 1
}
}
is_check_all_s = !is_check_all_s
} else {
if (is_check_all_d) {
for (let i = 0; i < goods.length; i++) {
goods[i].dot_d = 0
}
} else {
for (let i = 0; i < goods.length; i++) {
goods[i].dot_d = 1
}
}
is_check_all_d = !is_check_all_d
//在非编辑模式下每次全选商品重新统计被选中商品的件数
this.count_money(goods)
}
this.setData({
goods: goods,
is_check_all_s: is_check_all_s,
is_check_all_d: is_check_all_d,
})
},
//用户点击删除按钮
delete_func() {
let that = this
let goods = this.data.goods
let goodscount = 0
wx.showModal({
title: '提示',
content: '确认将已选中的删除吗?',
success: function(res) {
if (res.confirm) {
goods = goods.filter(function(item) {
return !item.dot_s
});
//删除时从小计算所有商品数
for (let i = 0; i < goods.length; i++) {
goodscount += goods[i].num
}
that.setData({
goods: goods,
goodscount: goodscount
})
} else if (res.cancel) {
console.log('用户点击取消')
}
}
})
},
//购物车商品数量改变
num_input_change_func(e) {
let num_input = e.detail.value
let id = e.currentTarget.dataset.id
let goods = this.data.goods
if (num_input.length == 1) {
num_input = parseInt(num_input.replace(/[^1-9]/g, ''))
} else if (num_input.length > 1) {
num_input = parseInt(num_input.replace(/\D/g, ''))
} else {
num_input = 1
}
for (let i = 0; i < goods.length; i++) {
if (goods[i].id == id) {
goods[i].num = num_input
}
}
//非编辑模式下统计选中商品数量和总金额
this.count_money(goods)
},
reduce_func(e) {
let id = e.currentTarget.dataset.id
let goods = this.data.goods
for (let i = 0; i < goods.length; i++) {
if (goods[i].id == id) {
if (goods[i].num > 1) {
goods[i].num = goods[i].num - 1
}
}
}
//再重新统计
this.count_money(goods)
this.setData({
goods: goods
})
},
add_func(e) {
let id = e.currentTarget.dataset.id
let goods = this.data.goods
for (let i = 0; i < goods.length; i++) {
if (goods[i].id == id) {
if (goods[i].num < 9999) {
goods[i].num = goods[i].num + 1
}
}
}
//再重新统计
this.count_money(goods)
this.setData({
goods: goods
})
},
})
mycart.wxml 文件
<view class="container">
<view class="outer_layer">
<block wx:if="{{goods.length>=1}}">
<view class="goods_edit_view">
<view class="goods_edit_left_view">
<text>全部宝贝{{goodscount}}件</text>
</view>
<view class="goods_edit_right_view" bindtap="change_edit_func">
<text>{{is_edit?"完成":"编辑"}}</text>
</view>
</view>
<view class="goods_view">
<block wx:for="{{goods}}" wx:key="unique">
<view class="good_view" >
<view class="good_left_view" data-id="{{item.id}}" bindtap="select_goods_func">
<view class="dot_view">
<block wx:if="{{is_edit?item.dot_s:item.dot_d}}">
<view class="dot_s"></view>
</block>
</view>
</view>
<view class="good_center_view">
<view class="good_center_img_view">
<image class="good_img" src="{{item.imgurl}}" mode="widthFix"></image>
</view>
<view class="good_center_col">
<view class="good_name_view">
<text>{{item.name}}</text>
</view>
<view class="good_model_view">
<text>{{item.model}}</text>
</view>
<view class="priceandnum_view">
<view class="good_price_view">
<text>¥{{item.price}}</text>
</view>
<view class="num_change_view" hidden="{{is_edit}}">
<image class="reduce_img" bindtap="reduce_func" src="/image/reduce.png" data-id="{{item.id}}" mode="widthFix"></image>
<input class="num_input" type="number" maxlength="4" placeholder="" value="{{goods[index].num}}" data-id="{{item.id}}" bindinput="num_input_change_func" />
<image class="add_img" bindtap="add_func" src="/image/add.png" data-id="{{item.id}}" mode="widthFix"></image>
</view>
</view>
</view>
</view>
</view>
</block>
</view>
<!-- 这里是底部结算按钮区域 -->
<view class="cart_bottom_vew">
<view class="cart_bottom_left_view" bindtap="is_check_all_func">
<view class="dot_view">
<block wx:if="{{is_edit?is_check_all_s:is_check_all_d}}">
<view class="dot_s"></view>
</block>
</view>
<text class="dot_text">全选</text>
</view>
<view class="cart_bottom_right_view">
<block wx:if="{{is_edit}}">
<view class="del_btn" bindtap="delete_func">
<text>删除</text>
</view>
</block>
<block wx:else>
<view class="settlement_view">
<view class="settlement_left_view">
<view>
<text>合计:<text style="color:#4528A7;font-size:32rpx;">¥{{money}}</text></text>
</view>
<view style="color:#4D4D4D;font-size:26rpx;">
<text>总额{{money}}元,活动优惠0元</text>
</view>
</view>
<view class="del_btn">
<text>去结算({{select_scount}}件)</text>
</view>
</view>
</block>
</view>
</view>
</block>
<block wx:else>
<view class="no_goods_view">
<view class="no_good_view">
<text>您的购物车还没有商品</text>
</view>
<view class="goshopping_view" bindtap="goshopping_func">
<text class="goshopping_text">去购物</text>
</view>
</view>
</block>
</view>
</view>
mycart.wxss文件
.container {
width: 100%;
height: 100%;
display: flex;
flex-direction: column;
box-sizing: border-box;
color: #1a1311;
font-size: 30rpx;
}
.outer_layer {
width: 100%;
height: 100%;
display: flex;
flex-direction: column;
padding-bottom: 40rpx;
}
.no_goods_view {
display: flex;
flex-direction: column;
margin-top: 420rpx;
align-items: center;
}
.no_good_view {
color: #515c6f;
font-size: 48rpx;
font-weight: 600;
}
.goshopping_view {
margin-top: 30rpx;
display: flex;
flex-direction: row;
align-items: center;
justify-content: center;
width: 180rpx;
height: 60rpx;
border: 1rpx solid #515c6f;
}
.goshopping_text {
color: #515c6f;
}
.goods_edit_view {
width: 100%;
display: flex;
flex-direction: row;
justify-content: space-between;
align-items: center;
/* padding: 0rpx 30rpx; */
height: 100rpx;
border-top: 1rpx solid #e0e0e0;
border-bottom: 1rpx solid #e0e0e0;
color: #515c6f;
position: fixed;
background-color: #fff;
}
.goods_edit_left_view {
padding-left: 30rpx;
}
.goods_edit_right_view {
padding-right: 30rpx;
}
.goods_view {
display: flex;
flex-direction: column;
margin-top: 100rpx;
margin-bottom: 100rpx;
}
.good_view {
min-height: 200rpx;
padding: 20rpx 10rpx;
display: flex;
flex-direction: row;
border-bottom: solid #e0e0e0 1rpx;
}
.good_left_view {
width: 100rpx;
height: 200rpx;
display: flex;
flex-direction: row;
align-items: center;
justify-content: center;
}
.dot_view {
border-radius: 50%;
width: 35rpx;
height: 35rpx;
padding: 5rpx;
border: 1rpx solid #e0e0e0;
}
.dot_s {
width: 100%;
height: 100%;
border-radius: 50%;
background-color: #4528a7;
}
.good_center_view {
height: 200rpx;
overflow-y: hidden;
display: flex;
flex-direction: row;
}
.good_img {
width: 200rpx;
}
.good_center_col {
display: flex;
flex-direction: column;
justify-content: space-between;
margin-left: 15rpx;
width: 400rpx;
}
.good_name_view {
color: #515c6f;
font-weight: 600;
}
.good_model_view {
color: #838383;
width: 400rpx;
font-size: 28rpx;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.priceandnum_view{
display: flex;
flex-direction: row;
justify-content: space-between;
align-items: center;
height: 90rpx;
}
.good_price_view {
font-size: 38rpx;
color: #4528a7;
}
/* 数量选择 */
.num_change_view{
display: flex;
flex-direction: row;
align-items: center;
justify-content: center;
border: 1rpx solid #e0e0e0;
}
.reduce_img {
width: 20rpx;
height: 20rpx;
padding: 30rpx;
}
.add_img {
width: 20rpx;
height: 20rpx;
padding: 30rpx;
}
.num_input{
width: 70rpx;
height: 30rpx;
font-size: 28rpx;
text-align: center;
}
.cart_bottom_vew{
position: fixed;
width: 100%;
height: 120rpx;
background-color: #fff;
bottom:1rpx;
display: flex;
flex-direction: row;
justify-content: space-between;
align-items: center;
z-index: 2;
}
.cart_bottom_left_view{
color: #070203;
font-size: 28rpx;
margin-left: 20rpx;
display: flex;
flex-direction: row;
align-items: center;
justify-content: flex-start;
}
.cart_bottom_right_view{
margin-right: 15rpx;
}
.dot_text{
margin-left: 20rpx;
}
.del_btn{
font-size: 26rpx;
padding: 0rpx 10rpx;
min-width: 150rpx;
height: 70rpx;
display: flex;
flex-direction: row;
justify-content: center;
align-items: center;
background-color: #4528A7;
border-radius: 15rpx;
color: #fff;
}
.settlement_view{
display: flex;
flex-direction: row;
justify-content: center;
align-items: center;
}
.settlement_left_view{
display: flex;
flex-direction: column;
align-items: flex-end;
margin-right: 10rpx;
justify-content: center;
}
mycart.json 文件
{
"usingComponents": {},
"navigationBarTitleText": "购物车"
}