uniapp通过uni.setStorageSync()实现前端购物车，纯前端代码

这个购物车主要是通过本地储存当前所加减的值，每次点击都放到一个数组中，不管加减都操作的同一个数组

通过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;kthis.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].nummthis.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;ithis.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;ithis.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;ithis.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', '');
		},

请看效果图