微信小程序项目_秋泊优选41

37、购物车_商品数量编辑

数量的编辑

1 “+””-”按钮绑定同一个点击事件区分的关键自定义属性

1	"+"		"+1"
2	"-"		"-1"

2 传递被点击的商品id goods_id
3 获取data中的购物车数组来获取需要被修改的商品对象
3.1当购物车的数量=1同时用户点击 “-"（实现在下一篇博文）
4 直接修改商品对象的数量num
5 把cart数组重新设置回缓存中和data中 this.setCart

pages\cart\index.wxml

<!--商品信息-->
            <view class="cart_info_wrap">
                <view class="goods_name">{{item.goods_name}}</view>
                <view class="goods_price_wrap">
                    <view class="goods_price">￥{{item.goods_price}}</view>
                        <view class="cart_num_tool">
                            <view bindtap="handleItemNumEdit" data-id="{{item.goods_id}}" data-operation="{{-1}}" class="num_edit">-</view>
                            <view class="goods_num">{{item.num}}</view>
                            <view bindtap="handleItemNumEdit" data-id="{{item.goods_id}}" data-operation="{{1}}" class="num_edit">+</view>
                        </view>
                </view>    
            </view>

pages\cart\index.js

  // 商品数量的编辑功能 
  handleItemNumEdit(e){
    // 1 获取传递过来的参数
    const {operation,id}=e.currentTarget.dataset;
    // 2 获取购物车数组
    let {cart}=this.data;
    // 3 找到需要修改的商品的索引
    const index=cart.findIndex(v=>v.goods_id===id);
    // 4 进行修改数量
    cart[index].num+=operation;
    // 5 设置回缓存和data中
    this.setCart(cart);
  }