小程序实践（六）--- 购物车

小程序实践（六）— 购物车

今天分享一下购物车功能实现思路，首先购物车是离不开checkbox,而不同的框架封装了不同的api,今天分享的就是小程序的checkbox是怎么实现购物车的功能的。
我们在购物的时候常见的购物车无非也就包含以下几个功能点：
1）单选、全选、取消以及结算。
2）单个商品购买数量的增加与减少
3）删除所选商品，购物车为空时的提示
接下来我们就可以围绕着需求一步一步的去实现

代码实现

页面布局wxll

这里我是根据数据的length进行判断，length>0则渲染列表，当然也可以根据自己自定义参数来进行设置。这里不多说。

<view class='car-list'>
    <block wx:if="{{cartList.length>0}}">
     <!-- wx:for 渲染购物车列表 -->
      <block wx:for="{{cartList}}" wx:key="id">
        <navigator hover-class="none" url="/pages/product-con/index?goods_id={{item.product_id}}">
          <view class='list-item flex'>
            <view class='select-btn flex' data-index='{{index}}' catchtap='switchSelect'>
              <label class="checkbox">
                <checkbox value="{{index}}" checked="{{item.checked}}" />
              </label>
            </view>
            <view class='picture'>
              <image src='{{item.pic}}'></image>
            </view>
            <view class='pro-info flex'>
              <view class='pro-title'>{{item.product_name}}</view>
              <view class='pro-des' wx:if="{{item.unique}}">{{item.sku}}</view>
              <view class='pro-price' wx:if="{{item.unique}}">
                <text>￥</text>{{item.price}}</view>

              <view class='pro-price' wx:else>
                <text>￥</text>{{item.price}}</view>
            </view>
            <!--商品数量的增加与减少-->
            <view class='count-wrapper flex'>
            
              <text data-index="{{index}}" catchtap="numDescClick" class='{{minusStatus}}'>-</text>
              
              <input class='num' data-index='{{index}}' type="number" value='{{item.num}}' catchtap='changeInput'  bindblur='bindblur'/>
              <text class='add' data-index="{{index}}" catchtap="numAddClick">+</text>
            </view>
          </view>
        </navigator>
      </block>
    </block>
    <block wx:else>
      <view class="notice">购物车空空如也</view>
    </block>
  </view>
  <view class='foot'>
    <view class='pay-wrapper flex' hidden='{{foothidden}}'>
      <view class='left-wrapper flex'>
        <view class='all-select' catchtap="allChecked">
          <label class="checkbox">
            <checkbox value="Boolean" checked="{{isAllSelect}}" />
          </label>
        </view>
        <view class='txt'>全选</view>
        <view class='count-num'>
          <text>合计:</text>￥{{countmoney}}
        </view>
      </view>
      <navigator class='flex' hover-class="none" url="/pages/order-confirm/order-confirm?id={{cartIdsStr}}&max_price={{countmoney}}">
        <view class='pay-btn'>立即结算</view>
      </navigator>
    </view>
    <view class='delete-wrapper flex'>
      <view class='left-wrapper flex'>
        <view class='all-select' catchtap="allChecked">
          <label class="checkbox">
            <checkbox value="Boolean" checked="{{isAllSelect}}" />
          </label>
        </view>
        <view class='txt'>全选</view>
      </view>
      <view class='right-wrapper flex'>
        <view class='delete-btn' catchtap='cartDelAll' data-code='del'>删除</view>
      </view>
    </view>
  </view>

初始化数据

Page({
  data: {
    foothidden: false,//管理标签控制属性
    countmoney: '',//合计金额
    cartNum: "0",//购物数量
    isAllSelect: false,//是否全选
    minusStatus: 'disabled',
    cartList: [],//购物车列表
  },


  onLoad: function (options) {
    this.setData({
      cartList: [{
        num: 1,
        pic: "../images/p2.jpg",
        price: "2000.00",
        product_name: "Iphone 5s",
      },
      {
        num: 1,
        pic: "../images/p3.jpg",
        price: "1000.00",
        product_name: "Iphone 4"
      }],
    })
  },
})

购物车列表数据一般都是通过请求服务器拿到的数据，所以我们放在生命周期函数里给 cartList赋值。有一点需要注意的是，生命周期函数onLoad和onReady只在初始化的时候执行一次，可以根据业务需求实际情况来决定在哪个函数初始化数据。这里我每次进来只需要加载一次，所以在onLoad函数初始化列表数据（模拟数据只为实现效果）

