小程序购物车功能

shopcart.js

data: {    'goodList': [],

    'checkAll': false,

    'totalCount': 0,

    'totalPrice': 0

  },

onLoad: function (options) {

    var that = this;

    this.setData({

      navH: app.globalData.navHeight

    });

    //设置商品列表高度

    wx.getSystemInfo({

      success: function (res) {

        that.setData({

          goodList:wx.getStorageSync('cart_info')

        })

      },

    });

  },

/**

   * 计算商品总数

   */

  calculateTotal: function () {

    var goodList = this.data.goodList;

    var totalCount = 0;

    var totalPrice = 0;

    for (var i = 0; i < goodList.length; i++) {

      var good = goodList[i];

      if (good.checked) {

        totalCount += good.cart_num;

        totalPrice += good.cart_num * good.market_price;

      }

    }

    totalPrice = totalPrice.toFixed(2);

    this.setData({

      'totalCount': totalCount,

      'totalPrice': totalPrice

    })

  },



  /**

   * 用户点击商品减1

   */

  subtracttap: function (e) {

    var index = e.target.dataset.index;

    var goodList = this.data.goodList;

    var count = goodList[index].cart_num;

    if (count <= 1) {

      return;

    } else {

      goodList[index].cart_num--;

      this.setData({

        'goodList': goodList

      });

      this.calculateTotal();

    }

  },



  /**

   * 用户点击商品加1

   */

  addtap: function (e) {

    var index = e.target.dataset.index;

    var goodList = this.data.goodList;

    var count = goodList[index].cart_num;

    goodList[index].cart_num++;

    this.setData({

      'goodList': goodList

    });

    this.calculateTotal();

  },

  /**

   * 用户选择购物车商品

   */

  checkboxChange: function (e) {

    console.log('checkbox发生change事件，携带value值为：', e.detail.value);

    var checkboxItems = this.data.goodList;

    var values = e.detail.value;

    for (var i = 0; i < checkboxItems.length; ++i) {

      checkboxItems[i].checked = false;

      for (var j = 0; j < values.length; ++j) {

        if (checkboxItems[i].id == values[j]) {

          checkboxItems[i].checked = true;

          break;

        }

      }

    }



    var checkAll = false;

    if (checkboxItems.length == values.length) {

      checkAll = true;

    }



    this.setData({

      'goodList': checkboxItems,

      'checkAll': checkAll

    });

    this.calculateTotal();

  },



  /**

   * 用户点击全选

   */

  selectalltap: function (e) {

    console.log('用户点击全选，携带value值为：', e.detail.value);

    var value = e.detail.value;

    var checkAll = false;

    if (value && value[0]) {

      checkAll = true;

    }



    var goodList = this.data.goodList;

    for (var i = 0; i < goodList.length; i++) {

      var good = goodList[i];

      good['checked'] = checkAll;

    }



    this.setData({

      'checkAll': checkAll,

      'goodList': goodList

    });

    this.calculateTotal();

  }

shopcart.wxss
/* pages/shopcart/shopcart.wxss */

page {
  height: 100%;
  background: #fff;
  font-family: -apple-system-font, Arial, Helvetica, sans-serif;
  color: #333;
  font-size: 32rpx;
  line-height: 1.42857;
}

.container {
  width: 100%;
  min-height: 100%;
  display: flex;
  flex-direction: column;
  box-sizing: border-box;
}

.section {
  display: flex;
  flex-direction: column;
  padding-left: 30rpx;
  padding-right: 30rpx;
  margin-bottom: 30rpx;
}

.section-good {
  margin-bottom: 100rpx;
}

.good {
  display: flex;
  flex-direction: row;
  align-items: center;
  position: relative;
  height: 250rpx;
  border-bottom: 1px solid #ccc;
}

.good:last-child {
  border-bottom: none;
}

.checkbox {
  width: 48rpx;
  height: 48rpx;
}

.cover {
  width: 100%;
  height: 80%;
  border-radius: 10rpx;
  margin-left: 20rpx;
}

.content {
  flex: 1;
  margin-left: 20rpx;
}

.content .text {
  color: #363636;
  width: 450rpx;
  text-overflow: ellipsis;
  overflow: hidden;
  white-space: nowrap;
}

.content .name {
  color: #333;
  font-size: 36rpx;
}

.content .author {
  font-size: 28rpx;
  color: #363636;
  margin-top: 10rpx;
}

.content .desc {
  color: #363636;
  font-size: 28rpx;
  margin-top: 10rpx;
}

