Browse Source

feat(coach): 教练端学员信息页面

- 添加学员信息展示功能,包括头像、姓名、年龄等
- 实现作业列表展示,支持动态加载
- 添加体测报告列表展示,支持分页加载
- 优化页面布局和样式
master
liutong 12 months ago
parent
commit
5128f00a81
  1. 320
      pages/coach/student/info.vue

320
pages/coach/student/info.vue

@ -9,63 +9,63 @@
<!--学员信息--> <!--学员信息-->
<view class="user_section"> <view class="user_section">
<view class="box"> <view class="box">
<vie class="left"> <view class="left">
<image class="pic" src="http://www.firstui.cn:4000/vipdoc/img/img_logo.png"></image> <image class="pic" :src="$util.img(studentsInfo.header)"></image>
<view class="btn_box"> <view class="btn_box" v-if="checkExpireTime(studentsInfo.expire_time)">
<view class="btn">即将到期</view> <view class="btn">即将到期</view>
</view> </view>
</vie> </view>
<vie class="right"> <view class="right">
<veiw class="item"> <view class="item">
<view class="name">黄明明</view> <view class="name">{{studentsInfo.name}}</view>
<view class="age"> <view class="age">
13 {{studentsInfo.age}}
</view> </view>
</veiw>
<view class="item">
<view class="title">家长姓名黄大呢</view>
</view> </view>
<!-- <view class="item">-->
<!-- <view class="title">家长姓名黄大呢</view>-->
<!-- </view>-->
<view class="item"> <view class="item">
<view class="title">家长电话18888888888</view> <view class="title">电话{{studentsInfo.phone}}</view>
</view> </view>
</vie> </view>
</view> </view>
</view> </view>
<!--课程信息--> <!--课程信息-->
<view class="course_section"> <!-- <view class="course_section">-->
<view class="main"> <!-- <view class="main">-->
<view class="course_box"> <!-- <view class="course_box">-->
<view class="item"> <!-- <view class="item">-->
<view class="title">篮球少儿课程</view> <!-- <view class="title">篮球少儿课程</view>-->
</view> <!-- </view>-->
<view class="item"> <!-- <view class="item">-->
<image class="pic" src="http://www.firstui.cn:4000/vipdoc/img/img_logo.png"></image> <!-- <image class="pic" src="http://www.firstui.cn:4000/vipdoc/img/img_logo.png"></image>-->
<view class="name">包子皮</view> <!-- <view class="name">{{studentsInfo.name}}</view>-->
</view> <!-- </view>-->
<view class="item"> <!-- <view class="item">-->
<view class="content">截止时间2020.05:25</view> <!-- <view class="content">截止时间{{studentsInfo.expire_time}}</view>-->
</view> <!-- </view>-->
<view class="item"> <!-- <view class="item">-->
<view class="content">已上课时24</view> <!-- <view class="content">已上课时{{studentsInfo.have_study_time}}</view>-->
<view class="content">剩余课时24</view> <!-- <view class="content">剩余课时{{studentsInfo.end_study_time}}</view>-->
</view> <!-- </view>-->
<view class="tag"> <!-- <view class="tag">-->
出勤高 <!-- 出勤高-->
</view> <!-- </view>-->
<view class="btn"> <!-- <view class="btn">-->
延课一周 <!-- 延课一周-->
</view> <!-- </view>-->
</view> <!-- </view>-->
</view> <!-- </view>-->
<view class="bg_box bg_top"></view> <!-- <view class="bg_box bg_top"></view>-->
<view class="bg_box bg_bottom"></view> <!-- <view class="bg_box bg_bottom"></view>-->
</view> <!-- </view>-->
<view class="main_section"> <view class="main_section">
@ -75,91 +75,48 @@
<view :class="['item', tabType=='2' ? 'select':'']" @click="tabChange(2)">体侧报告</view> <view :class="['item', tabType=='2' ? 'select':'']" @click="tabChange(2)">体侧报告</view>
</view> </view>
<!--作业列表-->
<view v-if="tabType=='1'" class="section_1"> <view v-if="tabType=='1'" class="section_1">
<view class="ul"> <view class="ul">
<view class="li" @click="opebViewWorkDetails({id :1})"> <view class="li"
v-for="(v,k) in assignmentsList"
:key="k"
@click="opebViewWorkDetails(v)">
<view class="left"> <view class="left">
<view class="title">篮球少儿课</view> <view class="title">{{v.courses_name}}</view>
<view class="date">上课时间2020.05.30 15:30 - 17:30</view> <view class="date">上课时间{{v.submit_time}}</view>
</view> </view>
<view class="right"> <view class="right">
<view v-if="Atype==1" class="btn" style="background-color: #29D3B4;">作业完成</view> <view v-if="v.status==1" class="btn" style="background-color: #e2e2e2;">作业未提交</view>
<view v-else class="btn" style="background-color: #E2E2E2;">作业未提交</view> <view v-else-if="v.status==2" class="btn" style="background-color: #a4adb3;">待批改</view>
</view> <view v-else-if="v.status==3" class="btn" style="background-color: #29d3b4;">作业已完成</view>
</view>
<view class="li" @click="opebViewWorkDetails({id :1})">
<view class="left">
<view class="title">篮球少儿课</view>
<view class="date">上课时间2020.05.30 15:30 - 17:30</view>
</view>
<view class="right">
<view v-if="Atype==1" class="btn" style="background-color: #29D3B4;">作业完成</view>
<view v-else class="btn" style="background-color: #E2E2E2;">作业未提交</view>
</view>
</view>
<view class="li" @click="opebViewWorkDetails({id :1})">
<view class="left">
<view class="title">篮球少儿课</view>
<view class="date">上课时间2020.05.30 15:30 - 17:30</view>
</view>
<view class="right">
<view v-if="Atype==2" class="btn" style="background-color: #29D3B4;">作业完成</view>
<view v-else class="btn" style="background-color: #E2E2E2;">作业未提交</view>
</view>
</view>
<view class="li" @click="opebViewWorkDetails({id :1})">
<view class="left">
<view class="title">篮球少儿课</view>
<view class="date">上课时间2020.05.30 15:30 - 17:30</view>
</view>
<view class="right">
<view v-if="Atype==1" class="btn" style="background-color: #29D3B4;">作业完成</view>
<view v-else class="btn" style="background-color: #E2E2E2;">作业未提交</view>
</view> </view>
</view> </view>
</view> </view>
</view> </view>
<!--评测报告-->
<view v-if="tabType=='2'" class="section_2"> <view v-if="tabType=='2'" class="section_2">
<view class="ul"> <scroll-view
<view class="li" @click="openViewPhysicalExamination({id:1})"> class="ul"
<view class="top"> scroll-y="true"
<view class="title">综合评分:96</view> :lower-threshold="lowerThreshold"
<view class="hint">打败了99%学员</view> @scrolltolower="loadMoreData"
</view> style="height: 65vh;"
<view class="bottom">测试时间2020.05.30</view> >
</view> <view
<view class="li" @click="openViewPhysicalExamination({id:1})"> class="li"
<view class="top"> v-for="(v,k) in surveyList"
<view class="title">综合评分:96</view> :key="k" @click="openViewPhysicalExamination(v)"
<view class="hint">打败了99%学员</view> >
</view>
<view class="bottom">测试时间2020.05.30</view>
</view>
<view class="li" @click="openViewPhysicalExamination({id:1})">
<view class="top">
<view class="title">综合评分:96</view>
<view class="hint">打败了99%学员</view>
</view>
<view class="bottom">测试时间2020.05.30</view>
</view>
<view class="li" @click="openViewPhysicalExamination({id:1})">
<view class="top">
<view class="title">综合评分:96</view>
<view class="hint">打败了99%学员</view>
</view>
<view class="bottom">测试时间2020.05.30</view>
</view>
<view class="li" @click="openViewPhysicalExamination({id:1})">
<view class="top"> <view class="top">
<view class="title">综合评分:96</view> <view class="title">综合评分:{{v.score}}</view>
<view class="hint">打败了99%学员</view> <!-- <view class="hint">打败了99%学员</view>-->
</view> </view>
<view class="bottom">测试时间2020.05.30</view> <view class="bottom">测试时间{{v.create_time}}</view>
</view> </view>
</view> </scroll-view>
</view> </view>
@ -174,7 +131,7 @@
</template> </template>
<script> <script>
// import user from '@/api/user.js'; import memberApi from '@/api/member.js';
import AQTabber from "@/components/AQ/AQTabber.vue" import AQTabber from "@/components/AQ/AQTabber.vue"
@ -184,14 +141,137 @@ export default {
}, },
data() { data() {
return { return {
formData:{},
tabType:'1',//1=,2= tabType:'1',//1=,2=
Atype: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,//
students_id: '',//id
},
surveyList:[],//
} }
}, },
onLoad() { onLoad(options) {
this.students_id = options.students_id//id
this.filteredData.students_id = options.students_id//id
},
onShow(){
this.init()//
}, },
methods: { methods: {
//
async init(){
//
await this.getStudentsInfo()
this.getSurveyList()
},
//
async getStudentsInfo(){
let data = {
students_id:this.students_id
}
let res = await memberApi.jlStudentsInfo(data)
if (res.code != 1){
uni.showToast({
title: res.msg,
icon: 'none'
})
return
}
this.studentsInfo = res.data//
this.assignmentsList = res.data.assignments_list//
},
// 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 * this.filteredData.limit > this.filteredData.total){
this.loading = false
uni.showToast({
title: '暂无更多',
icon: 'none'
})
return
}
if(data.page == 1){
this.surveyList = []
}
//-
let res = await memberApi.surveyList(data)
this.loading = false
this.isReachedBottom = false;
if (res.code != 1){
uni.showToast({
title: res.msg,
icon: 'none'
})
return
}
this.surveyList = this.surveyList.concat(res.data.list.data); // 使 concat
console.log('列表',this.surveyList)
this.filteredData.total = res.data.list.total
this.filteredData.page++
},
//tab //tab
tabChange(tabType) { tabChange(tabType) {
this.tabType = tabType this.tabType = tabType
@ -476,8 +556,8 @@ export default {
.ul{ .ul{
display: flex; display: flex;
flex-direction: column; flex-direction: column;
gap: 12rpx;
.li{ .li{
margin-bottom: 12rpx;
padding: 30rpx 20rpx; padding: 30rpx 20rpx;
border: 1px solid #29D3B4; border: 1px solid #29D3B4;
border-radius: 18rpx; border-radius: 18rpx;

Loading…
Cancel
Save