1
This commit is contained in:
@@ -0,0 +1,223 @@
|
||||
<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>
|
||||
Reference in New Issue
Block a user