微信小程序购物车

效果如下图

TIM图片20190411105147.png TIM图片20190411105210.png

当数量小于0是，删除该商品

TIM图片20190411105238.png

<view class="app">
  <view class='vehicle pad'>
    <view class='list' wx:for="{{list}}" wx:key="{{index}}">
     <navigator class='nav flex justify-content-start' url='../detail/index'>
          <view class='index-shap-l flex justify-content-center align-items-center'>
            <image src='{{item.img}}' mode='widthFix'></image>
          </view>
          <view class='index-shap-r'>
            <view class='h1'>{{item.title}}</view>
            <view class='h2'>{{item.article}}</view>
            <view class='p'>{{item.weight}}</view>
            <view class='span'>￥{{item.price}}</view>
          </view>
      </navigator>
      <image class='selected' src='{{item.selected ?"/imgs/icon-check-active.png":"/imgs/icon-check.png"}}' id='{{item.id}}' data-index='{{index}}'  mode='widthFix' bindtap='bindCheck' />
      <view class="carts-num flex justify-content-start">
        <!--减按钮  -->
        <view class="minus" bindtap="btnMinus" data-obj="{{obj}}" data-index='{{index}}' id="{{item.id}}">—</view>
        <!-- 文本框值 -->
        <view class='input'>{{item.num}}</view>
        <!-- 加按钮-->
        <view class="plus" bindtap="btnAdd" data-index='{{index}}' id="{{item.id}}">+</view>
      </view>
    </view>
  </view>



<view class='vehicle-end'>
  <view class='vehicle-foot pad flex justify-content-between align-items-center'>
    <image class='selectedAll' src='{{selectedAll ?"/imgs/icon-check-active.png":"/imgs/icon-check.png"}}' mode='widthFix' bindtap='bindCheckAll' />

   <view class='flex justify-content-start align-items-center'>
      <view class='all flex justify-content-start align-items-center'>
        不含运费
        <view class='span'>
          合计:
          <view class='em'>￥{{moneyAll}}</view>
        </view>
      </view>
      <view class='submit' bindtap='bindAccounts' >结算</view>
   </view>
  </view>
</view>

</view>

page{
  background: #eeeeee;
}

.list{
  width: 100%;
  height: 280rpx;
  background: #fff;
  overflow: hidden;
  position: relative;
  margin-top: 14rpx;
  padding: 32rpx 0 0 70rpx;
  box-sizing: border-box;
}

.index-shap-l{
  width: 280rpx;
  height: auto;
  overflow: hidden;
}
.index-shap-l image{
  width: 200rpx;
}
.shapAdd{
  width: 36rpx;
  position: absolute;
  right: 10rpx;
  bottom: 74rpx;
}
.h1{
  color: #1b1b1b;
  font-size: 32rpx;
  line-height: 38rpx;
}
.h2{
  font-size: 24rpx;
  color: #a0a0a0;
  line-height: 38rpx;
  margin-top: 10rpx;
}
.p{
  color: #a0a0a0;
  font-size: 22rpx;
  display: inline-block;
  height: 36rpx;
  line-height: 36rpx;
  background: #eeeeee;
  padding: 0 10rpx;
  box-sizing: border-box;
  margin-top: 9rpx;
}
.span{
  color: #ff6e17;
  font-size: 36rpx;
  height: 38rpx;
  margin-top: 30rpx;
}
.selected{
  position: absolute;
  left: 34rpx;
  top: 50%;
  transform: translateY(-50%);
  z-index: 90;
  width: 40rpx;
}
.carts-num{
  width: 170rpx;
  height: 44rpx;
  position: absolute;
  bottom: 20rpx;
  right: 20rpx;
  border: 1rpx solid #eeeeee;
  border-radius: 6rpx;
  overflow: hidden;
  box-sizing: border-box;
}
.minus{
  width: 50rpx;
  height: 100%;
  color: #eee;
  font-size: 24rpx;
  text-align: center;
  line-height: 42rpx;
  border-right: 1rpx solid #eee;
}
.input{
  width: 66rpx;
  height: 42rpx;
  min-height: 42rpx;
  text-align: center;
  font-size: 24rpx;
  line-height: 42rpx;
  color: #959595;
  border: 0;
  padding: 0;
  margin: 0;
  background: transparent;
}
.plus{
  width: 50rpx;
  height: 100%;
  color: #eee;
  font-size: 24rpx;
  text-align: center;
  line-height: 42rpx;
  border-left: 1rpx solid #eee;
}

.vehicle-end{
  width: 100%;
  height: 110rpx;

}
.vehicle-foot{
  position: fixed;
  bottom: 0;
  left: 0;
  height: 100rpx;
  width: 100%;
  background: #fff;
  overflow: hidden;
  z-index: 999;
}
.selectedAll{
  width: 40rpx;
}
.all{
  width: auto;
  height: 100%;
  font-size: 20rpx;
  color: #dcdcdc;
  line-height: 100rpx;
}
.all .span{
  display: inline-block;
  width: auto;
  color: #434343;
  font-size: 26rpx;
  line-height: 100rpx;
  height: 100rpx;
  margin: 0 0 0 10rpx;
}
.all .span .em{
  display: inline-block;
  line-height: 100rpx;
  height: 100rpx;
  font-size: 30rpx;
  color: #fc6c26;
}
.submit{
  width: 160rpx;
  height: 80rpx;
  border-radius: 80rpx;
  background: #17b356;
  color: #fff;
  font-size: 30rpx;
  text-align: center;
  line-height: 80rpx;
  margin-left: 26rpx;
}

