购物车javascript代码（一）

最新推荐文章于 2024-07-21 17:46:31 发布

晚安你

最新推荐文章于 2024-07-21 17:46:31 发布

阅读量747

点赞数

文章标签： javascript

本文链接：https://blog.csdn.net/weixin_47439712/article/details/109174058

版权

class Goods {
// 实例化的时候自动调用
constructor() {
Goods.list()
}

// 获取商品信息的
// static 静态方法
// 静态方法只属于某个类
static list () {

// 1 发送ajax请求
axios.get('http://localhost/day27/server/server.php?fn=lst')
  .then(res => {
    //console.log(res);
    // 将数据转化为对象
    let { meta, data } = JSON.parse(res);
    console.log(meta, data);

    // 判断请求的状态
    if (meta.status == 200) {
      // console.log(data);
      // data 是对象数组,必须先循环
      let html = '';
      data.forEach(ele => {
        // console.log(ele);
        let { id, goodsName, price, goodsImg } = ele;
        html += `<div class="box"><img src="${goodsImg}" alt=""><p>${goodsName}</p><span class="goods_item_price" data-price-id="100004222715" style="">¥${price}</span><a href="javascript:" id="InitCartUrl" class="btn-special1 btn-lg" onclick="Goods.addCart(${id},1)">加入购物车</a></div>`;
      });
      //追加到页面中
      let app = document.querySelector('#cont');
      app.innerHTML = html;
    }


  });

}
//添加购物车的方法
static addCart (id, num) {
// console.log(id, num);
/*
购物车逻辑:
1 判断cart这个key是否存在
2 存在就判断商品是否存在
2-1 商品存在增加数量
2-2 商品不存在则新增
3 不存在则新增cart
*/

//1 获取cart
let cartGoods = localStorage.getItem('cart');

// 2 判读cart是否存在
if (cartGoods) {  //存在
  cartGoods = JSON.parse(cartGoods);
  // 2-1判断商品是否存在
  // attr 就是存在的商品id
  for (let attr in cartGoods) {
    // 购物车中id,等于当前添加的id,商品存在
    if (attr == id) {
      num += cartGoods[id];
    }
  }
  // 设置商品,商品存在就更新数量,不存在就新增
  // console.log(cartGoods);
  cartGoods[id] = num;
  localStorage.setItem('cart', JSON.stringify(cartGoods))
} else { // 不存在
  //{商品id:数量}
  cartGoods = { [id]: num };
  cartGoods = JSON.stringify(cartGoods);
  localStorage.setItem('cart', cartGoods)
}

}
}

new Goods();