购物车全选复选框选中业务处理

九品印相

已于 2023-09-30 16:18:33 修改

阅读量39

点赞数

文章标签： javascript

于 2023-09-29 16:53:17 首次发布

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

版权

  //商品全选事件处理了
  handleItemAllCheck(){
    let {cart,allChecked} = this.data;
    console.log(cart,allChecked)
    allChecked=!allChecked;
    cart.forEach(v=>v.checked=allChecked);
    this.setCart(cart);
  },


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

    //cart设置到缓存中
    wx.setStorageSync('cart', cart);
  }


<!-- 底部工具栏 开始 -->
<view class="footer_tool">
    <!-- 全选 开始 -->
    <view class="all_chk_wrap">
        <checkbox-group bindchange="handleItemAllCheck">
            <checkbox checked="{{allChecked}}"><text decode="true">&nbsp;&nbsp;全选</text></checkbox>
        </checkbox-group>
    </view>
    <!-- 全选 结束 -->

    <!-- 合计 开始 -->
            <view class="total_price_wrap">
                <view class="total_price">
                    合计: <text class="total_price_text">￥ {{totalPrice}}</text>
                </view>
            </view>
    <!-- 合计 结束 -->

    <!-- 结算 开始 --> 
    <view class="order_pay_wrap">
        结算({{totalNum}})
    </view>
    <!-- 结算 结束 -->

</view>
<!-- 底部工具栏 结束 -->