// pages/vehicle/index/index.js
var app = getApp()
Page({

  /**
   * 页面的初始数据
   */
  data: {
    selectedAll:false,//全选，false为未选中，true为选中
    moneyAll:"0.00",//总价
    listAll:[],//选中的商品
    list:[
      {
        id:0,
        img: "/imgs/capping.png",
        title:"精品菜头",
        article:"野生自然 无添加剂",
        weight:"100g/份",
        price:"9.00",
        selected:false,
        num:"1"
      }, {
        id: 2,
        img: "/imgs/caiping01.png",
        title: "精品白菜",
        article: "野生自然 无添加剂",
        weight: "100g/份",
        price: "9.00",
        selected: false,
        num: "2"
      }, {
        id: 3,
        img: "/imgs/caiping01.png",
        title: "精品大头菜",
        article: "野生自然 无添加剂",
        weight: "100g/份",
        price: "9.00",
        selected: false,
        num: "2"
      },
    ],

  },

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

  },

  /**
   * 生命周期函数--监听页面初次渲染完成
   */
  onReady: function () {

  },

  /**
   * 生命周期函数--监听页面显示
   */
  onShow: function () {

  },

  /**
   * 生命周期函数--监听页面隐藏
   */
  onHide: function () {

  },

  /**
   * 生命周期函数--监听页面卸载
   */
  onUnload: function () {

  },

  /**
   * 页面相关事件处理函数--监听用户下拉动作
   */
  onPullDownRefresh: function () {

  },

  /**
   * 页面上拉触底事件的处理函数
   */
  onReachBottom: function () {

  },

  /**
   * 用户点击右上角分享
   */
  onShareAppMessage: function () {

  },
  /**
   * 选中商品,单选
   */
  bindCheck:function(e){
    var that = this;
    var lists = this.data.list;//获取购物车列表
    var index = e.currentTarget.dataset.index;//获取当前点击事件的下标
    var selectedAll = this.data.selectedAll;
    lists[index].selected = !lists[index].selected;//取反

    for(var i = 0;i<lists.length; i++ ){
      //如果购物车列表至少一个选中，则全选选中。如果都没有选中，全选选中状态取消
      if(lists[i].selected){
        selectedAll = true;
        // break;
      }else{
        selectedAll = false;

        // break;
      }
    }
    that.setData({
      selectedAll: selectedAll,
      list: lists
    })
    this.summation();
  },
  /**
   * 全部选中
   */
  bindCheckAll:function(e){
    var that = this;
    var selectedAll = this.data.selectedAll;
    var lists = this.data.list;//获取购物车列表
    selectedAll = !selectedAll;//取反
    
    for (var i = 0; i < lists.length; i++) {
      lists[i].selected = selectedAll;
    }
    this.summation();
    that.setData({
      selectedAll: selectedAll,
      list: lists
    })
  },

  /**
   * 减
   */
  btnMinus:function(e){
    var that = this;
    var lists = this.data.list;//获取购物车列表
    var index = e.currentTarget.dataset.index;//获取当前点击事件的下标

    //如果当前商品的数量小于或等于1，则删除当前商品。数量大于1，则减减。
    if (parseInt(lists[index].num) <= 1){
      wx.showModal({
        title: '提示',
        content: '是否删除该商品',
        success:function(res){
          if(res.confirm){
            if (res.confirm) {
              wx.showToast({
                title: '删除成功',
                icon: 'success',
                duration: 1000
              })
            }
            //点击确认后，删除当前商品
            lists.splice(index,1);
            that.setData({
              list:lists
            })
            that.summation();
          }
        }
      })
    } else if (parseInt(lists[index].num)>1){
      lists[index].num = parseInt(lists[index].num)-1;
      that.setData({
        list: lists
      })
      that.summation();
    }
    
  },

  /**
   * 加
   */
  btnAdd:function(e){
    var that = this;
    var lists = this.data.list;//获取购物车列表
    var index = e.currentTarget.dataset.index;//获取当前点击事件的下标

    //当前商品的数量加加。
    lists[index].num = parseInt(lists[index].num) + 1;
    that.setData({
      list: lists
    })
    this.summation();
  },

  /**
   * 合计
   */

  summation:function(){
    var that = this; 
    var moneyAll = 0;//获取当前总价
    var lists = this.data.list;//获取购物车列表
    var listAll = [];//存放选中的商品
    //把选中的商品存入数组arr中。
    for(var i=0;i<lists.length;i++){
      if(lists[i].selected){
        listAll.push(lists[i]);
      }
    }

    that.setData({
      listAll: listAll
    })
    //如果选中的商品数组长度大于0，合计加等于单价乘以数量。反之为0。
    if (listAll.length>0){
      for (var i = 0; i < listAll.length; i++) {
        moneyAll += listAll[i].price * listAll[i].num;
        that.setData({
          moneyAll: moneyAll
        })
      }
    }else{
      moneyAll=0;
      that.setData({
        moneyAll: moneyAll
      })
    }
  },
  /**
   * 结算
   */
  bindAccounts:function(){
    var that = this;
    var listAll = this.data.listAll;//获取选中的商品信息
    var moneyAll = this.data.moneyAll;//获取当前总价
    //上传商品信息，当前总价
    wx.showToast({
      title: '订单生成中',
      icon: 'loading',
      duration: 2000,
    })
    setTimeout(function(){
      wx.navigateTo({
        url: '../../user/pay/index',
      })
    },2000)
  }

})