程序商城系列之购物车

购物车功能基本上算是每个商城都有的功能，也是整个商城系统最重要的部分，购物车的做法有很多种，一般存放在本地缓存和数据库中比较常见，本文就是存放到了数据库中；

先放一张效果图：

先分析下要实现的功能：

1.数量的加减

2.单选、多选、全选

3.根据选中商品单价和数量计算金额

wxml:

<block wx:if='{{hasList}}'>
  <!-- <>购物车列表 -->
  <view class="carts-list">
    <view wx:for="{{carts}}" class="carts-item" wx:key='cart' wx:item='item'>
      <!-- //复选框 -->
      <view class="carts-radio">
        <image class="carts-select" bindtap="bindCheckbox" data-index="{{index}}" src="{{item.isSelect?'/img/icon/select.png':'/img/icon/n_select.png'}}" />
      </view>  
      <!-- //商品信息 -->  
      <view class="carts-cnt">
        <image class="carts-image" src="{{imghref}}{{item.goods_img}}" mode="aspectFill" />
        <view class="carts-info">
          <view class="carts-title clamp2">{{item.goods_name}}</view>
          <text class="carts-guige">{{item.guige}}ml</text>
          <view class="carts-subtitle">
            <text class="carts-price c--f60">￥{{item.price}}</text>
          </view>
        </view>
      </view>
      <!-- //数量加减 -->  
      <view class="carts-num">
          <text class="minus"  bindtap="bindMinus" data-index='{{index}}'>-</text>
          <input type="number"  bindinput="bindIptCartNum" data-index='{{index}}' value="{{item.num}}" />
          <text class="plus normal" data-index='{{index}}' bindtap="bindPlus">+</text>
      </view>
      
      <!-- //删除 -->  
      <icon class="carts-del" type="clear" size="16" color="#ccc" data-index="{{index}}" bindtap="bindCartsDel" />
    </view>
  </view>
 <view class="carts-footer">  
    <view class="bottomfixed">  
      <view class="inner">  
        <view class="chkAll" bindtap="bindSelectAll">
        <image class="allselect" src="{{selectAllStatus?'/img/icon/select.png':'/img/icon/n_select.png'}}" /> 
          <text>全选</text>  
        </view>  
        <view class="total">合计：<em>￥{{totalMoney}}</em></view>  
        <view wx:if="{{totalCount != 0}}" class="btn-pay" bindtap='bindjiesuan'>去结算({{totalCount}})</view>  
        <view wx:else class="btn-pay disabled">去结算({{totalCount}})</view>  
      </view>  
    </view>  
  </view>
  </block>
  <block wx:else>
     <view class="content" >
      <view style="margin-top:50px;width:100%;">
       <view style='font-size:15px;'>购物车没有商品!</view>
      </view>
    </view>
  </block>

hasList  用于判断购物车中是否有数据

 <!-- //复选框 -->
      <view class="carts-radio">
        <image class="carts-select" bindtap="bindCheckbox" data-index="{{index}}" src="{{item.isSelect?'/img/icon/select.png':'/img/icon/n_select.png'}}" />
      </view>  

这里的选择框我用了两个图片代替，一个是选中状态的图片，一个是非选中状态的图片，需要的话可以自行到iconfont去下载

wxss:

