微信小程序——购物车单选，全选，删除，结算功能

效果图

如下，我们要实现购物车的单选，全选，删除，结算功能： 

 

代码

 index.wxml

<view class="shop-item" wx:for="{
   
   {goodsList}}" wx:key="index">
<view data-id="{
   
   {item.id}}" bindtap="select">
<image src="{
   
   {item.checked?'../../assets/images/icons/checkall.png':'../../assets/images/icons/check.png'}}" class="check"></image>
<!-- <checkbox value="{
   
   {item.name}}" checked="{
   
   {item.checked}}"/> -->
</view>
<view class="shop-text">
<view>{
   
   {item.name}}</view>
<view class="desc">{
   
   {item.guige}}</view>
<view class="price">{
   
   {item.price}}</view>
<!-- 数字加减 -->
<view class="count">
<view class="count-minus" data-id="{
   
   {item.id}}" bindtap="minusCount">-</view>
<view>{
   
   {item.count}}</view>
<view class="count-add" data-id="{
   
   {item.id}}" bindtap="addCount">+</view>
<view class="btn-del" data-id="{
   
   {index}}" bindtap="delListItem">X</view>
</view>
</view>
</view>
 
<view class="shop-footer">
<view class="selectall" bindtap="selectAll">
<image src="{
   
   {isSelectAll?'../../assets/images/icons/checkall.png':'../../assets/images/icons/check.png'}}" class="check"></image>全选
</view>
 
<view class="allPrice">￥{
   
   {tatalPrice}}</view>
<view class="footer-btn" bindtap="Settlement">结算</view>
</view>

这里的勾选图标我是用本地图片的，有其它方法可自行修改。 

index.js

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

Page({
  // 数字加减
  minusCount(e) {
    let id = getAttr(e, 'id')
    let goods = this.data.goodsList.find(item => {
      return item.id === id
    })

    if (goods.count === 1) return
    goods.count--
    this.setData({
      goodsList: this.data.goodsList,
    })
    this.Settlement();
  },
  addCount(e) {
    let id = getAttr(e, 'id')
    let goods = this.data.goodsList.find(item => {
      return item.id === id
    })
    goods.count++

    this.setData({
      goodsList: this.data.goodsList,
    })
    this.Settlement();
  },
//单选
  select(e) {
    //  let id =e.currentTarget.dataset.id
    let id = getAttr(e, 'id')
    let goods = this.data.goodsList.find(item => {
      return item.id === id
    })
    goods.checked = !goods.checked;

    let isSelectAll = this.data.goodsList.every(r => r.checked)
    this.setData({
      goodsList: this.data.goodsList,
      isSelectAll
    })
    this.Settlement();
  },
  // 全选
  selectAll() {
    this.data.isSelectAll = !this.data.isSelectAll
    this.data.goodsList.forEach(element => {
      return element.checked = this.data.isSelectAll
    });
    this.setData({
      goodsList: this.data.goodsList,
      isSelectAll: this.data.isSelectAll
    })
    this.Settlement();
  },
  // 结算
  Settlement() {
    let tatalPrice = 0;
    this.data.goodsList.forEach(r => {
      if (r.checked) {
        tatalPrice += r.count * r.price
        
      }
    })
    // console.log(tatalPrice)
    this.setData({
      tatalPrice
    })
  },
//删除
  delListItem(e){
    let id=getAttr(e,'id')
    this.data.goodsList.splice(id,1);
    this.setData({
      goodsList:this.data.goodsList
    })
 
  },
  /**
   * 页面的初始数据
   */
  data: {
    isSelectAll: false,
    tatalPrice: 0,
    goodsList: [{
        id: 1,
        name: "手机",
        price: 4800,
        guige: "国产",
        count: 1,
        checked: false
      },
      {
        id: 2,
        name: "香水",
        price: 480,
        guige: "进口",
        count: 1,
        checked: false
      },
      {
        id: 3,
        name: "零食",
        price: 180,
        guige: "国产",
        count: 1,
        checked: false
      },
      {
        id: 4,
        name: "电器",
        price: 1200,
        guige: "国产",
        count: 1,
        checked: false
      }
    ],

  },

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

 index.wxss

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

.shop-text {
  width: 81%;
  position: relative;
  left: 17rpx;
}
.check{
  width: 40rpx;
  height: 40rpx;
}
.desc {
  font-size: 26rpx;
  color: #999;
}

.price {
  color: rgb(252, 50, 50);
}
.btn-del{
  border: 2rpx solid #ccc;
  width: 40rpx;
  height: 40rpx;
  text-align: center;
  line-height: 40rpx;
  margin-left: 40rpx; color: rgb(252, 50, 50);
}

/* 数字加减 */
.count {
  display: flex;
  position: absolute;
  right: 10rpx;
  top: 20rpx;
}

.count view {
  width: 40rpx;
  height: 40rpx;
  line-height: 40rpx;
  text-align: center;
}

.count-minus {
  border: 2rpx solid skyblue;
  background: #fff;
  color: skyblue;
}

.count-add {
  background: skyblue;
  border: 2rpx solid skyblue;
  color: #fff;
}

.shop-footer {
  position: fixed;
  bottom: 0;
  width: 100vw;
  height: 90rpx;
  background: #eee;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.footer-btn{
  background: skyblue;
  width: 120rpx;
  height: 90rpx;
  color: #fff;
  text-align: center;
  line-height: 90rpx;
}
.allPrice{
  color: rgb(245, 62, 62);
}
.selectall{
  color: #666;
}