uniapp更新版全選反選功能代碼

注意：這是我們CRMEB Pro版項目中的頁面；有些全局引用的例如提示或是一些元件；使用的時候可以删除；并不影響主要功能；擷取資料時；由于背景傳的是一維數組；但實際需要的二維資料；下面擷取資料的接口已經過處理；根據你們傳回的資料格式可自行更改；我們項目中有一鍵換色；牽扯到顔色變量的可删除；寫成固定顔色

以下是詳細代碼：

<template>
  <view>
    <view class="record" :style="colorStyle" v-if="visitList.length">
      <view class="nav acea-row row-between-wrapper">
        <view class="left">目前共 <text class="num">{{count}}</text> 件商品</view>
        <view class="font-num" v-if="!isShowChecked" @click="switchTap">管理</view>
        <view v-else @click="switchTap">取消</view>
      </view>
      <view class="list">
        <checkbox-group @change="checkboxChange">
          <view class="item" v-for="(item,index) in visitList" :key="index">
            <view class="title">
              <checkbox v-if="isShowChecked" :value="item.time" :checked="item.checked" />
              <text>{{item.time}}</text>
            </view>
            <checkbox-group @change="(e)=>{picCheckbox(e,index)}">
              <view class="picList acea-row row-middle">
                <view class="picTxt" v-for="(j,jindex) in item.picList" :key="jindex" @click.stop="goDetails(j)">
                  <view class="pictrue">
                    <image :src="j.image"></image>
                    <checkbox v-if="isShowChecked" :value="(j.id).toString()" :checked="j.checked" class="checkbox" />
                  </view>
                  <view class="money">¥<text class="num">{{j.product_price}}</text></view>
                </view>
              </view>
            </checkbox-group>
          </view>
        </checkbox-group>
        <view class='loadingicon acea-row row-center-wrapper'>
          <text class='loading iconfont icon-jiazai' :hidden='loading==false'></text>{{loadTitle}}
        </view>
      </view>
      <view class="footer acea-row row-between-wrapper" v-if="isShowChecked">
        <checkbox-group @change="checkboxAllChange">
          <checkbox value="all" :checked="isAllSelect" />
          <text class='checkAll'>全選</text>
        </checkbox-group>
        <view class="acea-row row-middle">
          <view class="bnt acea-row row-center-wrapper" @click="collect">收藏</view>
          <view class="bnt on acea-row row-center-wrapper" @click="del">删除</view>
        </view>
      </view>
    </view>
    <view class='noCommodity' v-else-if="!visitList.length && page == 1">
      <view class='pictrue'>
        <image src='../../../static/images/noCollection.png'></image>
      </view>
      <recommend :hostProduct="hostProduct"></recommend>
    </view>
    <home v-if="navigation"></home>
  </view>
</template>

Js：

