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">{{ examData.examStatus == 2?'进行中':(examData.examStatus==1?'未开始':'') }}</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 || 0 }} 题</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>
		<!-- 考试承诺书弹窗 -->
		<uni-popup ref="preExamDialog" type="center" :mask-click="true">
			<view class="pre-exam-dialog">
				<view class="dialog-header">
					<text class="dialog-title">考试承诺书</text>
				</view>
				<view class="dialog-body">
					<scroll-view scroll-y class="content-scroll">
						<richTextPdf ref="richTextPdf" :content="richTextHtml" :examId="richTextExamId" />
					</scroll-view>
				</view>
				<view class="dialog-footer">
					<view v-if="preButtonType" class="btn btn-border" @click="downloadCommitment">下载</view>
					<view class="btn btn-primary" @click="confirmCommitment">确认</view>
				</view>
			</view>
		</uni-popup>
	</view>
</template>

<script>
	import {
		parseTime
	} from '@/component/public.js'
	import {
		examUserExamDetail, 
	} from '@/pages_safetyEducationExamination/api/index.js'
	import {
		goToExamPage,
		confirmCommitmentAndStart,
		startFormalExam,
	} from '@/pages_safetyEducationExamination/utils/index.js'
	import richTextPdf from '@/pages_safetyEducationExamination/component/richTextPdf.vue'

	export default {
		components: {
			richTextPdf
		},
		data() {
			return {
				examData: {},
				newData:{},
				// 承诺书相关
				preButtonType: false,
				richTextHtml: '',
				richTextExamId:'',
				preData: null,
				itemData:{},
			}
		},
		computed: {
			showConditions() {
				return this.examData.needStudy || this.examData.examStudy || this.examData.mockExam;
			}
		},
		onLoad(options) {
			// 接收从上个页面传递的考试数据
			if (options.examData) {
				try {
					this.newData = JSON.parse(decodeURIComponent(options.examData));
					// this.examUserExamDetail();
				} catch (e) {
					console.error('解析考试数据失败', e);
				}
			}
		},
		onShow(){
			this.examUserExamDetail();
		},
		methods: {
			async examUserExamDetail() {
				try {
					const { data } = await examUserExamDetail({examId:this.newData.examId});
					if (data.code === 200 && data.data) {
						this.$set(this,'examData',data.data);
						this.formatExamData();
					}
				} catch (e) {
					console.error('获取考试详情失败', e);
				}
			},
			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}');
				}
			},
			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'
					});
				}
			},
			async startExam() {
				this.$set(this,'itemData',this.examData);
				goToExamPage(this.examData, {
					openCommitmentDialog: (examItem) => {
						this.preButtonType = examItem.commitmentPrintEnabled == 1;
						this.richTextHtml = examItem.commitmentContent;
						this.richTextExamId = examItem.examId;
						this.preData = examItem;
						this.$refs.preExamDialog.open();
					},
				});
			},
			// 下载承诺书
			downloadCommitment() {
				uni.showToast({ title: '正在下载，请耐心等候', icon: 'none' });
				this.$refs.richTextPdf.downloadPDF();
			},
			// 确认承诺书
			async confirmCommitment() {
				let self = this;
				await confirmCommitmentAndStart(this.preData, () => {
					this.$refs.preExamDialog.close();
					setTimeout(function(){
						startFormalExam(self.itemData);
					},500);
				});
			},
			// 获取任务列表
			async loadTaskList() {
				try {
					const { data } = await examUserExamStudyTaskList({ page: 1, pageSize: 1, examStatus: 2, isSpecialExam: false });
					if (data.code === 200) {
						this.$set(this, 'onlineExamList', data.data.records);
					}
				} catch (e) { console.error('获取考试任务失败', e); }
			},
		},
	}
</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;
	}
	// 承诺书弹窗样式
	.pre-exam-dialog {
		width: 600rpx;
		max-height: 80vh;
		background: #fff;
		border-radius: 20rpx;
		overflow: hidden;
	}

	.dialog-header {
		padding: 32rpx;
		border-bottom: 1rpx solid #eee;

		.dialog-title {
			font-size: 32rpx;
			font-weight: 600;
			color: #333;
		}
	}

	.dialog-body {
		height: 800rpx;
		overflow: hidden;

		.content-scroll {
			height: 100%;
		}
	}

	.dialog-footer {
		display: flex;
		gap: 20rpx;
		padding: 24rpx 32rpx;
		border-top: 1rpx solid #eee;

		.btn {
			flex: 1;
			height: 72rpx;
			line-height: 72rpx;
			text-align: center;
			font-size: 28rpx;
			border-radius: 12rpx;
		}

		.btn-border {
			background: #fff;
			color: #1857d4;
			border: 1rpx solid #1857d4;
		}

		.btn-primary {
			background: #1857d4;
			color: #fff;
		}
	}
</style>