小程序商城购物车功能

js

// pages/car/car.js
var requested = require("../common/catefig.js")
Page({

  /**
   * 页面的初始数据
   */
  data: {
    "cardata":[
      {
        "head_pic":"../icon/main.png",
        "introduce":"华德福哈高速第一",
        "sell_price":"125",
        "num":1,
        "selected": false,
      },
      {
        "head_pic": "../icon/index.png",
        "introduce": "护士发布的速度",
        "sell_price": "55",
        "num": 1,
        "selected": false,
      },
      {
        "head_pic": "../icon/index.png",
        "introduce": "公司法国",
        "sell_price": "55",
        "num": 1,
        "selected": false,
      },
    ],
    "hasList": true,//购物车是否有数据
    "totalMoney":0,
    "sels":false,
    "allselected": false,
    "allnum": 0,
    "allprices": 0,
  },

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

  },

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

  },

  /**
   * 生命周期函数--监听页面显示
   */
  onShow: function () {
    var that = this
    var urls = requested()
    // 需要调取用户id
    var url = urls[5]+"1"
    // wx.request({
    //   url: url,
    //   success: function (res) {
    //     that.setData({
    //       cardata:res.data.data
    //     })
    //   }
    // })
    
    if (typeof this.getTabBar === 'function' &&
      this.getTabBar()) {
      this.getTabBar().setData({
        selected: 3
      })
    }
  },

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

  },

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

  },

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

  },

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

  },

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

  },
  // 点击+号，num加1，点击-号，如果num > 1，则减1 
  addCount: function (e) {
    
    var cardata = this.data.cardata //购物车数据 

    let index = e.currentTarget.dataset.index //当前商品所在店铺中的下标0
    let curt = cardata[index]; //当前商品数组  
    
    var num = curt.num; //当前商品的数量   

    num++;
    
    cardata[index].num = num //点击后当前店铺下当前商品的数量 
    this.setData({
      cardata: cardata //店铺下商品的数量 
    })
  },
  
  // 减事件
  minusCount: function (e) {
    
    var cardata = this.data.cardata //购物车数据 

    let index = e.currentTarget.dataset.index //当前商品所在店铺中的下标0
    let curt = cardata[index]; //当前商品数组  

    var num = curt.num; //当前商品的数量   

    if (num <= 1) {
      return false;
    }
    num--;

    cardata[index].num = num //点击后当前店铺下当前商品的数量 
    this.setData({
      cardata: cardata //店铺下商品的数量 
    })
  },


  // 商品的选中
  goodsselected(e) {
    var cartsdata = this.data.cardata //购物车数据
    let index = e.currentTarget.dataset.index //当前商品的索引
    let curt = cartsdata[index]; //当前商品数组
    if (curt.selected) {
      cartsdata[index].selected = false
    }else {
      cartsdata[index].selected = true //点击后当前店铺下当前商品的状态
    }
    // 更新
    this.setData({
      cardata: cartsdata //店铺下商品的数量
    })
    // 总价
    this.getallprices()
  },

  // 全选
  tapallallprices() {
    let allselected = this.data.allselected
    var cartsdata = this.data.cardata //购物车数据
    if (allselected) {
      allselected = false
    } else {
      allselected = true
    }
    //选择
    for (var i = 0; i < cartsdata.length; i++) {
      cartsdata[i].selected = allselected
    }
    //更新
    this.setData({
      cardata: cartsdata, //店铺下商品的数量
      allselected: allselected
    })
    // 总价
    this.getallprices()
  },

  //计算总价格  所有选中商品的 （价格*数量）相加
  getallprices: function () {
    var cartsdata = this.data.cardata //购物车数据
    var allprices = 0
    let allnum = 0
    for (var i = 0; i < cartsdata.length; i++) {
      // console.log()
      if (cartsdata[i].selected) {
          //当前商品价格*数量 + 
        let price = Number(cartsdata[i].sell_price)
        let num = parseInt(cartsdata[i].num) //防止num为字符 *1或parseInt Number?
          allprices += price * num
          allnum += num
        }
    }
    //跟新已选数量
    this.setData({
      allnum: allnum,
      allprices: allprices.toFixed(2)
    })
  },

  // 去结算
  bindjiesuan() {
    wx.navigateTo({
      url: '/pages/confirm/confirm',
    })
  },
  // 删除
  dealets: function (e) {
    var list = this.data.cardata;
    var arr=[],arrs=[]

    for (var i = 0; i < list.length; i++) {
      //如果当前商品已选中
      if (!list[i].selected) {
        arr.push(list[i])
      }else{
        arrs.push(list[i].id);
      }
    } 
    this.setData({
      cardata: arr,
      allprices: 0,
    })
    // wx.request({
    //   url: '', //接口
    //   method:'POST',
    //   success: res=>{
    //     console.log(res.data)
    //     this.setData({
    //       cardata: res.data,
    //     })
    //   }
    // })
  },
})

wxml

