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

<!-- 考试详情 -->
<template>
	<view class="exam-detail-page">
		<scroll-view scroll-y class="scroll-content">
			<view class="card">
				<view class="chip-row mb8">
					<text class="tag tag-orange text-xs">{{ examData.examTypeName }}</text>
					<text class="tag tag-orange text-xs">{{ getExamStatusText() }}</text>
				</view>
				<view class="exam-title">{{ examData.examName }}</view>
				<view class="info-grid mb14">
					<view class="info-item">
						<view class="text-xs text-gray mb4">总题目数</view>
						<view class="text-blue fw500">{{ examData.totalQuestionNum }}</view>
					</view>
					<view class="info-item">
						<view class="text-xs text-gray mb4">考试时长</view>
						<view class="text-333 fw500">{{ examData.answerDuration }} 分钟</view>
					</view>
					<view class="info-item">
						<view class="text-xs text-gray mb4">总分/及格</view>
						<view class="text-333 fw500">{{ examData.totalScore }} / {{ examData.passScore }} 分</view>
					</view>
					<view class="info-item">
						<view class="text-xs text-gray mb4">考试次数</view>
						<view class="text-333 fw500">{{ examData.attemptLimit === 0 ? '不限' : examData.attemptLimit+' 次' }}</view>
					</view>
				</view>
				<!-- 考前任务要求 -->
				<view class="exam-type-max-box" v-if="examData.needStudy||examData.examStudy||examData.mockExam">
					<view class="exam-title-p">考前任务状态</view>
					<view class="exam-type-box">
						<view class="exam-min-box" v-if="examData.needStudy">
							<view>学时要求</view>
							<view>{{ examData.completedStudyHours }}/{{ examData.studyHoursRequirement }}</view>
						</view>
						<view class="exam-min-box" v-if="examData.examStudy">
							<view>学习任务</view>
							<view>待完成</view>
						</view>
						<view class="exam-min-box" v-if="examData.mockExam">
							<view>模拟考试</view>
							<view>待完成</view>
						</view>
					</view>
				</view>
				<!-- 考试说明 -->
				<view v-if="examData.unavailableDesc" class="exam-desc-box" style="background-color:#f4f6fa;">
					<view class="exam-desc">{{ examData.unavailableDesc }}</view>
				</view>
			</view>
		</scroll-view>

		<!-- 底部按钮 -->
		<view class="bottom-bar">
			<view class="btn-primary" @click="startExam">
				{{examData.needStudy||examData.examStudy?'开始学习':(examData.mockExam?'模拟考试':'开始考试')}}
				</view>
		</view>
	</view>
</template>

<script>
	import {
		parseTime
	} from '@/component/public.js'

	export default {
		data() {
			return {
				examData: {},
			}
		},
		computed: {
			showConditions() {
				return this.examData.needStudy || this.examData.examStudy || this.examData.mockExam;
			}
		},
		onLoad(options) {
			// 接收从上个页面传递的考试数据
			if (options.examData) {
				try {
					this.examData = JSON.parse(decodeURIComponent(options.examData));
					this.formatExamData();
				} catch (e) {
					console.error('解析考试数据失败', e);
				}
			}
		},
		methods: {
			formatExamData() {
				// 格式化时间
				if (this.examData.startTime) {
					this.examData.startTime = parseTime(this.examData.startTime, '{y}-{m}-{d} {h}:{i}');
				}
				if (this.examData.endTime) {
					this.examData.endTime = parseTime(this.examData.endTime, '{y}-{m}-{d} {h}:{i}');
				}
			},
			getExamStatusText() {
				// 根据时间判断考试状态
				const now = new Date().getTime();
				const start = new Date(this.examData.startTime).getTime();
				const end = new Date(this.examData.endTime).getTime();

				if (now < start) return '未开始';
				if (now > end) return '已结束';
				return '进行中';
			},
			goToStudyHour() {
				// 跳转到学时任务页面
				if (this.examData.knowledgePointIds && this.examData.knowledgePointIds.length > 0) {
					uni.navigateTo({
						url: `/pages_safetyEducationExamination/views/studyHourTask/index?knowledgePointId=${this.examData.knowledgePointIds.join(',')}`
					});
				} else {
					uni.navigateTo({
						url: '/pages_safetyEducationExamination/views/study/index'
					});
				}
			},
			goToCourse() {
				// 跳转到课程学习页面
				uni.showToast({
					title: '跳转到课程学习',
					icon: 'none'
				});
			},
			goToMockExam() {
				// 跳转到模拟考试页面
				uni.showToast({
					title: '跳转到模拟考试',
					icon: 'none'
				});
			},
			startExam() {
				
			},
		},
	}
