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.
355 lines
8.1 KiB
355 lines
8.1 KiB
<template>
|
|
<fui-modal
|
|
:show="visible"
|
|
title="课程安排详情"
|
|
width="700"
|
|
@cancel="closePopup"
|
|
:buttons="[]"
|
|
>
|
|
<view class="schedule-detail" v-if="scheduleInfo">
|
|
<!-- 课程基本信息 -->
|
|
<view class="section basic-info">
|
|
<view class="section-title">基本信息</view>
|
|
<view class="info-item">
|
|
<text class="item-label">课程名称：</text>
|
|
<text class="item-value">{{ scheduleInfo.course_name }}</text>
|
|
</view>
|
|
<view class="info-item">
|
|
<text class="item-label">上课时间：</text>
|
|
<text class="item-value">{{ scheduleInfo.course_date }} {{ scheduleInfo.time_slot }}</text>
|
|
</view>
|
|
<view class="info-item">
|
|
<text class="item-label">上课地点：</text>
|
|
<text class="item-value">{{ scheduleInfo.venue_name }}</text>
|
|
</view>
|
|
<view class="info-item">
|
|
<text class="item-label">授课教练：</text>
|
|
<text class="item-value">{{ scheduleInfo.coach_name }}</text>
|
|
</view>
|
|
<view class="info-item">
|
|
<text class="item-label">课程状态：</text>
|
|
<text class="item-value" :class="getStatusClass(scheduleInfo.status)">{{ scheduleInfo.status_text }}</text>
|
|
</view>
|
|
<view class="info-item">
|
|
<text class="item-label">班级：</text>
|
|
<text class="item-value">{{ scheduleInfo.class_info ? scheduleInfo.class_info.class_name : '无班级' }}</text>
|
|
</view>
|
|
</view>
|
|
|
|
<!-- 学员信息 -->
|
|
<view class="section students-info">
|
|
<view class="section-title">学员信息 ({{ scheduleInfo.students ? scheduleInfo.students.length : 0 }}人)</view>
|
|
<view class="student-list" v-if="scheduleInfo.students && scheduleInfo.students.length > 0">
|
|
<view class="student-item" v-for="(student, index) in scheduleInfo.students" :key="index">
|
|
<view class="student-avatar">
|
|
<image :src="student.avatar || '/static/icon-img/avatar.png'" mode="aspectFill"></image>
|
|
</view>
|
|
<view class="student-detail">
|
|
<text class="student-name">{{ student.name }}</text>
|
|
<text class="student-status" :class="getStudentStatusClass(student.status)">{{ student.status_text }}</text>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
<view class="empty-list" v-else>
|
|
<text>暂无学员参与此课程</text>
|
|
</view>
|
|
</view>
|
|
|
|
<!-- 操作按钮 -->
|
|
<view class="action-buttons">
|
|
<fui-button type="primary" @click="handleSignIn" :disabled="scheduleInfo.status === 'completed'">课程点名</fui-button>
|
|
<fui-button type="default" @click="handleAdjustClass" :disabled="scheduleInfo.status === 'completed'">调整课程</fui-button>
|
|
</view>
|
|
|
|
<!-- 关闭按钮 -->
|
|
<view class="close-btn" @click="closePopup">
|
|
<fui-icon name="close" :size="40" color="#999"></fui-icon>
|
|
</view>
|
|
</view>
|
|
|
|
<view class="loading" v-if="loading && !scheduleInfo">
|
|
<fui-loading></fui-loading>
|
|
<text class="loading-text">加载中...</text>
|
|
</view>
|
|
|
|
<view class="error-message" v-if="error && !scheduleInfo">
|
|
<text>{{ errorMessage }}</text>
|
|
<view class="retry-btn" @click="fetchScheduleDetail">
|
|
<text>重试</text>
|
|
</view>
|
|
</view>
|
|
</fui-modal>
|
|
</view>
|
|
</template>
|
|
|
|
<script>
|
|
import api from '@/api/apiRoute.js';
|
|
|
|
export default {
|
|
name: 'ScheduleDetail',
|
|
props: {
|
|
visible: {
|
|
type: Boolean,
|
|
default: false
|
|
},
|
|
scheduleId: {
|
|
type: [String, Number],
|
|
default: null
|
|
}
|
|
},
|
|
data() {
|
|
return {
|
|
loading: false,
|
|
error: false,
|
|
errorMessage: '加载失败，请重试',
|
|
scheduleInfo: null
|
|
}
|
|
},
|
|
watch: {
|
|
visible(newVal) {
|
|
if (newVal && this.scheduleId) {
|
|
this.fetchScheduleDetail();
|
|
}
|
|
},
|
|
scheduleId(newVal) {
|
|
if (newVal && this.visible) {
|
|
this.fetchScheduleDetail();
|
|
}
|
|
}
|
|
},
|
|
methods: {
|
|
// 获取课程安排详情
|
|
async fetchScheduleDetail() {
|
|
if (!this.scheduleId) {
|
|
this.error = true;
|
|
this.errorMessage = '课程ID不能为空';
|
|
return;
|
|
}
|
|
|
|
this.loading = true;
|
|
this.error = false;
|
|
|
|
try {
|
|
const res = await api.getCourseScheduleInfo({ schedule_id: this.scheduleId });
|
|
if (res.code === 1) {
|
|
this.scheduleInfo = res.data;
|
|
} else {
|
|
uni.showToast({
|
|
title: res.msg || '获取课程安排详情失败',
|
|
icon: 'none'
|
|
});
|
|
this.error = true;
|
|
this.errorMessage = res.msg || '获取课程安排详情失败';
|
|
}
|
|
} catch (error) {
|
|
console.error('获取课程安排详情失败:', error);
|
|
this.error = true;
|
|
this.errorMessage = error.message || '获取课程安排详情失败，请重试';
|
|
} finally {
|
|
this.loading = false;
|
|
}
|
|
},
|
|
|
|
// 关闭弹窗
|
|
closePopup() {
|
|
this.$emit('update:visible', false);
|
|
},
|
|
|
|
// 点名操作
|
|
handleSignIn() {
|
|
this.$emit('sign-in', {
|
|
scheduleId: this.scheduleId,
|
|
scheduleName: this.scheduleInfo?.course_name
|
|
});
|
|
this.closePopup();
|
|
},
|
|
|
|
// 调课操作
|
|
handleAdjustClass() {
|
|
this.$emit('adjust-class', {
|
|
scheduleId: this.scheduleId,
|
|
scheduleName: this.scheduleInfo?.course_name
|
|
});
|
|
this.closePopup();
|
|
},
|
|
|
|
// 获取状态样式类
|
|
getStatusClass(status) {
|
|
const statusMap = {
|
|
'pending': 'status-pending',
|
|
'upcoming': 'status-upcoming',
|
|
'ongoing': 'status-ongoing',
|
|
'completed': 'status-completed'
|
|
};
|
|
return statusMap[status] || '';
|
|
},
|
|
|
|
// 获取学员状态样式类
|
|
getStudentStatusClass(status) {
|
|
const statusMap = {
|
|
0: 'status-pending', // 待上课
|
|
1: 'status-completed', // 已上课
|
|
2: 'status-leave' // 请假
|
|
};
|
|
return statusMap[status] || '';
|
|
}
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style lang="scss" scoped>
|
|
.schedule-detail {
|
|
padding: 20rpx;
|
|
max-height: 80vh;
|
|
overflow-y: auto;
|
|
position: relative;
|
|
}
|
|
|
|
.section {
|
|
margin-bottom: 30rpx;
|
|
background-color: #2a2a2a;
|
|
border-radius: 12rpx;
|
|
padding: 20rpx;
|
|
}
|
|
|
|
.section-title {
|
|
font-size: 30rpx;
|
|
font-weight: bold;
|
|
color: #29d3b4;
|
|
margin-bottom: 20rpx;
|
|
border-bottom: 1px solid #3a3a3a;
|
|
padding-bottom: 10rpx;
|
|
}
|
|
|
|
.info-item {
|
|
display: flex;
|
|
margin-bottom: 16rpx;
|
|
font-size: 28rpx;
|
|
}
|
|
|
|
.item-label {
|
|
color: #999;
|
|
width: 160rpx;
|
|
flex-shrink: 0;
|
|
}
|
|
|
|
.item-value {
|
|
color: #fff;
|
|
flex: 1;
|
|
}
|
|
|
|
.student-list {
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
gap: 20rpx;
|
|
}
|
|
|
|
.student-item {
|
|
display: flex;
|
|
align-items: center;
|
|
background-color: #3a3a3a;
|
|
border-radius: 8rpx;
|
|
padding: 15rpx;
|
|
width: calc(50% - 10rpx);
|
|
}
|
|
|
|
.student-avatar {
|
|
width: 80rpx;
|
|
height: 80rpx;
|
|
border-radius: 40rpx;
|
|
overflow: hidden;
|
|
margin-right: 15rpx;
|
|
|
|
image {
|
|
width: 100%;
|
|
height: 100%;
|
|
}
|
|
}
|
|
|
|
.student-detail {
|
|
flex: 1;
|
|
display: flex;
|
|
flex-direction: column;
|
|
}
|
|
|
|
.student-name {
|
|
font-size: 28rpx;
|
|
color: #fff;
|
|
margin-bottom: 8rpx;
|
|
}
|
|
|
|
.student-status {
|
|
font-size: 24rpx;
|
|
}
|
|
|
|
.status-pending {
|
|
color: #ff9500;
|
|
}
|
|
|
|
.status-upcoming {
|
|
color: #29d3b4;
|
|
}
|
|
|
|
.status-ongoing {
|
|
color: #007aff;
|
|
}
|
|
|
|
.status-completed {
|
|
color: #8e8e93;
|
|
}
|
|
|
|
.status-leave {
|
|
color: #ff3b30;
|
|
}
|
|
|
|
.action-buttons {
|
|
display: flex;
|
|
justify-content: space-around;
|
|
margin-top: 30rpx;
|
|
gap: 30rpx;
|
|
}
|
|
|
|
.close-btn {
|
|
position: absolute;
|
|
top: 20rpx;
|
|
right: 20rpx;
|
|
z-index: 10;
|
|
padding: 10rpx;
|
|
}
|
|
|
|
.loading, .error-message {
|
|
height: 300rpx;
|
|
display: flex;
|
|
flex-direction: column;
|
|
justify-content: center;
|
|
align-items: center;
|
|
}
|
|
|
|
.loading-text {
|
|
margin-top: 20rpx;
|
|
font-size: 28rpx;
|
|
color: #ccc;
|
|
}
|
|
|
|
.error-message {
|
|
color: #ff6b6b;
|
|
font-size: 28rpx;
|
|
text-align: center;
|
|
}
|
|
|
|
.retry-btn {
|
|
margin-top: 30rpx;
|
|
padding: 12rpx 30rpx;
|
|
background-color: #29d3b4;
|
|
border-radius: 8rpx;
|
|
color: #fff;
|
|
font-size: 24rpx;
|
|
}
|
|
|
|
.empty-list {
|
|
padding: 40rpx 0;
|
|
text-align: center;
|
|
color: #999;
|
|
font-size: 28rpx;
|
|
}
|
|
</style>
|