FE-lab-xcx/pages_safetyEducationExamination/views/exam/index.vue

<!-- 在线考试列表 -->
<template>
	<view class="safetyEducationExamination-exam">
		<!-- 顶部 Tab -->
		<view class="tab-bar">
			<view
				v-for="(tab, index) in tabs"
				:key="index"
				class="tab-item"
				:class="{ active: activeTab === index }"
				@click="switchTab(index)"
			>
				{{ tab }}
			</view>
		</view>

		<!-- 内容区 -->
		<scroll-view scroll-y class="scroll-content" @scrolltolower="onScrollToLower">
			<!-- 考试任务 -->
			<view v-if="activeTab === 0" class="panel">
				<view
					v-for="(item, index) in examTaskList"
					:key="index"
					class="exam-card"
					@click="goToExamDetail(item)"
				>
					<view class="card-top">
						<view class="card-top-left">
							<text class="tag tag-blue">{{ item.examTypeName }}</text>
							<view class="status-dot" :class="item.examStatus == 1 ? 'dot-green' : 'dot-orange'"></view>
							<text class="status-text" :class="item.examStatus == 1 ? 'text-gray' : 'text-orange'">
								{{ item.examStatus == 1 ? '未开始' : '进行中' }}
							</text>
						</view>
						<text class="arrow-icon">›</text>
					</view>
					<text class="exam-name">{{ item.examName }}</text>
					<!-- 有学时要求：三列 -->
					<view v-if="item.needStudy || item.examStudy || item.mockExam" class="info-grid col3">
						<view class="info-item">
							<text class="info-label">学时要求</text>
							<text class="info-value" :class="item.needStudy ? 'text-orange' : 'text-green'">
								{{ item.completedStudyHours }}/{{ item.studyHoursRequirement }}
								<text v-if="item.needStudy"> 未达标</text>
								<text v-else> 已达标</text>
							</text>
						</view>
						<view class="info-item">
							<text class="info-label">学习任务</text>
							<text class="info-value" :class="item.examStudy ? 'text-orange' : 'text-green'">
								{{ item.examStudy ? '待完成' : '已完成' }}
							</text>
						</view>
						<view class="info-item">
							<text class="info-label">模拟考试</text>
							<text class="info-value" :class="item.mockExam ? 'text-orange' : 'text-green'">
								{{ item.mockExam ? '待完成' : '已完成' }}
							</text>
						</view>
					</view>
					<!-- 无前置条件：两列 -->
					<view v-else class="info-grid col2">
						<view class="info-item">
							<text class="info-label">满分/及格</text>
							<text class="info-value">{{ item.totalScore }} / {{ item.passScore }} 分</text>
						</view>
						<view class="info-item">
							<text class="info-label">可考次数</text>
							<text class="info-value text-gray">{{ item.attemptLimit === 0 ? '不限' : item.attemptLimit + ' 次' }}</text>
						</view>
					</view>
				</view>
				<view v-if="!examTaskList[0] && !examTaskLoading" class="empty-tip">暂无考试任务</view>
				<view v-if="examTaskLoading" class="loading-tip">加载中...</view>
			</view>

			<!-- 模拟考试 -->
			<view v-if="activeTab === 1" class="panel">
				<view
					v-for="(item, index) in mockExamList"
					:key="index"
					class="exam-card"
					@click="goToMockDetail(item)"
				>
					<view class="card-top">
						<view class="card-top-left">
							<text class="tag tag-blue">{{ item.examTypeName }}</text>
							<text class="tag tag-orange" style="margin-left:8rpx;">模拟卷</text>
						</view>
						<text class="arrow-icon">›</text>
					</view>
					<text class="exam-name">{{ item.examName }}</text>
					<view class="info-grid col2">
						<view class="info-item-2">
							<span class="info-value" style="color:#8896a7;">最高成绩：
							<span class="info-value" :class="item.maxScore >= item.passScore ? 'text-green' : 'text-orange'">
							{{ item.maxScore > 0 ? item.maxScore + ' 分' : '未参加' }}
							</span></span>
						</view>
						<view class="info-item-2">
							<text class="info-value" style="text-align:right;color:#8896a7;">及格线：{{ item.passScore }} 分</text>
						</view>
					</view>
				</view>
				<view v-if="!mockExamList[0] && !mockExamLoading" class="empty-tip">暂无模拟考试</view>
				<view v-if="mockExamLoading" class="loading-tip">加载中...</view>
			</view>

			<!-- 我的成绩 -->
			<view v-if="activeTab === 2" class="panel">
				<!-- 筛选区 -->
				<view class="filter-row">
					<picker :range="resultOptions" :range-key="'label'" @change="onResultChange">
						<view class="picker-input" style="width:100rpx;">{{ resultOptions[resultIndex].label }} ▾</view>
					</picker>
					<picker mode="date" :value="startDate" @change="onStartDateChange">
						<view class="picker-input top-picker-input-box" :style="!startDate?'color:#999;font-size:22rpx;':''">{{ startDate?startDate:'请选择' }}</view>
					</picker>
					<text class="filter-sep">至</text>
					<picker mode="date" :value="endDate" @change="onEndDateChange" >
						<view class="picker-input top-picker-input-box" :style="!endDate?'color:#999;font-size:22rpx;':''">{{ endDate?endDate:'请选择' }}</view>
					</picker>
					<view class="top-right-box-button" @click="resetScoreList()">重置</view>
				</view>
				<!-- 考试类型标签 -->
				<scroll-view scroll-x class="tag-scroll">
					<view class="tag-scroll-inner">
						<text
							v-for="(tag, index) in examTypeTags"
							:key="index"
							class="filter-tag"
							:class="{ 'filter-tag-active': activeTagIndex === index }"
							@click="onTagChange(index)"
						>{{ tag.label }}</text>
					</view>
				</scroll-view>
				<!-- 成绩卡片 -->
				<view
					v-for="(item, index) in scoreList"
					:key="index"
					class="score-card"
					@click="goToScoreDetail(item)"
				>
					<view class="card-top">
						<text class="tag tag-blue">{{ item.examTypeName }}</text>
						<text class="score-result" :class="item.resultStatus == 2 ? 'result-pass' : 'result-fail'">
							{{ item.resultStatus == 2 ? '通过' : '未通过' }}
						</text>
					</view>
					<text class="score-exam-name">{{ item.examName }}</text>
					<view class="score-info-grid">
						<view><text class="text-gray">考试时间：</text>{{ item.startTime }}</view>
						<view><text class="text-gray">时长：</text>{{ item.answerDuration }} 分钟</view>
						<view><text class="text-gray">满分/及格：</text>{{ item.totalScore }} / {{ item.passScore }}</view>
						<view><text class="text-gray">考次：</text>{{ item.attemptCount }} / {{ item.attemptLimit === 0 ? '不限' : item.attemptLimit }}</view>
						<view><text class="text-gray">用时：</text>{{ item.myDuration || '-' }}</view>
						<view>
							<text class="text-gray">最高成绩：</text>
							<text :class="item.bestScore >= item.passScore ? 'text-green' : 'text-red'">{{ item.bestScore }} 分</text>
						</view>
						<view>
							<text class="text-gray">获得积分：</text>
							<text :class="item.myScore > 0 ? 'text-orange' : 'text-gray'">
								{{ item.myScore > 0 ? '+' + item.myScore + '分' : '无' }}
							</text>
						</view>
						<view>
							<text class="text-gray">考试结果：</text>
							<text :class="item.resultStatus === 1 ? 'text-green' : 'text-red'">
								{{ item.resultStatus === 1 ? '通过' : '未通过' }}
							</text>
						</view>
					</view>
				</view>
				<view v-if="!scoreList[0] && !scoreLoading" class="empty-tip">暂无成绩记录</view>
				<view v-if="scoreLoading" class="loading-tip">加载中...</view>
				<view v-if="scoreNoMore && scoreList[0]" class="loading-tip">没有更多了</view>
			</view>
		</scroll-view>
	</view>
