WeChat applet-carrito de compras selección única, seleccionar todo, eliminar, función de liquidación

Imagen de efecto

De la siguiente manera, queremos implementar las funciones de selección única del carrito de compras, seleccionar todo, eliminar y liquidar: 

 

Código

 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>

Utilizo la imagen local para el icono de verificación aquí, hay otras formas de modificarlo yo mismo. 

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;
}