购物车商品复选框选中业务处理

最新推荐文章于 2024-10-31 11:34:54 发布

九品印相

最新推荐文章于 2024-10-31 11:34:54 发布

阅读量258

点赞数 6

分类专栏：分布式小程序电商2 文章标签： chrome javascript 前端

本文链接：https://blog.csdn.net/m0_68935893/article/details/136067250

版权

分布式小程序电商2 专栏收录该内容

78 篇文章 1 订阅

订阅专栏

商品复选框绑定change事件,以及带上商品id参数

   <!-- 复选框 开始 -->
      <view class="cart_chk_wrap">
        <checkbox-group data-id="{{item.id}}" bindchange="handleItemChange">
          <checkbox checked="{{item.checked}}"></checkbox>
        </checkbox-group>
      </view>
      <!-- 复选框 结束 -->

事件代码，获取商品所在cart里的索引，然后设置对应商品的checked的属性取反；

以及重新计算属性

  // 商品选中事件处理
  handleItemChange(e){
    const {id}=e.currentTarget.dataset;
    // 获取购物车数组
    let {cart}=this.data;
    let index=cart.findIndex(v=>v.id===id);
    console.log(index)
    cart[index].checked=!cart[index].checked;
    // 重新计算
    this.setCart(cart);
  },

setCart封装：

// 设置购物车状态 同时 重新计算 底部工具栏 数据 全选 总价格  购物买书 以及重新设置缓存
  setCart(cart){
    let allChecked=true;
    let totalPrice=0;
    let totalNum=0;
    cart.forEach(v=>{
      if(v.checked){
        totalPrice+=v.num*v.price;
        totalNum+=v.num;
      }else{
        allChecked=false;
      }
    })
    allChecked=cart.length!=0?allChecked:false;
    this.setData({
      cart,
      allChecked,
      totalNum,
      totalPrice
    })
    // cart设置到缓存中
    wx.setStorageSync('cart', cart);
  }

onShow事件修改下：

/**
   * 生命周期函数--监听页面显示
   */
  onShow: function () {
    console.log("show")
    const address=wx.getStorageSync('address');
    const cart=wx.getStorageSync('cart')||[];
 
    this.setData({
      address
    })

    this.setCart(cart);
  },