ygoa_miniapp/pages/mine/train/trainAssess.vue

<template>
	<view class="container">
		<scroll-view scroll-y class="content">
			<!-- 培训信息 -->
			<view class="info-card">
				<view class="card-title">培训信息</view>
				<view class="info-item">
					<text class="label">培训主题：</text>
					<text class="value">{{ trainName }}</text>
				</view>
				<view class="info-item">
					<text class="label">课程名称：</text>
					<text class="value">{{ courseName }}</text>
				</view>
			</view>

			<!-- 评估表单 -->
			<view class="form-card">
				<view class="card-title">培训评估</view>
				
				<!-- 项目组织评分 -->
				<view class="form-item">
					<view class="form-label">
						<text class="required">*</text>
						项目组织评分：
					</view>
					<view class="star-rating">
						<view 
							v-for="n in 5" 
							:key="'project_' + n"
							class="star"
							:class="{ active: formData.project_org >= n }"
							@click="selectRating('project_org', n)"
						>
							{{ formData.project_org >= n ? '★' : '☆' }}
						</view>
					</view>
				</view>

				<!-- 课程评分 -->
				<view class="form-item">
					<view class="form-label">
						<text class="required">*</text>
						课程评分：
					</view>
					<view class="star-rating">
						<view 
							v-for="n in 5" 
							:key="'course_' + n"
							class="star"
							:class="{ active: formData.course_score >= n }"
							@click="selectRating('course_score', n)"
						>
							{{ formData.course_score >= n ? '★' : '☆' }}
						</view>
					</view>
				</view>

				<!-- 讲师评分 -->
				<view class="form-item">
					<view class="form-label">
						<text class="required">*</text>
						讲师评分：
					</view>
					<view class="star-rating">
						<view 
							v-for="n in 5" 
							:key="'teacher_' + n"
							class="star"
							:class="{ active: formData.teacher_score >= n }"
							@click="selectRating('teacher_score', n)"
						>
							{{ formData.teacher_score >= n ? '★' : '☆' }}
						</view>
					</view>
				</view>

				<!-- 意见建议 -->
				<view class="form-item">
					<view class="form-label">意见建议：</view>
					<textarea 
						class="textarea" 
						v-model="formData.advice"
						placeholder="请输入您的意见和建议（选填）"
						maxlength="500"
					></textarea>
				</view>
			</view>
		</scroll-view>

		<!-- 底部按钮 -->
		<view class="footer">
			<button class="btn btn-cancel" @click="goBack">取消</button>
			<button class="btn btn-submit" @click="submitAssess">提交</button>
		</view>
	</view>
</template>

<script setup>
import { ref, reactive } from 'vue';
import { onLoad } from '@dcloudio/uni-app';
import { getMyTrainDetail, submitTrainAssess } from '@/api/train.js';
import { useUserStore } from '@/store/user.js';

const userStore = useUserStore();

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

// 表单数据
const formData = reactive({
	project_org: 0,
	course_score: 0,
	teacher_score: 0,
	advice: ''
});

onLoad((options) => {
	universalid.value = options.universalid || '';
	impleId.value = options.imple_id || '';
	courseId.value = options.course_id || '';
	traineesId.value = options.trainees_id || userStore.user.useId;
	assessId.value = options.assess_id || '';
	trainName.value = decodeURIComponent(options.train_name || '');
	courseName.value = decodeURIComponent(options.course_name || '');
	
	// 如果有 assess_id，加载已有评估数据
	if (assessId.value) {
		loadTrainDetail();
	}
});

// 加载培训详情
async function loadTrainDetail() {
	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) {
			const data = res.returnParams;
			formData.project_org = data.project_org || 0;
			formData.course_score = data.course_score || 0;
			formData.teacher_score = data.teacher_score || 0;
			formData.advice = data.advice || '';
		}
	} catch (error) {
		console.error('加载培训详情失败:', error);
	}
}

// 选择评分
function selectRating(field, value) {
	formData[field] = value;
}

// 提交评估
async function submitAssess() {
	// 验证必填项
	if (!formData.project_org) {
		uni.showToast({
			title: '请选择项目组织评分',
			icon: 'none'
		});
		return;
	}
	if (!formData.course_score) {
		uni.showToast({
			title: '请选择课程评分',
			icon: 'none'
		});
		return;
	}
	if (!formData.teacher_score) {
		uni.showToast({
			title: '请选择讲师评分',
			icon: 'none'
		});
		return;
	}

	uni.showLoading({
		title: '提交中...'
	});

	try {
		const res = await submitTrainAssess({
			universalid: assessId.value,  // 使用 assess_id 作为 universalid
			imple_id: impleId.value,
			course_id: courseId.value,
			trainees_id: traineesId.value,
			project_org: formData.project_org,
			course_score: formData.course_score,
			teacher_score: formData.teacher_score,
			advice: formData.advice
		});
		
		uni.hideLoading();
		
		if (res && res.returnCode === '0') {
			uni.showToast({
				title: '评估成功',
				icon: 'success'
			});
			
			setTimeout(() => {
				goBack();
			}, 1500);
		} else {
			uni.showToast({
				title: '评估失败',
				icon: 'none'
			});
		}
	} catch (error) {
		uni.hideLoading();
		uni.showToast({
			title: '提交失败',
			icon: 'none'
		});
		console.error('提交评估失败:', error);
	}
}

// 返回
function goBack() {
	uni.navigateBack();
}
</script>

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

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

.info-card, .form-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: center;
	font-size: 28rpx;
	line-height: 1.8;
	margin-bottom: 12rpx;
	
	.label {
		color: #999;
		min-width: 160rpx;
	}
	
	.value {
		color: #333;
		flex: 1;
	}
}

.form-item {
	margin-bottom: 32rpx;
	
	.form-label {
		font-size: 28rpx;
		color: #333;
		margin-bottom: 16rpx;
		
		.required {
			color: #ff4d4f;
			margin-right: 4rpx;
		}
	}
	
	.star-rating {
		display: flex;
		gap: 16rpx;
		
		.star {
			font-size: 48rpx;
			color: #d9d9d9;
			cursor: pointer;
			transition: all 0.3s;
			
			&.active {
				color: #FF9912;
			}
			
			&:active {
				transform: scale(1.2);
			}
		}
	}
	
	.textarea {
		width: 100%;
		min-height: 200rpx;
		padding: 20rpx;
		background: #f8f8f8;
		border-radius: 8rpx;
		font-size: 28rpx;
		line-height: 1.6;
		box-sizing: border-box;
	}
}

.footer {
	display: flex;
	gap: 20rpx;
	padding: 20rpx 30rpx;
	background: #fff;
	border-top: 1rpx solid #eee;
	
	.btn {
		flex: 1;
		height: 80rpx;
		line-height: 80rpx;
		font-size: 30rpx;
		border-radius: 8rpx;
		padding: 0;
		margin: 0;
		
		&::after {
			border: none;
		}
		
		&.btn-cancel {
			background: #f5f5f5;
			color: #666;
		}
		
		&.btn-submit {
			background: #1890ff;
			color: #fff;
		}
	}
}
</style>