.c--f60{color: #f60;}
.clamp1, .clamp2, .clamp3{display: -webkit-box!important; overflow: hidden; -webkit-box-orient: vertical;}
.clamp1{-webkit-line-clamp:1;}
.clamp2{-webkit-line-clamp:2;}
.clamp3{-webkit-line-clamp:3;}
  
.carts-list{
  padding: 0 20rpx;
}

.carts-list .carts-item{
  border-top: 1rpx solid #e3e3e3;
  box-sizing: border-box; 
  display: flex; 
  align-items: center; 
  justify-content: space-between; 
  padding: 20rpx 10rpx; 
  width: 100%; 
  position: relative;
}
.carts-list .carts-item:nth-child(1){
  border-top: 0;
}

.carts-select{
  margin-top:5px;
  width:30px;
  height:30px;
}

.carts-item .carts-cnt{
  flex: 1; 
  padding: 0 20rpx;
}
.carts-cnt .carts-image{
  float:left; 
  margin-right: 20rpx; 
  height: 150rpx; 
  width: 150rpx;
 
}
.carts-cnt .carts-info{
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  min-height: 150rpx;
}
.carts-cnt .carts-title{
  font-size:15px;
}
.carts-cnt .carts-guige{
  font-size: 12px;
}
.carts-cnt .carts-subtitle{
  display: flex; 
  flex-direction: row; 
  font-size: 15px;
}
.carts-list .carts-item .carts-del{
  position: absolute; 
  top: 20rpx; 
  right: 10rpx;
}

  
/*数量加减*/  
.carts-num{
  border: 1rpx solid #aaa; 
  border-radius: 5rpx; 
  display: flex; 
  align-items: center; 
  align-self: flex-end; 
  text-align: center; 
  height: 50rpx;
}

.carts-num input{
  border-left: 1rpx solid #aaa; 
  border-right: 1rpx solid #aaa; 
  font-size: 30rpx; 
  font-family: arial; 
  height: 50rpx; 
  line-height: 50rpx; 
  width: 80rpx;
}
.carts-num .minus, .carts-num .plus{color: #000; text-align: center; line-height: 50rpx; width: 40rpx;}
.carts-num .minus{font-size: 30rpx;}
.carts-num .minus.disabled{color: #ccc;}
.carts-num .plus{font-size: 34rpx;}

.bottomfixed{
  position: fixed;
  display: flex;
  flex-direction: column;
  bottom: 0;
  width: 100%;
  height: 120rpx;
  line-height: 120rpx;
  background: #f5f5f5;
}

.bottomfixed .inner{
  display: flex;
  flex-direction: row;
  align-items: center;
}

.bottomfixed .inner .chkAll {
  font-size: 28rpx;
  margin-right: 40rpx;
  margin-left: 20rpx;
  display: flex;
  flex-direction: row;
  align-items: center;
}

.bottomfixed .inner .chkAll .allselect{
  width:30px;
  height:30px;
}

.bottomfixed .inner .total{
  font-size:28rpx;
}
.bottomfixed .inner .total em{color:#f60;}

.btn-pay{
  position: absolute;
  right:0px;
  background:#FF5E3A;
  color:#fff;
  padding:0 10px;
  font-size: 28rpx;
}

.disabled{
  background:#ccc;
}

.content{
    width: 100%;
    height:100%;
    position: absolute;
    left: 0;
    font-size: 15px;
    color:#999;
    text-align:center;
}

js:

Page({

  /**
   * 页面的初始数据
   */
  data: {
    hasList: true,//购物车是否有数据
    totalMoney: 0,//总金额
    selectAllStatus: false,//是否全选
    uid: 0, //用户ID
    totalCount: 0,//数量
    carts: [],
  },

  //设置文本框值
  bindIptCartNum: function (e) {
    
    const index = e.currentTarget.dataset.index;
    var num = e.detail.value;
    let carts = this.data.carts;
    carts[index].num = num;
     
    this.setData({
      carts: carts
    });
  },

  /* 点击减号 */
  bindMinus: function (e) {
    const index = e.currentTarget.dataset.index;
    let carts = this.data.carts;
    let num = carts[index].num;
    if (num <= 1) {
      return false;
    }
    num = num - 1;
    carts[index].num = num;
    this.setData({
      carts: carts
    });
    this.getTotalPrice();
  },

  /* 点击加号 */
  bindPlus: function (e) {
    const index = e.currentTarget.dataset.index;
    let carts = this.data.carts;
    let num = carts[index].num;
    num = num + 1;
    carts[index].num = num;
    this.setData({
      carts: carts
    });
    this.getTotalPrice();
  },

  //删除商品
  bindCartsDel(e) {
    var that = this;
    wx.showModal({
      title: '提示',
      content: '您确定要删除吗？',
      success: function (res) {
        
        if (res.confirm) {
          //网络请求删除购物车数据
        }
      }
    })
  },

  //计算总价
  getTotalPrice() {
    let carts = this.data.carts;                  // 获取购物车列表
    let total = 0;
    let num = 0;
    for (let i = 0; i < carts.length; i++) {         // 循环列表得到每个数据
      if (carts[i].isSelect) {                   // 判断选中才会计算价格
        total += carts[i].num * carts[i].price;    // 所有价格加起来
        num += carts[i].num;
      }
    }
    this.setData({                                // 最后赋值到data中渲染到页面
      carts: carts,
      totalCount: num,
      totalMoney: total.toFixed(2)
    });
  },

  //绑定单选
  bindCheckbox: function (e) {
    var that = this;
    const idx = e.currentTarget.dataset.index;
    let carts = that.data.carts;
    const isSelect1 = carts[idx].isSelect;
    carts[idx].isSelect = !isSelect1;
    that.setData({
      carts: carts,
      selectAllStatus: false
    });
    that.getTotalPrice();
  },


  //绑定多选
  bindSelectAll: function (e) {
    var that = this;
    let selectedAllStatus = that.data.selectAllStatus;
    let carts = that.data.carts;
    selectedAllStatus = !selectedAllStatus;
    for (var i = 0; i < carts.length; i++) {
      carts[i].isSelect = selectedAllStatus;
    }

    that.setData({
      carts: carts,
      selectAllStatus: selectedAllStatus
    });
    that.getTotalPrice();
  },

  //购物车结算
  bindjiesuan: function () {
    var that = this;
    let carts = that.data.carts;
    let jscart = [];
    var j = 0
    for (var i = 0; i < carts.length; i++) {
      if (carts[i].isSelect) {
        jscart[j] = carts[i];
        j++;
      }
    }
    if (jscart.length <= 0) {
      wx.showToast({
        title: '未选择商品',
        icon: 'success',
        duration: 1000
      })
      return;
    }
    wx.setStorageSync('jscart', jscart);//存入缓存
    //转到结算页面
    wx.navigateTo({
      url: 'jiesuan?amount=' + that.data.totalMoney
    });

  },
  /**
   * 生命周期函数--监听页面加载
   */
  onLoad: function (options) {
  
  },

  //加载购物车
  getCart: function () {
    var that = this;
    var uid = that.data.uid;
    //网络请求获取购物车数据
  }
})

微信赞赏：