VUE实现一个简单的购物车增加,添加,减少,删除等对商品操作。
由于是一个小的页面,所以就没有用到VUEX对于数据处理,实际开发中,会用到VUEX。这边用到的思想是将商品信息存到一个数组里面去。简单看一下页面:页面就不说了,非常简单;我们主要来说一下关系逻辑是否需要向储存购物信息通过判定数量是否为0就能达到;下面我们来看一下代码,代码注释得很详细,就不多说了。<script>let app = new Vue({el:'#store',data()
·
由于是一个小的页面,所以就没有用到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>
更多推荐
已为社区贡献2条内容
所有评论(0)