WeChat applet-panier de sélection unique, tout sélectionner, supprimer, fonction de règlement

Image d'effet

Comme suit, nous voulons implémenter les fonctions de sélection unique du panier, de tout sélectionner, de supprimer et de règlement: 

 

Code

 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>

J'utilise l'image locale pour l'icône de vérification ici, il existe d'autres moyens de la modifier moi-même. 

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