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.
436 lines
11 KiB
436 lines
11 KiB
<!--课程-详情列表-->
|
|
<template>
|
|
<view class="main_box">
|
|
<view class="main_section">
|
|
<view class="section_1">
|
|
<view class="title">班级：{{courseInfo.classes_name}}</view>
|
|
<view class="title">时间：{{courseInfo.date_time}} {{courseInfo.time_slot.replace(',', ' - ')}}</view>
|
|
<view class="title">地点：{{courseInfo.address}}</view>
|
|
<view class="title">课程：{{courseInfo.courses_name}}</view>
|
|
<view class="title">教练：{{courseInfo.staff_name}}</view>
|
|
<view class="title">人数：{{courseInfo.students_count}}</view>
|
|
|
|
<view
|
|
v-if="courseInfo.status == 1"
|
|
class="tag"
|
|
style="background-color: #FAD24E;">上课中
|
|
</view>
|
|
<view
|
|
v-if="courseInfo.status == 2"
|
|
class="tag"
|
|
style="background-color: #e2e2e2;">已结束
|
|
</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="item" v-for="(v,k) in courseInfo.sign_list" :key="k">
|
|
<view class="left">
|
|
<image class="pic" model="aspectFit" :src="$util.img(v.header)"></image>
|
|
<view class="box">
|
|
<view class="title">{{v.name}}</view>
|
|
<view class="title">课程截止时间：{{v.create_time}}</view>
|
|
</view>
|
|
</view>
|
|
|
|
<view class="right">
|
|
<view class="tag" v-if="v.status == 2">请假</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.assignments.dpg_list.length}}）</text>
|
|
</view>
|
|
<template v-slot:content>
|
|
<view class="ul">
|
|
<view
|
|
v-for="(v,k) in courseInfo.assignments.dpg_list"
|
|
:key="k"
|
|
class="li"
|
|
@click="openViewCourseInfo(v)"
|
|
>
|
|
<view class="left">
|
|
<image class="pic" model="aspectFit" :src="$util.img(v.header)"></image>
|
|
<view class="box">
|
|
<view class="title">{{v.name}}</view>
|
|
<view class="title">课程截止时间：{{v.tj_time}}</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.assignments.wtj_list.length}}）</text>
|
|
</view>
|
|
<template v-slot:content>
|
|
<view class="ul">
|
|
<view
|
|
class="li"
|
|
v-for="(v,k) in courseInfo.assignments.wtj_list"
|
|
:key="k">
|
|
<view class="left">
|
|
<image class="pic" model="aspectFit" :src="$util.img(v.header)"></image>
|
|
<view class="box">
|
|
<view class="title">{{v.name}}</view>
|
|
<!-- <view class="title">课程截止时间：2025-05-25</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.assignments.ypg_list.length}}）</text>
|
|
</view>
|
|
<template v-slot:content>
|
|
<view class="ul">
|
|
<view
|
|
class="li"
|
|
v-for="(v,k) in courseInfo.assignments.ypg_list"
|
|
:key="k"
|
|
@click="openViewCourseInfo({v})">
|
|
<view class="left">
|
|
<image class="pic" model="aspectFit" :src="$util.img(v.header)"></image>
|
|
<view class="box">
|
|
<view class="title">{{v.name}}</view>
|
|
<!-- <view class="title">课程截止时间：2025-05-25</view>-->
|
|
</view>
|
|
</view>
|
|
<view class="right">
|
|
<!-- <view class="btn">查看并批改</view>-->
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</template>
|
|
</fui-collapse-item>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</template>
|
|
|
|
<script>
|
|
import memberApi from '@/api/member.js';
|
|
import AQTabber from "@/components/AQ/AQTabber.vue"
|
|
|
|
|
|
export default {
|
|
components: {
|
|
AQTabber,
|
|
},
|
|
data() {
|
|
return {
|
|
course_id: '',//课程id
|
|
courseInfo: {
|
|
sign_list: [],//签到列表
|
|
assignments: {
|
|
dpg_list: [], // 待批改作业列表
|
|
wtj_list: [], // 未提交作业列表
|
|
ypg_list: [] // 已批改作业列表
|
|
},
|
|
},//课时详情
|
|
|
|
tableType: 1,//1=签到情况，2=作业情况
|
|
}
|
|
},
|
|
onLoad(options) {
|
|
this.course_id = options.id
|
|
},
|
|
onShow(){
|
|
this.init()
|
|
},
|
|
methods: {
|
|
//初始化
|
|
async init(){
|
|
this.getCourseInfo()
|
|
},
|
|
|
|
//教练端-课程详情
|
|
async getCourseInfo(){
|
|
let res = await memberApi.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){
|
|
|
|
},
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style lang="less" scoped>
|
|
|
|
.main_box{
|
|
background: #292929 ;
|
|
}
|
|
|
|
//自定义导航栏
|
|
.navbar_section{
|
|
display: flex;
|
|
justify-content: center;
|
|
align-items: center;
|
|
background: #292929;
|
|
.title{
|
|
padding: 20rpx 0;
|
|
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;
|
|
padding: 30rpx 0;
|
|
border-radius: 22rpx;
|
|
background-color: #434544;
|
|
display: flex;
|
|
flex-direction: column;
|
|
.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; /* 取消上边框 */
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
|
|
</style>
|