.content .press {
  font-size: 28rpx;
  color: #363636;
  margin-top: 10rpx;
}

.content .price {
  font-size: 36rpx;
  color: #e4452a;
  margin-top: 10rpx;
}

.good .stepper {
  display: flex;
  position: absolute;
  right: 0;
  bottom: 20rpx;
  flex-direction: row;
  text-align: center;
}

.stepper .add, .stepper .subtract {
  width: 50rpx;
  height: 50rpx;
  line-height: 50rpx;
  font-size: 28rpx;
  border: 1px solid #ccc;
  box-sizing: border-box;
}

.stepper .disabled {
  color: #eee;
}

.stepper .count {
  width: 60rpx;
  height: 50rpx;
  line-height: 50rpx;
  border: 1px solid #ccc;
  text-align: center;
  box-sizing: border-box;
  min-height: 1rem;
  font-size: 28rpx;
}

.section-bottom {
  display: flex;
  flex-direction: row;
  align-items: center;
  width: 100%;
  height: 100rpx;
  position: fixed;
  bottom: 0;
  left: 0;
  margin-bottom: 0;
  background-color: #fff;
  box-sizing: border-box;
  z-index: 99;
}

.section-bottom .btn {
  width: 160rpx;
  height: 100rpx;
  line-height: 100rpx;
  text-align: center;
  color: #fdfffd;
  background-color: #fbb304;
}

.section-bottom .btn-default {
  color: #363636;
  background-color: #eee;
}

.section-bottom .btn-primary {
  color: #fdfffd;
  background-color: #fbb304;
}

.section-bottom .checkbox-allcheck {
  display: inline-block;
  margin-left: 30rpx;
  vertical-align: top;
  font-size: 0px;
}

.section-bottom .check-all-text {
  display: inline-block;
  vertical-align: top;
  margin-left: 10rpx;
  height: 23px;
  line-height: 23px;
  font-size: 28rpx;
}

.section-bottom .total {
  flex: 1;
  text-align: center;
  font-size: 26rpx;
}

.total .totalCount {
  font-size: 26rpx;
  display: inline-block;
  vertical-align: middle;
}

.total .totalPrice {
  display: inline-block;
  font-size: 26rpx;
  margin-left: 20rpx;
  vertical-align: middle;
}

.total .totalCount text {
  color: #e4452a;
  vertical-align: middle;
}

.total .totalPrice text {
  color: #e4452a;
  font-size: 36rpx;
  vertical-align: middle;
}

shopcart.wxml
<!--pages/shopcart/shopcart.wxml-->
<navbar parameter='{{parameter}}'></navbar>
<view class='container'>
  <view class='section section-good'>
    <checkbox-group bindchange="checkboxChange">
      <view class='good' wx:for='{{goodList}}' wx:for-item="good" wx:key="good.name">
        <label class="checkbox">
          <checkbox value="{{good.id}}" checked="{{good.checked}}" hidden='hidden' />
          <icon type="circle" size="23" wx:if="{{!good.checked}}"></icon>
          <icon type="success" size="23" wx:if="{{good.checked}}"></icon>
        </label>
        <image class='cover' mode="aspectFill" src='{{good.logo}}'></image>
        <view class='content'>
          <view class='text name'>{{good.title}}</view>
          <view class='text price'>¥{{good.market_price}}</view>
        </view>
        <view class='stepper'>
          <view class='subtract {{good.cart_num == 1 ? "disabled": ""}}' data-index='{{index}}' catchtap='subtracttap'>-</view>
          <input class='count' type='number' value='{{good.cart_num}}'></input>
          <view class='add' data-index="{{index}}" catchtap='addtap'>+</view>
        </view>
      </view>
    </checkbox-group>
  </view>
  <view class='section-bottom'>
    <checkbox-group bindchange="selectalltap">
      <label class='checkbox-allcheck'>
        <checkbox value="{{!checkAll}}" checked="{{checkAll}}" hidden='hidden' />
        <icon type="circle" size="23" wx:if="{{!checkAll}}"></icon>
        <icon type="success" size="23" wx:if="{{checkAll}}"></icon>
        <text class='check-all-text'>全选</text>
      </label>
    </checkbox-group>
    <view class="total">
      <view class='totalCount'>已选择
        <text>{{totalCount}}</text>件商品
      </view>
      <view class='totalPrice'>总价：
        <text>¥{{totalPrice}}</text>
      </view>
    </view>
    <view class='btn {{totalCount > 0 ? "btn-primary" : "btn-default"}}'>去结算</view>
  </view>
</view>