ZhiHuiJiaoWu_UniApp/pages/coach/class/list.vue

<!--班级-列表-->
<template>
  <view class="main_box">
    <!--自定义导航栏-->
    <view class="navbar_section">
      <view class="title">班级</view>
    </view>

    <view class="main_section">
      <view class="section_1">
        <fui-input class="input_item" borderTop clearable="true" placeholder="搜索" v-model="filteredData.name" @confirm="search" @input="search"></fui-input>
      </view>

      <view class="section_2">
        <scroll-view
            class="ul"
            scroll-y="true"
            :lower-threshold="lowerThreshold"
            @scrolltolower="loadMoreData"
            style="height: 65vh;"
        >
          <view
              class="li"
              v-for="(v,k) in tableList"
              :key="k"
              @click="openViewClassInfo(v)"
          >
            <view class="left">
                <image class="pic" :src="v.head_coach_head_img"></image>
            </view>
            <view class="right">
              <view class="box_1">
                <view class="name">
                  {{v.class_name}}
                </view>
                <view class="btn_box">
                  <view v-if="v.end_count">{{v.end_count}}人即将到期</view>
                </view>
              </view>
              <view class="box_2">
                <view class="user_list" v-for="(v2,k2) in v.classPersonnelRel" :key="k2">
                  <image
                      :src="$util.img(v2.student.customerResources.member.headimg)"></image>
                </view>
                <view class="num">{{v.students_count}}</view>
              </view>
            </view>
          </view>
        </scroll-view>
      </view>

    </view>

    <!--    底部导航-->
    <AQTabber/>
  </view>
</template>

<script>
import memberApi from '@/api/member.js';
import AQTabber from "@/components/AQ/AQTabber.vue"
import apiRoute from '@/api/apiRoute.js';

export default {
  components: {
    AQTabber,
  },
  data() {
    return {
      loading:false,//加载状态
      lowerThreshold: 100,//距离底部多远触发
      isReachedBottom: false,//防止重复加载|true=不可加载|false=可加载

      //筛选条件
      filteredData:{
        page:1,//当前页码
        limit:10,//每页返回数据条数
        total:10,//数据总条数
        name: '',//班级名称
      },
      tableList:[],//聊天数据列表
    }
  },
  onLoad(options) {},
  onShow(){
    this.init()//初始化
  },
  methods: {
    //初始化
    async init(){
      this.getList()
    },

    //加载更多(下一页)
    loadMoreData() {
      //判断是否加载
      if (!this.isReachedBottom) {
        this.isReachedBottom = true;//设置为不可请求状态
        this.getList();
      }
    },
    //重置为第一页
    async resetFilteredData() {
      this.isReachedBottom = false; // 重置状态，以便下次触发加载更多

      this.filteredData.page = 1//当前页码
      this.filteredData.limit = 10//每页返回数据条数
      this.filteredData.total = 10//数据总条数
    },
    //获取列表
    async getList(){
      this.loading = true

      let data = {...this.filteredData}

      console.log(111,(this.filteredData.page * this.filteredData.limit) ,(this.filteredData.total))

      //判断是否还有数据
      if ((this.filteredData.page - 1) * this.filteredData.limit >= this.filteredData.total) {
        this.loading = false
        uni.showToast({
          title: '暂无更多',
          icon: 'none'
        })
        return
      }

      if(data.page == 1){
        this.tableList = []
      }

      let res = await apiRoute.jlClassList(data)
      this.loading = false
      this.isReachedBottom = false;
      if (res.code != 1){
        uni.showToast({
          title: res.msg,
          icon: 'none'
        })
        return
      }

      this.tableList = this.tableList.concat(res.data.data); // 使用 concat 方法 将新数据追加到数组中

      console.log('列表',this.tableList)
      this.filteredData.total = res.data.total
      this.filteredData.page++
    },

    async search(e){
      await this.resetFilteredData()
      this.filteredData.name = e
      await this.getList()
    },

    //打开班级详情页
    openViewClassInfo(item){
      let class_id = item.id
      uni.navigateTo({
        url: `/pages/coach/class/info?class_id=${class_id}`
      })
    },
  }
}
</script>

<style lang="less" scoped>

.main_box{
  background: #292929 ;
}

//自定义导航栏
.navbar_section{
  display: flex;
  justify-content: center;
  align-items: center;
  background: #292929;
  .title{
    padding: 40rpx 0rpx;

    /* 小程序端样式 */
    // #ifdef MP-WEIXIN
    padding: 80rpx 0rpx;
    // #endif


    font-size: 30rpx;
    color: #fff;
  }
}

.main_section{
  // min-height: 100vh;
  background: #292929 100%;
  padding: 0 24rpx;
  padding-top: 40rpx;
  padding-bottom: 150rpx;
  font-size: 24rpx;
  color: #FFFFFF;

  .section_1 {
    border-radius: 10rpx;
    background-color: #525252;
    ::v-deep .fui-input__wrap{
      border-radius: 10rpx !important;
      background-color: #525252 !important;
    }
    ::v-deep .fui-input__background{
      background-color: #525252 !important;
    }
    .input_item {
      height: 60rpx;
      ::v-deep .uni-input-wrapper{
        .uni-input-placeholder {
          font-size: 28rpx !important;

        }

      }
    }
    ::v-deep .uni-input-input {
      color: #fff;
    }
  }

  .section_2{
    margin-top: 34rpx;
    .ul{
      display: flex;
      flex-direction: column;
      //gap: 24rpx;
      .li{
        margin-bottom: 24rpx;
        background: #404045;
        padding: 50rpx 36rpx 46rpx;
        border-radius: 16rpx;
        display: flex;
		align-items: center;
        gap: 32rpx;
        .left{
          .pic{
            border-radius: 50%;
            width: 92rpx;
            height: 92rpx;
          }
        }
        .right{
          display: flex;
          flex-direction: column;
          gap: 28rpx;
          .box_1{
            display: flex;
            align-items: center;
            gap: 36rpx;
            .name{
              font-size: 28rpx;
            }
            .btn_box{
              view{
                border: 1px solid #FAD04D;
                border-radius: 10rpx;
                width: 182rpx;
                height: 48rpx;
                line-height: 42rpx;
                text-align: center;
                font-size: 26rpx;
                color: #FAD04D;
              }
            }
          }
          .box_2{
            display: flex;
            align-items: center;
            gap: 44rpx;
            .user_list{
              display: flex;
              align-items: center;
              gap: 14rpx;
              image{
                border-radius: 50%;
                width: 48rpx;
                height: 48rpx;
              }
            }
            .num{}
          }

        }
      }
    }
  }



}


</style>