From cf87d6fd9a43139a10e0b6bf10a233cbde66820f Mon Sep 17 00:00:00 2001
From: ZhangXianQiang <1135831638@qq.com>
Date: 星期三, 19 六月 2024 16:22:41 +0800
Subject: [PATCH] feat(考试):考试收卷提示
---
src/store/modules/exam.js | 2
src/views/exam/components/answer-time/index.vue | 17 +++++++-
src/views/exam/index.vue | 56 +++++++++++++++++++++++++---
3 files changed, 66 insertions(+), 9 deletions(-)
diff --git a/src/store/modules/exam.js b/src/store/modules/exam.js
index d159b47..fa3292a 100644
--- a/src/store/modules/exam.js
+++ b/src/store/modules/exam.js
@@ -8,7 +8,7 @@
examStatus: '鑰冭瘯鐘舵��',
examStartTime: '2021-01-01',
examEndTime: '2021-01-01',
- examTime: 60,
+ examTime: 5,
});
const examType = ref({
diff --git a/src/views/exam/components/answer-time/index.vue b/src/views/exam/components/answer-time/index.vue
index b37e18b..629137d 100644
--- a/src/views/exam/components/answer-time/index.vue
+++ b/src/views/exam/components/answer-time/index.vue
@@ -2,15 +2,28 @@
<div class="time-container flex justify-center text-white items-center shadow-md">
<el-icon class="mr-1 text-xl" size="24"><Timer /></el-icon>
<div class="label mr-1">鍓╀綑鏃堕棿:</div>
- <el-countdown :value="time" />
+ <el-countdown :value="time" @finish="timeFinish" />
</div>
</template>
<script setup>
import {ref} from 'vue';
+import dayjs from 'dayjs';
+import { storeToRefs } from 'pinia';
import { Timer } from '@element-plus/icons-vue';
+import { useExamStore } from '@/store/index.js';
-const time = ref(1000);
+const examStore = useExamStore();
+const { examInfo } = storeToRefs(examStore);
+
+const emit = defineEmits(['timeOut']);
+
+const time = ref(dayjs().valueOf() + examInfo.value.examTime * 1000);
+
+const timeFinish = () => {
+ emit('timeOut');
+}
+
</script>
<style lang="scss" scoped>
diff --git a/src/views/exam/index.vue b/src/views/exam/index.vue
index 733daf1..2866539 100644
--- a/src/views/exam/index.vue
+++ b/src/views/exam/index.vue
@@ -5,9 +5,9 @@
<div class="exam-wrapper container mx-auto h-full flex flex-col">
<div class="exam-header flex items-center mt-12 mb-10">
<div class="title-container text-3xl font-semibold text-white mr-8">
- 娴嬭瘯娴嬭瘯娴嬭瘯
+ {{ examInfo.examName }}
</div>
- <AnswerTime></AnswerTime>
+ <AnswerTime @timeOut="timeOut"></AnswerTime>
<div class="return-container grow flex justify-end">
<el-button type="danger" size="large" circle @click="closeClick">
@@ -50,7 +50,9 @@
<div class="answer-wrapper answer-right grow shadow-xl p-4">
<div class="wrapper h-full flex flex-col">
<div class="title-wrapper w-full flex mb-5">
- <div class="title text-xl font-semibold ">{{ examType[currentType] }} ({{ examStore.getActiveQuestion.score}}鍒�)</div>
+ <div class="title text-xl font-semibold ">{{ examType[currentType] }} ({{
+ examStore.getActiveQuestion.score }}鍒�)
+ </div>
</div>
<div class="main-wrapper w-full grow relative my-5">
@@ -109,13 +111,31 @@
</div>
</template>
</el-dialog>
+
+ <!-- 鑰冭瘯鏃堕棿寮圭獥 -->
+ <el-dialog
+ v-model="timeDialog"
+ align-center width="500"
+ :close-on-click-modal="false"
+ :close-on-press-escape="false"
+ :show-close="false"
+ >
+ <div class="dialog-container flex flex-col items-center">
+ <div class="icon-container">
+ <el-icon :size="50" color="#3680fa"><Timer /></el-icon>
+ </div>
+ <div class="dialog-info">
+ 鑰冭瘯鏃堕棿鍒帮紝绯荤粺鑷姩鏀跺嵎涓�.......
+ </div>
+ </div>
+ </el-dialog>
</div>
</template>
<script setup>
import { ref, watchEffect } from 'vue';
import { storeToRefs } from 'pinia';
-import { Close } from '@element-plus/icons-vue';
+import { Close,Timer } from '@element-plus/icons-vue';
import AnswerTag from './components/answer-tag/index.vue';
import AnswerProgress from './components/answer-progress/index.vue';
import AnswerSheet from './components/answer-sheet/index.vue';
@@ -131,7 +151,7 @@
const router = useRouter();
const examStore = useExamStore();
-const { currentType, currentIndex, examDetail, examType } = storeToRefs(examStore);
+const { currentType, currentIndex, examDetail, examType, examInfo } = storeToRefs(examStore);
const typeComponent = {
1: AnswerSingle,
@@ -141,6 +161,7 @@
const quitDialog = ref(false);
const submitDialog = ref(false);
+const timeDialog = ref(false);
const prevQuestion = () => {
currentIndex.value--;
@@ -211,14 +232,26 @@
// 浜ゅ嵎
const submitExam = () => {
submitDialog.value = true;
-}
+};
const confirmSubmit = () => {
submitDialog.value = false;
router.back();
};
+const resetAllDialog = () => {
+ quitDialog.value = false;
+ submitDialog.value = false;
+}
+// 鏃堕棿缁撴潫
+const timeOut = () => {
+ resetAllDialog();
+ timeDialog.value = true;
+ setTimeout(() => {
+ router.back();
+ },2000);
+};
watchEffect(() => {
let progress = 0;
@@ -282,4 +315,15 @@
.tool-button {
margin: 0 20px;
}
+
+.icon-container {
+ width: 70px;
+ height: 70px;
+ border-radius: 50%;
+ display: flex;
+ justify-content: center;
+ align-items: center;
+ background-color: rgba($color: #3680fa, $alpha: 0.2);
+ margin-bottom: 20px;
+}
</style>
\ No newline at end of file
--
Gitblit v1.8.0