<!--pages/car/car.wxml-->
<!-- 购物车 -->
<view class='car'>
  <!-- 顶部导航 -->
  <view class='car-nav'>
    <text>购物车</text>
    <button class='car-nav-btn' bindtap='dealets'>删除</button>
  </view>
  <!-- 购物车内有内容 -->

  <block wx:if='{{hasList}}'>
    <view class='car-ul'>
      <view class='car-li' wx:for="{{cardata}}">
        <icon type="{{item.selected ? 'success':'circle'}}" size="30" bindtap="goodsselected" data-index="{{index}}" data-select-index="{{idx}}" />
        <image src='{{item.head_pic}}'></image>
        <view class='car-new'>
          <text class='car-new-count'>{{item.introduce}}</text>
          <view class='car-num'>
            <text class='car-num-money'>￥{{item.sell_price}}</text>
            <view class='car-num-sum'>
              <text bindtap="minusCount" data-index="{{index}}" data-select-index="{{idx}}" bindtap='minusCount'>-</text>
              <text class='car-num-border'>{{item.num}}</text>
              <text bindtap="addCount" data-index="{{index}}" data-select-index="{{idx}}">+</text>
            </view>
          </view>
          <text>{{item.change}}</text>
        </view>
        
      </view>
      <!-- 结算 -->
      <view class="carts-footer">
        <view class="bottomfixed">
          <view class="inner">
            <view class="chkAll" bindtap="bindSelectAll">
              <icon type="{{allselected ? 'success':'circle'}}" bindtap="tapallallprices" />
              <text>全选</text>
            </view>
            <view class="total">合计：
              <em>￥{{allprices}}</em>
            </view>
            <view wx:if="{{totalCount != 0}}" class="btn-pay" bindtap='bindjiesuan'>去结算({{allprices}})</view>
            <view wx:else class="btn-pay disabled">去结算({{allprices}})</view>
          </view>
        </view>
      </view>
    </view>
  </block>
  <block wx:else>
    <view class='car-count'>
      <view class='car-null'>
        <text>您的购物车为空</text>
        <text class='car-want'>可以去看看有哪些想买的</text>
      </view>
    </view>
  </block>
  <view class='empty'></view>
  
</view>

wxss

/* pages/car/car.wxss */

.car {
  width: 100%;
  box-sizing: border-box;
}

.car-nav {
  font-size: 38rpx;
  color: #666;
  font-weight: bold;
  display: flex;
  align-items: center;
  height: 80rpx;
  border-bottom: 2rpx solid #666;
  padding: 0 20rpx;
  box-sizing: border-box;
  position: relative;
}

button::after {
  border: none;
}

.car-nav-btn {
  position: absolute;
  right: 0rpx;
  background: #fff;
  height: 75rpx;
  font-size: 38rpx;
  color: #666;
}

.car-count {
  width: 100%;
  height: auto;
  font-size: 34rpx;
}

.car-null {
  height: 400rpx;
  width: 100%;
  text-align: center;
  color: #666;
  display: flex;
  flex-direction: column;
  padding-top: 200rpx;
  box-sizing: border-box;
}

.car-null text {
  line-height: 40rpx;
}

.car-null text.car-want {
  font-size: 28rpx;
}

/* 购物车有东西状态 */

.car-ul {
  width: 100%;
  height: auto;
}

.car-li {
  width: 100%;
  height: 300rpx;
  background: #fff;
  display: flex;
  align-items: center;
  border-bottom: 10rpx solid #ccc;
}

.car-li image {
  width: 40%;
  height: 280rpx;
}

/* 购物车信息 */

.car-new {
  width: 80%;
  padding: 0 20rpx;
  box-sizing: border-box;
  font-size: 32rpx;
  color: #666;
}

.car-new-count {
  display: block;
  word-break: break-all;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  height: 100rpx;
}

.car-num {
  display: flex;
  justify-content: space-between;
  margin-top: 10rpx;
}

.car-num-money {
  color: red;
  font-size: 34rpx;
}

.car-num-sum {
  display: flex;
}

.car-num-sum text {
  display: block;
  width: 60rpx;
  height: 60rpx;
  border: 6rpx solid #666;
  text-align: center;
  line-height: 60rpx;
}

.car-num-sum text.car-num-border {
  border-left: none;
  border-right: none;
}

checkbox .wx-checkbox-input {
  border-radius: 50%;
  width: 40rpx;
  height: 40rpx;
}

checkbox .wx-checkbox-input.wx-checkbox-input-checked {
  border: 1rpx solid #666666;
}

checkbox .wx-checkbox-input.wx-checkbox-input-checked::before {
  border-radius: 50%; /* 圆角 */
  width: 40rpx; /* 选中后对勾大小，不要超过背景的尺寸 */
  height: 40rpx; /* 选中后对勾大小，不要超过背景的尺寸 */
  line-height: 40rpx;
  text-align: center;
  font-size: 30rpx; /* 对勾大小 30rpx */
  color: #666666; /* 对勾颜色 白色 */
}
.bottomfixed{
  position: fixed;
  display: flex;
  flex-direction: column;
  bottom: 120rpx;
  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;
}