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

<!-- 模拟考试详情 -->
<template>
	<view class="mock-exam-info">
		<scroll-view scroll-y class="scroll-content">
			<view class="card">
				<view class="exam-name">{{ examData.examName }}</view>
				<view class="chip-row mb12">
					<text class="tag tag-blue text-xs">{{ examData.examTypeName }}</text>
					<text class="tag tag-orange text-xs">模拟卷</text>
				</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="fw500">{{ examData.answerDuration }} 分钟</view>
					</view>
					<view class="info-item">
						<view class="text-xs text-gray mb4">满分</view>
						<view class="fw500">{{ examData.totalScore }} 分</view>
					</view>
					<view class="info-item">
						<view class="text-xs text-gray mb4">及格分数</view>
						<view class="text-orange fw500">{{ examData.passScore }} 分</view>
					</view>
				</view>
				<view class="score-summary">
					<view class="text-sm fw500 mb8">历次模拟成绩</view>
					<view class="row-between mb4">
						<text class="text-sm text-gray">第 {{ examData.attemptCount || 0 }} 次 {{ examData.attemptCount}}</text>
						<text class="text-sm fw500" :class="examData.isPassed ? 'text-green' : 'text-red'">
							最高 {{ examData.maxScore || 0 }} 分（{{ examData.isPassed ? '已通过' : '未通过' }}）
						</text>
					</view>
					<view v-if="!examData.isPassed" class="text-xs text-gray">
						还需提高 {{ scoreGap }} 分达到及格线
					</view>
				</view>
				<view class="notice">模拟考试需达到及格分数（{{ examData.passScore }}分）方可参加正式在线考试。</view>
			</view>
		</scroll-view>
		<view class="bottom-bar" v-if="examData.needStudy||examData.examStudy||examData.mockExam">
			<view class="btn-primary" @click="startMockExam">
				{{examData.needStudy||examData.examStudy?'开始学习':(examData.mockExam?'开始模拟考试':'')}}
			</view>
		</view>
	</view>
</template>

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

	export default {
		data() {
			return {
				examData: {}
			}
		},
		computed: {
			scoreGap() {
				return Math.max(0, (this.examData.passScore || 0) - (this.examData.maxScore || 0));
			}
		},
		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}');
				}
			},
			startMockExam() {
				uni.navigateTo({
					url: `/pages_safetyEducationExamination/views/exam/mockExamPlay?examId=${this.examData.examId}&mockExamId=${this.examData.mockExamId || ''}&attemptId=${this.examData.attemptId || ''}`
				});
			}
		}
	}
</script>

<style lang="stylus" scoped>
	.mock-exam-info
		height 100%
		display flex
		flex-direction column
		background #f0f4fb

	.scroll-content
		flex 1
		overflow hidden
		padding-bottom 160rpx

	.card
		margin 24rpx
		padding 28rpx
		background #fff
		border 1rpx solid #dde3ed
		border-radius 20rpx

	.exam-name
		font-size 34rpx
		font-weight 700
		margin-bottom 16rpx

	.chip-row
		display flex
		gap 12rpx

	.tag
		padding 6rpx 16rpx
		border-radius 20rpx

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

	.tag-orange
		background #fff7e6
		color #d46b08
		border 1rpx solid #ffd591

	.info-grid
		display grid
		grid-template-columns 1fr 1fr
		gap 16rpx

	.info-item
		padding 20rpx
		border 1rpx solid #dde3ed
		border-radius 16rpx

	.score-summary
		padding 24rpx
		margin-bottom 28rpx
		background #f4f6fa
		border-radius 16rpx

	.notice
		padding 20rpx
		background #fff7e6
		border-radius 16rpx
		font-size 24rpx
		line-height 1.6
		color #d46b08

	.row-between
		display flex
		justify-content space-between
		align-items center

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

	.btn-primary
		height 88rpx
		line-height 88rpx
		text-align center
		background #1857d4
		border-radius 16rpx
		color #fff
		font-size 32rpx
		font-weight 600

	.text-xs
		font-size 22rpx
	.text-sm
		font-size 24rpx
	.text-gray
		color #999
	.text-blue
		color #1857d4
	.text-orange
		color #d46b08
	.text-green
		color #52c41a
	.text-red
		color #ff4d4f
	.fw500
		font-weight 500
	.mb4
		margin-bottom 8rpx
	.mb8
		margin-bottom 16rpx
	.mb12
		margin-bottom 24rpx
	.mb14
		margin-bottom 28rpx
</style>