ygoa_miniapp/pages/mine/train/trainDetail.vue

<template>
	<view class="container">
		<scroll-view scroll-y class="content">
			<!-- 培训信息 -->
			<view class="info-card" v-if="trainDetail">
				<view class="card-title">培训信息</view>
				<view class="info-item">
					<text class="label">培训主题：</text>
					<text class="value">{{ trainDetail.train_name || '-' }}</text>
				</view>
				<view class="info-item">
					<text class="label">负责人：</text>
					<text class="value">{{ trainDetail.responsible_people || '-' }}</text>
				</view>
				<view class="info-item">
					<text class="label">学员姓名：</text>
					<text class="value">{{ trainDetail.user_name || trainDetail.trainees_name || '-' }}</text>
				</view>
				<view class="info-item">
					<text class="label">课程类别：</text>
					<text class="value">{{ trainDetail.class_name || '-' }}</text>
				</view>
				<view class="info-item">
					<text class="label">课程名称：</text>
					<text class="value">{{ trainDetail.course_name || '-' }}</text>
				</view>
				<view class="info-item">
					<text class="label">讲师：</text>
					<text class="value">{{ trainDetail.teacher_name || '-' }}</text>
				</view>
				<view class="info-item">
					<text class="label">培训地点：</text>
					<text class="value">{{ trainDetail.location_name || '-' }}</text>
				</view>
				<view class="info-item">
					<text class="label">开始时间：</text>
					<text class="value">{{ formatDateTime(trainDetail.imple_start_time) }}</text>
				</view>
				<view class="info-item">
					<text class="label">结束时间：</text>
					<text class="value">{{ formatDateTime(trainDetail.imple_end_time) }}</text>
				</view>
			</view>

			<!-- 评估信息 -->
			<view class="info-card" v-if="trainDetail">
				<view class="card-title">我的评估</view>
				
				<view class="info-item">
					<text class="label">项目组织：</text>
					<text class="value stars">{{ renderStars(trainDetail.project_org) }}</text>
				</view>
				<view class="info-item">
					<text class="label">课程评分：</text>
					<text class="value stars">{{ renderStars(trainDetail.course_score) }}</text>
				</view>
				<view class="info-item">
					<text class="label">讲师评分：</text>
					<text class="value stars">{{ renderStars(trainDetail.teacher_score) }}</text>
				</view>
				<view class="info-item" v-if="trainDetail.advice">
					<text class="label">意见建议：</text>
					<text class="value advice">{{ trainDetail.advice }}</text>
				</view>
				<view class="info-item" v-else>
					<text class="label">意见建议：</text>
					<text class="value empty-text">暂无</text>
				</view>
			</view>

			<!-- 课程附件 -->
			<uni-card v-if="trainDetail && fileList && fileList.length > 0">
				<uni-section titleFontSize="1.3rem" title="课程附件" type="line"></uni-section>
				<attachment-list :attachments="fileList" :canEdit="false"></attachment-list>
			</uni-card>

			<view v-if="loading" class="loading">加载中...</view>
			<view v-else-if="!trainDetail" class="empty">
				<text>暂无数据</text>
			</view>
		</scroll-view>

		<!-- 底部按钮 -->
<!--		<view class="footer" v-if="trainDetail">
			<button class="btn btn-assess" @click="goToAssess">去评估</button>
		</view>-->
	</view>
</template>

<script setup>
import { ref } from 'vue';
import { onLoad } from '@dcloudio/uni-app';
import { getMyTrainDetail } from '@/api/train.js';
import AttachmentList from '@/components/ygoa/attachmentList.vue';

const trainDetail = ref(null);
const fileList = ref([]);
const loading = ref(false);

// 页面参数
const universalid = ref('');
const impleId = ref('');
const courseId = ref('');
const traineesId = ref('');
const assessId = ref('');

