购物车

//思路

/*

  知识点

  1.toFixed() 保留几位小数

  2.checked  选中

  3.自定义-属性 data-属性  获取属性值 节点.dataset.属性

  4.节点对象event  event.target  函数内第一个值默认为event 通常用e表示

  5.事件委托 如何判断哪个数组对象被改变 通过自定义id属性 数组对象内的id是唯一的 将数组id赋值给节点自定义属性

*/

  
  


//进入程序 先获取数据 浏览器有拿浏览器的 没有就拿js中带的 或运算

var cartList = JSON.parse(window.localStorage.getItem('cartList')) || [

    // 每一个对象就是一个购物车内容的数据

    {

        id: 111234,

        status: false,

        pic: "https://img1.baidu.com/it/u=2511310783,721605137&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=332",

        name: "我是一个手机, 不知道是啥",

        price: 100,

        number: 3,

        total: 5,

    },

    {

        id: 123456,

        status: false,

        pic: "https://img1.baidu.com/it/u=1537709578,2453227648&fm=253&fmt=auto&app=120&f=JPEG?w=809&h=500",

        name: "我是一个电脑, 不知道是啥",

        price: 98.72,

        number: 1,

        total: 7,

    },

    {

        id: 965874,

        status: true,

        pic: "https://img2.baidu.com/it/u=3561506717,735421650&fm=253&fmt=auto&app=138&f=JPEG?w=750&h=500",

        name: "我是一个手纸, 不知道是啥",

        price: 356.21,

        number: 2,

        total: 22,

    },

];

//一.获取焦点

var oCon = document.querySelector('.content')

  


//1.渲染函数

function bindHtml(){

  //3.用遍历的方法 计算勾选数 商品总数 总金额

  //3.1勾选数量

  var selectCke = 0

  //3.2商品总数量

  var amountCke = 0

  //3.3商品总金额

  var sumCke = 0

  cartList.forEach(function(item){

    if(item.status === true){

      selectCke++

      amountCke+=item.number

      sumCke+=item.number*item.price

    }

  


  })

  
  


  //2.渲染 将数据添加到ocon中

  var str = ''

  //全选位置

  str+=`

    <div class="top">

    <input type="checkbox" class="quan" ${selectCke === cartList.length?'checked':''}> 全选

    </div>

    <ul>

  `

  cartList.forEach(function(item){

    str+=`

      <li>

        <div class="status">

          <input type="checkbox" class="ge" data-id="${item.id}" ${item.status?'checked':''}>

        </div>

        <div class="show">

          <img src=${item.pic} alt="">

        </div>

        <div class="title">

          ${item.name}

        </div>

        <div class="price">

          ￥ ${item.price.toFixed(2)}

        </div>

        <div class="number">

          <button class="buttjian"  data-id=${item.id}>-</button>

          <input type="text" value="${item.number}">

          <button class="buttjia"  data-id=${item.id}>+</button>

        </div>

        <div class="sub">

          <!-- 总价 -->

          ￥ ${item.number * item.price}

        </div>

        <div class="destory">

          <button class="shanc" data-id="${item.id}" >删除</button>

        </div>

      </li>

  


   

    `

  })

  


  str+=`

  </ul>

    <div class="bottom">

    <div class="totalNum">

      总件数 : ${amountCke}

    </div>

    <div class="btns">

      <button class="qk">清空购物车</button>

      <button class ="jsuan" data-totalPrice = "${sumCke.toFixed(2)}">去结算</button>

      <button class="yixuan">删除所有已选中</button>

    </div>

    <div class="totalPrice">

      总价格 : ￥ <span>${sumCke.toFixed(2)}</span>

    </div>

  </div>

 

  `

  


  oCon.innerHTML = str

  


  //存入数剧 每次 都重新存入一遍

  window.localStorage.setItem("cartList",JSON.stringify(cartList))

  
  


  return

}

  


bindHtml()

  


// 事件委托 把所有事件委托给父元素

oCon.addEventListener('click',function(e){

  


  //1.全选 简单方法 节省代码

  if(e.target.className === 'quan'){

    // console.log(2)

    cartList.forEach(function(item){

      //如果点击全选 全选就有checked 把他复制给status

      //反之亦然

      //e.target.checked得到选中状态 简化了判断

      item.status = e.target.checked

     

      // console.log(3)

      bindHtml()

    })

   

  }

  //全选 笨方法

  // if(e.target.className === 'quan'){

  //   if(!e.target.hasAttribute('checked')){

  //     console.log(2)

  //     cartList.forEach(function(item){

  //       item.status = true

  //       bindHtml()

  //     })

  //   }else{

  //     cartList.forEach(function(item){

  //       item.status = false

  //       bindHtml()

  //     })

  //   }

 

  // }

  
  


  //2.清空购物车

  if(e.target.className ==='qk'){

    var boo = confirm('请问你确定清空吗')

    if(boo){

      cartList.length = 0

      bindHtml()

    }

  


  }

  


  //3.结算的值在另一个函数

  //思路 如何跨函数传递

  //可以存到属性中 调用节点属性

  if(e.target.className === 'jsuan'){

    //注意 自定义属性中 大小 在dataset 出来是小写 要注意

    console.log(e.target.dataset.totalprice)

  }

  


  //4.删除对应选项

  //自定义属性 用数组对象中id id是唯一的

  if(e.target.className === 'shanc'){

    console.log(1)

    cartList = cartList.filter(function(item){

      return item.id != e.target.dataset.id

    })

    bindHtml()

  }

  


  //4.删除已选中 留下为false状态的的

  if(e.target.className === 'yixuan'){

    console.log(1)

    cartList = cartList.filter(function(item){

      return item.status === false

    })

    bindHtml()

  }

  
  


  //5.商品 className 判断是不是商品选框

  //自定义id属性 data-geid  再用(事件对象)e.target.dataset.geid 判断 相等 就改变status

  if(e.target.className === 'ge'){

    cartList.forEach(function(item){

      if(item.id == e.target.dataset.id){

        // item.status = e.target.checked

        //取反

        item.status = !item.status

        console.log(1)

        bindHtml()

      }

    })

  }

  
  
  
  
  
  


  //加减

  if(e.target.className === 'buttjian'){

    cartList.forEach(function(item){

      //e.target.dataset.btid得到的是字符串类型 用两个==

      if(item.id == e.target.dataset.id && item.number>1){

        item.number--

        console.log(1)

        bindHtml()

      }

    })

  }

  


  if(e.target.className === 'buttjia'){

    cartList.forEach(function(item){

      //e.target.dataset.btid得到的是字符串类型 用两个==

      if(item.id == e.target.dataset.id && item.number<item.total){

        item.number++

        console.log(1)

        bindHtml()

      }

    })

  }

  
  


})