购物车javascript代码(一)

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

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值