购物车的实现（四）

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();