<!-- 大的遮罩层 -->
  <div class="goods_moble"></div>

  <!-- 购物车弹出框 -->
  <div class="goods_type_box">
    <div class="goods_type_title flex justify-between align-items-center">
      <div class="All_text checked_All flex on">
        <!-- <input type="checkbox"  class="checked_All" checked> -->
        <img src="./images/images/header1.png" alt="">
        <img src="./images/images/header2.png" alt="">
        <span>全选</span>
      </div>
      <h1>购物车</h1>
      <div class="clear_All">清空购物车</div>
    </div>
    <!-- 购物列表 -->
    <div class="goods_type_content">

    </div>
    <!-- 购物列表 -->
    <!-- 合计 -->
    <div class="sum_box flex">
      <div class="sum_total">合计:￥<span>0</span></div>
      <div class="go_shopping">去结算(<span></span>)</div>
    </div>
  </div>

 

 1 / 点击示隐藏加入购物车
　　//给了一个遮罩层  点击加入购物车图标时，遮罩层和购物车同事fadeIn ,点击遮罩层时，遮罩层和购物车同时隐藏　　　
 2 function hide_code_shopping() {
 3   $(".cat_buyy").click(function () {
 4     $(".goods_moble").stop().fadeIn();
 5     $(".goods_type_box").stop().fadeIn();
 6   })
 7   $(".goods_moble").click(function () {
 8     $(".goods_moble").stop().fadeOut();
 9     $(".goods_type_box").stop().fadeOut();
10 
11   })
13 }

 

　

var vuex_arr = []   //定义一个空数组

点击时 把当前商品的信息存储进来

// 购物车显示。且数据的筛选追加
function shopping_show() {

  $(".cat_buyy").click(function () {

    var vuex_obj = {}   //定义一个空对象  点击时 把当前商品的信息存储进来

    // 商品id
    var showId = $(this).parents(".ix_now_list_nr").attr("goods_id")

    // 获取点击的图片
    var showImg = $(this).parents(".ix_now_list_nr").find(".rs-img").attr("src");

    // 获取标题文本
    var showTitle = $(this).parents(".ix_now_list_nr").find(".ix_now_list_nr_name p").text();

    // 获取价格
    var showPrice = $(this).parents(".ix_now_list_nr").find(".ix_now_list_nr_money_dis").text();

    // 获取des
    var showDes = $(this).parents(".ix_now_list_nr").attr("goods_des")


    // 获取isconvert能否转换单位
    var showIsconvert = $(this).parents(".ix_now_list_nr").attr("goods_isconvert")

    // 获取goods_startquantity第一次的赋值
    var showStartquantity = $(this).parents(".ix_now_list_nr").attr("goods_startquantity")

    // 获取每次点击的累加数量
    var showAddquantity = $(this).parents(".ix_now_list_nr").attr("goods_addquantity")

    // 获取goods_formula能否转换单位
    var showFormulaert = $(this).parents(".ix_now_list_nr").attr("goods_formula")

    // 获取商品转换前单位
    var showUnit = $(this).parents(".ix_now_list_nr").attr("goods_unit")

    // 获取商品转换后单位
    var showConvertunit = $(this).parents(".ix_now_list_nr").attr("goods_convertunit")


    vuex_obj.showImg = showImg

    vuex_obj.showTitle = showTitle

    vuex_obj.showPrice = showPrice

    vuex_obj.showDes = showDes



    vuex_obj.showId = showId

    vuex_obj.showIsconvert = showIsconvert

    vuex_obj.showStartquantity = showStartquantity

    vuex_obj.showUnit = showUnit

    vuex_obj.showFormulaert = showFormulaert

    vuex_obj.showUnit = showUnit

    vuex_obj.showConvertunit = showConvertunit

    vuex_obj.showAddquantity = showAddquantity



    $(".goods_type_content").html("")

    var goods_state = vuex_arr.find(item => {
      return item.showId === vuex_obj.showId
    })




    if (goods_state && Object.keys(goods_state).length > 0) {
      console.log(goods_state);
     goods_state.age = parseInt(vuex_obj.showAddquantity) + parseInt(goods_state.age)
      //如果有当前商品的话   把当前的age 就是当前的数量 再点的时候 + 每次要添加的数量  
    } else {

      // 默认的checked状态
      vuex_obj.checked = true

      //显示初始值
      vuex_obj.age = showStartquantity

      //添加到对象里
      vuex_arr.push(vuex_obj)
     
    }

    // <input type="checkbox"  ${cheked_show} class="Checksin">
   
    vuex_arr.forEach((item, index) => {
      var cheked_show = item.checked ? `checked=${item.checked}` : "";
      $(".goods_type_content").append(`
      <div class="goods_type_List flex justify-between" goods_conten_id="${item.showId}"  goods_addquantity="${item.showAddquantity}"  >
      <div class="checkinputBox ${item.checked?'on':''} ${cheked_show} Checksin flex justify-between align-items-center">
        <img src="./images/images/input1.png" alt="" class="img1">
        <img src="./images/images/input2.png" alt="" class="img2">
      </div>
      <figure class="goods_img">
        <img src="${item.showImg}" alt="">
      </figure>
      <div class="goods_txt">
        <hgroup>${item.showTitle}</hgroup>
        <p>≈<span class="about_price">${item.age/item.showFormulaert}</span>${item.showConvertunit}</p>
        <div class="goods_sales flex">
          <div class="goods_sp flex align-items-center"> ￥<span class="goods_price">${item.showPrice}/${item.showConvertunit}</span></div>
          <div class="goods_num flex align-items-center">
            <span name-code="-1" class="num-jian count_fn">-</span>
            <input class="input-num" type="text" value="${item.age}">
            <span name-code="1" class="num-jia count_fn">+</span></div>${item.showUnit}
        </div>
      </div>
    </div>
      `)

    });

    // ${item.age/item.showFormulaert}
    console.log(vuex_arr)
    jia_jian()
    cheked_goods()
    sum_price()
    all_checked()
    About_Prices()
  })

}

 

