开发练习模块6

src/api/request.ts

@@ -27,6 +27,8 @@ request.interceptors.response.use((res) => {
 		case 401:
 			Modal.confirm({
 				content:'登录失效,是否需要重新登录',
+				cancelText:'取消',
+				okText:"确定",
 				onOk:()=>{
 					router.push('/login')
 				}

src/hooks/exam/driverExam.ts

@@ -2,12 +2,16 @@ import { computed, onMounted, reactive, ref, watch, onBeforeUnmount } from "vue"
 import { openApi } from "@/api/open/type";
 import moment from 'moment';
 import audio from "@/utils/audio";
+import { useStore } from "vuex";
 export const useDriverExam = (requestFn: Promise<openApi.selectFreeQuestionInfoRes>, config = {
-  watch: true,
-  countDown: true
+  autoNext: false,
+  autoRead: false,
+  countDown: true,
+  autoAnswer: true
 }) => {
+  const store = useStore()
   let timerId = 0
-  let examMillSeconds = 45 * 60 * 1000
+  let examTimeMillSeconds = config.countDown ? 45 * 60 * 1000 : 0
   const falseNum = ref(0)
   const trueNum = ref(0)
   const list = ref<openApi.selectFreeQuestionInfoRes["rows"]>([{
@@ -529,12 +533,12 @@ export const useDriverExam = (requestFn: Promise<openApi.selectFreeQuestionInfoR
     return listIndex.value + 1
   })
   const countDown = ref('00:45:00')
-  const setPageNumToListIndex = (page:string|number)=>{
+  const setPageNumToListIndex = (page: string | number) => {
     page = Number(page)
-    listIndex.value = page-1
-    
+    listIndex.value = page - 1
+
   }
-  const playIssueAudio = ()=>{
+  const playIssueAudio = () => {
     audio.playAudio(list.value[listIndex.value].issuemp3)
   }
   const getProblemTypeName = (type: number) => {
@@ -592,10 +596,10 @@ export const useDriverExam = (requestFn: Promise<openApi.selectFreeQuestionInfoR
     } else {
       list.value[listIndex.value].userAnswer = answer;
     }
-    //判断对错
+    //判断对错,以及是否自动下一题
     if (
       list.value[listIndex.value].questionType !== 3 &&
-    
+
       list.value[listIndex.value].userAnswer.length
     ) {
       const userAnswer = list.value[listIndex.value].userAnswer as string;
@@ -604,6 +608,13 @@ export const useDriverExam = (requestFn: Promise<openApi.selectFreeQuestionInfoR
         list.value[listIndex.value].isComplete = true;
         list.value[listIndex.value].isError = false;
         trueNum.value++;
+        //自动跳转下一题
+        if (store.state.sysConfig.autoNext) {
+          window.setTimeout(() => {
+            nextProblem()
+          }, 1500)
+
+        }
       } else {
         list.value[listIndex.value].isComplete = true;
         list.value[listIndex.value].isError = true;
@@ -611,7 +622,7 @@ export const useDriverExam = (requestFn: Promise<openApi.selectFreeQuestionInfoR
       }
     } else if (
       list.value[listIndex.value].questionType == 3 &&
-     
+
       list.value[listIndex.value].userAnswer.length
     ) {
       const userAnswer = Object.assign([], list.value[listIndex.value].userAnswer) as string[];
@@ -622,6 +633,13 @@ export const useDriverExam = (requestFn: Promise<openApi.selectFreeQuestionInfoR
         list.value[listIndex.value].isComplete = true;
         list.value[listIndex.value].isError = false;
         trueNum.value++;
+        //自动跳转下一题
+        if (store.state.sysConfig.autoNext) {
+          window.setTimeout(() => {
+            nextProblem()
+          }, 1500)
+
+        }
       } else {
         list.value[listIndex.value].isComplete = true;
         list.value[listIndex.value].isError = true;
@@ -634,6 +652,7 @@ export const useDriverExam = (requestFn: Promise<openApi.selectFreeQuestionInfoR
 
 
 
+
   };
   const switchIndexByJudge = (index: number) => {
     let name = "";
@@ -683,8 +702,9 @@ export const useDriverExam = (requestFn: Promise<openApi.selectFreeQuestionInfoR
     }
     return select;
   };
-  if (config.watch) {
-    watch(listIndex, (newVal, oldVal) => {
+
+  watch(listIndex, (newVal, oldVal) => {
+    if (config.autoAnswer) {
       //判断对错
       if (
         list.value[oldVal].questionType !== 3 &&
@@ -739,9 +759,12 @@ export const useDriverExam = (requestFn: Promise<openApi.selectFreeQuestionInfoR
       ) {
         alert("正确答案：" + list.value[oldVal].answer);
       }
-      //提示
-    });
-  }
+
+    }
+
+    //提示
+  });
+
   const getCorrectRate = () => {
     if (trueNum.value + falseNum.value) {
       Math.round((trueNum.value) / (trueNum.value + falseNum.value) * 100) / 100
@@ -767,11 +790,14 @@ export const useDriverExam = (requestFn: Promise<openApi.selectFreeQuestionInfoR
       list.value = res.rows;
     })
     timerId = window.setInterval(() => {
-      examMillSeconds = examMillSeconds - 1000
-      countDown.value = moment(examMillSeconds).format('00:mm:ss')
-      if (examMillSeconds === 0) {
+      if (examTimeMillSeconds === 0) {
+        console.log('已经清除')
         window.clearInterval(timerId)
+        return
       }
+      examTimeMillSeconds = examTimeMillSeconds - 1000
+      countDown.value = moment(examTimeMillSeconds).format('00:mm:ss')
+
     }, 1000)
 
 

src/store/index.ts

@@ -2,19 +2,31 @@ import { createStore } from 'vuex'
 
 export default createStore({
   state: {
-    sysConfig:{
-      autoNext:false,
-      keyTip:false,
-      voiceTip:false
+    sysConfig: {
+      autoNext: true,
+      autoRead: false,
+      autoRed: false
+
     }
   },
   getters: {
   },
   mutations: {
+    SET_SYSCONFIG(store, sysConfig: {
+      autoNext: boolean,
+      autoRead: boolean,
+      autoRed: boolean
+
+    }) {
+      store.sysConfig = sysConfig
+      return store
+
+
+    }
   },
   actions: {
-    LoginOut(){
-      localStorage.setItem('token','')
+    LoginOut() {
+      localStorage.setItem('token', '')
     }
   },
   modules: {

src/views/home/components/leftTab/index.vue

@@ -84,7 +84,7 @@ export default defineComponent({
           children: [],
           isOpen: false,
           isSelect: false,
-          path: "",
+          path: "/home/sysconfig",
         },
         {
           text: "汽车科目一",
@@ -94,14 +94,16 @@ export default defineComponent({
             {
               text: "1.练习技巧",
               isSelect: false,
+              path: "/home/practiseSelect?subject=1",
             },
-            {
-              text: "2.套餐技巧",
-              isSelect: false,
-            },
+            // {
+            //   text: "2.套餐技巧",
+            //   isSelect: false,
+            // },
             {
               text: "3.模拟考试",
               isSelect: false,
+              path: "/examInstructions",
             },
           ],
           isOpen: false,
@@ -114,14 +116,16 @@ export default defineComponent({
             {
               text: "1.练习技巧",
               isSelect: false,
+              path: "/home/practiseSelect?subject=4",
             },
-            {
-              text: "2.套餐技巧",
-              isSelect: false,
-            },
+            // {
+            //   text: "2.套餐技巧",
+            //   isSelect: false,
+            // },
             {
               text: "3.模拟考试",
               isSelect: false,
+              path: "/examInstructions",
             },
           ],
           isOpen: false,
@@ -136,10 +140,10 @@ export default defineComponent({
               text: "1.练习技巧",
               isSelect: false,
             },
-            {
-              text: "2.套餐技巧",
-              isSelect: false,
-            },
+            // {
+            //   text: "2.套餐技巧",
+            //   isSelect: false,
+            // },
             {
               text: "3.模拟考试",
               isSelect: false,
@@ -233,5 +237,4 @@ export default defineComponent({
     }
   }
 }
-
 </style>

src/views/home/sysconfig/index.vue

@@ -6,6 +6,8 @@
         <div class="w90 justify-between flex">
           <label>
             <input
+          
+              @input="changeSysConfig"
               v-model="sysConfig.autoNext"
               :value="true"
               class="yello-radio"
@@ -17,6 +19,7 @@
           <label>
             <input
               v-model="sysConfig.autoNext"
+              @input="changeSysConfig"
               :value="false"
               class="yello-radio"
               name="autoNext"
@@ -32,20 +35,22 @@
         <div class="w90 justify-between flex">
           <label>
             <input
-              v-model="sysConfig.keyTip"
+              v-model="sysConfig.autoRed"
+              @input="changeSysConfig"
               :value="true"
               class="yello-radio"
-              name="keyTip"
+              name="autoRed"
               type="radio"
             />
             <span>是</span>
           </label>
           <label>
             <input
-              v-model="sysConfig.keyTip"
+              v-model="sysConfig.autoRed"
+              @input="changeSysConfig"
               :value="false"
               class="yello-radio"
-              name="keyTip"
+              name="autoRed"
               type="radio"
             />
             <span>否</span>
@@ -58,9 +63,10 @@
           <label>
             <input
               class="yello-radio"
+              @input="changeSysConfig"
               :value="true"
-              v-model="sysConfig.voiceTip"
-              name="voiceTip"
+              v-model="sysConfig.autoRead"
+              name="autoRead"
               type="radio"
             />
             <span>是</span>
@@ -68,9 +74,10 @@
           <label>
             <input
               class="yello-radio"
+              @input="changeSysConfig"
               :value="false"
-              v-model="sysConfig.voiceTip"
-              name="voiceTip"
+              v-model="sysConfig.autoRead"
+              name="autoRead"
               type="radio"
             />
             <span>否</span>
@@ -85,20 +92,23 @@
 </template>
 
 <script>
-import { reactive, ref, toRefs,defineComponent } from "vue";
-
+import { reactive, ref, toRefs, defineComponent } from "vue";
+import { useStore } from "vuex";
 export default defineComponent({
   name: "sysconfig",
   setup() {
-    const state = reactive({
-      sysConfig: {
-        autoNext: false,
-        keyTip: false,
-        voiceTip: false,
-      },
+    const store = useStore();
+    const sysConfig = ref({
+      autoNext: store.state.sysConfig.autoNext,
+      autoRed: store.state.sysConfig.autoRed,
+      autoRead: store.state.sysConfig.autoRead,
     });
+    const changeSysConfig = (event) => {
+      store.commit("SET_SYSCONFIG", sysConfig.value);
+    };
     return {
-      ...toRefs(state),
+      sysConfig,
+      changeSysConfig,
     };
   },
 });
@@ -120,7 +130,6 @@ export default defineComponent({
   }
 }
 
-
 .content {
   padding: 0 30px;
   padding-top: 21px;

src/views/login/index.vue

@@ -1,8 +1,10 @@
 <template>
   <div class="w-full vh100">
-    <div class="w-full flex-wrap ">
+    <div class="w-full flex-wrap">
       <img class="w-full" src="@/assets/img/login/top_bg.png" />
-      <div class="w-full bg-primary-yellow h46 lh46 pl30 flex-wrap flex cursor-pointer">
+      <div
+        class="w-full bg-primary-yellow h46 lh46 pl30 flex-wrap flex cursor-pointer"
+      >
         <div class="w80 bg-primary-darkyellow">首页</div>
         <div class="w80">体验</div>
       </div>
@@ -32,6 +34,7 @@
           <div class="row mt20 flex justify-between">
             <img class="w80 h30" v-if="codeUrl" :src="codeUrl" />
             <input
+              @keydown.enter="loginByPassword"
               v-model="loginForm.code"
               placeholder="验证码"
               type="text"
@@ -44,7 +47,13 @@
             <span class="save-text">记住用户名和密码</span>
           </div>
           <div class="submit">
-            <button @click="loginByPassword" class="confirm">确定</button>
+            <button
+              @click="loginByPassword"
+              @keydown.enter="loginByPassword"
+              class="confirm"
+            >
+              确定
+            </button>
             <button class="cancel">取消</button>
           </div>
         </div>
@@ -94,19 +103,16 @@ export default defineComponent({
     };
   },
   mounted() {
-    this.getCaptchaImage()
+    this.getCaptchaImage();
   },
   methods: {
     loginByPassword() {
       console.log("登录了");
-      api.login.login(this.loginForm).then(res=>{
-        window.localStorage.setItem('token',res.data.token)
-        router.push('/home/sysconfig')
-        console.log(res.data.token)
-     
-
-      })
-
+      api.login.login(this.loginForm).then((res) => {
+        window.localStorage.setItem("token", res.data.token);
+        router.push("/home/sysconfig");
+        console.log(res.data.token);
+      });
     },
     getCaptchaImage() {
       api.login.captchaImage().then((res) => {

src/views/studySkill/index.vue

@@ -30,22 +30,38 @@
           </div>
           <div
             v-if="list[listIndex].isComplete && list[listIndex].isError"
-            class="inline-block pl15 pr15 mt15 "
+            class="inline-block pl15 pr15 mt15"
             style="background-color: rgba(255, 220, 217, 1)"
           >
             <img
               class="inline-block w42 h42"
               src="@/assets/img/studySkill/cry_express.png"
             />
-            <span v-if=" list[listIndex].questionType!==3" style="color: rgba(239, 54, 41, 1)" class="lh60">
-              正确答案是:{{switchAnswerBySelect(list[listIndex].answer,listIndex)}}</span
+            <span
+              v-if="list[listIndex].questionType !== 3"
+              style="color: rgba(239, 54, 41, 1)"
+              class="lh60"
             >
-            <span v-if=" list[listIndex].questionType===3" style="color: rgba(239, 54, 41, 1)" class="lh60">
-              正确答案是:{{switchAnswerBySelect(list[listIndex].answer.split('-'),listIndex)}}</span
+              正确答案是:{{
+                switchAnswerBySelect(list[listIndex].answer, listIndex)
+              }}</span
+            >
+            <span
+              v-if="list[listIndex].questionType === 3"
+              style="color: rgba(239, 54, 41, 1)"
+              class="lh60"
+            >
+              正确答案是:{{
+                switchAnswerBySelect(
+                  list[listIndex].answer.split("-"),
+                  listIndex
+                )
+              }}</span
             >
           </div>
           <div>
             <div
+              @click="playIssueAudio"
               class="mt30 w88 items-center bottom-button flex h40 justify-center"
             >
               <img
@@ -85,10 +101,19 @@
           <div @click="nextProblem()" class="w120 lh46 bottom-button lh46">
             下一题
           </div>
-          <div @click="()=>{
-            alertVisible = true
-            }" class="w120 lh46 bottom-button lh46">本题解析</div>
-          <div @click="playIssueAudio()" class="w120 lh46 bottom-button lh46">语音播报</div>
+          <div
+            @click="
+              () => {
+                alertVisible = true;
+              }
+            "
+            class="w120 lh46 bottom-button lh46"
+          >
+            本题解析
+          </div>
+          <div @click="playIssueAudio()" class="w120 lh46 bottom-button lh46">
+            语音播报
+          </div>
           <div class="w120 lh46 bottom-button lh46">不设为错题</div>
           <div class="w120 lh46 bottom-button lh46">交卷</div>
         </div>
@@ -111,7 +136,12 @@
             共 <span class="font-semibold">{{ list.length }}</span> 题
           </div>
           <div class="align-baseline">
-            <input class="" type="checkbox" />
+            <input
+              v-model="sysConfig.autoNext"
+              class=""
+              @input="changeSysConfig"
+              type="checkbox"
+            />
             <span>答对自动跳转到下一题</span>
           </div>
           <div>
@@ -132,14 +162,32 @@
           </div>
           <div class="flex items-center content-center">
             <div class="mr15">
-              <input class="" type="checkbox" /> <span>自动播放</span>
+              <input
+                class=""
+                v-model="sysConfig.autoRead"
+                type="checkbox"
+                @input="changeSysConfig"
+              />
+              <span>自动播放</span>
+            </div>
+            <div>
+              <input
+                class=""
+                v-model="sysConfig.autoRed"
+                type="checkbox"
+                @input="changeSysConfig"
+              />
+              <span>提示红字</span>
             </div>
-            <div><input class="" type="checkbox" /> <span>提示红字</span></div>
           </div>
         </div>
       </div>
     </div>
-    <mProblemAlert v-model:visible="alertVisible" :content="list[listIndex].explainJs" title="题目解析"></mProblemAlert>
+    <mProblemAlert
+      v-model:visible="alertVisible"
+      :content="list[listIndex].explainJs"
+      title="题目解析"
+    ></mProblemAlert>
   </div>
 </template>
 
@@ -149,22 +197,40 @@ import api from "@/api";
 import { openApi } from "@/api/open/type";
 import { useRoute } from "vue-router";
 import { useDriverExam } from "@/hooks/exam/driverExam";
-import mProblemAlert from '@/components/mProblemAlert/index.vue'
+import mProblemAlert from "@/components/mProblemAlert/index.vue";
+import { useStore } from "vuex";
 export default defineComponent({
+  name: "studySkill",
   setup() {
     let route = useRoute();
-
+    let store = useStore();
+    let sysConfig = ref({
+      autoRed: store.state.sysConfig.autoRed,
+      autoRead: store.state.sysConfig.autoRead,
+      autoNext: store.state.sysConfig.autoNext,
+    });
+    const changeSysConfig = (event: any) => {
+      store.commit("SET_SYSCONFIG", sysConfig.value);
+    };
     return {
-     alertVisible: ref(false),
+      sysConfig,
+      alertVisible: ref(false),
       dialogVisible: ref(false),
       ...useDriverExam(
         api.question.questionInfoQlist({
           subject: Number(route.query.subject),
-          classIssue: "1040",
+          classIssue: route.query.classIssue as string,
           classIssueName: "",
           isRand: "",
-        })
+        }),
+        {
+          autoAnswer: false,
+          countDown: false,
+          autoNext: false,
+          autoRead: false,
+        }
       ),
+      changeSysConfig,
     };
   },
   components: {