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.
602 lines
14 KiB
602 lines
14 KiB
<!--课程-详情列表-->
|
|
<template>
|
|
<view class="main_box">
|
|
<view class="main_section">
|
|
<view class="section_1">
|
|
<view class="title">时间：{{courseInfo.course_date}}</view>
|
|
<view class="title">地点：{{courseInfo.venue.venue_name}}</view>
|
|
<view class="title">课程：{{courseInfo.course.course_name}}</view>
|
|
<view class="title">教练：{{courseInfo.coach.name}}</view>
|
|
<view class="title">人数：{{courseInfo.venue.capacity}}</view>
|
|
<view class="isbtn" @click="addStudent">
|
|
添加学员
|
|
</view>
|
|
<view v-if="courseInfo.status == 'ongoing'" class="tag" style="background-color: #FAD24E;">上课中
|
|
</view>
|
|
<view v-if="courseInfo.status == 'completed'" class="tag" style="background-color: #e2e2e2;">已结束
|
|
</view>
|
|
<view v-if="courseInfo.status == 'pending'" class="tag" style="background-color: #1cd188;">未开始
|
|
</view>
|
|
</view>
|
|
|
|
<view class="section_2">
|
|
<view :class="['table', tableType==1 ? 'select':'']" @click="switchTag(1)">签到情况</view>
|
|
<view :class="['table', tableType==2 ? 'select':'']" @click="switchTag(2)">作业情况</view>
|
|
</view>
|
|
|
|
<!--签到情况-->
|
|
<view class="section_3" v-if="tableType == 1">
|
|
|
|
<view class="tip_title" v-if="courseInfo.student_courses.length == 0">暂无数据</view>
|
|
|
|
<view class="item" v-for="(v,k) in courseInfo.student_courses" :key="k">
|
|
<view class="left">
|
|
<image class="pic" model="aspectFit" :src="$util.img(v.avatar)"></image>
|
|
<view class="box">
|
|
<view class="title">{{v.name}}</view>
|
|
<view class="title">课程截止时间：{{v.end_date}}</view>
|
|
</view>
|
|
</view>
|
|
|
|
<view class="right" v-if="courseInfo.status == 'pending'">
|
|
<view class="tag" @click="written(v.student_id)" v-if="!isWithinOneHourBefore(courseInfo.time_slot)">请假</view>
|
|
</view>
|
|
</view>
|
|
|
|
</view>
|
|
|
|
<!--作业情况-->
|
|
<view class="section_4" v-if="tableType == 2">
|
|
<view class="item_box">
|
|
<!-- 待批改-->
|
|
<fui-collapse-item @change="changeCollapse(1)" open="true" isBorder="false" contentBg="#434544">
|
|
<view class="title_box">
|
|
<text>待批改（{{courseInfo.groupedByStatus1.length}}）</text>
|
|
</view>
|
|
<template v-slot:content>
|
|
<view class="ul">
|
|
<view v-for="(v,k) in courseInfo.groupedByStatus1" :key="k" class="li"
|
|
@click="openViewWorkDetails(v)">
|
|
<view class="left">
|
|
<image class="pic" model="aspectFit"
|
|
:src="$util.img(v.student.customerResources.member.headimg)"></image>
|
|
<view class="box">
|
|
<view class="title">{{v.student.name}}</view>
|
|
<view class="title">
|
|
<view>提交时间</view>
|
|
<view>{{v.created_at}}</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
<!-- <view class="right">
|
|
<view class="btn">查看并批改</view>
|
|
</view> -->
|
|
</view>
|
|
</view>
|
|
</template>
|
|
</fui-collapse-item>
|
|
</view>
|
|
|
|
<!-- 未提交-->
|
|
<view class="item_box">
|
|
<fui-collapse-item @change="changeCollapse(2)" isBorder="false" contentBg="#434544">
|
|
<view class="title_box">
|
|
<text>未提交（{{courseInfo.groupedByStatus2.length}}）</text>
|
|
</view>
|
|
<template v-slot:content>
|
|
<view class="ul">
|
|
<view class="li" v-for="(v,k) in courseInfo.groupedByStatus2" :key="k"
|
|
@click="openViewWorkDetails(v)">
|
|
<view class="left">
|
|
<image class="pic" model="aspectFit"
|
|
:src="$util.img(v.student.customerResources.member.headimg)"></image>
|
|
<view class="box">
|
|
<view class="title">{{v.student.name}}</view>
|
|
<view class="title">
|
|
<view>提交时间</view>
|
|
<!-- <view>{{v.created_at}}</view> -->
|
|
</view>
|
|
</view>
|
|
</view>
|
|
<!-- <view class="right">
|
|
<view class="btn">查看并批改</view>
|
|
</view> -->
|
|
</view>
|
|
</view>
|
|
</template>
|
|
</fui-collapse-item>
|
|
</view>
|
|
|
|
<!-- 已提交-->
|
|
<view class="item_box">
|
|
<fui-collapse-item @change="changeCollapse(3)" isBorder="false" contentBg="#434544">
|
|
<view class="title_box">
|
|
<text>已提交（{{courseInfo.groupedByStatus3.length}}）</text>
|
|
</view>
|
|
<template v-slot:content>
|
|
<view class="ul">
|
|
<view class="li" v-for="(v,k) in courseInfo.groupedByStatus3" :key="k"
|
|
@click="openViewWorkDetails(v)">
|
|
<view class="left">
|
|
<image class="pic" model="aspectFit"
|
|
:src="$util.img(v.student.customerResources.member.headimg)"></image>
|
|
<view class="box">
|
|
<view class="title">{{v.student.name}}</view>
|
|
<view class="title">
|
|
<view>提交时间</view>
|
|
<view>{{v.created_at}}</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
<!-- <view class="right">
|
|
<view class="btn">查看并批改</view>
|
|
</view> -->
|
|
</view>
|
|
</view>
|
|
</template>
|
|
</fui-collapse-item>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
|
|
<fui-picker :options="StudentList" :linkage="true" :show="show" :layer="1" @change="change"
|
|
@cancel="cancel"></fui-picker>
|
|
<fui-actionsheet :show="written_show" :tips="written_tips" :isCancel="isCancel"
|
|
:itemList="itemList" @cancel="written_cancel" @click="written_click"></fui-actionsheet>
|
|
|
|
</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 {
|
|
course_id: '', //课程id
|
|
courseInfo: {
|
|
sign_list: [], //签到列表
|
|
assignments: {
|
|
dpg_list: [], // 待批改作业列表
|
|
wtj_list: [], // 未提交作业列表
|
|
ypg_list: [] // 已批改作业列表
|
|
},
|
|
}, //课时详情
|
|
|
|
tableType: 1, //1=签到情况，2=作业情况
|
|
show: false,
|
|
StudentList: [],
|
|
written_show: false,
|
|
written_tips: '确认请假',
|
|
isCancel: false,
|
|
itemList: ['确认', '取消'],
|
|
qingjia_student_id: 0
|
|
}
|
|
},
|
|
onLoad(options) {
|
|
this.course_id = options.id
|
|
},
|
|
onShow() {
|
|
this.init()
|
|
},
|
|
methods: {
|
|
//初始化
|
|
async init() {
|
|
this.getCourseInfo()
|
|
},
|
|
|
|
//教练端-课程详情
|
|
async getCourseInfo() {
|
|
let res = await apiRoute.courseInfo({
|
|
id: this.course_id
|
|
})
|
|
if (res.code != 1) {
|
|
uni.showToast({
|
|
title: res.msg,
|
|
icon: 'none'
|
|
})
|
|
return
|
|
}
|
|
this.courseInfo = res.data
|
|
console.log('课程详情', this.courseInfo)
|
|
},
|
|
|
|
//切换标签
|
|
switchTag(type) {
|
|
this.tableType = type
|
|
},
|
|
|
|
//打开课时详情页
|
|
openViewCourseInfo(item) {
|
|
uni.navigateTo({
|
|
url: '/pages/coach/course/info'
|
|
})
|
|
},
|
|
|
|
// 作业情况
|
|
changeCollapse(type) {},
|
|
|
|
//跳转页面-作业详情
|
|
openViewWorkDetails(item) {
|
|
let id = item.id
|
|
uni.navigateTo({
|
|
url: `/pages/coach/student/work_details?id=${id}`
|
|
})
|
|
},
|
|
|
|
//获取添加学员列表
|
|
async addStudent() {
|
|
let res = await apiRoute.addStudentList({
|
|
id: this.course_id
|
|
})
|
|
if (res.code != 1) {
|
|
uni.showToast({
|
|
title: res.msg,
|
|
icon: 'none'
|
|
})
|
|
return
|
|
}
|
|
this.StudentList = res.data
|
|
if (this.StudentList.length == 0) {
|
|
uni.showToast({
|
|
title: '暂无可填加的学员',
|
|
icon: 'none'
|
|
})
|
|
return
|
|
} else {
|
|
this.show = true
|
|
}
|
|
},
|
|
async change(e) {
|
|
this.show = false
|
|
let res = await apiRoute.addStudent({
|
|
student_id: e.value,
|
|
schedule_id: this.course_id,
|
|
time_slot: this.courseInfo.time_slot,
|
|
course_date: this.courseInfo.course_date
|
|
})
|
|
if (res.code != 1) {
|
|
uni.showToast({
|
|
title: res.msg,
|
|
icon: 'none'
|
|
})
|
|
return
|
|
}
|
|
this.init()
|
|
|
|
},
|
|
cancel() {
|
|
this.show = false
|
|
},
|
|
//请假
|
|
written(student_id) {
|
|
this.qingjia_student_id = student_id
|
|
this.written_show = true
|
|
},
|
|
written_cancel() {
|
|
this.written_show = false
|
|
},
|
|
async written_click(e) {
|
|
if(e.text == '取消'){
|
|
this.written_show = false
|
|
} else {
|
|
let res = await apiRoute.delStudentCourse({
|
|
student_id: this.qingjia_student_id,
|
|
course_id: this.course_id,
|
|
})
|
|
if (res.data) {
|
|
uni.showToast({
|
|
title: '请假成功',
|
|
icon: 'none'
|
|
})
|
|
this.init()
|
|
} else {
|
|
uni.showToast({
|
|
title: '学员不存在',
|
|
icon: 'none'
|
|
})
|
|
}
|
|
this.written_show = false
|
|
}
|
|
|
|
},
|
|
isWithinOneHourBefore(time_slot) {
|
|
// 取出开始时间
|
|
const [startStr] = time_slot.split('-');
|
|
const [hours, minutes] = startStr.split(':').map(Number);
|
|
|
|
// 设置开始时间
|
|
const startTime = new Date();
|
|
startTime.setHours(hours, minutes, 0, 0);
|
|
|
|
// 设置一小时前的时间点
|
|
const oneHourBeforeStart = new Date(startTime.getTime() - 60 * 60 * 1000);
|
|
|
|
// 当前时间
|
|
const now = new Date();
|
|
|
|
// 判断当前时间是否在 [一小时前, 开始时间) 之间
|
|
return now >= oneHourBeforeStart && now < startTime;
|
|
}
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style lang="less" scoped>
|
|
.main_box {
|
|
background: #292929;
|
|
}
|
|
|
|
//自定义导航栏
|
|
.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;
|
|
}
|
|
}
|
|
|
|
.main_section {
|
|
min-height: 100vh;
|
|
background: #292929 100%;
|
|
padding: 30rpx 24rpx;
|
|
padding-top: 40rpx;
|
|
padding-bottom: 150rpx;
|
|
font-size: 24rpx;
|
|
color: #FFFFFF;
|
|
|
|
.section_1 {
|
|
position: relative;
|
|
padding: 18rpx 34rpx 50rpx;
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 15rpx;
|
|
color: #fff;
|
|
font-size: 24rpx;
|
|
background-color: #434544;
|
|
border-radius: 22rpx;
|
|
|
|
.tag {
|
|
position: absolute;
|
|
top: 0;
|
|
right: 0;
|
|
|
|
width: 110rpx;
|
|
height: 60rpx;
|
|
line-height: 55rpx;
|
|
border-radius: 0rpx 24rpx 0rpx 24rpx;
|
|
color: #fff;
|
|
font-size: 24rpx;
|
|
text-align: center;
|
|
}
|
|
}
|
|
|
|
.section_2 {
|
|
margin-top: 44rpx;
|
|
color: #fff;
|
|
font-size: 30rpx;
|
|
|
|
display: flex;
|
|
justify-content: center;
|
|
align-items: center;
|
|
|
|
.table {
|
|
width: 50%;
|
|
height: 64rpx;
|
|
background-color: #1684FCFF;
|
|
|
|
line-height: 62rpx;
|
|
text-align: center;
|
|
}
|
|
|
|
.table:nth-child(1) {
|
|
border-top-left-radius: 8rpx;
|
|
border-bottom-left-radius: 8rpx;
|
|
}
|
|
|
|
.table:nth-child(2) {
|
|
border-top-right-radius: 8rpx;
|
|
border-bottom-right-radius: 8rpx;
|
|
}
|
|
|
|
.select {
|
|
background-color: #fff;
|
|
color: #1684FCFF;
|
|
}
|
|
}
|
|
|
|
.section_3 {
|
|
margin-top: 44rpx;
|
|
min-height: 20vh;
|
|
padding: 30rpx 0;
|
|
border-radius: 22rpx;
|
|
background-color: #434544;
|
|
display: flex;
|
|
flex-direction: column;
|
|
|
|
//提示
|
|
.tip_title {
|
|
text-align: center;
|
|
font-size: 30rpx;
|
|
color: #FFFFFF;
|
|
}
|
|
|
|
.item {
|
|
border-top: 1px solid #D7D7D7;
|
|
padding: 20rpx 33rpx 20rpx 14rpx;
|
|
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
|
|
.left {
|
|
width: 80%;
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 26rpx;
|
|
|
|
.pic {
|
|
width: 92rpx;
|
|
height: 92rpx;
|
|
border-radius: 50%;
|
|
background-color: #797979FF;
|
|
}
|
|
|
|
.box {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 10rpx;
|
|
|
|
.title {
|
|
color: #fff;
|
|
font-size: 24rpx;
|
|
}
|
|
}
|
|
}
|
|
|
|
.right {
|
|
.tag {
|
|
width: 93rpx;
|
|
height: 93rpx;
|
|
border-radius: 50%;
|
|
line-height: 90rpx;
|
|
font-size: 26rpx;
|
|
background-color: rgba(254, 250, 131, 0.62);
|
|
color: rgba(255, 255, 255, 1);
|
|
text-align: center;
|
|
border: 0rpx solid rgba(254, 250, 131, 0.62);
|
|
//旋转45°
|
|
transform: rotate(-30deg);
|
|
}
|
|
}
|
|
}
|
|
|
|
.item:nth-child(1) {
|
|
border-top: 0px;
|
|
}
|
|
}
|
|
|
|
.section_4 {
|
|
margin-top: 44rpx;
|
|
padding: 30rpx 0;
|
|
border-radius: 22rpx;
|
|
background-color: #434544;
|
|
display: flex;
|
|
flex-direction: column;
|
|
|
|
.item_box {
|
|
margin-bottom: 30rpx;
|
|
padding-left: 24rpx;
|
|
padding-right: 32rpx;
|
|
|
|
|
|
font-size: 28rpx;
|
|
color: #fff;
|
|
background-color: #434544;
|
|
|
|
::v-deep .fui-collapse-item__title {
|
|
background-color: #434544 !important;
|
|
}
|
|
|
|
::v-deep .fui-collapse__border-color {
|
|
border-top: none !important;
|
|
/* 取消上边框 */
|
|
background: #434544 !important;
|
|
}
|
|
|
|
.title_box {}
|
|
|
|
.ul {
|
|
background-color: #434544;
|
|
|
|
.li {
|
|
background-color: #434544;
|
|
border-top: 1px solid #D7D7D7;
|
|
padding: 20rpx 33rpx 20rpx 14rpx;
|
|
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
|
|
.left {
|
|
width: 80%;
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 26rpx;
|
|
|
|
.pic {
|
|
width: 92rpx;
|
|
height: 92rpx;
|
|
border-radius: 50%;
|
|
background-color: #797979FF;
|
|
}
|
|
|
|
.box {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 10rpx;
|
|
|
|
.title {
|
|
color: #fff;
|
|
font-size: 24rpx;
|
|
}
|
|
}
|
|
}
|
|
|
|
.right {
|
|
.btn {
|
|
background-color: #a4adb3;
|
|
color: #fff;
|
|
|
|
width: 160rpx;
|
|
height: 60rpx;
|
|
line-height: 60rpx;
|
|
border-radius: 8rpx;
|
|
background-color: rgba(164, 173, 179, 1);
|
|
color: rgba(255, 255, 255, 1);
|
|
font-size: 24rpx;
|
|
text-align: center;
|
|
}
|
|
}
|
|
}
|
|
|
|
.li:nth-child(1) {
|
|
border-top: none !important;
|
|
/* 取消上边框 */
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
.isbtn {
|
|
border: 1px solid #FAD04D;
|
|
border-radius: 10rpx;
|
|
background: #434544;
|
|
color: #FAD04D;
|
|
width: 110rpx;
|
|
height: 60rpx;
|
|
line-height: 55rpx;
|
|
text-align: center;
|
|
font-size: 24rpx;
|
|
position: absolute;
|
|
bottom: 20rpx;
|
|
right: 15rpx;
|
|
}
|
|
</style>
|