VUE实现一个简单的购物车增加,添加,减少,删除等对商品操作。

由于是一个小的页面,所以就没有用到VUEX对于数据处理,实际开发中,会用到VUEX。
这边用到的思想是将商品信息存到一个数组里面去。
简单看一下页面:
在这里插入图片描述
在这里插入图片描述页面就不说了,非常简单;
我们主要来说一下关系逻辑
是否需要向储存购物信息通过判定数量是否为0就能达到;下面我们来看一下代码,代码注释得很详细,就不多说了。

<script>
		let app = new Vue({
			el:'#store',
			data(){
				return{
					yesMoney:'100',
					sAddress:'地址地址地址地址',
					activeKey:0,
					sidebarTeam:[
						{
							title:'张三',
							id:1
						},
						{
							title:'张',
							id:1
						},
						{
							title:'张三ada',
							id:1
						}
					],
					goodsTeam:[
						{
							url:'https://www.bootcdn.cn/bootstrap/',
							title:'汰渍洗衣粉5KG汰渍洗5KG 汰渍洗衣粉',
							money:'40',
							id:1,
							count:0
						},
						{
							url:'https://www.bootcdn.cn/bootstrap/',
							title:' 汰渍洗衣粉',
							money:'60',
							id:2,
							count:0
						},
						{
							url:'https://f.youdao.com/activity.do?method=newUserCoupon&vendor=fanyi-new-bottom',
							title:' 汰渍洗衣粉adasdada',
							money:'40',
							id:3,
							count:0
						},
						{
							url:'https://f.youdao.com/activity.do?method=newUserCoupon&vendor=fanyi-new-bottom',
							title:' 汰渍洗衣粉只要100元 特惠',
							money:'90',
							id:4,
							count:0
						}
					],
					orderInformation:[],
					messageHidden:false,
					heji:''
				}
			},
			mounted() {
				//获取侧边栏信息
				//同时默认获取第一个选项的值
			},
			methods:{
				onChange(index){
					console.log(index)
					//请求改变goodsTeam的值
				},
				countChange(index){
					const _this = this;
					let count = _this.goodsTeam[index].count;
					let orderInformation = _this.orderInformation;
					if(count > 0){
						//往购物车里面添加商品
						// _this.orderInformation.splice(_this.orderInformation[index],1);
						if(orderInformation.length <= 0){
							orderInformation.push( _this.goodsTeam[index]);
						}else{
							for(let i=0;i<orderInformation.length;i++){
								//同一个商品
								if(orderInformation[i].id == _this.goodsTeam[index].id){
									orderInformation[i] = _this.goodsTeam[index];
									break;
									//不同商品
								} else if(orderInformation[i].id != _this.goodsTeam[index].id&&i===orderInformation.length-1){
									orderInformation.push( _this.goodsTeam[index]);
								}
							}	
						}
					}else if(count <= 0){
						//删除购物车里面的东西
						for(let i=0;i<orderInformation.length;i++){
							//同一个商品
							if(orderInformation[i].id == _this.goodsTeam[index].id){
								orderInformation.splice(i,1);
								break;
							}
						}	
					}
				},
				lookShoppingCart(){
					if(this.orderInformation.length<=0){
						vant.Toast('购物车中还没有东西')
					}else{
						let mum = 0;
						for(let i=0;i<this.orderInformation.length;i++){
							mum = mum + this.orderInformation[i].money * this.orderInformation[i].count
						}
						this.heji = mum;
						this.messageHidden = true;
					}
				},
				upload(){
					//确认无误之后的操作
				}
			}
			
		})
	</script>
  • 1
    点赞
  • 12
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值