vue实现淘宝购物车功能

2020-06-16 06:56:55易采站长站整理

for(var i = 0;i<input.length;i++){
if(input[i].getAttribute('dataId') == event.currentTarget.value){
input[i].checked = false;
//商品列表--
this.goodsList.splice(this.goodsList.indexOf(input[i].value),1);
}
//任意一个不选,全选取消
if(input[i].name == 'allRadio'){
input[i].checked = false;
}
}
}
//计算总价和数量
this.caculate();
},
//所有全选
allCheck: function(event){
var input = document.getElementsByTagName('input')
if(event.currentTarget.checked){
//全选checked,所有店铺checked,店铺列表++,所有商品checked,商品列表++
for(var i = 0;i<input.length;i++){
//去重
if(!input[i].checked){
input[i].checked = true;
if(input[i].name == 'shopRadio'){
this.shopList.push(String(input[i].value))
}
if(input[i].name == 'goodRadio'){
this.goodsList.push(String(input[i].value))
}
}
}
}else{
//全不选取消checked,店铺全部取消checked,店铺列表清空,所有商品取消checked,商品列表清空
for(var i = 0;i<input.length;i++){
input[i].checked = false;
this.shopList = [];
this.goodsList = [];
}
}
//计算总价和数量
this.caculate();
},
//计算总金额总数量
caculate: function(){
var input = document.getElementsByTagName('input');
var newArr = [];
for(var i = 0;i<input.length;i++){
if(input[i].name == 'goodRadio' && input[i].checked){
var num = input[i].parentNode.parentNode.children[2].children[2].children[2].innerHTML;
newArr.push(
{
'price': input[i].getAttribute('price'),
'num': num
}
)
}
}
this.totalNumber = newArr.length;
//归零
this.sumPrice = 0;
for(var j = 0,len = newArr.length;j<len;j++){
this.sumPrice += newArr[j].price * newArr[j].num;
}
},
//数量减小
numDecrease: function(num){
//如果当前input选中,则修改数量计算价格,如果当前input没有选中,则修改数量不计算价格
var spanList = event.currentTarget.parentNode.children;
for(var i = 0,len = spanList.length;i<len;i++){
if(spanList[i].getAttribute("class") == 'beeforCacul'){
spanList[i].style.display = 'none';
}
if(spanList[i].getAttribute("class") == 'cacul'){
spanList[i].style.display = 'block';