购物车javascript代码（二）

系统管理员 2022-12-16 10:59 186阅读 0赞

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 () \{  
//1 获取商品id  
let goodsId = JSON.parse(localStorage.getItem(‘cart’));  
//console.log(goodsId);  
//后台需要goodsid以字符串形式穿递 str = ‘1,3,4,6’;  
var goodsIdStr = ‘’;  
for (var id in goodsId) \{  
//console.log(id);  
goodsIdStr += id + ‘,’;  
\}  
// console.log(goodsIdStr);  
// 2 发送ajax请求,获取数据  
axios.post(‘http://localhost/day27/server/cart.php?fn=lst’, ‘goodsId=’ + goodsIdStr).then(res => \{  
//console.log(res);  
let \{ meta, data \} = JSON.parse(res);  
// console.log(meta, data);  
// 判断请求的状态  
if (meta.status == 200) \{  
let html = ‘’;  
data.forEach(goods => \{  
//console.log(goods);  
let \{ id, goodsName, price, goodsImg \} = goods;  
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 >`;

});
        // 追加到tbbody中
        let tbody = document.querySelector('tbody');
        tbody.innerHTML = html;
      }
    
    
    })

/***全选实现***/  
static checkAll () \{

// console.log(all);
    // 给全选绑定事件
    Cart.all[0].addEventListener('click', Cart.allEvent);
    Cart.all[1].addEventListener('click', Cart.allEvent);

\}  
//全选事件方法  
static allEvent () \{  
// console.log(this); 表示当前点击的节点  
// 获取全选状态  
let check = this.checked;  
//console.log(check);  
// 获取所有的单选按钮,让它跟随全选的状态  
Array.from(Cart.checkOne).forEach(ele => \{  
//console.log(ele);  
ele.checked = check;  
\})  
// console.log(Cart.checkOne);  
// 设置另一个全选跟随状态

Cart.all[0].checked = check;
    Cart.all[1].checked = check;
    
    // 统计商品数量
    Cart.goodsCount();

\}  
// 单选的操作  
static chOne () \{  
//console.log(this);  
// 获取单个商品数量  
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 => \{  
if (ele.checked) \{ // 选中  
//console.log(ele);  
// 2 找到数量td的节点  
let trObj = ele.parentNode.parentNode;  
//console.log(trObj);  
let goodsNum = trObj.getElementsByClassName(‘count-input’)\[0\].value - 0;  
//console.log(goodsNum);  
count += goodsNum;

//3 获取小计
        let xj = trObj.getElementsByClassName('subtotal')[0].innerHTML - 0;
    
        price += xj;
      }
    })
    // console.log(count, price);
    
    // 放到已选商品和合计
    let totalObj = document.getElementById('selectedTotal');
    let priceObj = document.getElementById('priceTotal');
    totalObj.innerHTML = count;
    priceObj.innerHTML = price.toFixed(2);

\}  
static clickStatus = true  
/***商品数量的改变***\*/  
static addGoodsNum (that, id) \{  
// 设计延时器,防止过快点击,500ms点一次  
// let tiems = ‘’;  
if (!Cart.clickStatus) return  
Cart.clickStatus = false;  
setTimeout(() => \{  
Cart.clickStatus = true  
\}, 500)  
// console.log(that);  
// 获取原有的数量  
let numObj = that.previousElementSibling  
let num = numObj.value - 0;  
//console.log(num);  
num++  
numObj.value = num;

// 更新local中商品数量
    let cartGoods = JSON.parse(localStorage.getItem('cart'));
    cartGoods[id] = num;
    localStorage.setItem('cart', JSON.stringify(cartGoods));
    
    // 更新数量和总计
    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;