更新答题逻辑

src/api/modules/test.ts

@@ -15,35 +15,14 @@ interface topicQuery {
  * @returns
  */
 export async function getTopicList(params: any) {
-  const getOpts = (type: Number) => {
-    switch (type) {
-      case 0:
-        return ["√", "×"];
-      case 1:
-        return ["A", "B", "C", "D"];
-      case 2:
-        return ["多选A", "多选B", "多选C", "多选D"];
-    }
-  };
-
-  const getAnswer = (type: Number) => {
-    switch (type) {
-      case 0:
-        return "√";
-      case 1:
-        return "A";
-      case 2:
-        return ["多选A", "多选B", "多选C"];
-    }
-  };
 
-  const getUserAnswer = (type: Number) => {
+  const getUserAnswer = (type: string) => {
     switch (type) {
-      case 0:
+      case "判断题":
         return null;
-      case 1:
+      case "单选题":
         return null;
-      case 2:
+      case "多选题":
         return [];
     }
   };
@@ -51,12 +30,12 @@ export async function getTopicList(params: any) {
   const getType = (answer: Array<string>) => {
     if (answer.length === 1) {
       if (["√", "×"].includes(answer[0])) {
-        return 0;
+        return "判断题";
       } else {
-        return 1;
+        return "单选题";
       }
     } else {
-      return 2;
+      return "多选题";
     }
   };
 
@@ -81,7 +60,7 @@ export async function getTopicList(params: any) {
     }),
   };
 
-  console.log(res.data);
+  console.log(data2);
 
   return data2;
 }

src/main.ts

@@ -8,7 +8,7 @@ import './utils/rem'
 import components from './components'
 
 import VConsole from "vconsole";
-// new VConsole()
+new VConsole()
 
 const app = createApp(App);
 app.use(store);

src/views/exercise/hooks.ts

@@ -1,4 +1,12 @@
-import { ref, watch, onBeforeMount, Ref, computed, nextTick } from "vue";
+import {
+  ref,
+  watch,
+  onBeforeMount,
+  Ref,
+  computed,
+  nextTick,
+  ComputedRef,
+} from "vue";
 import * as API from "@/api";
 import { Howl, Howler } from "howler";
 import { useRoute } from "vue-router";
@@ -39,7 +47,7 @@ export function useTopicMode() {
 }
 
 //语音设置
-export function useAudioSet(currentAnswerIndex: Ref<number>) {
+export function useAudioSet(currentSubject: ComputedRef<any>) {
   const aotuPlayFlag = ref(false);
 
   let sound: Howl;
@@ -68,9 +76,28 @@ export function useAudioSet(currentAnswerIndex: Ref<number>) {
   };
 
   /**
-   * 自动读题
+   * 读题
    */
-  const issueAudioPlay = () => {};
+  const subjectAudioPlay = (
+    type: "读题" | "读官方解释" | "读技巧解释" | "读题+答案"
+  ) => {
+    switch (type) {
+      case "读题":
+        audioPlay(currentSubject.value.issuemp3);
+        break;
+      case "读官方解释":
+        audioPlay(currentSubject.value.explainjsmp3);
+        break;
+      case "读技巧解释":
+        audioPlay(currentSubject.value.explainMp3);
+        break;
+      case "读题+答案":
+        audioPlay([currentSubject.value.issuemp3, currentSubject.value.answermp3]);
+        break;
+      default:
+        break;
+    }
+  };
 
   /**
    * 停止播放
@@ -82,22 +109,18 @@ export function useAudioSet(currentAnswerIndex: Ref<number>) {
   //音频模块end
   const aotuPlaySet = () => {
     aotuPlayFlag.value = !aotuPlayFlag.value;
-    if (aotuPlayFlag.value) issueAudioPlay();
-    if (!aotuPlayFlag.value) audioPause();
+    aotuPlayFlag.value ? subjectAudioPlay("读题") : audioPause();
   };
 
-  onBeforeMount(() => {
-    watch(currentAnswerIndex, () => {
-      if (aotuPlayFlag.value) issueAudioPlay(); //自动读题
-    });
+  //自动读题
+  watch(currentSubject, () => {
+    if (aotuPlayFlag.value) subjectAudioPlay("读题"); //自动读题
   });
 
   return {
     aotuPlayFlag,
-    issueAudioPlay,
-    audioPause,
     aotuPlaySet,
-    audioPlay,
+    subjectAudioPlay
   };
 }
 
@@ -105,12 +128,13 @@ const useSubjectList = () => {
   const subjectList = ref<any[]>([]); //题目列表
   const subjectTotal = ref(0); //题目总数
   const pageNum = ref(1); //当前请求页码
+  const pageSize = ref(100); //当前请求每页数据
   const query = useRoute().query; //路由query参数
   onBeforeMount(async () => {
     const res = await API.getTopicList({
       ...query,
       pageNum: pageNum.value,
-      pageSize: 10,
+      pageSize: pageSize.value,
     });
     subjectList.value = res.list;
     subjectTotal.value = res.total;
@@ -122,7 +146,7 @@ const useSubjectList = () => {
     const res = await API.getTopicList({
       ...query,
       pageNum: pageNum.value,
-      pageSize: 10,
+      pageSize: pageSize.value,
     });
     subjectList.value = subjectList.value.concat(res.list);
   };
@@ -140,62 +164,17 @@ const useSubjectList = () => {
   };
 };
 
-export const useSubjectShowLogic = () => {
+const useSubjectCheck = (
+  currentSubject: ComputedRef<any>,
+  nextSubject: () => Promise<void>
+) => {
   const trueNum = ref(0); //正确数量
   const falseNum = ref(0); //错误数量
   const isJumpNext = ref(false); //答对跳转下一题
-  const {
-    subjectList,
-    subjectTotal,
-    loadNewSubject,
-    currentSubject,
-    currentSubjectIndex,
-  } = useSubjectList(); //获取题目列表
 
-  const nextBtnState = ref(true); //下一题数据请求锁
-  /**
-   * 展示下一题
-   */
-  const nextSubject = async () => {
-    if (currentSubjectIndex.value < subjectList.value.length - 1) {
-      currentSubjectIndex.value++;
-    } else {
-      if (nextBtnState.value) {
-        //禁用下一题按钮
-        nextBtnState.value = false;
-        //题目数量不足加载数据
-        await loadNewSubject();
-        //启用按钮
-        nextBtnState.value = true;
-        nextSubject()
-      }
-    }
-  };
-  /**
-   * 展示上一题
-   */
-  const lastSubject = () => {
-    if (currentSubjectIndex.value > 0) {
-      currentSubjectIndex.value--;
-    }
-  };
   /**
-   * 题目类型判断
-   * @param type
-   * @returns
+   * 选择答案后进行校验
    */
-  const topicType = (type: Number) => {
-    switch (type) {
-      case 0:
-        return "判断题";
-      case 1:
-        return "单选题";
-      case 2:
-        return "多选题";
-    }
-  };
-
-  //选择答案后
   const userAnswerChange = () => {
     currentSubject.value.optsBack = currentSubject.value.opts.map(
       (val: String) => {
@@ -230,6 +209,56 @@ export const useSubjectShowLogic = () => {
     }
   };
 
+  return {
+    trueNum,
+    falseNum,
+    isJumpNext,
+    userAnswerChange,
+  };
+};
+
+export const useSubjectShowLogic = () => {
+  const {
+    subjectList,
+    subjectTotal,
+    loadNewSubject,
+    currentSubject,
+    currentSubjectIndex,
+  } = useSubjectList(); //获取题目列表
+
+  const nextBtnState = ref(true); //下一题数据请求锁
+  /**
+   * 展示下一题
+   */
+  const nextSubject = async () => {
+    if (currentSubjectIndex.value < subjectList.value.length - 1) {
+      currentSubjectIndex.value++;
+    } else {
+      if (nextBtnState.value) {
+        //禁用下一题按钮
+        nextBtnState.value = false;
+        //题目数量不足加载数据
+        await loadNewSubject();
+        //启用按钮
+        nextBtnState.value = true;
+        nextSubject();
+      }
+    }
+  };
+  /**
+   * 展示上一题
+   */
+  const lastSubject = () => {
+    if (currentSubjectIndex.value > 0) {
+      currentSubjectIndex.value--;
+    }
+  };
+
+  const { trueNum, falseNum, isJumpNext, userAnswerChange } = useSubjectCheck(
+    currentSubject,
+    nextSubject
+  );
+
   return {
     currentSubject,
     currentSubjectIndex,
@@ -240,6 +269,5 @@ export const useSubjectShowLogic = () => {
     falseNum,
     isJumpNext,
     userAnswerChange,
-    topicType,
   };
 };

src/views/exercise/index.vue

@@ -35,9 +35,17 @@
   <div class="problem-box" v-else>
     <!-- 题目内容 -->
     <div class="problem">
-      <span class="type">{{ topicType(currentSubject.type) }}</span>
+      <span class="type">{{ currentSubject.type }}</span>
       <span class="text">{{ currentSubject.explain }}</span>
-      <img v-if="currentSubject.image" :src="currentSubject.image" class="img" />
+      <van-image
+        v-if="currentSubject.image"
+        :src="currentSubject.image"
+        class="img"
+      >
+        <template v-slot:loading>
+          <van-loading type="spinner" size="20" />
+        </template>
+      </van-image>
     </div>
     <!-- 背题模式展示 -->
     <div v-if="typeParams.answerShow">
@@ -68,7 +76,7 @@
       <!-- 单选 -->
       <van-radio-group
         v-model="currentSubject.userAnswer"
-        v-if="currentSubject.type < 2"
+        v-if="currentSubject.type != '多选题'"
         @change="userAnswerChange"
         icon-size="35px"
       >
@@ -87,7 +95,10 @@
       </van-radio-group>
       <!-- 多选 -->
       <div v-else>
-        <van-checkbox-group v-model="currentSubject.userAnswer" icon-size="35px">
+        <van-checkbox-group
+          v-model="currentSubject.userAnswer"
+          icon-size="35px"
+        >
           <van-checkbox
             v-for="(item, index) in currentSubject.opts"
             :key="Number(index)"
@@ -161,14 +172,11 @@
       <m-icon type="shoucanghui" size="25px" />
       <span>收藏</span>
     </div>
-    <div
-      class="function-item"
-      @click="audioPlay([currentSubject.issuemp3, currentSubject.answermp3])"
-    >
+    <div class="function-item" @click="subjectAudioPlay('读题+答案')">
       <m-icon type="a-dtda" size="25px" />
       <span>读题+答案</span>
     </div>
-    <div class="function-item" @click="audioPlay(currentSubject.issuemp3)">
+    <div class="function-item" @click="subjectAudioPlay('读题')">
       <m-icon type="duti" size="25px" />
       <span>读题</span>
     </div>
@@ -188,7 +196,7 @@
         <div class="text">{{ currentSubject.explainJq }}</div>
         <div class="btn">
           <span @click="skillsShow = false">关闭</span>
-          <span @click="audioPlay(currentSubject.explainMp3)">语音重播</span>
+          <span @click="subjectAudioPlay('读技巧解释')">语音重播</span>
         </div>
       </div>
     </div>
@@ -204,7 +212,7 @@
         </div>
         <div class="btn">
           <span @click="officialShow = false">关闭</span>
-          <span @click="audioPlay(currentSubject.explainjsmp3)">语音重播</span>
+          <span @click="subjectAudioPlay('读官方解释')">语音重播</span>
         </div>
       </div>
     </div>
@@ -246,7 +254,7 @@
       </template>
     </van-tabbar-item>
     <van-tabbar-item
-      >{{ currentSubjectIndex+1 }}/{{ subjectTotal }}
+      >{{ currentSubjectIndex + 1 }}/{{ subjectTotal }}
       <template #icon>
         <m-icon type="zongtishu" />
       </template>
@@ -268,13 +276,9 @@
 </template>
 
 <script lang="ts" setup>
-import {  useRouter } from "vue-router";
+import { useRouter } from "vue-router";
 import { ref } from "vue";
-import {
-  useTopicMode,
-  useAudioSet,
-  useSubjectShowLogic,
-} from "./hooks";
+import { useTopicMode, useAudioSet, useSubjectShowLogic } from "./hooks";
 const router = useRouter();
 const onClickLeft = () => {
   router.back();
@@ -290,7 +294,7 @@ const officialShow = ref(false); //显示官方解释
 const setShow = ref(false); //显示设置栏
 const isSoundEffect = ref(true); //答题音效
 
-
+//题目展示逻辑
 const {
   currentSubject,
   currentSubjectIndex,
@@ -301,12 +305,11 @@ const {
   falseNum,
   isJumpNext,
   userAnswerChange,
-  topicType,
 } = useSubjectShowLogic();
 
 //音频模块
-const { aotuPlayFlag, audioPlay, audioPause, aotuPlaySet, issueAudioPlay } =
-  useAudioSet(currentSubjectIndex);
+const { aotuPlayFlag, subjectAudioPlay, aotuPlaySet } =
+  useAudioSet(currentSubject);
 </script>
 
 <style lang="scss" scoped>