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.
513 lines
13 KiB
513 lines
13 KiB
<!--学员-详情-->
|
|
<template>
|
|
<view class="main_box">
|
|
<!--自定义导航栏-->
|
|
<!-- <view class="navbar_section">-->
|
|
<!-- <view class="title">学员详情</view>-->
|
|
<!-- </view>-->
|
|
|
|
<!--学员信息-->
|
|
<view class="user_section">
|
|
<view class="box">
|
|
<vie class="left">
|
|
<image class="pic" src="http://www.firstui.cn:4000/vipdoc/img/img_logo.png"></image>
|
|
<view class="btn_box">
|
|
<view class="btn">即将到期</view>
|
|
</view>
|
|
</vie>
|
|
<vie class="right">
|
|
<veiw class="item">
|
|
<view class="name">黄明明</view>
|
|
<view class="age">
|
|
13岁
|
|
</view>
|
|
</veiw>
|
|
<view class="item">
|
|
<view class="title">家长姓名：黄大呢</view>
|
|
</view>
|
|
<view class="item">
|
|
<view class="title">家长电话：18888888888</view>
|
|
</view>
|
|
</vie>
|
|
</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">包子皮</view>
|
|
</view>
|
|
|
|
<view class="item">
|
|
<view class="content">截止时间：2020.05:25</view>
|
|
</view>
|
|
|
|
<view class="item">
|
|
<view class="content">已上课时：24</view>
|
|
<view class="content">剩余课时：24</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" @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==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 v-if="tabType=='2'" class="section_2">
|
|
<view class="ul">
|
|
<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="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="title">综合评分:96</view>
|
|
<view class="hint">打败了99%学员</view>
|
|
</view>
|
|
<view class="bottom">测试时间：2020.05.30</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
|
|
|
|
|
|
</view>
|
|
|
|
</view>
|
|
|
|
<!-- 底部导航-->
|
|
<!-- <AQTabber/>-->
|
|
</view>
|
|
</template>
|
|
|
|
<script>
|
|
import user from '@/api/user.js';
|
|
import AQTabber from "@/components/AQ/AQTabber.vue"
|
|
|
|
|
|
export default {
|
|
components: {
|
|
AQTabber,
|
|
},
|
|
data() {
|
|
return {
|
|
formData:{},
|
|
tabType:'1',//1=班级成员,2=作业任务
|
|
Atype:1,//1=作业完成,2=作业未提交
|
|
}
|
|
},
|
|
onLoad() {
|
|
},
|
|
methods: {
|
|
//切换tab
|
|
tabChange(tabType) {
|
|
this.tabType = tabType
|
|
},
|
|
|
|
//打开课程详情
|
|
openViewCourseInfo(item){
|
|
uni.navigateTo({
|
|
url: '/pages/coach/course/info'
|
|
})
|
|
},
|
|
//打开学员详情页
|
|
openViewStudentInfo(item){
|
|
uni.navigateTo({
|
|
url: '/pages/coach/student/info'
|
|
})
|
|
},
|
|
|
|
//打开体测报告
|
|
openViewPhysicalExamination(item){
|
|
uni.navigateTo({
|
|
url: '/pages/coach/student/physical_examination'
|
|
})
|
|
},
|
|
|
|
//打开作业任务
|
|
opebViewWorkDetails(item){
|
|
uni.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: 20rpx 0;
|
|
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;
|
|
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;
|
|
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>
|