zhjwxt/uniapp/pages-student/my/my_coach.vue

<!--我的教练-列表-->
<template>
	<view class="main_box">
    <scroll-view scroll-y="true" :lower-threshold="lowerThreshold"
			@scrolltolower="loadMoreData"  style="height: 100%;padding-top:50rpx;padding-bottom: 50rpx">

<!--      <view class="data_hint" v-if="!this.tableList.length">暂无更多数据</view>-->

      <view class="main_section" v-for="(v,k) in tableList" :key="k">
        <view class="left">
<!--          头像-->
          <image :src="v.head_img ? v.head_img : $util.img('/uniapp_src/static/images/common/yong_hu.png')" class="pic"></image>
        </view>
        <view class="right">
          <view class="title">姓名：{{v.name}}</view>
          <view class="title">电话：{{v.phone}}</view>
        </view>

      </view>
    </scroll-view>
    <!--      加载状态-->
<!--    <fui-loading :isFixed="true" srcCol="/static/icon-img/loading_white.png" text="正在加载..." v-if="loading"></fui-loading>-->
	</view>
</template>

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


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

        memberInfo:{id:''},//客户资源信息

        //筛选条件
        filteredData:{
          page:1,//当前页码
          limit:10,//每页返回数据条数
          total:10,//数据总条数
          resources_id:'',//学生资源表id
        },

        tableList:[],//表格数据
			}
		},
		onLoad(options) {},
    onShow() {
      this.init()//初始化
    },
    //下拉刷新
    async onPullDownRefresh() {
      //重置为第一页
      await this.resetFilteredData()
      await this.getList()
    },
		methods: {
		  //初始化
      async init() {
        await this.getMemberInfo();
        await this.getList();
      },

      //重置为第一页
      async resetFilteredData() {
        this.isReachedBottom = false; // 重置状态，以便下次触发加载更多

        this.filteredData.page = 1//当前页码
        this.filteredData.limit = 10//每页返回数据条数
        this.filteredData.total = 10//数据总条数
      },

      //获取当前登录的学生信息
      async getMemberInfo() {
        let res = await apiRoute.xy_memberInfo({})
        if(res.code != 1){
          uni.showToast({
            title: res.msg,
            icon: 'none'
          })
          return
        }
        this.memberInfo = res.data
        this.filteredData.resources_id = res.data.id
      },


		  //加载更多(下一页)
      loadMoreData() {
        return //本页面无需下一页
        //判断是否加载
        if (!this.isReachedBottom) {
          this.isReachedBottom = true;//设置为不可请求状态
          this.getList();
        }
      },

      //重置为第一页
      loadData() {
        setTimeout(() => {
          this.isReachedBottom = false; // 重置状态，以便下次触发加载更多
        }, 1000);
      },

      //获取教练列表
      async getList(){
        this.loading = true

        let data = {...this.filteredData}

        //判断是否还有数据
        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.xy_personCourseScheduleGetMyCoach(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++
      },
		}
	}
</script>

<style lang="less" scoped>
	.main_box {
		width: 100%;
		height: 100%;
		overflow: auto;
		background: #292929;
	}
  .data_hint{
    margin-top: 100rpx;
    font-size: 30rpx;
    text-align: center;
    color: #fff;
  }
	.main_section{
		width: 92%;
		border-radius: 15rpx;
		background-color: #404045;
		margin: 20rpx auto;
		padding: 30rpx;
		color: #fff;
    display: flex;
    align-items: center;
    .left{
      display: flex;
      flex-direction: column;
      align-items: center;
      .pic{
        width: 100rpx;
        height: 100rpx;
        border-radius: 50%;
      }
    }
    .right{
      margin-left: 20rpx;
      display: flex;
      flex-direction: column;
      gap: 20rpx;
    }
	}
	.title{
		font-size: 32rpx;
	}
	.con{
		color: #D7D7D7;
		font-size: 26rpx;
		margin-top: 20rpx;
	}
	.current-venue{
		border-radius: 8rpx;
		border: 2rpx #F59A23 solid;
		width: 120rpx;
		text-align: center;
		color: #F59A23;
		position: absolute;
		top: 10%;
		right: 3%;
	}
</style>