hospital-rescue-app-v2/pages/course/answer-card.uvue

<template>
	<hr-page page-bg="#F3F4F6" status-bg="#FFFFFF" nav-title="答题卡" @right-click="submit">
		<template v-slot:right>
			<text class="ac-nav-submit">交卷</text>
		</template>

		<view class="hr-body">

			<!-- ============ 图例 ============ -->
			<hr-card>
				<view class="hr-row hr-wrap">
					<view class="ac-lg">
						<view class="ac-lg-s" style="background-color:#EFF6FF;border:1px solid #BFDBFE"></view>
						<text class="ac-lg-t">已答 {{ doneCount }}</text>
					</view>
					<view class="ac-lg">
						<view class="ac-lg-s" style="background-color:#FFFFFF;border:1px solid #E5E7EB"></view>
						<text class="ac-lg-t">未答 {{ total - doneCount }}</text>
					</view>
					<view class="ac-lg">
						<view class="ac-lg-s" style="background-color:#FEF3C7;border:1px solid #FDE68A"></view>
						<text class="ac-lg-t">标记 {{ markCount }}</text>
					</view>
				</view>
			</hr-card>

			<!-- ============ 题号九宫格 ============ -->
			<hr-card style="margin-top:10px">
				<view class="ac-grid">
					<view v-for="(q, i) in questions" :key="i" :class="cellClass(i)" :style="cellStyle" @click="jump(i)">
						<text :class="cellTextClass(i)">{{ i + 1 }}</text>
					</view>
				</view>
			</hr-card>

			<hr-tip style="margin-top:10px" :theme="answeredAll ? 'ok' : 'warn'"
				:icon="answeredAll ? '✓' : '⚑'"
				:text="answeredAll ? '全部题目已作答，可以交卷了。' : ('仍有 ' + (total - doneCount) + ' 题未作答，交卷后将无法返回修改。')"></hr-tip>

			<view style="height:14px"></view>
		</view>

		<template v-slot:footer>
			<view class="hr-fixedbar">
				<view class="hr-btn hr-btn-ghost ac-foot-prev" @click="resume">
					<text class="ac-foot-t">继续答题</text>
				</view>
				<view class="hr-btn hr-btn-primary" style="flex:1" @click="submit">
					<text class="ac-foot-t2">交卷并查看成绩</text>
				</view>
			</view>
		</template>
	</hr-page>
</template>

<script lang="uts" setup>
	import { ref, computed } from 'vue'
	import { quizQuestions } from '@/mock/index.uts'
	import { quizState, answeredCount, markedCount } from '@/utils/quiz.uts'
	import { navBack, relaunchTo } from '@/utils/nav.uts'

	/** s18 答题卡 */
	const questions = quizQuestions
	const total = questions.length
	const refreshKey = ref(0)
	const cellSize = ref(92)

	const doneCount = computed(() : number => {
		const k = refreshKey.value
		return answeredCount()
	})

	const markCount = computed(() : number => {
		const k = refreshKey.value
		return markedCount()
	})

	const answeredAll = computed(() : boolean => {
		return doneCount.value == total
	})

	const cellStyle = computed(() : string => {
		return `width:${cellSize.value}rpx;height:${cellSize.value}rpx;`
	})

	onLoad(() => {
		// 6 列均分：内容宽 750rpx - 页面左右 64 - 卡片左右 52 - 5 个 16rpx 间隙 80
		cellSize.value = Math.floor((750 - 64 - 52 - 80) / 6)
	})

	onPageShow(() => {
		refreshKey.value = refreshKey.value + 1
	})

	function cellClass(i : number) : string {
		const k = refreshKey.value
		if (quizState.current == i) { return 'ac-cell ac-cell-cur' }
		if (quizState.marked[i]) { return 'ac-cell ac-cell-mark' }
		if (quizState.answers[i] >= 0) { return 'ac-cell ac-cell-done' }
		return 'ac-cell'
	}

	function cellTextClass(i : number) : string {
		const k = refreshKey.value
		if (quizState.current == i) { return 'ac-cell-t ac-cell-t-cur' }
		return 'ac-cell-t'
	}

	function jump(i : number) : void {
		quizState.current = i
		navBack()
	}

	function resume() : void {
		navBack()
	}

	function submit() : void {
		uni.showModal({
			title: '交卷确认',
			content: `已作答 ${doneCount.value} / ${total} 题。交卷后无法修改。`,
			cancelText: '继续答题',
			confirmText: '交卷',
			success: (res) => {
				if (res.confirm) {
					quizState.submitted = true
					uni.showToast({ title: '已交卷 · 得分 92', icon: 'success' })
					setTimeout(() => {
						relaunchTo('/pages/study/exams')
					}, 700)
				}
			}
		})
	}
</script>

<style>
	.ac-nav-submit {
		font-size: 31.4rpx;
		color: #2563EB;
		font-weight: bold;
	}

	.ac-lg {
		display: flex;
		flex-direction: row;
		align-items: center;
		margin-right: 28rpx;
		margin-bottom: 8rpx;
	}

	.ac-lg-s {
		width: 24rpx;
		height: 24rpx;
		border-radius: 8rpx;
		margin-right: 10rpx;
	}

	.ac-lg-t {
		font-size: 25.8rpx;
		color: #6B7280;
	}

	.ac-grid {
		display: flex;
		flex-direction: row;
		flex-wrap: wrap;
	}

	.ac-cell {
		border-radius: 18rpx;
		background-color: #FFFFFF;
		border: 2rpx solid #E5E7EB;
		display: flex;
		flex-direction: row;
		align-items: center;
		justify-content: center;
		margin-right: 16rpx;
		margin-bottom: 16rpx;
	}

	.ac-cell-done {
		background-color: #EFF6FF;
		border: 2rpx solid #BFDBFE;
	}

	.ac-cell-mark {
		background-color: #FEF3C7;
		border: 2rpx solid #FDE68A;
	}

	.ac-cell-cur {
		background-color: #2563EB;
		border: 2rpx solid #2563EB;
	}

	.ac-cell-t {
		font-size: 26.8rpx;
		font-weight: bold;
		color: #6B7280;
	}

	.ac-cell-t-cur {
		color: #FFFFFF;
	}

	.ac-foot-prev {
		flex: 0 0 220rpx;
		margin-right: 18rpx;
	}

	.ac-foot-t {
		font-size: 31.4rpx;
		font-weight: bold;
		color: #1F2937;
	}

	.ac-foot-t2 {
		font-size: 32.4rpx;
		font-weight: bold;
		color: #FFFFFF;
	}
</style>