本文展示了如何使用Python Django框架、Redis存储购物车数据，并结合Vue.js进行前端交互，实现购物车的商品增减、总价计算以及商品删除功能。在页面加载时从服务器获取购物车信息，通过Vue方法处理加减操作并实时更新总价，同时提供支付接口与商品删除接口。
- 商品名称
- 商品价格
- 数量
- 小计
- 操作
- {{i.name}}
- {{i.price}}元
- {{i.count*i.price}}元
- 删除
- 合计(不含运费)：¥{{totalPrice}}
共计2件商品 - 去结算
name:'cart',
data() {return{
goods:[],
src:'/hou/static/goods/',
totalPrice:0
}
},//页面加载之前获取购物车参数信息
mounted(){//方法共用
this.get_data()
},
methods:{//添加点击事件 加一
add:function(index){
this.goods[index].count++;
this.totalPricefn(index,'+');
},//添加点击事件 减一
minus:function(index){if(this.goods[index].count>1){
this.goods[index].count--;
this.totalPricefn(index,'-');
}
},//计算总价
totalPricefn:function(index,params){if(params=='+'){
this.totalPrice+= this.goods[index].price*1;
}else if(params =='-'){
this.totalPrice-= this.goods[index].price*1;
}else{
this.totalPrice+= this.goods[index].price*this.goods[index].count;
}
},//支付
pay:function(){
let data={"total":this.totalPrice,
}
this.axios({
url:'/api/pay/pay/',
method:'get',
params:data
}).then(res=>{//let url=res.data.url;
location.href=url;
})
},//删除商品
delx:function(id){
let data={'uid':localStorage.getItem('uid'),'gid':id
}
this.axios({
url:'/api/goods/cart/',
method:'delete',
data:data
}).then(res=>{
this.get_data();
})
},//获取初始信息
get_data:function(){
this.axios({
url:'/api/goods/cart/',
method:'get',
params:{"id":localStorage.getItem('uid')}
}).then(res=>{
this.goods=res.data.data;
this.totalPrice=0;
this.goods.forEach((item,index)=>{
this.totalPricefn(index,'');
})
})
}
}
}
扫一扫
408
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
