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

<!--课时消耗列表-->
<template>
	<view class="assemble">
		<view style="height: 50rpx;"></view>

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

		<view class="ul" v-if="tableList.length">
			<view class="li" v-for="(v,k) in tableList" :key="k">
				<view class="left">
					<view class="title">{{v.name}}</view>
					<view class="date">课程使用日期：{{v.usage_date}}</view>
				</view>
				<view class="right">
          <view
              class="btn"
              style="background-color: #29d3b4;"
          >
            {{v.usage_date}}课时
          </view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
import apiRoute from '@/api/apiRoute.js';

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

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

        tableList:[],//表格数据

        memberInfo:{},//当前登录的学生资源信息
			}
		},
    onLoad(options) {

    },
    onShow(){
      this.init()//初始化
    },
    //下拉刷新
    async onPullDownRefresh() {
      //重置为第一页
      await this.resetFilteredData()
      await this.getList()
    },
		methods: {
      //初始化
      async init(){
        await this.getMemberInfo()//获取当前登录的学生信息
        await this.getList()//获取列表
      },

      //获取当前登录的学生信息
      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() {
        //判断是否加载
        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}

        //判断是否还有数据
        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_personCourseScheduleGetStudentCourseUsageList(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>
.message_box{
  font-size: 30rpx;
  text-align: center;
  color: #fff;
}
	.assemble {
		width: 100%;
		height: 100vh;
		background: #333333;
		overflow: auto;
	}

	.ul {
		display: flex;
		flex-direction: column;
		gap: 12rpx;
		background-color: #fff;
		width: 90%;
		margin: 0 auto 30rpx;
		padding: 26rpx;
		border-radius: 16rpx;
	}

	.li {
		padding: 30rpx 20rpx;
		border: 1px solid #29D3B4;
		border-radius: 18rpx;
		background-color: rgba(41, 211, 180, 0.16);
		font-size: 26rpx;
		display: flex;
		justify-content: space-between;
		align-items: center;
	}

	.left {
		display: flex;
		flex-direction: column;
		gap: 15rpx;
	}

	.btn {
		width: 110rpx;
		height: 44rpx;
		line-height: 44rpx;
		border-radius: 8rpx;
		background-color: rgba(41, 211, 180, 1);
		color: rgba(255, 255, 255, 1);
		font-size: 20rpx;
		text-align: center;
	}
</style>