这个购物车主要是通过本地储存当前所加减的值,每次点击都放到一个数组中,不管加减都操作的同一个数组
通过jia()、jian()来控制主页的购物车,通过xqjia()、xqjian()来控制弹出层的购物车的加减,你只需要把这两个按钮绑定到相对应的点击事件处即可,当然对于本地存储的数组,以及接口展示的数据要根据实际情况进行更换
1.先看主页购物车代码
this.Latest[index]为后台传输过来的购物列表的所有商品,index代表下标
this.xinde是要存的数组
jian(index) {
if (this.Latest[index].numm >= 1) {//判断如果这个数组中的数量大于或者等于1才会减
this.Latest[index].numm = this.Latest[index].numm - 1;//数组中的数量等于自身减1
this.zongjia -= parseFloat(this.Latest[index].pay);//计算总价,此处的parsetFloat为转数字
}
for(let k=0;k<this.xinde.length;k++){//循环这个数组的长度
if(this.xinde[k].id==this.Latest[index].id){//判断数组中每一个对象的id,如果一样
this.xinde[k].numm=this.Latest[index].numm//就把数量赋值给他,不会出现两个一样的对象
}
}
for (let i = 0; i < this.xinde.length; i++) {//再次循环这个数组
if (this.xinde[i].id == this.Latest[index].id) {//判断这个数组的长度
this.xinde[i].numm = parseFloat(this.Latest[index].numm);//判断数组中每一个对象的id,如果一样并且数量为0的时候
if (this.xinde[i].numm == 0) {//判断这个对象的数量为0
this.xinde.splice(i, 1);//删除这个对象
}
}
}
uni.setStorageSync('zja', this.zj);//本地存储
},
jia(index) {
if(this.Latest[index].numm<this.Latest[index].stock){ /这句话判断的是购买量是否大于库存
console.log('rrrrrr1', uni.getStorageSync('zja'));
let dfg = true;//定义一个,方便下边用
this.Latest[index].numm = parseFloat(this.Latest[index].numm) + 1;//数量加
this.zongjia += parseFloat(this.Latest[index].pay);//计算总价
if (this.xinde.length == 0) {//如果数组的长度为0
uni.setStorageSync('zja', 123);
this.xinde.push({//为数组添加第一条数据,以下为所需的字段
name: this.Latest[index].name,//名字
qian: this.Latest[index].pay//金钱
id: this.Latest[index].id,//id
numm: 1,//数量
bianhuan: 1,//自己定义了一个值,方便订单页面做判断
image: this.Latest[index].pic[0],//图片
unit:this.Latest[index].unit//数量
});
uni.setStorageSync('zja', this.xinde);//本地存储
} else {//如果不是第一条数据的话
for (let i = 0; i < this.xinde.length; i++) {//循环数组的长度
if (this.xinde[i].id == this.Latest[index].id) {//判断id是否相同
this.xinde[i].numm = parseFloat(this.Latest[index].numm);//id相同的话,只把加的数量赋值,不会出现两个相同的对象
dfg = false;//等于false不会执行下边的判断
uni.setStorageSync('zja', this.xinde);//本地存储一下
}
}
if (dfg == true) {//这个值等于true的话,判断的是,数组不为空,但是这是新加的一个对象
this.xinde.push({//同上的
name: this.Latest[index].name,
qian: this.Latest[index].pay,
id: this.Latest[index].id,
numm: 1,
bianhuan: 1,
image: this.Latest[index].pic[0],
unit:this.Latest[index].unit
});
uni.setStorageSync('zja', this.xinde);//本地存储
}
}
2.再看弹出层的购物车代码
xqjia(index){
if(this.xinde[index].numm'abcaa')){//如果当前的数量小于库存
this.xinde[index].numm = this.xinde[index].numm + 1;//数量加
this.zongjia += parseFloat(this.xinde[index].qian);//计算总价
this.bvc =parseFloat(this.xinde[index].numm);//吧数量赋值给一个新的数组
console.log(this.bvc)
for(let i=0;i<this.Latest.length;i++){//判断数组的长度
if(this.xinde[index].id == this.Latest[i].id){//判断id是否相同
this.Latest[i].numm = this.bvc //相同,把数量赋值给主页购物车的数量
}
}
uni.setStorageSync('zja', this.xinde);//本地存储
},
xqjian(index) {
if (this.xinde[index].numm >= 1) {//如果数量不为0
this.xinde[index].numm = this.xinde[index].numm - 1;//数量减1
this.bvc =parseFloat(this.xinde[index].numm)//主页的数量也建1
this.zongjia -= parseFloat(this.xinde[index].qian);//计算总价
for(let i=0;i<this.Latest.length;i++){//判断数组的长度
if(this.xinde[index].id == this.Latest[i].id){//判断id是否相同
this.Latest[i].numm = this.bvc //把这个值赋值给数组
}
}
uni.setStorageSync('zja', this.xinde);//本地存储
}
if (this.xinde[index].numm == 0) {//如果弹出层的数量为0
if (this.xinde.id == uni.getStorageSync('abcaa1')) {//判断主页和弹出层的id是否相同
this.bvc = 0;//数量为0
for(let i=0;i<this.Latest.length;i++){//判断数组的长度
if(this.xinde[index].id == this.Latest[i].id){//判断id是否相同
this.Latest[i].numm = this.bvc //数量赋值
}
}
}
this.xinde.splice(index, 1);//数组的对象减一
uni.setStorageSync('zja', this.xinde);//本地储存
}
},
3.购物车清空
// 清空购物车数量归零
goodsNumDeleteAll() {
this.zj = [];
this.xinde =[]
let i = 0;
for (i = 0; i < this.Latest.length; i++) {
this.Latest[i].numm = 0;
this.zongjia = 0;
}
console.log('rrrrrr', this.Latest);
uni.setStorageSync('Latest', '');
uni.setStorageSync('zja', '');
},
请看效果图
0条评论