ZhiHuiJiaoWu_UniApp/pages/coach/job/list.vue

<!--作业列表-->
<template>
  <view class="main_section">

    <scroll-view
        class="section_3"
        scroll-y="true"
        :lower-threshold="lowerThreshold"
        @scrolltolower="loadMoreData"
        style="height: 80vh;"
    >
      <view class="ul">
        <view class="li" v-for="(v,k) in tableList" :key="k" @click="openViewWorkDetails(v)">
          <view class="left_box">
            <view class="date_box">
              <text>{{v.wc_count}}</text>
              <text>/</text>
              <text>{{v.student_count}}</text>
            </view>
            <view class="ratio">
              完成率：{{v.rate}}%
            </view>
          </view>
          <view class="center_box">
            <view>班级：{{v.class_name}}</view>
            <view>时间：{{v.send_time}}</view>
            <view>课程：{{v.courses_name}}
            </view>
          </view>
          <view class="right_box">
            <!--            <view class="tag" style="background:#fad24e;">上课中</view>-->
            <view class="tag" v-if="v.dpg_count == 0" style="background:#1cd188;">待批改</view>
          </view>
        </view>
      </view>
    </scroll-view>

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

<script>
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=可加载

      //筛选条件
      filteredData:{
        page:1,//当前页码
        limit:10,//每页返回数据条数
        total:10,//数据总条数
      },
      tableList:[],//数据列表
    }
  },
  onLoad() {},
  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}

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

    //跳转页面-作业详情
    openViewWorkDetails(item){
      let id = item.id
      this.$navigateTo({
        url: `/pages/coach/student/work_details?id=${id}`
      })
    },
  }
}
</script>

<style lang="less" scoped>

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

  .section_3{
    margin-top: 36rpx;
    color: #fff;
    font-size: 24rpx;
    .title_box{
      display: flex;
      flex-direction: column;
      .top_box{
        display: flex;
        justify-content: space-between;
        align-items: center;
        text{
          font-size: 30rpx;
        }
      }
      .line{
        width: 90rpx;
        height: 2px;
        background: #29D3B4;
      }
    }
    .ul{
      margin-top: 30rpx;
      display: flex;
      flex-direction: column;
      gap: 20rpx;
      .li{
        position: relative;
        border-radius: 22rpx;
        background: #434544 100%;
        padding: 14rpx 0;
        display: flex;
        align-items: center;
        .left_box{
          margin-left: 28rpx;
          width: 146rpx;
          display: flex;
          flex-direction: column;
          gap: 10rpx;
          .date_box{
            display: flex;
            font-size: 48rpx;
            text:nth-child(1){
              color: #29D3B4;
            }
          }
          .ratio{
            color: #AAAAAA;
          }
        }
        .center_box{
          margin-left: 52rpx;
          display: flex;
          flex-direction: column;
          gap: 10rpx;
        }
        .right_box{
          .tag{
            position:absolute;
            top: 0rpx;
            right: 0rpx;
            padding: 10rpx;
            width: 102rpx;
            text-align: center;
            font-size: 24rpx;
            border-bottom-left-radius: 20rpx;
            border-top-right-radius: 20rpx;
          }

        }
      }

    }
  }

}


</style>