智慧教务系统
You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
 
 
 
 
 
 

615 lines
15 KiB

<!--学员-详情-->
<template>
<view class="main_box">
<!--自定义导航栏-->
<!-- <view class="navbar_section">-->
<!-- <view class="title">学员详情</view>-->
<!-- </view>-->
<!--学员信息-->
<view class="user_section">
<view class="box">
<view class="left">
<image class="pic" :src="studentsInfo.customerResources.member.headimg"></image>
<!-- <view class="btn_box" v-if="checkExpireTime(studentsInfo.expire_time)">
<view class="btn">即将到期</view>
</view> -->
</view>
<view class="right">
<view class="item">
<view class="name">{{studentsInfo.name}}</view>
<view class="age">
<!-- {{formatAgeMonth(studentsInfo.age)}} -->
{{studentsInfo.customerResources.age}}
</view>
</view>
<!-- <view class="item">-->
<!-- <view class="title">家长姓名黄大呢</view>-->
<!-- </view>-->
<view class="item">
<view class="title">电话{{studentsInfo.customerResources.phone_number}}</view>
</view>
</view>
</view>
</view>
<!--课程信息-->
<!-- <view class="course_section">-->
<!-- <view class="main">-->
<!-- <view class="course_box">-->
<!-- <view class="item">-->
<!-- <view class="title">篮球少儿课程</view>-->
<!-- </view>-->
<!-- <view class="item">-->
<!-- <image class="pic" src="http://www.firstui.cn:4000/vipdoc/img/img_logo.png"></image>-->
<!-- <view class="name">{{studentsInfo.name}}</view>-->
<!-- </view>-->
<!-- <view class="item">-->
<!-- <view class="content">截止时间{{studentsInfo.expire_time}}</view>-->
<!-- </view>-->
<!-- <view class="item">-->
<!-- <view class="content">已上课时{{studentsInfo.have_study_time}}</view>-->
<!-- <view class="content">剩余课时{{studentsInfo.end_study_time}}</view>-->
<!-- </view>-->
<!-- <view class="tag">-->
<!-- 出勤高-->
<!-- </view>-->
<!-- <view class="btn">-->
<!-- 延课一周-->
<!-- </view>-->
<!-- </view>-->
<!-- </view>-->
<!-- <view class="bg_box bg_top"></view>-->
<!-- <view class="bg_box bg_bottom"></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>