ZhiHuiJiaoWu_UniApp/pages/student/index/job_list.vue

<template>
	<view class="main_box">
		<view class="after-class-title">
			<view class="after-class-title-left">课后作业</view>
		</view>

    <scroll-view
        class="table_list"
        scroll-y="true"
        :lower-threshold="lowerThreshold"
        @scrolltolower="loadMoreData"
        style="height: 100vh;"
    >

      <view class="con-list" v-for="(v,k) in tableList" :key="k">
        <view class="con-list-img" v-if="v.student_file">
          <video v-if="v.student_file_type == 2" class="pic" style="width: 100%;border-radius: 15rpx;" :src="$util.img(v.student_file)"></video>
          <image v-else style="width: 100%;border-radius: 15rpx;" :src="$util.img(v.student_file)" mode="aspectFit"></image>
        </view>

        <view class="date_box">
          <view class="describe" style="margin-top: 20rpx;">
            时间：{{v.submit_time}}
          </view>
          <!--是否已经完成作业-->
          <view class="mark" v-if="v.status == 2">
            <image class="check_mark" src="@/static/images/index/check_mark.png"></image>
          </view>
        </view>


        <!--作业描述-->
        <view class="con" style="margin-bottom: 20rpx; color:#fff;" v-html="v.content_text"></view>

        <view class="assignment">
          <view>{{v.type == 1 ? '班级作业' : '个人作业'}}</view>
        </view>
      </view>

    </scroll-view>


	</view>
</template>

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

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

        //筛选条件
        filteredData:{
          page:1,//当前页码
          limit:10,//每页返回数据条数
          total:10,//数据总条数
          status: '',//1=未提交,2=已提交,3=已批改
        },

        tableList:[],//表格数据

			}
		},
    onShow(){
      this.init()//初始化
    },
    //下拉刷新
    async onPullDownRefresh() {
      //重置为第一页
      await this.loadData()
      await this.getList()
    },
		methods: {
      //初始化
      async init(){
        await this.getList();
      },

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

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

        this.tableList = []
      },

      //获取作业列表
      async getList(){
        this.loading = true

        let data = {...this.filteredData}

        //判断是否还有数据
        if(this.filteredData.page * this.filteredData.limit > this.filteredData.total){
          this.loading = false
          uni.showToast({
            title: '暂无更多',
            icon: 'none'
          })
          return
        }
        let res = await memberApi.assignmentsList(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: 100vh;
		background: #292929;
		overflow: auto;

    .table_list{
      padding-bottom: 150rpx;
    }
	}
	.after-class-title {
		width: 92%;
		display: flex;
		justify-content: space-between;
		margin: auto;
		padding-top: 30rpx;
	}
	.after-class-title-left {
		color: #fff;
		font-size: 35rpx;
		border-bottom: 4rpx #29d3b4 solid;
	}
	.con-list{
		width: 100%;
		padding: 30rpx;
		margin-top: 20rpx;
		border-bottom: 2rpx #fff solid;
		.date_box{
      padding-top: 30rpx;
      display: flex;
      justify-content: space-between;
      align-items: center;
      .describe{
        width: 75%;
        color: #fff;
      }
    }
	}
	.con-list-img{
		width: 100%;
		height: 280rpx;
		display: flex;
		align-items: center;
		justify-content: center;

    video{
      width: 100%;
      height: 280rpx;
    }
    image{
      width: 100%;
      height: 280rpx;
    }

	}
	.pic{
		width: 85%;
		height: 100%;
	}
	.con{
		width: 75%;
		color: #fff;
		padding-top: 30rpx;
	}
	.mark{
		width: 70rpx;
		height: 70rpx;
		border-radius: 100%;
		background: #29d3b4;
		display: flex;
		align-items: center;
		justify-content: center;
	}
	.check_mark{
		width: 80%;
		height: 80%;
	}
	.assignment{
    display: flex;
    justify-content: flex-end;
    align-items: center;
    view{
      padding: 6rpx 12rpx;
      color: #6b9d53;
      border: 2rpx #6b9d53 solid;
      border-radius: 10rpx;
      width: 150rpx;
      text-align: center;
    }
	}
</style>