onLoad((options) => {
	universalid.value = options.universalid || '';
	impleId.value = options.imple_id || '';
	courseId.value = options.course_id || '';
	traineesId.value = options.trainees_id || '';
	assessId.value = options.assess_id || '';
	
	loadTrainDetail();
});

// 渲染星星评分
function renderStars(score) {
	if (!score || score === 0) {
		return '☆ ☆ ☆ ☆ ☆';
	}
	const filledStars = '★ '.repeat(parseInt(score));
	const emptyStars = '☆ '.repeat(5 - parseInt(score));
	return filledStars + emptyStars;
}

// 格式化日期时间
function formatDateTime(dateStr) {
	if (!dateStr) return '-';
	// 如果是字符串格式,直接返回
	if (typeof dateStr === 'string') {
		return dateStr;
	}
	// 如果是时间戳或 Date 对象,进行格式化
	const date = new Date(dateStr);
	const year = date.getFullYear();
	const month = String(date.getMonth() + 1).padStart(2, '0');
	const day = String(date.getDate()).padStart(2, '0');
	const hours = String(date.getHours()).padStart(2, '0');
	const minutes = String(date.getMinutes()).padStart(2, '0');
	return `${year}-${month}-${day} ${hours}:${minutes}`;
}

// 加载培训详情
async function loadTrainDetail() {
	loading.value = true;
	try {
		const res = await getMyTrainDetail({
			universalid: universalid.value,
			imple_id: impleId.value,
			course_id: courseId.value,
			trainees_id: traineesId.value,
			assess_id: assessId.value
		});
		
		if (res && res.returnCode === '0' && res.returnParams) {
			trainDetail.value = res.returnParams;
			// 处理附件列表
			if (res.returnParams.files && Array.isArray(res.returnParams.files)) {
				fileList.value = res.returnParams.files;
			}
		} else {
			uni.showToast({
				title: '加载失败',
				icon: 'none'
			});
		}
	} catch (error) {
		uni.showToast({
			title: '加载失败',
			icon: 'none'
		});
		console.error('加载培训详情失败:', error);
	} finally {
		loading.value = false;
	}
}

// 去评估
function goToAssess() {
	uni.navigateTo({
		url: `/pages/mine/train/trainAssess?universalid=${universalid.value}&imple_id=${impleId.value}&course_id=${courseId.value}&trainees_id=${traineesId.value}`
	});
}
</script>

<style lang="scss" scoped>
.container {
	min-height: 100vh;
	background-color: #f5f5f5;
	display: flex;
	flex-direction: column;
}

.content {
	flex: 1;
	padding: 20rpx;
}

.info-card {
	background: #fff;
	border-radius: 12rpx;
	padding: 30rpx;
	margin-bottom: 20rpx;
	
	.card-title {
		font-size: 32rpx;
		font-weight: 600;
		color: #333;
		margin-bottom: 24rpx;
		padding-bottom: 16rpx;
		border-bottom: 1rpx solid #f0f0f0;
	}
}

.info-item {
	display: flex;
	align-items: flex-start;
	font-size: 28rpx;
	line-height: 1.8;
	margin-bottom: 16rpx;
	
	.label {
		color: #999;
		min-width: 160rpx;
		flex-shrink: 0;
	}
	
	.value {
		color: #333;
		flex: 1;
		
		&.stars {
			color: #FF9912;
			font-size: 26rpx;
		}
		
		&.advice {
			line-height: 1.6;
		}
		
		&.empty-text {
			color: #ccc;
		}
	}
}

.loading, .empty {
	text-align: center;
	padding: 80rpx 0;
	color: #999;
	font-size: 28rpx;
}

.footer {
	padding: 20rpx 30rpx;
	background: #fff;
	border-top: 1rpx solid #eee;
	
	.btn {
		width: 100%;
		height: 80rpx;
		line-height: 80rpx;
		font-size: 30rpx;
		border-radius: 8rpx;
		padding: 0;
		margin: 0;
		background: #fa8c16;
		color: #fff;
		
		&::after {
			border: none;
		}
	}
}
</style>