ZhiHuiJiaoWu_UniApp/pages/market/clue/class_arrangement_detail.vue

<template>
	<view class="detail-root">
		<view class="header">
			<view class="title">课程安排详情</view>
			<view class="date">日期：{{ course_info.course_date }} {{course_info.time_slot}}</view>
		</view>
		<view class="section">
			<view class="section-title">学员列表</view>
			<view class="student-list">
				<view v-for="(stu, idx) in students" :key="idx" class="student-item">
					<view class="avatar">{{ stu.name.charAt(0) }}</view>
					<view class="info">
						<view class="name">{{ stu.name }}</view>
						<view class="desc">{{ getStatusText(stu.status)}}</view>
					</view>
				</view>
				<view v-for="n in course_info.available_capacity" :key="n" class="student-item empty" @tap="addStudent" :data-index="n">
					<view class="avatar empty-avatar">+</view>
					<view class="info">
						<view class="name">空位</view>
						<view class="desc">点击添加学员</view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import apiRoute from '@/api/apiRoute.js';
	export default {
		data() {
			return {
				course_id:'',
				course_info:[],
				date: '',
				students: [
					// {
					// 	name: '张三',
					// 	desc: '已签到'
					// },
					// {
					// 	name: '李四',
					// 	desc: '未签到'
					// },
				],
				resource_id:''
			};
		},
		onLoad(query) {
			this.course_id = query.id || '';
			this.resource_id = query.resource_id
			this.courseInfo();
		},
		methods: {
			getStatusText(status) {
				const statusMap = {
					0: '待上课',
					1: '已上课',
					2: '请假'
				};
				return statusMap[status] || status;
			},
			async scheduleList() {
				try {
					let res = await apiRoute.scheduleList({
						'schedule_id': this.course_id
					})
					
					console.log(res);
					this.students = res.data
				} catch (error) {
					console.error('获取信息失败:', error);
				}
			},
			async courseInfo() {
				try {
					let res = await apiRoute.courseInfo({
						'id': this.course_id
					})
					this.course_info = res.data
					
					this.scheduleList();
				} catch (error) {
					console.error('获取信息失败:', error);
				}
			},
			async addStudent(e) {
				const data = {
					'resources_id':this.resource_id,
					'person_type':'customer_resource',
					'schedule_id':this.course_id,
					'course_date':this.course_info.course_date,
					'time_slot':this.course_info.time_slot
				};
				
				
				try {
					let res = await apiRoute.addSchedule(data)
					if(res.code == 1){
						uni.showToast({
							title: '添加成功',
							icon: 'none'
						});
						this.courseInfo();
					}else{
						uni.showToast({
							title: res.msg,
							icon: 'none'
						});
					}
					
				} catch (error) {
					uni.showToast({
						title: '添加失败',
						icon: 'none'
					});
				}
				// const n = e.currentTarget.dataset.index;
				// uni.showToast({
				// 	title: '添加学员功能待实现，空位号：' + n,
				// 	icon: 'none'
				// });
			},
		},
	};
</script>

<style lang="less" scoped>
	.detail-root {
		background: #232323;
		min-height: 100vh;
		padding-bottom: 30rpx;
	}

	.header {
		padding: 40rpx 30rpx 20rpx 30rpx;

		.title {
			color: #fff;
			font-size: 36rpx;
			font-weight: bold;
		}

		.date {
			color: #29d3b4;
			font-size: 26rpx;
			margin-top: 10rpx;
		}
	}

	.section {
		margin: 30rpx;
		background: #434544;
		border-radius: 16rpx;
		padding: 30rpx 20rpx;
	}

	.section-title {
		color: #ffd86b;
		font-size: 28rpx;
		margin-bottom: 20rpx;
	}

	.student-list {
		display: flex;
		flex-wrap: wrap;
		gap: 20rpx;
	}

	.student-item {
		background: #333;
		border-radius: 12rpx;
		display: flex;
		align-items: center;
		padding: 18rpx 24rpx;
		min-width: 260rpx;

		.avatar {
			width: 60rpx;
			height: 60rpx;
			border-radius: 50%;
			background: #29d3b4;
			color: #fff;
			display: flex;
			align-items: center;
			justify-content: center;
			font-size: 32rpx;
			margin-right: 18rpx;
		}

		.info {
			.name {
				color: #fff;
				font-size: 28rpx;
			}

			.desc {
				color: #bdbdbd;
				font-size: 22rpx;
				margin-top: 4rpx;
			}
		}

		&.empty {
			border: 2rpx dashed #ffd86b;
			background: #232323;

			.avatar.empty-avatar {
				background: #ffd86b;
				color: #232323;
				font-size: 36rpx;
			}

			.info .name {
				color: #ffd86b;
			}

			.info .desc {
				color: #ffd86b;
			}
		}
	}
</style>