class Cart {
// 静态方法声明在class中
static checkOne;
static all;
constructor() {
Cart.all = document.querySelectorAll('.check-all');
Cart.list();
// 等待商品数据追加完成
Cart.checkOne = document.getElementsByClassName('check-one');
Cart.checkAll();
}
/*****获取商品列表*****/
static list() {
//获取local
let goodsId = JSON.parse(localStorage.getItem('cart'));
// console.log(goodsId);
let goodsStr = "";
//for in 循环对象
//后台需要goodsid以字符串形式穿递 str = '1,3,4,6';
for (let id in goodsId) {
console.log(id);
goodsStr += id + ",";
}
//发送axjx请求
axios.post('http://localhost/day1012-27/cart2/server/cart.php?fn=lst', 'goodsId=' + goodsStr)
.then(ele => {
let {
meta,
data
} = JSON.parse(ele);
// console.log(meta, data);
let html = '';
//遍历data里面的数据
data.forEach(res => {
let {
id,
goodsName,
goodsImg,
price
} = res;
html += `<tr>
<td class="checkbox" >
<input class="check-one check" onclick="Cart.chOne()" type="checkbox" />
</td >
<td class="goods">
<img src="${goodsImg}" alt="" />
<span>${goodsName}</span>
</td>
<td class="price">${price}</td>
<td class="count">
<span class="reduce"></span>
<input class="count-input" type="text" value="${goodsId[id]}" />
<span class="add" onclick="Cart.addGoodsNum(this,${id})">+</span>
</td>
<td class="subtotal">${(goodsId[id] * price).toFixed(2)}</td>
<td class="operation">
<span class="delete" onclick = "Cart.delGoods(this,${id})">删除</span>
</td>
</tr >`;
})
//追加到tbody中
let tbody = document.querySelector('tbody')
tbody.innerHTML = html;
})
}
/*****全选的实现*****/
static checkAll() {
// 给全选绑定事件
Cart.all[0].addEventListener('click', Cart.allEvent);
Cart.all[1].addEventListener('click', Cart.allEvent);
}
static allEvent() {
//获取选中的状态
let check = this.checked;
// console.log(check); //true false
//遍历所有单选标签,并让他们选中状态
Array.from(Cart.checkOne).forEach(ele => {
ele.checked = check;
})
//设置全选跟随选中状态
Cart.all[0].checked = check;
Cart.all[1].checked = check;
Cart.goodsCount();
}
/***单选的操作***/
static chOne() {
// console.log(this); //指向Cart类
//获得商品的长度
let goodsLen = Cart.checkOne.length;
// console.log(goodsLen);
let count = 0;
//统计选中状态个数
Array.from(Cart.checkOne).forEach(ele => {
if (ele.checked) count++;
})
let checkSta = false;
if (goodsLen == count) {
checkSta = true
}
//设置全选选中状态
Cart.all[0].checked = checkSta;
Cart.all[1].checked = checkSta;
Cart.goodsCount();
}
/*****数量和价格的统计******/
static goodsCount() {
let count = 0;
let price = 0;
// 1 统计选中的单选按钮对应的商品数量
Array.from(Cart.checkOne).forEach(ele => {
console.log(ele); //节点input
//获取当前选中状态的数量和价格
if (ele.checked) {
//获取tr节点 是check-one的父亲的父亲
let trObj = ele.parentNode.parentNode;
// console.log(trObj);
//找到td数量的节点
let goodsNum = trObj.getElementsByClassName('count-input')[0].value - 0;
console.log(goodsNum);
count += goodsNum;
//获取小计的节点
let xj = trObj.getElementsByClassName('subtotal')[0].innerHTML - 0;
price += xj;
}
// 放到已选商品和合计
//获取节点
let selGoodsNum = document.querySelector('#selected');
selGoodsNum.innerHTML = count;
let priceTotalObj = document.querySelector('#priceTotal');
priceTotalObj.innerHTML = price;
})
}
/*------------------------------------------------------------*/
static clickStatus = true;
/***商品数量的改变***/
static addGoodsNum(that, id) {
//设计延时器,防止过快点击,500ms点一次
if (!Cart.clickStatus) return;
Cart.clickStatus = false;
setTimeout(() => {
Cart.clickStatus = true;
}, 500)
console.log(that);
//获取原有的数量
let numObj = that.previousElementSibling;
// console.log(numObj);
let num = numObj.value - 0;
num++;
numObj.value = num;
//更新local中的商品数量
let carGoods = JSON.parse(localStorage.getItem('cart'))
carGoods[id] = num;
localStorage.setItem('cart', JSON.stringify(carGoods))
//更新数量和小计
Cart.goodsCount();
//更新小计
let trObj = that.parentNode.parentNode;
//获取价格
let oneP = trObj.getElementsByClassName('price')[0].innerHTML;
trObj.getElementsByClassName('subtotal')[0].innerHTML = (oneP * num).toFixed(2);
}
/****删除的实现*****/
static delGoods(that, id) {
//1. 删除tr
that.parentNode.parentNode.remove();
//2 更新local
let cartGoods = JSON.parse(localStorage.getItem('cart'))
//删除属性
delete cartGoods[id];
localStorage.setItem('cart', JSON.stringify(cartGoods))
//更新数量和总计
Cart.goodsCount();
}
}
new Cart();
购物车的实现(四)
猜你喜欢
转载自blog.csdn.net/qq_45279574/article/details/109144116
今日推荐
周排行