ygoa_miniapp/pages/mine/train/trainList.vue

<template>
	<view class="container">
		<!-- 搜索区域 -->
		<view class="search-box">
			<input 
				class="search-input" 
				v-model="courseName" 
				placeholder="搜索课程名称"
				@confirm="searchTrain"
			/>
			<button class="search-btn" @click="searchTrain">查询</button>
		</view>

		<!-- 培训列表 -->
		<scroll-view scroll-y class="train-list" @scrolltolower="loadMore">
			<view v-if="loading" class="loading">加载中...</view>
			
			<view v-else-if="trainList.length === 0" class="empty">
				<text>暂无培训记录</text>
			</view>
			
			<view v-else>
				<view v-for="(item, index) in trainList" :key="index" class="train-item">
					<view class="card-header">
						<text class="title">{{ item.train_name || '未命名培训' }}</text>
					</view>
					<view class="card-body">
						<view class="info-line">
							<text class="label">负责人：</text>
							<text class="value">{{ item.responsible_people || '-' }}</text>
						</view>
						<view class="info-line">
							<text class="label">课程名称：</text>
							<text class="value">{{ item.course_name || '-' }}</text>
						</view>
						<view class="info-line">
							<text class="label">讲师：</text>
							<text class="value">{{ item.teacher_name || '-' }}</text>
						</view>
						<view class="info-line">
							<text class="label">地点：</text>
							<text class="value">{{ item.location_name || '-' }}</text>
						</view>
						
						<!-- 评分展示 -->
<!--						<view class="score-section" v-if="item.project_org || item.course_score || item.teacher_score">
							<view class="score-line">
								<text class="label">项目组织：</text>
								<text class="stars">{{ renderStars(item.project_org) }}</text>
							</view>
							<view class="score-line">
								<text class="label">课程评分：</text>
								<text class="stars">{{ renderStars(item.course_score) }}</text>
							</view>
							<view class="score-line">
								<text class="label">讲师评分：</text>
								<text class="stars">{{ renderStars(item.teacher_score) }}</text>
							</view>
						</view>-->
						
						<!-- 操作按钮 -->
						<view class="action-buttons">
							<button 
								class="btn btn-view" 
								@click="viewDetail(item)"
							>
								查看
							</button>
							<button 
								class="btn btn-assess" 
								@click="assessTrain(item)"
							>
								评估
							</button>
						</view>
					</view>
				</view>
				
				<view v-if="hasMore" class="load-more">加载更多...</view>
				<view v-else-if="trainList.length > 0" class="no-more">没有更多了</view>
			</view>
		</scroll-view>
	</view>
</template>

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

const userStore = useUserStore();
const trainList = ref([]);
const courseName = ref('');
const loading = ref(false);
const hasMore = ref(true);
const pageNum = ref(1);
const pageSize = ref(20);

onLoad(() => {
	loadTrainList();
});

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

// 查询培训
function searchTrain() {
	pageNum.value = 1;
	trainList.value = [];
	hasMore.value = true;
	loadTrainList();
}

// 加载培训列表
async function loadTrainList() {
	if (loading.value || !hasMore.value) return;
	
	loading.value = true;
	try {
		const res = await getMyTrainList({
			userId: userStore.user.useId,
			course_name: courseName.value,
			page: pageNum.value,
			pageSize: pageSize.value
		});
		
		if (res && res.returnCode === '0' && res.returnParams) {
			const data = res.returnParams;
			const newList = data.list || [];
			trainList.value = [...trainList.value, ...newList];
			
			// 判断是否还有更多数据
			if (newList.length < pageSize.value) {
				hasMore.value = false;
			} else {
				pageNum.value++;
			}
		}
	} catch (error) {
		uni.showToast({
			title: '加载失败',
			icon: 'none'
		});
		console.error('加载培训列表失败:', error);
	} finally {
		loading.value = false;
	}
}

// 加载更多
function loadMore() {
	if (!loading.value && hasMore.value) {
		loadTrainList();
	}
}