<script>
  import {
    getVisitList,
    getProductHot,
    deleteVisitList,
    collectAdd
  } from '@/api/store.js';
  import {
    mapGetters
  } from "vuex";
  import {
    toLogin
  } from '@/libs/login.js';
  import recommend from '@/components/recommend';
  // #ifdef MP
  import authorize from '@/components/Authorize';
  // #endif
  import home from '@/components/home';
  import colors from '@/mixins/color.js'
  export default {
    components: {
      recommend,
      // #ifdef MP
      authorize,
      // #endif
      home
    },
    mixins: [colors],
    data() {
      return {
        isShowChecked: 0,
        count: 0,
        times: [],
        isAllSelect: false,
        hostProduct: [],
        loadTitle: '加載更多',
        loading: false,
        loadend: false,
        visitList: [],
        limit: 21,
        page: 1,
        isAuto: false, //沒有授權的不會自動授權
        isShowAuth: false, //是否隐藏授權
        hotScroll: false,
        hotPage: 1,
        hotLimit: 10,
        isItemAll: []
      };
    },
    computed: mapGetters(['isLogin']),
    onLoad() {
      if (this.isLogin) {
        this.loadend = false;
        this.page = 1;
        this.visitList = [];
        this.get_user_visit_list();
        this.get_host_product();
      } else {
        toLogin();
      }
    },
    onShow() {
      this.times = [];
      this.loadend = false;
      this.page = 1;
      this.visitList = [];
      this.get_user_visit_list();
    },
    methods: {
      goDetails(item){
        if(this.isShowChecked) return false;
        uni.navigateTo({
          url: '/pages/goods_details/index?id=' + item.product_id
        })
      },
      switchTap(){
        this.isShowChecked = !this.isShowChecked;
      },
      collect(){
        let ids = [];
        this.visitList.forEach(item=>{
          item.picList.forEach(j=>{
            if(j.checked){
              ids.push(j.id)
            }
          })
        })
        if(!ids.length){
          return this.$util.Tips({
            title: '請選擇收藏商品'
          });
        }
        collectAdd(ids).then(res=>{
          return this.$util.Tips({
            title: res.msg
          });
        })
      },
      del(){
        let ids = [];
        this.visitList.forEach(item=>{
          item.picList.forEach(j=>{
            if(j.checked){
              ids.push(j.id)
            }
          })
        })
        if(!ids.length){
          return this.$util.Tips({
            title: '請選擇删除商品'
          });
        }
        deleteVisitList(ids).then(res=>{
          this.times = [];
          this.loadend = false;
          this.page = 1;
          this.$set(this, 'visitList', []);
          this.get_user_visit_list();
          return this.$util.Tips({
            title: res.msg
          });
        })
      },
      picCheckbox(event, index) {
        let that = this,
          picTime = event.detail.value;
        that.visitList[index].picList.forEach(j => {
          if (picTime.indexOf(j.id + '') !== -1) {
            j.checked = true;
          } else {
            j.checked = false;
          }
        })
        if(that.visitList[index].picList.length == picTime.length){
          that.visitList[index].checked = true;
        }else{
          that.visitList[index].checked = false;
        }
        let visitObj = [];
        that.visitList.forEach(item=>{
          if(item.checked){
            visitObj.push(item.time)
          }else{
            if(visitObj.indexOf(item.time) !== -1){
               visitObj.remove(item.time);
            }
          }
        })
        if(visitObj.length == that.visitList.length){
          that.isAllSelect = true;
        }else{
          that.isAllSelect = false;
        }
      },
      checkboxChange(event) {
        let that = this,
          timeList = event.detail.value;
        that.isItemAll = timeList;
        that.visitList.forEach((item, index) => {
          if (timeList.indexOf(item.time) !== -1) {
            item.checked = true;
          } else {
            item.checked = false;
          }
          item.picList.forEach(j => {
            if (item.checked) {
              j.checked = true;
            } else {
              j.checked = false;
            }
          })
        })
        if (timeList.length === that.visitList.length) {
          that.isAllSelect = true;
        } else {
          that.isAllSelect = false;
        }
      },
      forGoods(val) {
        let that = this;
        if (!that.visitList.length) return
        that.visitList.forEach((item) => {
          if (val) {
            item.checked = true;
          } else {
            item.checked = false;
          }
          item.picList.forEach(j => {
            if (val) {
              j.checked = true;
            } else {
              j.checked = false;
            }
          })
        })
      },
      checkboxAllChange(event) {
        let value = event.detail.value;
        if (value.length) {
          this.isAllSelect = true;
          this.forGoods(1)
        } else {
          this.isAllSelect = false;
          this.forGoods(0)
        }
      },
      // 授權關閉
      authColse: function(e) {
        this.isShowAuth = e
      },
      /**
       * 擷取收藏産品
       */
      get_user_visit_list: function() {
        let that = this;
        if (this.loading) return;
        if (this.loadend) return;
        that.loading = true;
        that.loadTitle = "";
        getVisitList({
          page: that.page,
          limit: that.limit
        }).then(res => {
          this.count = res.data.count;
          for (let i = 0; i < res.data.time.length; i++) {
            if (this.times.indexOf(res.data.time[i]) == -1) {
              this.times.push(res.data.time[i])
              this.visitList.push({
                time: res.data.time[i],
                picList: []
              })
            }
          }
          for (let x = 0; x < this.times.length; x++) {
            this.visitList[x].checked = this.isAllSelect ? true : false;
            for (let j = 0; j < res.data.list.length; j++) {
              if (this.times[x] === res.data.list[j].time_key) {
                if (this.isAllSelect) {
                  res.data.list[j].checked = true;
                } else {
                  res.data.list[j].checked = false;
                }
                this.visitList[x].picList.push(res.data.list[j])
              }
            }
          }
          let loadend = res.data.list.length < that.limit;
          that.loadend = loadend;
          that.loadTitle = loadend ? '沒有更多内容啦~' : '加載更多';
          that.page = that.page + 1;
          that.loading = false;
        }).catch(err => {
          that.loading = false;
          that.loadTitle = "加載更多";
        });
      },
      /**
       * 擷取我的推薦
       */
      get_host_product: function() {
        let that = this;
        if (that.hotScroll) return
        getProductHot(
          that.hotPage,
          that.hotLimit,
        ).then(res => {
          that.hotPage++
          that.hotScroll = res.data.length < that.hotLimit
          that.hostProduct = that.hostProduct.concat(res.data)
        });
      }
    },
    onReachBottom() {
      if (this.visitList.length) {
        this.get_user_visit_list();
      } else {
        this.get_host_product();
      }
    }
  }
