主页:写程序的小王叔叔的博客欢迎来访
支持:点赞收藏关注
1、效果
2、wxml
3、wxjs
var base = getApp();
var preview=require('../../utils/preview.js');
Page({
data: {
WxMemberCart: [],
total: 0,
his: "",
plist:[],
loaded: true,
adminShow: true,//编辑或完成
totalPrice: 0,//总金额
allselect: false,//是否全选
selectArr: [], //已选择的商品
hadOnShow: false,
},
onLoad: function (e) {
_this.onShow();
},
onShow: function (e) {
let _this = this
if (_this.data.hadOnShow) {
return
}
_this.setData({
hadOnShow: true
})
},
goBack: function () {
var _this = this;
wx.navigateTo({
url: _this.data.his
})
},
//-------------------------
//计算价格
calculateTotal: function () {
var selectArr = this.data.selectArr; //已选择的商品
var totalPrice = 0;
if (selectArr.length) { //如果存在商品就计算价格
for (var i = 0; i < selectArr.length; i++) {
totalPrice += selectArr[i].wx_goodsNum * selectArr[i].wx_productPrice;
}
totalPrice = totalPrice.toFixed(2); //乘法有点问题, 需要保留一下小数
console.log("计算价格:", totalPrice)
this.setData({
totalPrice: totalPrice
})
} else { //不存在商品就把总价格置为 0
this.setData({
totalPrice: 0
})
}
},
//判断是否为全选
judgmentAll: function () {
var WxMemberCart = this.data.WxMemberCart; //初始数据
var selectArr = this.data.selectArr; //已选择的商品
if (selectArr.length == WxMemberCart.length) { //长度相等就是全部选上了
this.setData({
allselect: true
})
} else {
this.setData({
allselect: false
})
}
},
//全选
allcheckTap: function () {
var that = this;
var WxMemberCart = that.data.WxMemberCart; //初始数据
var selectArr = []; //定义空数组
var allselect = !that.data.allselect; //data里的是否全选先改变状态存着
if (allselect) { //如果为真, 初始数据里的每条checked变为true, 然后push到定义的空数组里
for (var i = 0; i < WxMemberCart.length; i++) {
WxMemberCart[i].checked = true;
selectArr.push(WxMemberCart[i])
}
} else { //不为真就变成false, 定义的数组再置空一次
for (var i = 0; i < WxMemberCart.length; i++) {
WxMemberCart[i].checked = false;
}
selectArr = [];
}
that.setData({ //重新设置数据
WxMemberCart: WxMemberCart, //初始的数据
allselect: allselect, //全选的状态
selectArr: selectArr //已选择的商品
})
that.calculateTotal(); // 最后计算一次价格 (计算价格放到重置数据之前会出问题)
},
//单个商品选择
checkTap: function (e) {
var index = e.currentTarget.dataset.index; //取到渲染的下标
var WxMemberCart = this.data.WxMemberCart; //初始数据
var selectArr = this.data.selectArr; //已选择的商品数组
WxMemberCart[index].checked = !WxMemberCart[index].checked //没选中的就要选中, 选中了的就取消选中状态
if (WxMemberCart[index].checked) { //如果选中了, 就放到一选择的商品数组里
for (var i = 0; i < WxMemberCart.length; i++) {
if (WxMemberCart[i] == WxMemberCart[index]) {
selectArr.push(WxMemberCart[index])
}
}
this.judgmentAll(); //计算价格
} else { //取消选中就从已选择的商品数组里移除
for (var i = 0; i < selectArr.length; i++) {
if (selectArr[i].id == WxMemberCart[index].id) {
selectArr.splice(i, 1)
}
}
this.judgmentAll(); //选择的时候要判断是不是已经选择了全部的
}
this.calculateTotal(); //计算一次价格
console.log("已选择的商品:", selectArr)
this.setData({ //重置数据
WxMemberCart: WxMemberCart,
selectArr: selectArr
})
},
//数量加减
numchangeTap: function (e) {
var types = e.currentTarget.dataset.types; //加和减的两张图片上分别设置了types属性
var index = e.currentTarget.dataset.index; //获取下标
var WxMemberCart = this.data.WxMemberCart; //初始数据
if (types == 'minus') { //减
var wx_goodsNum = WxMemberCart[index].wx_goodsNum;
if (wx_goodsNum <= 1) { //不允许商品数量小于1 , 都添加到购物车了还要减到0是几个意思? 反正有个删除按钮
return;
} else {
WxMemberCart[index].wx_goodsNum--;
this.setData({
WxMemberCart: WxMemberCart
})
this.calculateTotal(); //计算价格
}
}
if (types == "add") { //加
WxMemberCart[index].wx_goodsNum++; //加就不判断了, 加到二十二世纪去都行
this.setData({
WxMemberCart: WxMemberCart
})
this.calculateTotal(); //计算价格
}
//购物车实时更新某个商品的数量
},
//删除商品
deleteshopTap: function () {
var _this = this;
var WxMemberCart = this.data.WxMemberCart; //初始数据
var selectArr = this.data.selectArr; //已选择的商品数组
if (selectArr.length) { //如果以选择的商品数组里有长度
for (var i = 0; i < WxMemberCart.length; i++) {
for (var j = 0; j < selectArr.length; j++) {
if (WxMemberCart[i].id == selectArr[j].id) { //把初始数据的对应id的数据删掉就好了
WxMemberCart.splice(i, 1);
//后台同步删除当前购物车商品信息
}
}
}
this.setData({ //重置一下数据
WxMemberCart: WxMemberCart,
selectArr: [] //已选择的数组置空
})
this.calculateTotal(); //计算价格
}
},
//编辑或完成
adminTap: function () { //切换四个按钮的显示
this.setData({
adminShow: !this.data.adminShow
})
},
//结算
toApply: function () {
console.log("已选择的商品:", this.data.selectArr)
if (this.data.selectArr.length > 0) {
wx.navigateTo({
url: '../order/order?from=cart'
})
} else {
base.modal({
title: '未选择商品',
showCancel: false
})
}
},
});
4、wxss
page {
padding: 0 0 55px;
background-color: #f3f3f3;
}
.tit {
border-bottom: 1rpx solid #ddd;
padding: 20rpx 25rpx;
display: flex;
align-items: center;
background-color: #f0f0f0;
}
.tit-back {
flex: 1;
text-align: left;
color: #576b95;
}
.tit-text {
font-size: 11pt;
color: #999;
flex: 2;
}
.tit-tool {
flex: 1;
text-align: right;
color: #576b95;
}
.fs_12{
font-size: 12pt;
}
.fs_14{
font-size: 14pt;
}
.cart_body{
box-sizing: border-box;
/* padding: 0 32rpx; */
}
.cart_item{
box-sizing: border-box;
padding-bottom: 100rpx;
}
.check_img{
width: 40rpx;
height: 40rpx;
margin-top: 32rpx;
}
label{
display: flex;
padding: 26rpx 0;
background-color: #fff;
border-bottom: 1rpx solid #eee;
}
.cart_item_w{
display: flex;
width:94vw;
margin:0 auto;
}
.cart_image{
/* width: 192rpx; */
width: 110rpx;
height: 110rpx;
margin-left: 32rpx;
}
.cart_img{
width: 100%;
height: 100%;
border-radius: 8rpx;
}
.cart_content{
margin-left: 20rpx;
flex:1;
display: flex;
flex-flow: column wrap;
justify-content: space-between;
}
.content_title{
overflow: hidden;
text-overflow: ellipsis;
display: box;
line-clamp:2;
line-clamp: 2;
box-orient: vertical;
}
.quans{
width: 20vw;
display: flex;
color:#999;
justify-content: flex-start;
}
.content_price{
/* width: 40vw; */
/* float: right; */
display: flex;
justify-content: space-between;
}
.goods_number_container{
width: 170rpx;
display: flex;
/* justify-content: space-between; */
justify-content: flex-end;
}
.goods_number_icon_container{
width: 50rpx;
height:50rpx;
}
.goods_number_icon{
width:100%;
height:100%;
}
.goods_number{
height: 50rpx;
width: 50rpx;
flex:1;
text-align: center;
}
.ft_color{
color: #ff6a00;
}
.cart_total_container{
font-size: 30rpx;
height: 100rpx;
line-height: 88rpx;
background: #fff;
position: fixed;
bottom:0;
left:0;
right:0;
box-sizing: border-box;
padding: 12rpx 32rpx;
display: flex;
}
.checkAllBox{
border-radius: 50%;
height: 40rpx;
width: 40rpx;
margin-top: 23rpx;
margin-right: 8rpx;
}
.totalPrice{
flex:1;
margin-left: 40rpx;
}
.clearingBox{
width: 300rpx;
display: flex;
justify-content: space-between;
}
.btn{
width: 140rpx;
text-align: center;
border-radius: 36rpx;
line-height: 72rpx;
}
.editbtn{
border: 1px solid #666666;
background: #fff;
}
.clearbtn{
/* background: #ff5c4d;
color: #fff; */
flex: 1;
height: 40px;
line-height: 40px;
text-align: center;
border-radius: 3px;
background-color: #576b95;
border: 1rpx solid #576b95;
color: #fff;
margin: 0 0rpx 0 10rpx;
}
转载声明:本文为博主原创文章,未经博主允许不得转载
⚠️注意 ~
💯本期内容就结束了,如果内容有误,麻烦大家评论区指出!
如有疑问❓可以在评论区💬或私信💬,尽我最大能力🏃♀️帮大家解决👨🏫!
如果我的文章有帮助到您,欢迎点赞+关注✔️鼓励博主🏃,您的鼓励是我分享的动力🏃🏃🏃~