三力测试的学习页面添加

src/hooks/exam/threeExam.ts

@@ -370,6 +370,16 @@ export const useThreeExam = (requestFn: Promise<threeApi.threeForceList>, config
         return listIndex.value + 1
     })
     const countDown = ref('00:45:00')
+    // const issueAutoRead = () => {
+    //     let redIssue = list.value[listIndex.value].question
+    //     if (store.state.sysConfig.autoRed) {
+    //       redIssue = redIssue.replace(list.value[listIndex.value].titlekeyword, '<span class="text-red-500">' + list.value[listIndex.value].titlekeyword + '</span>')
+
+    //     }
+    //     return redIssue
+
+
+    //   }
     const setPageNumToListIndex = (page: string | number) => {
         page = Number(page)
         listIndex.value = page - 1
@@ -463,9 +473,35 @@ export const useThreeExam = (requestFn: Promise<threeApi.threeForceList>, config
         }
         return name;
     };
-    const switchIndexBySelect = (index: number) => {
+    const switchIndexBySelect = (index: number | string) => {
         let name = "";
-        switch (index) {
+        const i = Number(index)
+        switch (i) {
+            case 0:
+                name = "A";
+                break;
+            case 1:
+                name = "B";
+                break;
+            case 2:
+                name = "C";
+                break;
+            case 3:
+                name = "D";
+                break;
+            case 4:
+                name = "E";
+                break;
+            case 5:
+                name = "F";
+                break;
+        }
+        return name;
+    };
+    const switchPageNumBySelect = (index: number | string) => {
+        let name = "";
+        const i = Number(index)-1
+        switch (i) {
             case 0:
                 name = "A";
                 break;
@@ -564,7 +600,7 @@ export const useThreeExam = (requestFn: Promise<threeApi.threeForceList>, config
             res.rows.forEach(item => {
                 item.userAnswer = ""
             })
-            window.sessionStorage.setItem("threeExam_current_list",JSON.stringify(res.rows));
+            window.sessionStorage.setItem("threeExam_current_list", JSON.stringify(res.rows));
             list.value = res.rows;
             message.destroy()
         }).catch(err => {
@@ -606,6 +642,7 @@ export const useThreeExam = (requestFn: Promise<threeApi.threeForceList>, config
         switchAnswerBySelect,
         switchIndexBySelect,
         setPageNumToListIndex,
+        switchPageNumBySelect
 
 
 

src/router/index.ts

@@ -26,6 +26,10 @@ const routes: Array<RouteRecordRaw> = [
     path: '/threeExam',
     component: () => import('../views/threeExam/index.vue')
   },
+  {
+    path: '/threeStudyExam',
+    component: () => import('../views/threeStudyExam/index.vue')
+  },
   {
     path: '/examInstructions',
     component: () => import('../views/examInstructions/index.vue')

src/views/home/threeExam/index.vue

@@ -6,7 +6,12 @@
         <span class="font20 font-bold mr15">练习技巧</span>
 
         <div class="flex">
-          <div @click="goThreeExam" class="lh34 ml15 select-border1 round4 pr15 pl15">练习</div>
+          <div
+            @click="goThreeStudyExam"
+            class="lh34 ml15 select-border1 round4 pr15 pl15"
+          >
+            练习
+          </div>
         </div>
         <div class="lh34 ml15 select-border1 round4 pr15 pl15">错误回顾</div>
       </div>
@@ -15,7 +20,12 @@
         <span class="font20 font-bold mr15">仿真模拟考试</span>
 
         <div class="flex">
-          <div @click="goThreeExam" class="lh34 ml15 select-border1 round4 pr15 pl15">考试</div>
+          <div
+            @click="goThreeExam"
+            class="lh34 ml15 select-border1 round4 pr15 pl15"
+          >
+            考试
+          </div>
         </div>
         <div class="lh34 ml15 select-border1 round4 pr15 pl15">错误回顾</div>
       </div>
@@ -34,16 +44,21 @@ import { defineComponent } from "vue";
 
 export default defineComponent({
   setup() {
-    return {
-
-    };
+    return {};
   },
   methods: {
     goThreeExam() {
       this.$router.push({
         path: "/threeExam",
         query: {
-         
+          ...this.$route.query,
+        },
+      });
+    },
+    goThreeStudyExam() {
+      this.$router.push({
+        path: "/threeStudyExam",
+        query: {
           ...this.$route.query,
         },
       });

src/views/threeStudyExam/index.vue

@@ -0,0 +1,419 @@
+<template>
+  <div class="bg-gray w-full min-h-screen">
+    <div class="pt30 pr30 pl30 pb30 w-full">
+      <div class="w-full gray-border flex flex-wrap">
+        <div class="pt30 pl30 text-left font26 pb50 bg-white flex-1">
+          <span
+            >{{ listIndex + 1 }}.<span v-html="list[listIndex].question"></span
+          ></span>
+          <div v-if="list[listIndex].type !== 1" class="mt30 text-left pl20">
+            <div class="" v-if="list[listIndex]['an1']">
+              A.&nbsp;&nbsp;{{ list[listIndex]["an1"] }}
+            </div>
+            <div class="" v-if="list[listIndex]['an2']">
+              B.&nbsp;&nbsp;{{ list[listIndex]["an2"] }}
+            </div>
+            <div class="" v-if="list[listIndex]['an3']">
+              C.&nbsp;&nbsp;{{ list[listIndex]["an3"] }}
+            </div>
+            <div class="" v-if="list[listIndex]['an4']">
+              D.&nbsp;&nbsp;{{ list[listIndex]["an4"] }}
+            </div>
+          </div>
+
+          <div
+            v-if="list[listIndex].isComplete && !list[listIndex].isError"
+            class="inline-block pl15 pr5 mt15"
+            style="background-color: #d9ffeb"
+          >
+            <img
+              class="inline-block w42 h42"
+              src="@/assets/img/studySkill/smile_express.png"
+            />
+            <span style="color: #21a65f" class="lh60"> 恭喜！回答正确！</span>
+          </div>
+          <div
+            v-if="list[listIndex].isComplete && list[listIndex].isError"
+            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].type !== 3"
+              style="color: rgba(239, 54, 41, 1)"
+              class="lh60"
+            >
+              正确答案是:{{
+                switchPageNumBySelect(list[listIndex].answertrue)
+              }}</span
+            >
+           
+          </div>
+          <div>
+            <div
+              @click="playIssueAudio"
+              class="mt30 w88 items-center bottom-button flex h40 justify-center"
+            >
+              <img
+                class="w18 h18 inline-block mr10"
+                src="@/assets/img/studySkill/voice_icon.png"
+              />
+              <span class="font16">读题</span>
+            </div>
+          </div>
+          <div class="flex cursor-pointer mt20">
+            <div
+              v-if="list[listIndex]['an1']"
+              @click="
+                list[listIndex].isComplete
+                  ? ''
+                  : setUserAnswerAndRes(list[listIndex]['an1'])
+              "
+              class="w46 lh46 h46 answer-select font20 font-bold mr15 flex-grow-0 bottom-button"
+            >
+              <span v-if="list[listIndex].type == 1">{{ "√" }}</span>
+              <span v-if="list[listIndex].type !== 1">{{
+                switchIndexBySelect(0)
+              }}</span>
+            </div>
+
+            <div
+              v-if="list[listIndex]['an2']"
+              @click="
+                list[listIndex].isComplete
+                  ? ''
+                  : setUserAnswerAndRes(list[listIndex]['an2'])
+              "
+              class="w46 lh46 h46 answer-select font20 font-bold mr15 flex-grow-0 bottom-button"
+            >
+              <span v-if="list[listIndex].type == 1">{{ "×" }}</span>
+              <span v-if="list[listIndex].type !== 1">{{
+                switchIndexBySelect(1)
+              }}</span>
+            </div>
+            <div
+              v-if="list[listIndex]['an3']"
+              @click="
+                list[listIndex].isComplete
+                  ? ''
+                  : setUserAnswerAndRes(list[listIndex]['an3'])
+              "
+              class="w46 lh46 h46 answer-select font20 font-bold mr15 flex-grow-0 bottom-button"
+            >
+              <span v-if="list[listIndex].type == 1">{{ "×" }}</span>
+              <span v-if="list[listIndex].type !== 1">{{
+                switchIndexBySelect(2)
+              }}</span>
+            </div>
+
+            <div
+              v-if="list[listIndex]['an4']"
+              @click="
+                list[listIndex].isComplete
+                  ? ''
+                  : setUserAnswerAndRes(list[listIndex]['an4'])
+              "
+              class="w46 lh46 h46 answer-select font20 font-bold mr15 flex-grow-0 bottom-button"
+            >
+              <span v-if="list[listIndex].type == 1">{{ "×" }}</span>
+              <span v-if="list[listIndex].type !== 1">{{
+                switchIndexBySelect(3)
+              }}</span>
+            </div>
+          </div>
+          <div v-if="list[listIndex].questionType === 1" class="flex mt15">
+            <div
+              @click="setUserAnswerAndRes(item)"
+              v-for="(item, index) in list[listIndex].optsArr"
+              :key="index"
+              class="w57 lh46 bottom-button mr15"
+            >
+              {{ item }}
+            </div>
+          </div>
+          <div v-if="list[listIndex].questionType !== 1" class="flex mt15">
+            <div
+              @click="setUserAnswerAndRes(item)"
+              v-for="(item, index) in list[listIndex].optsArr"
+              :key="index"
+              class="w57 lh46 bottom-button mr15"
+            >
+              {{ switchIndexBySelect(index) }}
+            </div>
+          </div>
+        </div>
+        <div class="w430 pr30 flex items-center bg-white">
+          <img
+            class="w400"
+            v-if="isImageUrl(list[listIndex].mediaUrl)"
+            :src="list[listIndex].mediaUrl"
+          />
+          <video
+            class="w400"
+            autoplay
+            loop
+            v-if="isVideoUrl(list[listIndex].mediaUrl)"
+            :src="list[listIndex].mediaUrl"
+          ></video>
+        </div>
+      </div>
+      <div class="w-full pt30">
+        <div class="w1200 flex justify-between mr-auto ml-auto">
+          <div
+            @click="preProblem()"
+            @keydown.up="preProblem()"
+            class="w120 lh46 bottom-button lh46"
+          >
+            上一题
+          </div>
+          <div
+            @click="nextProblem()"
+            @keydown.down="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 class="w120 lh46 bottom-button lh46">不设为错题</div>
+          <div
+            @click="
+              () => {
+                dialogVisible = true;
+              }
+            "
+            class="w120 lh46 bottom-button lh46"
+          >
+            交卷
+          </div>
+        </div>
+      </div>
+      <div class="w-full mt20">
+        <div
+          class="flex w1200 mr-auto ml-auto h30 items-center content-center justify-around"
+        >
+          <div class="flex items-center">
+            <div class="pr2 pl2">转到</div>
+            <input
+              class="outline-none input-border w35 h30 text-center"
+              type="text"
+              :value="listPageNum"
+            />
+            <div class="pr2 pl2">题</div>
+          </div>
+
+          <div>
+            共 <span class="font-semibold">{{ list.length }}</span> 题
+          </div>
+          <div class="align-baseline">
+            <input
+              v-model="sysConfig.autoNext"
+              class=""
+              @change="changeSysConfig"
+              type="checkbox"
+            />
+            <span>答对自动跳转到下一题</span>
+          </div>
+          <div>
+            <div class="mr15 inline-block tracking5">
+              答对<span style="color: #21a65f">{{ trueNum }}</span
+              >题
+            </div>
+            <div class="inline-block tracking5">
+              答错<span style="color: #ef3629">{{ falseNum }}</span
+              >题
+            </div>
+          </div>
+          <div class=""><span class="text-black font16">正确率100%</span></div>
+          <div class="">
+            <span class="text-black font16"
+              >进度{{
+                fixedNumber(((trueNum + falseNum) * 100) / list.length, 2)
+              }}%</span
+            >
+          </div>
+          <div class="flex items-center content-center">
+            <!-- <div class="mr15">
+              <input
+                class=""
+                v-model="sysConfig.autoRead"
+                type="checkbox"
+                @change="changeSysConfig"
+              />
+              <span>自动播放</span>
+            </div> -->
+            <!-- <div>
+              <input
+                class=""
+                v-model="sysConfig.autoRed"
+                type="checkbox"
+                @change="changeSysConfig"
+              />
+              <span>提示红字</span>
+            </div> -->
+          </div>
+        </div>
+      </div>
+    </div>
+    <mProblemAlert
+      v-model:visible="alertVisible"
+      :content="list[listIndex].explainJs"
+      title="题目解析"
+    ></mProblemAlert>
+    <mProblemDialog
+      v-model:visible="dialogVisible"
+      title="提示"
+      content="是否真的要交卷（按确定键交卷，按取消键继续答题）"
+    ></mProblemDialog>
+  </div>
+</template>
+
+<script lang="ts">
+import { defineComponent, ref } from "vue";
+import api from "@/api";
+import { useRoute } from "vue-router";
+import { useDriverExam } from "@/hooks/exam/driverExam";
+import mProblemAlert from "@/components/mProblemAlert/index.vue";
+import mProblemDialog from "@/components/mProblemDialog/index.vue";
+import { useStore } from "vuex";
+import { message } from "ant-design-vue";
+import { useThreeExam } from "@/hooks/exam/threeExam";
+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) => {
+      console.log(sysConfig.value);
+      store.commit("SET_SYSCONFIG", sysConfig.value);
+    };
+    const fixedNumber = (decimal: number, digit: number) => {
+      return decimal.toFixed(digit);
+    };
+    const isImageUrl = (url: string) => {
+      var reg = /\.(png|jpg|gif|jpeg|webp)$/;
+      return reg.test(url);
+    };
+    const isVideoUrl = (url: string) => {
+      var reg = /\.(mp4|rmvb|3gp|flv|avi)$/;
+      return reg.test(url);
+    };
+
+    return {
+      sysConfig,
+      alertVisible: ref(false),
+      dialogVisible: ref(false),
+      ...useThreeExam(api.three.threeForceList(), {
+        autoAnswer: false,
+        countDown: false,
+      }),
+      changeSysConfig,
+      fixedNumber,
+      isImageUrl,
+      isVideoUrl,
+    };
+  },
+  components: {
+    mProblemAlert,
+    mProblemDialog,
+  },
+});
+</script>
+
+<style scoped>
+.bottom-button {
+  text-align: center;
+  border: 1px solid #f9de5b;
+  cursor: pointer;
+}
+input[type="checkbox"] {
+  margin-right: 5px;
+
+  cursor: pointer;
+
+  font-size: 14px;
+
+  width: 15px;
+
+  height: 12px;
+
+  position: relative;
+}
+
+input[type="checkbox"]:after {
+  position: absolute;
+
+  width: 16px;
+
+  height: 16px;
+
+  top: 0;
+  left: 0px;
+
+  content: " ";
+
+  background-color: #f9de5b;
+
+  color: #fff;
+
+  display: inline-block;
+
+  visibility: visible;
+
+  border-radius: 3px;
+}
+
+input[type="checkbox"]:checked:after {
+  width: 16px;
+  height: 16px;
+  background-size: 100%;
+  background-image: url("./../../assets/img/login/checked_icon.png");
+}
+.input-border {
+  border: 1px solid #707070;
+}
+.bg-gray {
+  background: #f5f5f5;
+}
+.gray-border {
+  border: 1px solid #d8d8d8;
+}
+.bg-primary-yellow {
+  background: #f9de5b;
+}
+.bottom-button {
+  text-align: center;
+  border: 1px solid #f9de5b;
+  cursor: pointer;
+}
+.bottom-button:focus {
+  background: #f9de5b;
+  border: 1px solid #f9de5b;
+  outline: none;
+}
+.bottom-button:hover {
+  background: #fff7cc;
+}
+.w1200 {
+  width: 1200px;
+}
+</style>