</template>

<script>
	import {
		parseTime
	} from '@/component/public.js'
	import {
		examUserExamList,
		examUserExamMockList,
		examElExamUserResultMyScoreListPage,
		examUserExamTypeSelectExamType,
	} from '@/pages_safetyEducationExamination/api/index.js'

	export default {
		data() {
			return {
				tabs: ['考试任务', '模拟考试', '我的成绩'],
				activeTab: 0,
				// 考试任务
				examTaskList: [],
				examTaskLoading: false,
				// 模拟考试
				mockExamList: [],
				mockExamLoading: false,
				// 我的成绩
				scoreList: [],
				scoreLoading: false,
				scorePage: 1,
				scorePageSize: 10,
				scoreTotal: 0,
				scoreNoMore: false,
				// 筛选
				resultOptions: [
					{ label: '全部', value: null },
					{ label: '通过', value: 1 },
					{ label: '未通过', value: 2 },
				],
				resultIndex: 0,
				startDate: '',
				endDate: '',
				examTypeTags: [{ label: '全部', value: null }],
				activeTagIndex: 0,
			}
		},
		created() {
			this.loadExamTypeTags();
		},
		onShow() {
			this.refreshCurrentTab();
		},
		methods: {
			switchTab(index) {
				this.activeTab = index;
				this.refreshCurrentTab();
			},
			refreshCurrentTab() {
				if (this.activeTab === 0) {
					this.loadExamTaskList();
				} else if (this.activeTab === 1) {
					this.loadMockExamList();
				} else if (this.activeTab === 2) {
					this.resetScoreList();
				}
			},
			// 考试类型标签（用于我的成绩筛选）
			async loadExamTypeTags() {
				try {
					const { data } = await examUserExamTypeSelectExamType({});
					if (data.code === 200 && data.data) {
						const tags = (data.data || []).map(item => ({
							label: item.examTypeName,
							value: item.examTypeId,
						}));
						this.$set(this, 'examTypeTags', [{ label: '全部', value: null }, ...tags]);
					}
				} catch (e) {
					console.error('获取考试类型失败', e);
				}
			},
			// 考试任务列表
			async loadExamTaskList() {
				if (this.examTaskLoading) return;
				this.examTaskLoading = true;
				try {
					const { data } = await examUserExamList({ page: 1, pageSize: 50 });
					if (data.code === 200) {
						this.$set(this, 'examTaskList', data.data.records || []);
					}
				} catch (e) {
					console.error('获取考试任务失败', e);
				} finally {
					this.examTaskLoading = false;
				}
			},
			// 模拟考试列表
			async loadMockExamList() {
				if (this.mockExamLoading) return;
				this.mockExamLoading = true;
				try {
					const { data } = await examUserExamMockList({ page: 1, pageSize: 50 });
					if (data.code === 200) {
						this.$set(this, 'mockExamList', data.data.records || []);
					}
				} catch (e) {
					console.error('获取模拟考试失败', e);
				} finally {
					this.mockExamLoading = false;
				}
			},
			// 重置成绩列表（筛选条件变更时调用）
			resetScoreList() {
				this.scorePage = 1;
				this.scoreNoMore = false;
				this.startTime = '';
				this.endTime = '';
				this.$set(this, 'scoreList', []);
				this.loadScoreList();
			},
			// 我的成绩列表（支持分页）
			async loadScoreList() {
				if (this.scoreLoading || this.scoreNoMore) return;
				this.scoreLoading = true;
				try {
					const tag = this.examTypeTags[this.activeTagIndex];
					const result = this.resultOptions[this.resultIndex];
					const obj = {
						page: this.scorePage,
						pageSize: this.scorePageSize,
						examTypeId: tag.value || '',
						resultStatus: result.value || '',
						startTime: this.startDate?this.startDate + 'T00:00:00':'',
						endTime: this.endDate?this.endDate + 'T23:59:59':'',
						examScene:null
					};
					const { data } = await examElExamUserResultMyScoreListPage(obj);
					if (data.code === 200) {
						for(let i=0;i<data.data.records.length;i++){
							data.data.records[i].startTime = parseTime(data.data.records[i].startTime, "{y}-{m}-{d}")
						}
						const records = data.data.records || [];
						const newList = this.scorePage === 1 ? records : [...this.scoreList, ...records];
						this.$set(this, 'scoreList', newList);
						this.scoreTotal = data.data.total;
						if (newList.length >= this.scoreTotal) {
							this.scoreNoMore = true;
						} else {
							this.scorePage++;
						}
					}
				} catch (e) {
					console.error('获取成绩列表失败', e);
				} finally {
					this.scoreLoading = false;
				}
			},
			// 滚动到底部加载更多（我的成绩）
			onScrollToLower() {
				if (this.activeTab === 2) {
					this.loadScoreList();
				}
			},
			onResultChange(e) {
				this.resultIndex = e.detail.value;
				this.resetScoreList();
			},
			onStartDateChange(e) {
				this.startDate = e.detail.value;
				this.resetScoreList();
			},
			onEndDateChange(e) {
				this.endDate = e.detail.value;
				this.resetScoreList();
			},
			onTagChange(index) {
				this.activeTagIndex = index;
				this.resetScoreList();
			},
			goToExamDetail(item) {
				// 跳转考试详情，传递 examId / attemptId
			},
			goToMockDetail(item) {
				// 跳转模拟考试详情，传递 mockExamId
			},
			goToScoreDetail(item) {
				// 跳转成绩详情，传递 examId
			},
		},
	}