// 查看详情
function viewDetail(item) {
	console.log('查看培训详情 - item:', item);
	console.log('assess_id:', item.assess_id);
	console.log('universalid:', item.universalid);
	uni.navigateTo({
		url: `/pages/mine/train/trainDetail?universalid=${item.universalid || ''}&imple_id=${item.imple_id}&course_id=${item.course_id}&trainees_id=${item.trainees_id}&assess_id=${item.assess_id || ''}`
	});
}

// 评估培训
function assessTrain(item) {
	uni.navigateTo({
		url: `/pages/mine/train/trainAssess?universalid=${item.universalid || ''}&imple_id=${item.imple_id}&course_id=${item.course_id}&trainees_id=${item.trainees_id}&assess_id=${item.assess_id || ''}&train_name=${encodeURIComponent(item.train_name || '')}&course_name=${encodeURIComponent(item.course_name || '')}`
	});
}
</script>

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

.search-box {
	background: #fff;
	padding: 20rpx 30rpx;
	display: flex;
	align-items: center;
	gap: 15rpx;
	border-bottom: 1rpx solid #eee;
	
	.search-input {
		flex: 1;
		height: 70rpx;
		line-height: 70rpx;
		padding: 0 25rpx;
		background: #f8f8f8;
		border-radius: 8rpx;
		font-size: 28rpx;
	}
	
	.search-btn {
		width: 150rpx;
		height: 70rpx;
		line-height: 70rpx;
		background: #1890ff;
		color: #fff;
		border-radius: 8rpx;
		font-size: 28rpx;
		padding: 0;
		margin: 0;
		
		&::after {
			border: none;
		}
	}
}

.train-list {
	flex: 1;
	height: calc(100vh - 150rpx);
	padding: 20rpx 24rpx;
	box-sizing: border-box;
	width: 100%;
}

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

.train-item {
	background: #fff;
	border-radius: 12rpx;
	padding: 20rpx;
	margin-bottom: 16rpx;
	box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.04);
	box-sizing: border-box;
	width: 100%;
	
	.card-header {
		margin-bottom: 16rpx;
		padding-bottom: 12rpx;
		border-bottom: 1rpx solid #f0f0f0;
		
		.title {
			font-size: 32rpx;
			font-weight: 600;
			color: #333;
		}
	}
	
	.card-body {
		.info-line {
			display: flex;
			align-items: center;
			font-size: 26rpx;
			line-height: 1.8;
			margin-bottom: 8rpx;
			
			.label {
				color: #999;
				margin-right: 8rpx;
				min-width: 140rpx;
			}
			
			.value {
				color: #333;
				flex: 1;
			}
		}
		
		.score-section {
			margin-top: 12rpx;
			padding-top: 12rpx;
			border-top: 1rpx dashed #f0f0f0;
			
			.score-line {
				display: flex;
				align-items: center;
				font-size: 26rpx;
				line-height: 1.8;
				margin-bottom: 6rpx;
				
				.label {
					color: #999;
					margin-right: 8rpx;
					min-width: 140rpx;
				}
				
				.stars {
					color: #FF9912;
					font-size: 24rpx;
				}
			}
		}
		
		.action-buttons {
			display: flex;
			justify-content: flex-end;
			gap: 16rpx;
			margin-top: 16rpx;
			padding-top: 12rpx;
			border-top: 1rpx solid #f0f0f0;
			
			.btn {
				flex: 0 0 auto;
				padding: 12rpx 28rpx;
				font-size: 26rpx;
				border-radius: 6rpx;
				min-width: 120rpx;
				height: auto;
				line-height: 1.5;
				
				&::after {
					border: none;
				}
				
				&.btn-view {
					background: #fff;
					color: #1890ff;
					border: 1rpx solid #1890ff;
					
					&:active {
						background: #f0f7ff;
					}
				}
				
				&.btn-assess {
					background: #1890ff;
					color: #fff;
					border: 1rpx solid #1890ff;
					
					&:active {
						background: #096dd9;
					}
				}
			}
		}
	}
}
</style>