小程序商城购物车案例

小程序购物车实现批量删除修改增加 等功能，直接po代码！

car.wxml

<view class="J-shopping-cart-empty" hidden="{{iscart}}"><view class="shopping-cart-empty">
        <view class="bg"></view> 
        <view class="cart"></view>
        <text class='empty-text'>购物车空空如也</text>  
        <p></p>
         <view bindtap="gobuy" class="button button-primary" >
            去抢购        </view>
    </view></view> <view class="scroll" hidden="{{hidden}}"><scroll-view class="scroll" scroll-y="true">
  <view class="separate"></view>
  <view wx:for="{{carts}}"  wx:key="item">
    <view class="cart_container">  
      <view  wx:if="{{!item.isSelect}}">
            <icon class="item-select" bindtap="switchSelect" data-index="{{index}}" data-id="{{index}}"  type="circle" size="20"></icon>
      </view>
      <view wx:elif="{{item.isSelect}}">
            <icon class="item-select" bindtap="switchSelect" data-index="{{index}}" data-id="{{index}}"  type="success" color="#f0145a" size="20"></icon>
      </view>
      <image class="item-image" src="{{item.pic}}"></image>
      <view class="column">
        <text class="title">{{item.title}}</text>
         <image bindtap="delGoods" id="img{{index}}" data-index="{{index}}" src="../../images/cloc.png"></image> 
        <view class="row">
          <text class="sku-price">￥{{item.price}}</text>
        </view>
        <view class="row">
          <!-- <text >数量：{{item.quantity}}</text> -->
          <view class="num-box">
                <view class="btn-groups">
                  <button class="goods-btn btn-minus" data-index="{{index}}" data-num="{{item.num}}" bindtap="delCount">-</button>
                  <view class="num">{{item.quantity}}</view>
                  <button class="goods-btn btn-add" data-index="{{index}}" data-num="{{item.num}}" bindtap="addCount">+</button>
                </view>
          </view>
        </view>
      </view>
    </view>
    <view class="separate"></view>
  </view></scroll-view></view>
 <view class="bottom_total" hidden="{{hidden}}">
  <view class="bottom_line"></view>
  <view class="row">
    <view  wx:if="{{!isAllSelect}}">
            <icon class="item-allselect" bindtap="allSelect" type="circle" size="20"></icon>
      </view>
      <view wx:elif="{{isAllSelect}}">
            <icon class="item-allselect" bindtap="allSelect" type="success" color="#f0145a" size="20"></icon>
      </view>
    <text class="small_text">全选</text>
    <text>合计:￥ </text>
    <text class="price">{{totalMoney}}</text>
    <button class="button-red" bindtap="toBuy" formType="submit">去结算      </button>
  </view></view>

car.js

Page({
  /**
   * 页面的初始数据
   */
  data: {
    carts: [], //数据 
    iscart: false,
    hidden: null,
    isAllSelect: false,
    totalMoney: 0,
  },

  onShow: function () {
    // 获取产品展示页保存的缓存数据（购物车的缓存数组，没有数据，则赋予一个空数组）  
    var arr = wx.getStorageSync('cart') || [];
    console.info("缓存数据：" + arr);    // 有数据的话，就遍历数据，计算总金额 和 总数量  
    if (arr.length > 0) {
      // 更新数据  
      this.setData({
        carts: arr,
        iscart: true,
        hidden: false
      });
      console.info("缓存数据：" + this.data.carts);
    } else {
      this.setData({
        iscart: false,
        hidden: true,
      });
    }
  },

  //勾选事件处理函数  
  switchSelect: function (e) {
    // 获取item项的id，和数组的下标值  
    var Allprice = 0, i = 0;
    let id = e.target.dataset.id,
    index = parseInt(e.target.dataset.index);
    this.data.carts[index].isSelect = !this.data.carts[index].isSelect;    //价钱统计
    if (this.data.carts[index].isSelect) {
      this.data.totalMoney = this.data.totalMoney + (this.data.carts[index].price * this.data.carts[index].quantity);
    } else {
      this.data.totalMoney = this.data.totalMoney - (this.data.carts[index].price * this.data.carts[index].quantity);
    }
    //是否全选判断
    for (i = 0; i < this.data.carts.length; i++) {
      Allprice = Allprice + (this.data.carts[index].price * this.data.carts[index].quantity);
    }
    if (Allprice == this.data.totalMoney) {
      this.data.isAllSelect = true;
    } else {
      this.data.isAllSelect = false;
    }
    this.setData({
      carts: this.data.carts,
      totalMoney: this.data.totalMoney,
      isAllSelect: this.data.isAllSelect,
    })
  },

  //全选
  allSelect: function (e) {
    //处理全选逻辑
    let i = 0;
    if (!this.data.isAllSelect) {
      this.data.totalMoney = 0;
      for (i = 0; i < this.data.carts.length; i++) {
        this.data.carts[i].isSelect = true;
        this.data.totalMoney = this.data.totalMoney + (this.data.carts[i].price * this.data.carts[i].quantity);
      }
    } else {
      for (i = 0; i < this.data.carts.length; i++) {
        this.data.carts[i].isSelect = false;
      }
      this.data.totalMoney = 0;
    }
    this.setData({
      carts: this.data.carts,
      isAllSelect: !this.data.isAllSelect,
      totalMoney: this.data.totalMoney,
    })
  },  
  // 去结算
  toBuy() {
    wx.showToast({
      title: '去结算',
      icon: 'success',
      duration: 3000
    });
    this.setData({
      showDialog: !this.data.showDialog
    });
  },  //数量变化处理
  handleQuantityChange(e) {
    var componentId = e.componentId;
    var quantity = e.quantity;
    this.data.carts[componentId].count.quantity = quantity;
    this.setData({
      carts: this.data.carts,
    });
  },
  gobuy: function () {
    wx.navigateTo({
      url: '../index/index',
    })
  },
  /* 减数 */
  delCount: function (e) {
    var index = e.target.dataset.index;
    var count = this.data.carts[index].quantity;    // 商品总数量-1
    if (count > 1) {
      this.data.carts[index].quantity--;
    }
    // 将数值与状态写回  
    this.setData({
      carts: this.data.carts
    });
    console.log("carts:" + this.data.carts);
    this.priceCount();
  },

  /* 加数 */
  addCount: function (e) {
    var index = e.target.dataset.index;
    var count = this.data.carts[index].quantity;    // 商品总数量+1  
    if (count < 10) {
      this.data.carts[index].quantity++;
    }
    // 将数值与状态写回  
    this.setData({
      carts: this.data.carts
    });
    console.log("carts:" + this.data.carts);
    this.priceCount();
  },

  priceCount: function (e) {
    this.data.totalMoney = 0;
    for (var i = 0; i < this.data.carts.length; i++) {
      if (this.data.carts[i].isSelect == true) {
        this.data.totalMoney = this.data.totalMoney + (this.data.carts[i].price * this.data.carts[i].quantity);
      }
    }
    this.setData({
      totalMoney: this.data.totalMoney,
    })
  },

  /* 删除item */
  delGoods: function (e) {
    this.data.carts.splice(e.target.id.substring(3), 1);    // 更新data数据对象  
    if (this.data.carts.length > 0) {
      this.setData({
        carts: this.data.carts
      })
      wx.setStorageSync('cart', this.data.carts);
      this.priceCount();
    } else {
      this.setData({
        cart: this.data.carts,
        iscart: false,
        hidden: true,
      })
      wx.setStorageSync('cart', []);
    }
  }
})