标签：goods obj vuex jq 购物车 item parents var 数据

 

  


<!-- 大的遮罩层 -->
  <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();
      }
    });




  })
}

 

标签：goods,obj,vuex,jq,购物车,item,parents,var,数据
来源： https://www.cnblogs.com/itJiao33/p/14184553.html

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。