</script>

Css：

<style lang="scss">
  page {
    background-color: #fff;
  }

  .record .pictrue /deep/checkbox .uni-checkbox-input {
    background-color: rgba(0, 0, 0, 0.16);
  }

  .record .pictrue /deep/checkbox .wx-checkbox-input {
    background-color: rgba(0, 0, 0, 0.16);
  }

  .record {
    .footer {
      box-sizing: border-box;
      padding: 0 30rpx;
      width: 100%;
      height: 96rpx;
      box-shadow: 0px -4px 20px 0px rgba(0, 0, 0, 0.06);
      background-color: #fff;
      position: fixed;
      bottom: 0;
      z-index: 30;
      padding-bottom: constant(safe-area-inset-bottom); ///相容 IOS<11.2/
      padding-bottom: env(safe-area-inset-bottom); ///相容 IOS>11.2/

      .bnt {
        width: 160rpx;
        height: 60rpx;
        border-radius: 30rpx;
        border: 1rpx solid #ccc;
        color: #666666;

        &.on {
          border: 1rpx solid var(--view-theme);
          margin-left: 16rpx;
          color: var(--view-theme);
        }
      }
    }

    .nav {
      border-bottom: 1rpx solid #eee;
      color: #999999;
      font-size: 28rpx;
      height: 74rpx;
      padding: 0 30rpx;

      .left {
        color: #333;

        .num {
          color: var(--view-theme);
          margin: 0 10rpx;
        }
      }
    }

    .list {
      padding-top: 32rpx;
      padding-bottom: 96rpx;

      .item {
        .title {
          padding: 0 30rpx;
          margin-bottom: 34rpx;
          font-size: 34rpx;
          font-weight: 600;
        }

        .picList {
          padding: 0 30rpx 0 12rpx;

          .picTxt {
            margin-left: 18rpx;
            margin-bottom: 48rpx;

            .pictrue {
              width: 218rpx;
              height: 218rpx;
              border-radius: 10rpx;
              position: relative;

              image {
                width: 100%;
                height: 100%;
                border-radius: 10rpx;
              }

              .checkbox {
                position: absolute;
                right: 10rpx;
                top: 14rpx;
              }
            }

            .money {
              font-size: 24rpx;
              color: var(--view-theme);
              font-weight: 600;
              margin-top: 15rpx;

              .num {
                font-size: 32rpx;
                margin-left: 6rpx;
              }
            }
          }
        }
      }
    }
  }
</style>​