/ 更改是否选中触发
function cheked_goods() {

  $(".Checksin img").click(function () {   //点击图片时  之前定义了一个on

    if ($(this).parents(".checkinputBox").hasClass("on")) { 
      $(this).parents(".checkinputBox").removeClass("on")
    } else {
      $(this).parents(".checkinputBox").addClass("on")
    }


    vuex_arr.forEach((item, index) => {
      if (item.showId == $(this).parents(".goods_type_List").attr("goods_conten_id")) {
        item.checked = !item.checked   //其实就是当前的状态  = 当前状态取反
      }

    })

    vuex_arr.forEach((item, index) => {

      if (item.checked) {    //如果全都是true  全部选中 的情况下 
        $(".checked_All").addClass("on") //给全选这个框加上on
        sum_price() 
      } else {
        $(".checked_All").removeClass("on")
        sum_price()
        throw new Error()
      }
    })

    sum_price()  //记住调用计算价格的方法
  })

}

 

// 加加减减方法
function jia_jian() {
  $(".num-jian").click(function () {   //几点-号时
    var n = $(this).next().val();   //获取当前它下一个的值（其实就是input框的值）
    var num = parseInt(n) - parseInt($(this).parents(".goods_type_List").attr("goods_addquantity"));  //每次减掉的值  是input框里的值 - 每次后端传过来要减的固定的量
    // if (num == 0) {
    //   return
    // }
   if(num < parseInt($(this).parents(".goods_type_List").attr("goods_addquantity"))){  //如果input框里显示的值小于 后端传过来的 初始值 就return出去 不能再减了
      return
   }
    $(this).next().val(num);
    vuex_arr.forEach((item, index) => {
      if (item.showId == $(this).parents(".goods_type_List").attr("goods_conten_id")) {   //操作我们存进来的数据 如果是相同id的情况下  才能确定是当前这一条，
        item.age = num    //然后把这个值 赋给我们数据里的age  数据里的age 也要更改
      }
    })
    About_Prices($(this))   //这个地方是调用点击时 要触发的函数  并传一个参数过去 $(this) 每次都是当前的this  就是当前这个节点

    sum_price()  //这里也要调用计算价格
  })


  $(".num-jia").click(function () {
    var n = $(this).prev().val();
    var num = parseInt(n) + parseInt($(this).parents(".goods_type_List").attr("goods_addquantity"));
    // if (num == 0) {
    //   return;
    // }
    if(num < parseInt($(this).parents(".goods_type_List").attr("goods_addquantity"))){
      return
     }
    $(this).prev().val(num);

    vuex_arr.forEach((item, index) => {
      if (item.showId == $(this).parents(".goods_type_List").attr("goods_conten_id")) {
        item.age = num
      }

    })
    About_Prices($(this))
    sum_price()
  })



}

// 总价方法
function sum_price() {
  var sum_price = 0
  var sum_age = 0
  vuex_arr.forEach((item, index) => {
    if (item.checked) {
      sum_price += item.showPrice * (item.age/item.showFormulaert)
      sum_age++
    }
  })

  $(".sum_total span").text(sum_price.toFixed(2))

  $(".go_shopping span").text(sum_age)

}

//价格约等于方法
function About_Prices(code_this){
  vuex_arr.forEach((item, index) => {
    if (item.showId == $(code_this).parents(".goods_type_List").attr("goods_conten_id")) {
        var Aweight = item.age/item.showFormulaert
    }
    $(code_this).parents(".goods_type_List").find(".about_price").text(Aweight)

  })

}

//清空购物车 
function clear_shopping() {
  $(".clear_All").click(function () {
    swal("是否要清空购物车?", {
      buttons: ["取消", "确定"]
    }).then((value) => {
      if (value) {
        vuex_arr = []
        $(".sum_total span").text("")
        $(".go_shopping span").text("")
        $(".goods_moble").stop().fadeOut();
        $(".goods_type_box").stop().fadeOut();
      } else {
        $(".goods_moble").stop().fadeIn();
        $(".goods_type_box").stop().fadeIn();
      }
    });




  })
}