微信小程序之购物车

fonticon文件可去 finticon的文件下载地址下载

car.wxml文件

<view class="item" wx:for="{{goodslist}}">
  <view data-id="{{item.id}}" bindtap="select" class="check iconfont {{item.checked ? 'iconduigoutianchong-': 'iconduigou'}}" >
  </view>
  <view class="main">
    <view>{{item.name}}</view>
    <view class="desc">{{item.guige}}</view>
  </view>
  <view>{{item.price}}</view>

  <view class="count">
    <view data-id="{{item.id}}" bindtap="jian" class="count_jian">-</view>
    <view>{{item.count}}</view>
    <view data-id="{{item.id}}" bindtap="jia" class="count_add">+</view>
  </view>
</view>


<view class="bottom">
  <view  bindtap="selectAll" class="checkall check iconfont {{isSelectAll ? 'iconduigoutianchong-': 'iconduigou'}}" >
  </view>
  <view>{{totalPrice}}</view>
  <view class="btn">结算</view>
</view>

car.wxss文件

@import "../../assets/fonticon/iconfont.wxss";

.item{
  display: flex;
  border-bottom: 2px dashed #eee;
  padding: 20px;
}

.check{
  color: skyblue;
  font-size: 25px;
}

.main{
  margin: 0px 30px;
  width: 25vw;
}

.main .desc{
  color: #ccc;
  font-size: 26rpx;
}

.count{
  display: flex;
  position: absolute;
  right: 10rpx;
}
.count view{
  width: 60rpx;
  height: 60rpx;
  line-height: 60rpx;
  text-align: center;  
}

.count .count_jian{
  border: 1px solid skyblue;
  color: skyblue;
  border-radius: 50%;
  text-align: center;
}

.count .count_add{
  border: 1px solid skyblue;
  background: skyblue;
  color: #ffffff;
  border-radius: 50%;
}

.bottom{
  height: 120rpx;
  background: #eee;
  position: fixed;
  width: 100vw;
  align-items: center;
  bottom: 0;
  display: flex;
  justify-content: space-between;
}

.bottom .btn{
  background: skyblue;
  height: 100%;
  padding: 0 100rpx;
  color: #fff;
  line-height: 120rpx;
}

.checkall{
  padding: 0 20rpx;
}

car.js文件

// pages/car/car.js

function getAttr(e , key){
  return e.currentTarget.dataset[key]
}

Page({

  /**
   * 页面的初始数据
   */
  data: {
    isSelectAll: false,
    totalPrice:0,
    goodslist: [
      {
        id: 1,
        name: 'LV',
        guige: "进口",
        pricev: 80,
        price:80,
        count:1,
        checked:false
      },
       {
        id: 2,
        name: 'LV2',
        guige: "出口",
        pricev: 245,
        price: 245,
        count: 1,
        checked: false
      },
      {
        id: 3,
        name: 'LV3',
        guige: "售卖",
        pricev: 150,
        price: 150,
        count: 1,
        checked: false
      },
      {
        id: 4,
        name: 'LV4',
        guige: "进口",
        pricev: 180,
        price: 180,
        count: 1,
        checked: false
      },
    ]
  },

  selectAll(){
    this.data.isSelectAll = !this.data.isSelectAll;
    this.data.goodslist.forEach(r =>{
      r.checked = this.data.isSelectAll;
    });

    let total;
    if(this.data.isSelectAll == true){
      total = this.total();
    }

    this.setData({
      goodslist: this.data.goodslist,
      isSelectAll : this.data.isSelectAll ,
      totalPrice: total
    });
  },

  total(){
    let total = 0;
    this.data.goodslist.forEach(r =>{
      if(r.checked){
        total += r.price;
      }
    });
    return total;
  },

  select(e){
    let id = e.currentTarget.dataset.id;
    let goods = this.data.goodslist.find(item =>{
      return id === item.id;
    });

    goods.checked = !goods.checked;
    let total;
    total = this.total();

    let isSelectAll = this.data.goodslist.every(r =>
      r.checked
    )

    this.setData({
        goodslist: this.data.goodslist,
        totalPrice: total,
        isSelectAll: isSelectAll
    });
  },

  jia(e){
    let id = e.currentTarget.dataset['id'];
    let goods = this.data.goodslist.find(item =>{
      return id === item.id;
    });
    
    goods.count += 1;
    goods.price = goods.pricev * goods.count;
    let total;
    if(goods.checked == true){
      total = this.total();
    }
    this.setData({
      goodslist: this.data.goodslist,
      totalPrice:total
    })
  },

  jian(e){
    
    let id = e.currentTarget.dataset.id;

    let goods = this.data.goodslist.find(item =>{
      return id === item.id;
    });

    if(goods.count>0){
      goods.count -= 1;
    }
    goods.price = goods.pricev * goods.count;
    let total;
    if(goods.checked == true){
      total = this.total();
    }
    
    this.setData({
      goodslist : this.data.goodslist,
      totalPrice: total
    })
  },

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

  },

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

  },

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

  },

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

  },

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

  },

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

  },

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

  },

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

  }
})

效果图：