</script>

<style lang="stylus" scoped>
	.safetyEducationExamination-exam
		height 100%
		display flex
		flex-direction column
		overflow hidden
		background-color #f0f4fb

	// 顶部 Tab
	.tab-bar
		background #fff
		border-bottom 1rpx solid #e8edf3
		display flex
		flex-shrink 0

		.tab-item
			flex 1
			text-align center
			padding 18rpx 8rpx 16rpx
			font-size 26rpx
			color #888
			border-bottom 4rpx solid transparent

		.tab-item.active
			color #1677ff
			font-weight 600
			border-bottom-color #1677ff

	// 滚动区
	.scroll-content
		flex 1
		overflow hidden

	.panel
		padding 24rpx

	// 考试卡片
	.exam-card
		background #fff
		border-radius 20rpx
		padding 24rpx 28rpx
		margin-bottom 20rpx
		box-shadow 0 2rpx 12rpx rgba(0,0,0,0.04)
		border 1rpx solid #dde3ed

	.card-top
		display flex
		justify-content space-between
		align-items center
		margin-bottom 16rpx

	.card-top-left
		display flex
		align-items center

	.arrow-icon
		font-size 32rpx
		color #bbb

	// 标签
	.tag
		font-size 20rpx
		padding 4rpx 12rpx
		border-radius 8rpx
		border 1rpx solid transparent

	.tag-blue
		background #e6f4ff
		color #1677ff
		border-color #91caff

	.tag-orange
		background #fff7e6
		color #d46b08
		border-color #ffd591

	// 状态点
	.status-dot
		width 12rpx
		height 12rpx
		border-radius 50%
		margin-left 24rpx
		margin-right:10rpx;

	.dot-orange
		background #fa8c16

	.dot-green
		background #999

	.status-text
		font-size 22rpx
		margin-left 6rpx

	.text-orange
		color #fa8c16

	.text-gray
		color #999

	.text-green
		color #52c41a

	.text-blue
		color #1677ff

	.text-red
		color #f5222d

	// 考试名称
	.exam-name
		display block
		font-size 28rpx
		font-weight 600
		color #222
		margin-bottom 16rpx

	// 信息格
	.info-grid
		display grid
		gap 12rpx

	.col3
		grid-template-columns 1fr 1fr 1fr

	.col2
		grid-template-columns 1fr 1fr

	.info-item
		background #f4f6fa
		border-radius 12rpx
		padding 12rpx 16rpx
		display flex
		flex-direction column

	.info-item-2
		display flex
		flex-direction column

	.info-label
		font-size 20rpx
		color #999
		margin-bottom 8rpx

	.info-value
		font-size 22rpx

	// 筛选
	.filter-row
		display flex
		align-items center
		gap 12rpx
		padding 16rpx 0 8rpx
		flex-wrap nowrap
		.top-picker-input-box{
			width:190rpx;
			height:54rpx;
			padding:0;
			text-align: center;
			line-height:54rpx;
		}
		.top-right-box-button{
			border: 1rpx solid #dde3ed;
			border-radius:10rpx
			background:#fff;
			font-size:24rpx;
			width:100rpx;
			height:54rpx;
			padding:0;
			text-align: center;
			line-height:54rpx;
		}
	.picker-input
		font-size 24rpx
		color #333
		background #fff
		border 1rpx solid #dde3ed
		border-radius 10rpx
		padding 10rpx 16rpx

	.filter-sep
		font-size 22rpx
		color #999
		flex-shrink 0

	// 类型标签滚动
	.tag-scroll
		white-space nowrap
		padding 8rpx 0 16rpx

	.tag-scroll-inner
		display inline-flex
		gap 12rpx

	.filter-tag
		display inline-block
		font-size 22rpx
		padding 8rpx 20rpx
		border-radius 30rpx
		background #eef1f6
		color #666
		border 1rpx solid transparent

	.filter-tag-active
		background #e6f0ff
		color #1677ff
		border-color #91caff

	// 成绩卡片
	.score-card
		background #fff
		border-radius 20rpx
		padding 24rpx 28rpx
		margin-bottom 20rpx
		box-shadow 0 2rpx 12rpx rgba(0,0,0,0.04)
		border 1rpx solid #dde3ed

	.score-result
		font-size 22rpx
		font-weight 600
		padding 4rpx 16rpx
		border-radius 20rpx

	.result-pass
		background #f6ffed
		color #52c41a
		border 1rpx solid #b7eb8f

	.result-fail
		background #fff2f0
		color #f5222d
		border 1rpx solid #ffccc7

	.score-exam-name
		display block
		font-size 30rpx
		font-weight 700
		color #222
		margin 16rpx 0

	.score-info-grid
		display grid
		grid-template-columns 1fr 1fr
		gap 12rpx
		margin-bottom 20rpx
		font-size 26rpx
		color #333

	.empty-tip
		text-align center
		line-height 80rpx
		color #aaa
		font-size 24rpx

	.loading-tip
		text-align center
		line-height 60rpx
		color #aaa
		font-size 22rpx
</style>