From 6c34d8df858b0c795dd06da0962c22f9d1c40bd2 Mon Sep 17 00:00:00 2001
From: ZhangXianQiang <1135831638@qq.com>
Date: 星期四, 13 六月 2024 14:50:48 +0800
Subject: [PATCH] feat(在线培训):添加在线培训流程
---
src/views/exam/index.vue | 67 +++++++++++++++++++++++++++++----
1 files changed, 59 insertions(+), 8 deletions(-)
diff --git a/src/views/exam/index.vue b/src/views/exam/index.vue
index 8703f59..65c156c 100644
--- a/src/views/exam/index.vue
+++ b/src/views/exam/index.vue
@@ -56,7 +56,7 @@
<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="questionIndex"></component>
+ <component :is="typeComponent[currentType]" :key="currentIndex"></component>
</Transition>
</div>
</div>
@@ -97,7 +97,8 @@
</template>
<script setup>
-import { ref } from 'vue';
+import { ref, toRefs } 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';
@@ -105,23 +106,73 @@
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';
+
+const examStore = useExamStore();
+const { currentType, currentIndex, activeQuestion, examDetail } = storeToRefs(examStore);
const typeComponent = {
1: AnswerSingle,
2: AnswerMultiple,
};
-
-const currentType = ref(1);
-const questionIndex = ref(0);
+examStore.setActiveQuestion(examDetail.value[0].questionList[0]);
const dialogVisible = ref(false);
const prevQuestion = () => {
- questionIndex.value--;
+ currentIndex.value--;
+ checkList();
};
const nextQuestion = () => {
- questionIndex.value++;
+ 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 = () => {
@@ -130,7 +181,7 @@
const confirmCancel = () => {
dialogVisible.value = false;
-}
+};
</script>
<style lang="scss" scoped>
--
Gitblit v1.8.0