fix 动画切换页面和试题；cache下一题

src/App.vue

@@ -20,12 +20,14 @@ export default {
         this.transitionName = "slide-right";
       } else if (toDepth > fromDepth) {
         this.transitionName = "slide-left";
-      } else if (to.query.examQuestionId && from.query.examQuestionId) {
-        if (to.query.examQuestionId < from.query.examQuestionId) {
+      } else if (to.params.order && from.params.order) {
+        if (to.params.order < from.params.order) {
           this.transitionName = "slide-right";
-        } else if (to.query.examQuestionId > from.query.examQuestionId) {
+        } else if (to.params.order > from.params.order) {
           this.transitionName = "slide-left";
         }
+      } else {
+        this.transitionName = "";
       }
     }
   }

src/features/OnlineExam/Examing/QuestionView.vue

@@ -1,31 +1,31 @@
 <template>
-  <div v-if="question && examQuestion" class="question-view">
-    <div class="question-header">
-      <Icon :type="examQuestion.isSign ? 'ios-star':'ios-star-outline'" :style="{color: '#ffcc00'}" class="star" @click="toggleSign" />
-      <template>
+  <transition name="fade">
+    <div v-show="question && examQuestion" class="question-view" :key="examQuestion.order">
+      <div class="question-header">
+        <Icon :type="examQuestion.isSign ? 'ios-star':'ios-star-outline'" :style="{color: '#ffcc00'}" class="star" @click="toggleSign" />
         <question-index :examQuestion="examQuestion" />
+      </div>
+      <div v-if="parentQuestionBody" class="question-view">
+        <question-body :questionBody="parentQuestionBody" :examQuestion="examQuestion" style="margin-bottom: 20px" :key="examQuestion.order"></question-body>
+        <div class="hr" />
+      </div>
+      <template v-if="question && question.questionType === 'SINGLE_CHOICE'">
+        <single-question-view :question="question" :examQuestion="examQuestion" :key="examQuestion.order" />
+      </template>
+      <template v-if="question && question.questionType === 'MULTIPLE_CHOICE'">
+        <multiple-question-view :question="question" :examQuestion="examQuestion" :key="examQuestion.order" />
+      </template>
+      <template v-if="question && question.questionType === 'TRUE_OR_FALSE'">
+        <boolean-question-view :question="question" :examQuestion="examQuestion" :key="examQuestion.order" />
+      </template>
+      <template v-if="question && question.questionType === 'FILL_UP'">
+        <fill-blank-question-view :question="question" :examQuestion="examQuestion" :key="examQuestion.order" />
+      </template>
+      <template v-if="question && question.questionType === 'ESSAY'">
+        <text-question-view :question="question" :examQuestion="examQuestion" :key="examQuestion.order" />
       </template>
     </div>
-    <div v-if="parentQuestionBody" class="question-view">
-      <question-body :questionBody="parentQuestionBody" :examQuestion="examQuestion" style="margin-bottom: 20px" :key="examQuestion.order"></question-body>
-      <div class="hr" />
-    </div>
-    <template v-if="question.questionType === 'SINGLE_CHOICE'">
-      <single-question-view :question="question" :examQuestion="examQuestion" :key="examQuestion.order" />
-    </template>
-    <template v-if="question.questionType === 'MULTIPLE_CHOICE'">
-      <multiple-question-view :question="question" :examQuestion="examQuestion" :key="examQuestion.order" />
-    </template>
-    <template v-if="question.questionType === 'TRUE_OR_FALSE'">
-      <boolean-question-view :question="question" :examQuestion="examQuestion" :key="examQuestion.order" />
-    </template>
-    <template v-if="question.questionType === 'FILL_UP'">
-      <fill-blank-question-view :question="question" :examQuestion="examQuestion" :key="examQuestion.order" />
-    </template>
-    <template v-if="question.questionType === 'ESSAY'">
-      <text-question-view :question="question" :examQuestion="examQuestion" :key="examQuestion.order" />
-    </template>
-  </div>
+  </transition>
 </template>
 
 <script>
@@ -38,7 +38,7 @@ import FillBlankQuestionView from "./FillBlankQuestionView";
 import TextQuestionView from "./TextQuestionView";
 import NestedQuestionView from "./NestedQuestionView";
 import { createNamespacedHelpers } from "vuex";
-const { mapMutations } = createNamespacedHelpers("examingHomeModule");
+const { mapState, mapMutations } = createNamespacedHelpers("examingHomeModule");
 
 export default {
   name: "QuestionView",
@@ -61,6 +61,7 @@ export default {
         "/api/ecs_oe_student/examQuestion/getQuestionContent?questionId=" +
           this.examQuestion.questionId
       );
+
       this.updateExamQuestion({
         order: this.examQuestion.order,
         getQuestionContent: true
@@ -134,6 +135,17 @@ export default {
 
       this.question =
         question.questionUnitList[this.examQuestion.subNumber - 1];
+
+      {
+        // cache next question content
+        const currentOrder = this.examQuestion.order;
+        if (currentOrder < this.examQuestionList.length) {
+          this.$http.get(
+            "/api/ecs_oe_student/examQuestion/getQuestionContent?questionId=" +
+              this.examQuestionList[currentOrder].questionId
+          );
+        }
+      }
     },
     async toggleSign() {
       this.updateExamQuestion({
@@ -142,6 +154,9 @@ export default {
       });
     }
   },
+  computed: {
+    ...mapState(["examQuestionList"])
+  },
   watch: {
     $route: function() {
       this.updateQuestion();

src/utils/axios.js

@@ -98,6 +98,7 @@ qmInstance.defaults.headers.common["X-Requested-With"] = "XMLHttpRequest"; //标
 qmInstance.get = cachingGet(qmInstance.get, [
   /\/api\/exam_question\/question\/\?question_id/,
   /\/api\/exam_question\/paper_struct\/\?exam_record_id=/,
+  /\/api\/ecs_oe_student\/examQuestion\/getQuestionContent\?questionId=/,
   /\/api\/ecs_exam_work\/exam\/\d+$/,
   /\/api\/ecs_oe_student_face\/upyun$/,
   /\/api\/ecs_oe_student\/examFaceLivenessVerify\/checkFaceLiveness$/