zhjwxt/uniapp/pages/coach/student/info.vue

<!--学员-详情-->
<template>
  <view class="main_box">
    <!--学员信息-->
    <view class="user_section">
      <view class="box">
        <view class="left">
          <image class="pic" :src="studentsInfo.customerResources.member.headimg"></image>
        </view>
        <view class="right">
          <view class="item">
            <view class="name">{{ studentsInfo.name }}</view>
            <view class="age">
              {{ studentsInfo.customerResources.age }}岁
            </view>
          </view>
          <view class="item">
            <view class="title">电话：{{ studentsInfo.customerResources.phone_number }}</view>
          </view>
        </view>
      </view>
    </view>

    <view class="main_section">
      <view class="section_box">
        <view class="tag_box">
          <view :class="['item', tabType=='1' ? 'select':'']" @click="tabChange(1)">出勤记录</view>
          <view :class="['item', tabType=='2' ? 'select':'']" @click="tabChange(2)">体侧报告</view>
        </view>

        <!--作业列表-->
        <view v-if="tabType=='1'" class="section_1">
          <view class="ul">
            <view class="li"
                  v-for="(v,k) in assignmentsList"
                  :key="k"
                  @click="opebViewWorkDetails(v)">
              <view class="left">
                <view class="title">{{ v.courses_name }}</view>
                <view class="date">上课时间：{{ v.submit_time }}</view>
              </view>
              <view class="right">
                <view v-if="v.status==1" class="btn" style="background-color: #e2e2e2;">作业未提交</view>
                <view v-else-if="v.status==2" class="btn" style="background-color: #a4adb3;">待批改</view>
                <view v-else-if="v.status==3" class="btn" style="background-color: #29d3b4;">作业已完成</view>
              </view>
            </view>
          </view>
        </view>


        <!--评测报告-->
        <view v-if="tabType=='2'" class="section_2">
          <scroll-view
            class="ul"
            scroll-y="true"
            :lower-threshold="lowerThreshold"
            @scrolltolower="loadMoreData"
            style="height: 65vh;"
          >
            <view
              class="li"
              v-for="(v,k) in surveyList"
              :key="k" @click="openViewPhysicalExamination(v)"
            >
              <view class="top">
                <view class="title">综合评分:{{ v.calculateChildHealthScore }}</view>
                <!--                <view class="hint">打败了99%学员</view>-->
              </view>
              <view class="bottom">测试时间：{{ $util.formatToDateTime(v.created_at, 'Y-m-d') }}</view>
            </view>
          </scroll-view>
        </view>


      </view>

    </view>

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

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

export default {
  components: {
    AQTabber,
  },
  data() {
    return {
      tabType: '1',//1=班级成员,2=作业任务
      Atype: 1,//1=作业完成,2=作业未提交

      students_id: '',//学生id
      studentsInfo: {},// 学生详情
      assignmentsList: [],// 作业列表

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

      //筛选条件
      filteredData: {
        page: 1,//当前页码
        limit: 10,//每页返回数据条数
        total: 10,//数据总条数
        user_id: '',//学员id
      },
      surveyList: [],//体测报告列表
    }
  },
  onLoad(options) {
    this.students_id = options.students_id//学生id
  },
  onShow() {
    this.init()//初始化
  },
  methods: {
    //初始化
    async init() {
      //获取学生详情
      await this.getStudentsInfo()
      await this.getSurveyList()
    },
    formatAgeMonth(input) {
      let str = String(input)
      // 分割小数点前后部分
      let [yearPart, monthPart] = str.split('.')
      // 如果没有小数部分，默认为 0
      if (!monthPart) {
        monthPart = '00'
      }
      // 如果是 00，则显示为 0
      monthPart = monthPart === '00' ? '0' : monthPart
      return `${yearPart}岁${monthPart}月`
    },
    //获取学生详情
    async getStudentsInfo() {
      let data = {
        students_id: this.students_id,
      }
      let res = await apiRoute.jlStudentsInfo(data)
      if (res.code != 1) {
        uni.showToast({
          title: res.msg,
          icon: 'none',
        })
        return
      }

      this.studentsInfo = res.data//学生信息

      this.assignmentsList = res.data.physical_test//作业列表
      this.filteredData.user_id = res.data.user_id

    },
    // 检查 expire_time 是否大于等于当前时间 5 天
    checkExpireTime(expireTime = '') {
      if (!expireTime) {
        return false
      }

      const expireDate = new Date(expireTime)
      const currentDate = new Date()

      // 计算天数差
      const timeDifference = expireDate - currentDate
      const daysDifference = timeDifference / (1000 * 60 * 60 * 24)

      if (daysDifference >= 5) {
        return true
      } else {
        return false
      }
    },


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

      this.filteredData.page = 1//当前页码
      this.filteredData.limit = 10//每页返回数据条数
      this.filteredData.total = 10//数据总条数
    },
    //获取学生评测报告列表
    async getSurveyList() {
      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.surveyList = []
      }

      //学员-体测列表
      let res = await apiRoute.physicalTest(data)
      this.loading = false
      this.isReachedBottom = false
      if (res.code != 1) {
        uni.showToast({
          title: res.msg,
          icon: 'none',
        })
        return
      }

      console.log(res, 111)

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

      console.log('列表', this.surveyList)
      this.filteredData.total = res.data.total
      this.filteredData.page++
    },


    //切换tab
    tabChange(tabType) {
      this.tabType = tabType
    },

    //打开课程详情
    openViewCourseInfo(item) {
      this.$navigateTo({
        url: '/pages/coach/course/info',
      })
    },
    //打开学员详情页
    openViewStudentInfo(item) {
      this.$navigateTo({
        url: '/pages/coach/student/info',
      })
    },

    //打开体测报告
    openViewPhysicalExamination(item) {
      let survey_id = item.id
      this.$navigateTo({
        url: `/pages/coach/student/physical_examination?survey_id=${survey_id}`,
      })
    },

    //打开作业任务
    opebViewWorkDetails(item) {
      this.$navigateTo({
        url: '/pages/coach/student/work_details',
      })
    },
  },
}
</script>

