ZhiHuiJiaoWu_UniApp/pages/coach/my/arrival_statistics.vue

<!--到课统计-详情-->
<template>
  <view class="main_box">

    <view class="main_section">

      <scroll-view
          class="section_3"
          scroll-y="true"
          :lower-threshold="lowerThreshold"
          @scrolltolower="loadMoreData"
          style="height: 90vh;"
      >
        <view class="ul">
          <view class="li"
                v-for="(v,k) in courseList"
                :key="k"
                @click="openViewCourseInfo(v)"
          >
            <view class="left_box">
              <view class="date_box">
                <text>{{v.has_sign_count}}</text>
                <text>/</text>
                <text>{{v.students_count}}</text>
              </view>
              <view class="ratio">
                到课率：{{v.attendance_rate}}%
              </view>
            </view>
            <view class="center_box">
              <view>班级：{{v.classes_name}}</view>
              <view>时间：{{v.date_time}} {{v.time_slot ? v.time_slot.replace(",", " - ") : ""}}</view>
              <view>课室：{{v.address}}
              </view>
              <view>课程：{{v.courses_name}}
              </view>
            </view>
            <view class="right_box">
              <view v-if="!(['1','2'].includes(String(v.status)))" class="tag" style="background:#20CAAF;">未开始</view>

              <view v-if="v.status == 1" class="tag" style="background:#fad24e;">上课中</view>
              <view v-if="v.status == 2" class="tag" style="background:#e2e2e2;">已结束</view>
            </view>
          </view>
        </view>
      </scroll-view>
    </view>
  </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,//数据总条数
        class_id: '',//班级id
      },
      courseList:[],//课程列表
    }
  },
  onLoad() {
  },
  onShow(){
    this.init()
  },
  methods: {
    //初始化
    async init(){
      this.getCourseList()
    },

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

      this.filteredData.page = 1//当前页码
      this.filteredData.limit = 10//每页返回数据条数
      this.filteredData.total = 10//数据总条数
    },
    //教练端-获取课程列表
    async getCourseList(){

      let data = {...this.filteredData}
      data.class_id = this.class_id

      console.log(12123,this.courseList)

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

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

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

      let arr = []
      res.data.list.data.forEach((v,k)=>{
        let item = v
        item.attendance_rate = (v.students_count && !isNaN(v.students_count) && v.students_count > 0) ?
            parseFloat(((v.has_sign_count / v.students_count) * 100).toFixed(1)) : 0;
        arr.push(item)
      })



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

      this.filteredData.total = res.data.list.total
      console.log('获取课程列表',this.courseList)
      this.filteredData.page++

    },


    //打开课程详情
    openViewCourseInfo(item){
      let id= item.id
      uni.navigateTo({
        url: `/pages/coach/course/info_list?id=${id}`
      })
    },
  }
}
</script>

<style lang="less" scoped>

.main_box{
  background: #292929 ;
}

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

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

    font-size: 30rpx;
    color: #315d55;
  }
}

.main_section{
  min-height: 100vh;
  background: #292929 100%;
  padding: 0 24rpx;
  padding-top: 32rpx;
  padding-bottom: 150rpx;
  font-size: 28rpx;
  .section_3{
    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: 175rpx;
          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: 22rpx;
          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>