这篇文章主要讲解了vue实现淘宝购物车功能的方法,内容清晰明了,对此有兴趣的小伙伴可以学习一下,相信大家阅读完之后会有帮助。
淘宝购物车功能,效果如下图
非常简单的逻辑,没有做代码的封装,代码如下
￥{{goods.price}}
X {{goods.number}}
{{goods.number}} {{goods.number}}
出口默认{
组件:{
}，
名称:“life",
数据(){
返回{
cartStatus:“account"//购物车状态,帐户结算,编辑删除编辑状态
cartShops:[],//店铺列表
sumPrice: 0,//合计金额
totalNumber: 0,//总数
shopList:[],//店铺列表
goodsList:[],//商品列表
};
}，
看:{
}，
安装(){
this.getCartDetail ();
}，
方法:{//购物车列的表
getCartDetail:函数(){
http.get美元。(“api/产品/v1/getCartDetail")。然后(res=比;{
如果(res.data。代码===200){//console.log (res.data.data)
这一点。cartShops=res.data.data.cartShops;
其他}{
烤面包(res.data.msg);
}
})。抓住(错误=比;{
console.log(错误)
})
}，//商品选择
goodsCkeck:函数(事件、goodsList shopList shopId) {//商品列表+ -,店铺是否检查(店铺列表+ -),全选是否检查
var输入=document.getElementsByTagName(& # 39;输入# 39;)
如果(event.currentTarget.checked) {
this.goodsList.push (String (event.currentTarget.value));//如果店铺内所有商品全选,店铺选中
var newArr=this.goodsList;
var tt=goodsList.every(函数(itemValue) {
返回(newArr.indexOf (String (itemValue.cartDetailId)) !=1)
})
如果(tt) {//店铺内全选,店铺检查,店铺列表+
我(var=0; i< input.length;我+ +){
如果(输入[我]。值=https://www.yisu.com/zixun/=shopId) {
输入[我]。检查=true;
}
}
this.shopList.push (String (shopId));//防止shopid是许多类型造成麻烦//如果所有店铺都全选,则全选按钮检查
如果(this.shopList。长度===shopList.length) {//所有店铺全选
我(var=0; vue实现淘宝购物车功能的方法