<style lang="less" scoped>

.main_box {
  background: #292929;
  min-height: 100vh;
}

//自定义导航栏
.navbar_section {
  display: flex;
  justify-content: center;
  align-items: center;
  background: #292929;

  .title {
    padding: 40rpx 0rpx;

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

    font-size: 30rpx;
    color: #fff;
  }
}

//学员信息
.user_section {
  background-color: #29D3B4;
  padding-top: 58rpx;
  padding-bottom: 42rpx;

  .box {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 15rpx;

    .left {
      position: relative;
      display: flex;
      flex-direction: column;
      align-items: center;
      width: 120rpx;

      .pic {
        width: 92rpx;
        height: 92rpx;
        border-radius: 50%;
      }

      .btn_box {
        position: absolute;
        bottom: -18rpx;

        .btn {
          width: 120rpx;
          height: 38rpx;
          line-height: 40rpx;
          border-radius: 4rpx;
          background-color: rgba(245, 154, 35, 1);
          color: rgba(255, 255, 255, 1);
          font-size: 20rpx;
          text-align: center;
          border: 0rpx solid rgba(121, 121, 121, 1);
        }
      }

    }

    .right {
      display: flex;
      flex-direction: column;
      gap: 18rpx;

      .item {
        color: #fff;
        display: flex;
        align-items: center;

        .name {
          font-size: 28rpx;
        }

        .age {
          margin-left: 20rpx;
          width: 128rpx;
          height: 42rpx;
          line-height: 42rpx;
          border-radius: 34rpx;
          background-color: rgba(255, 255, 255, 1);
          color: rgba(51, 51, 51, 1);
          font-size: 28rpx;
          text-align: center;
        }
      }
    }
  }
}

//课程信息
.course_section {
  position: relative;

  .main {
    position: relative;
    z-index: 2;
    padding: 0 24rpx;
    display: flex;
    justify-content: center;

    .course_box {
      padding: 42rpx 28rpx;
      width: 692rpx;
      border-radius: 20rpx;
      background-color: #fff;
      display: flex;
      flex-direction: column;
      gap: 20rpx;
      position: relative;

      .item {
        display: flex;
        align-items: center;
        gap: 22rpx;

        .title {
          font-size: 28rpx;
          color: #333333;
        }

        .pic {
          width: 58rpx;
          height: 58rpx;
          border-radius: 50%;
        }

        .name {
          color: #333333;
          font-size: 24rpx;
        }

        .content {
          color: #AAAAAA;
          font-size: 24rpx;
        }
      }

      .tag {
        position: absolute;
        right: 0;
        top: 0;
        width: 110rpx;
        height: 60rpx;
        line-height: 60rpx;
        border-radius: 0rpx 24rpx 0rpx 24rpx;
        background-color: rgba(236, 128, 141, 1);
        color: rgba(255, 255, 255, 1);
        font-size: 24rpx;
        text-align: center;
      }

      .btn {
        position: absolute;
        right: 30rpx;
        bottom: 50rpx;
        width: 130rpx;
        height: 48rpx;
        line-height: 48rpx;
        border-radius: 10rpx;
        background-color: rgba(41, 211, 180, 0);
        color: rgba(50, 219, 224, 1);
        font-size: 24rpx;
        text-align: center;
        font-family: -regular;
        border: 2rpx solid rgba(50, 219, 224, 1);
      }
    }
  }

  .bg_box {
    z-index: 1;
    width: 100%;
    height: 150rpx;
  }

  .bg_top {
    position: absolute;
    top: 0;
    background-color: #29D3B4;
  }

  .bg_bottom {
    top: 50%;
    position: absolute;
    background-color: #292929;
  }
}

.main_section {
  background: #292929 100%;
  padding: 0 24rpx;
  padding-top: 40rpx;
  padding-bottom: 150rpx;
  font-size: 24rpx;
  color: #333333;

  .section_box {
    background: #fff;
    border-radius: 16rpx;
    padding: 34rpx 24rpx;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 38rpx;

    .tag_box {
      width: 100%;
      display: flex;
      justify-content: center;
      align-items: center;
      gap: 112rpx;

      .item {
        width: 112rpx;
        font-size: 28rpx;
      }

      .select {
        color: #29D3B4;
      }
    }

    //出勤记录
    .section_1 {
      width: 100%;

      .ul {
        display: flex;
        flex-direction: column;
        gap: 12rpx;

        .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;
          }

          .right {
            .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;
            }
          }
        }
      }
    }

    //体测报告
    .section_2 {
      width: 100%;

      .ul {
        display: flex;
        flex-direction: column;

        .li {
          margin-bottom: 12rpx;
          padding: 30rpx 20rpx;
          border: 1px solid #29D3B4;
          border-radius: 18rpx;
          background-color: rgba(41, 211, 180, 0.16);
          font-size: 26rpx;
          display: flex;
          flex-direction: column;
          gap: 20rpx;

          .top {
            display: flex;
            align-items: center;
            gap: 40rpx;

            .title {
              font-size: 34rpx;
            }

            .hint {
              color: #F59A23;
              font-size: 24rpx;
            }
          }

          .bottom {
          }

        }
      }
    }


  }

}


</style>