From 945cbd86a706804d3d8e9d4da14e159be7e6f3eb Mon Sep 17 00:00:00 2001
From: ZhangXianQiang <1135831638@qq.com>
Date: 星期一, 17 六月 2024 13:43:02 +0800
Subject: [PATCH] feat(考试):多选题
---
src/views/exam/index.vue | 169 ++++++++++++++++++++++++++++++++++++++++++++++++++++----
1 files changed, 157 insertions(+), 12 deletions(-)
diff --git a/src/views/exam/index.vue b/src/views/exam/index.vue
index 97d8eaa..61ee1a9 100644
--- a/src/views/exam/index.vue
+++ b/src/views/exam/index.vue
@@ -4,10 +4,22 @@
<div class="exam-content">
<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">
+ <div class="title-container text-3xl font-semibold text-white mr-8">
娴嬭瘯娴嬭瘯娴嬭瘯
</div>
+ <AnswerTime></AnswerTime>
+
+ <div class="return-container grow flex justify-end">
+ <el-button type="danger" size="large" circle @click="closeClick">
+ <template #icon>
+ <el-icon :size="20">
+ <Close />
+ </el-icon>
+ </template>
+ </el-button>
+ </div>
</div>
+
<div class="exam-main grow flex justify-between">
<!-- 绛旈鍗″尯 -->
<div class="answer-wrapper answer-left mr-8 shadow-xl p-4 box-border">
@@ -28,27 +40,152 @@
</div>
<div class="submit-wrapper">
- <el-button type="primary" class="submit-button w-40">鎻愪氦璇曞嵎</el-button>
+ <el-button type="primary" class="submit-button">鎻愪氦璇曞嵎</el-button>
</div>
</div>
</div>
- <!-- 绛旈鍐呭鍖� -->
- <div class="answer-wrapper answer-right grow shadow-xl">
-
+ <!-- 绛旈鍐呭鍖� -->
+ <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 ">鍗曢�夐 (3鍒�)</div>
+ </div>
+
+ <div class="main-wrapper w-full grow relative my-5">
+ <div class="main-content absolute top-0 bottom-0 w-full">
+ <Transition appear name="fade-transform" mode="out-in">
+ <component :is="typeComponent[currentType]" :key="currentIndex"></component>
+ </Transition>
+ </div>
+ </div>
+
+ <div class="tool-wrapper flex justify-end">
+ <div class="button-container flex items-center">
+ <div class="button-item">
+ <el-button class="tool-button" @click="prevQuestion">涓婁竴棰�</el-button>
+ </div>
+ <div class="button-item">
+ <el-button class="tool-button" type="primary" @click="nextQuestion">涓嬩竴棰�</el-button>
+ </div>
+ </div>
+ </div>
+ </div>
</div>
</div>
</div>
</div>
+
+
+ <!-- 鎻愮ず寮圭獥 -->
+ <el-dialog v-model="dialogVisible" title="娉ㄦ剰" width="500">
+ <div class="dialog-container">
+ <p>璇风‘璁ゆ槸鍚﹂��鍑哄綋鍓嶈�冭瘯</p>
+ <p>褰撳墠鑰冭瘯璇曞嵎浼氳嚜鍔ㄦ彁浜�,鍚庣画鏃犳硶缁х画浣滅瓟</p>
+ </div>
+ <template #footer>
+ <div class="dialog-footer">
+ <el-button @click="dialogVisible = false">鍙栨秷</el-button>
+ <el-button type="primary" @click="confirmCancel">
+ 纭畾
+ </el-button>
+ </div>
+ </template>
+ </el-dialog>
</div>
</template>
<script setup>
-import AnswerTag from './answer-tag/index.vue';
-import AnswerProgress from './answer-progress/index.vue';
-import AnswerSheet from './answer-sheet/index.vue';
+import { ref } from 'vue';
+import { storeToRefs } from 'pinia';
+import { Close } 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';
+import AnswerSingle from './components/answer-main/answer-single/index.vue';
+import AnswerMultiple from './components/answer-main/answer-multiple/index.vue';
+import AnswerTime from './components/answer-time/index.vue';
+import { useExamStore } from '@/store/index.js';
+import { useRouter } from 'vue-router';
+const router = useRouter();
+
+const examStore = useExamStore();
+const { currentType, currentIndex, activeQuestion, examDetail } = storeToRefs(examStore);
+
+const typeComponent = {
+ 1: AnswerSingle,
+ 2: AnswerMultiple,
+};
+examStore.setActiveQuestion(examDetail.value[0].questionList[0]);
+
+const dialogVisible = ref(false);
+
+const prevQuestion = () => {
+ currentIndex.value--;
+ checkList();
+};
+
+const nextQuestion = () => {
+ currentIndex.value++;
+ checkList();
+};
+
+const checkList = () => {
+ let tempIndex = 0;
+ const typeQuestion = examDetail.value.find((typeItem, index) => {
+ if (typeItem.questionType === currentType.value) {
+ tempIndex = index;
+ return typeItem;
+ } else {
+ return false;
+ }
+ });
+ if (typeQuestion) {
+ if (currentIndex.value >= typeQuestion.questionList.length) {
+ tempIndex++;
+ if(examDetail.value[tempIndex]) {
+ currentType.value = examDetail.value[tempIndex].questionType;
+ currentIndex.value = 0;
+ } else {
+ currentType.value = typeQuestion.questionType;
+ currentIndex.value = typeQuestion.questionList.length - 1;
+ }
+
+ } else if (currentIndex.value < 0) {
+ tempIndex--;
+ if(examDetail.value[tempIndex]) {
+ currentType.value = examDetail.value[tempIndex].questionType;
+ currentIndex.value = examDetail.value[tempIndex].questionList.length - 1;
+ } else {
+ currentType.value = typeQuestion.questionType;
+ currentIndex.value = 0;
+ }
+ }
+ findQuestion(currentType.value, currentIndex.value);
+ }
+
+};
+
+const findQuestion = (type, index) => {
+ const typeQuestion = examDetail.value.find(typeItem => typeItem.questionType === type);
+ if (typeQuestion) {
+ const question = typeQuestion.questionList[index];
+ if (question) {
+ examStore.setActiveQuestion(question);
+ }
+ }
+};
+
+const closeClick = () => {
+ dialogVisible.value = true;
+};
+
+const confirmCancel = () => {
+ dialogVisible.value = false;
+ router.back();
+};
</script>
<style lang="scss" scoped>
@@ -57,6 +194,7 @@
max-width: 1724px;
}
}
+
.top-bg {
width: 130%;
height: 200px;
@@ -75,21 +213,28 @@
left: 0;
z-index: 2;
}
+
.exam-header {
width: 100%;
}
+
.answer-wrapper {
background-color: #fff;
border-top-left-radius: 10px;
border-top-right-radius: 10px;
}
+
.answer-left {
width: 340px;
}
-.answer-right {
- color: #3680fa;
-}
-.submit-button {
+
+.submit-button,
+.tool-button {
+ width: 160px;
height: 40px;
}
+
+.tool-button {
+ margin: 0 20px;
+}
</style>
\ No newline at end of file
--
Gitblit v1.8.0