</script>

<style lang="stylus" scoped>
	.exam-detail-page {
		height: 100%;
		display: flex;
		flex-direction: column;
		background-color: #f0f4fb;
	}

	.scroll-content {
		flex: 1;
		overflow: hidden;
		padding-bottom: 160rpx;
	}

	.card {
		background: #fff;
		border-radius: 20rpx;
		padding: 28rpx;
		margin: 24rpx 24rpx 0;
		border: 1px solid #dde3ed;
	}

	.chip-row {
		display: flex;
		gap: 12rpx;
	}

	.tag {
		display: inline-block;
		padding: 6rpx 16rpx;
		border-radius: 20rpx;
		font-size: 20rpx;
	}

	.tag-orange {
		background: #fff7e6;
		color: #d46b08;
	}

	.text-xs {
		font-size: 22rpx;
	}

	.mb8 {
		margin-bottom: 16rpx;
	}

	.mb4 {
		margin-bottom: 8rpx;
	}

	.mb12 {
		margin-bottom: 24rpx;
	}

	.mb14 {
		margin-bottom: 28rpx;
	}

	.exam-title {
		font-size: 34rpx;
		font-weight: 700;
		margin-bottom: 24rpx;
	}

	.info-grid {
		display: grid;
		grid-template-columns: 1fr 1fr;
		gap: 16rpx;
	}

	.info-item {
		border: 1px solid #dde3ed;
		border-radius: 16rpx;
		padding: 20rpx;
	}

	.text-gray {
		color: #999;
	}

	.text-333 {
		color: #333;
	}
	
	.text-blue {
		color: #1857d4;
	}

	.text-green {
		color: #52c41a;
	}

	.text-red {
		color: #ff4d4f;
	}

	.fw500 {
		font-weight: 500;
	}

	.time-row {
		font-size: 24rpx;
	}

	.card-title {
		font-size: 28rpx;
		font-weight: 600;
	}

	.condition-row {
		display: flex;
		align-items: center;
		padding: 16rpx 0;
		border-bottom: 1rpx solid #f0f0f0;

		&:last-child {
			border-bottom: none;
		}
	}

	.condition-icon {
		font-size: 32rpx;
		margin-right: 16rpx;
	}

	.condition-text {
		flex: 1;
		font-size: 26rpx;
	}
	.exam-desc-box{
		padding:28rpx;
		border-radius:10rpx;
	}
	.exam-desc {
		font-size: 26rpx;
		line-height: 1.8;
		color: #666;
	}
	.exam-type-max-box{
		margin-bottom:30rpx;
		.exam-title-p{
			font-size:24rpx;
			line-height:70rpx;
		}
		.exam-type-box{
			border:1px solid #dde3ed;
			border-radius:20rpx;
			.exam-min-box:nth-child(1){
				border-top:none;
			}
			.exam-min-box{
				display:flex;
				border-top:1px solid #dde3ed;
				padding:30rpx 28rpx;
				view{
					height:30rpx;
					line-height:30rpx;
					font-size:24rpx;
				}
				view:nth-child(1){
					flex:1;
				}
				view:nth-child(2){
					color:#e67e22;
				}
			}
		}
	}

	.bottom-bar {
		position: fixed;
		bottom: 0;
		left: 0;
		right: 0;
		background: #fff;
		padding: 20rpx 24rpx;
		border-top: 1rpx solid #eee;
		padding-bottom: calc(20rpx + env(safe-area-inset-bottom));
	}

	.btn-primary {
		height: 88rpx;
		line-height: 88rpx;
		text-align: center;
		background: #1857d4;
		color: #fff;
		border-radius: 16rpx;
		font-size: 32rpx;
		font-weight: 600;
	}
</style>