购物车的实现（四）

╰+攻爆jí腚メ 2022-12-16 03:52 152阅读 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() {
        //获取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();