计算总价

总价 = 选中的商品1的 价格 * 数量 + 选中的商品2的 价格 * 数量 + …
根据公式，可以得到

//总共价钱；
  countmoney() {
    var carmoney = 0;
    var array = this.data.cartList;// 获取购物车列表
    for (var i = 0; i < array.length; i++) {// 循环列表得到每个数据
      if (array[i].checked == true) {// 判断选中才会计算价格
        if (array[i]) {
          carmoney += parseFloat(array[i].num * array[i].price);// 所有价格加起来
        } 
      }
    }
    this.setData({
      countmoney: carmoney.toFixed(2)//渲染到页面
    })
  },

页面中涉及到总价格的只要调用此方法便可。

选择事件

点击时选中，再点击又变成没选中状态，其实就是改变 selected 字段。通过 data-index="{{index}}" 把当前商品在列表数组中的下标传给事件。

//单选；
  switchSelect: function (e) {
    var index = e.currentTarget.dataset.index;// 获取data- 传进来的index
    this.data.cartList[index].checked = !this.data.cartList[index].checked;//改变当前选中商品的状态
    var len = this.data.cartList.length;
    var selectnum = [];
    for (var i = 0; i < len; i++) {
      if (this.data.cartList[i].checked == true) {
        selectnum.push(true);
      }
    }
    if (selectnum.length == len) {
      this.data.isAllSelect = true;
    } else {
      this.data.isAllSelect = false;
    }
    this.setData({
      cartList: this.data.cartList,
      isAllSelect: this.data.isAllSelect
    });
    // 重新获取总价
    this.countmoney();
    this.carnum();//更新购物车选中的数量
  },

全选事件

根据全选状态 selectAllStatus 去改变每个商品的 selected

//全选
  allChecked: function (e) {
    var selectAllStatus = this.data.isAllSelect;//是否全选状态
    selectAllStatus = !selectAllStatus;
    var array = this.data.cartList;
    for (var i = 0; i < array.length; i++) {
      array[i].checked = selectAllStatus;
    };
    this.setData({
      cartList: this.data.cartList,
      isAllSelect: selectAllStatus
    })
    this.carnum();
    this.countmoney();
  },

增减数量

点击+号，num加1，点击-号，如果num > 1，则减1

//加
  numAddClick: function (event) {
    var index = event.currentTarget.dataset.index;
    this.data.cartList[index].num = +this.data.cartList[index].num + 1;
    var minusStatus = this.data.cartList[index].num <= 1 ? 'disabled' : 'normal';
    this.setData({
      cartList: this.data.cartList,
      minusStatus: minusStatus
    });
    this.carnum();
    this.countmoney();

    var buy_num = this.data.cartList[index].num;
  },
  //减
  numDescClick: function (event) {
    var index = event.currentTarget.dataset.index;
    this.data.cartList[index].num = this.data.cartList[index].num <= 1 ? 1 : +this.data.cartList[index].num - 1;
    var minusStatus = this.data.cartList[index].num <= 1 ? 'disabled' : 'normal';
    this.setData({
      cartList: this.data.cartList,
      minusStatus: minusStatus
    });

    this.carnum();
    this.countmoney();
    var buy_num = this.data.cartList[index].num;
  },

删除商品

点击删除按钮则从购物车列表中删除当前元素，购物车如果为空，全选状态isAllSelect赋值为false

/**删除购物车 */
  cartDelAll: function (code) {
    var array = this.data.cartList;
    var cart_id = [];
    var cont = '删除成功';;//提示语    
    var that = this;
    for (var i = 0; i < array.length; i++) {
      array.splice(i, 1);
    }
    that.setData({
      cartList: array,
      isAllSelect: false
    })

  }

购物车购买数量更新

购买商品进行增加减少的时候调用此方法，更新所选中商品的数量值

//购物车数量
  carnum() {
    var carnum = 0;
    var array = this.data.cartList;
    for (var i = 0; i < array.length; i++) {
      if (array[i].checked == true) {
        carnum += parseInt(array[i].num);
      }
    }

    this.setData({
      cartNum: carnum
    })
  },

最后看一下效果图吧：

总结

看似简单的购物车功能，却涉及到微信小程序的很多知识点，此功能新手可用来练习掌握小程序相关的知识点，大家有什么好的意见可留言评论，一起学习交流哦！！！！