做题新增三种模式

src/api/modules/exam.js

@@ -54,7 +54,7 @@ const exam = {
 	//查询模拟考试题库
 	studentQuestionInfoSelectTestQuestionInfo(params) {
 		return request({
-			url: "student/question/info/selectTestK14QuestionInfoList",
+			url: "https://jpcj-admin.zzxcx.net/jpcj-admin/open-api/question/info/selectTestK14QuestionInfoList",
 			method: 'get',
 			params
 		})

src/components/m-do-topic/components/explainJs.vue

@@ -0,0 +1,160 @@
+<template>
+  <van-overlay z-index="10" :show="show">
+    <div class="skills-box">
+      <div class="skills">
+        <div class="title">官方解释</div>
+        <div class="text">{{ explainJs }}</div>
+        <div class="btn">
+          <span
+            @click="
+              () => {
+                $emit('close');
+              }
+            "
+          >
+            关闭
+          </span>
+          <span
+            @click="
+              () => {
+                playExplainjsmp3();
+              }
+            "
+          >
+            语音重播
+          </span>
+        </div>
+      </div>
+    </div>
+  </van-overlay>
+</template>
+
+<script>
+import utils from "@/utils/index";
+export default {
+  data() {
+    return {};
+  },
+  methods: {
+    playExplainjsmp3() {
+      let audio = utils.wxUtils.getGlobAudio();
+      audio.stop();
+      audio.src = this.explainjsmp3;
+      audio.onCanplay(() => {
+        console.log("onCanplay");
+      });
+      audio.onPlay(() => {
+        console.log("onPlay");
+      });
+      audio.onError((res) => {
+        console.log(res);
+      });
+      //体验比较好
+      setTimeout(() => {
+        audio.play();
+      }, 1000);
+    },
+  },
+  watch: {
+    show(newValue, oldValue) {
+      let audio = utils.wxUtils.getGlobAudio();
+      if (newValue) {
+        audio.src = this.explainjsmp3;
+        audio.play();
+      } else {
+        audio.stop();
+      }
+    },
+  },
+  props: {
+    show: {
+      type: Boolean,
+      default: false,
+    },
+    explainJs: {
+      type: String,
+      default: "",
+    },
+    explainjsmp3: {
+      type: String,
+      default: "",
+    },
+  },
+};
+</script>
+
+<style lang="scss" scoped>
+.skills-box {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  height: 100%;
+  .skills {
+    width: 290px;
+    background: #ffffff;
+    box-shadow: 0px 0px 8px rgba(124, 129, 136, 0.16);
+    border-radius: 10px;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    padding: 20px 16px;
+    box-sizing: border-box;
+    .title {
+      font-size: 15px;
+      font-family: PingFang SC;
+      font-weight: bold;
+      line-height: 21px;
+      color: #0a1a33;
+    }
+    .img {
+      width: 258px;
+      height: 129px;
+      border: 1px solid #e8e8e8;
+      margin-top: 16px;
+    }
+    .divider {
+      margin-top: 20px;
+      color: #0a1a33;
+      background: #ffffff;
+    }
+    .text {
+      font-size: 13px;
+      font-family: PingFang SC;
+      font-weight: 400;
+      line-height: 19px;
+      color: #5c6066;
+      margin-top: 10px;
+    }
+    .btn {
+      width: 100%;
+      display: flex;
+      justify-content: space-between;
+      padding: 0 40px;
+      box-sizing: border-box;
+      margin-top: 20px;
+      span {
+        width: 76px;
+        height: 30px;
+        border-radius: 15px;
+        font-size: 13px;
+        display: flex;
+        justify-content: center;
+        align-items: center;
+        &:active {
+          background-color: #afaaaa;
+          filter: brightness(50%);
+        }
+        &:nth-of-type(1) {
+          border: 1px solid #707070;
+          color: #5c6066;
+        }
+        &:nth-of-type(2) {
+          background: #498ef5;
+          border: 1px solid #498ef5;
+          color: #ffffff;
+        }
+      }
+    }
+  }
+}
+</style>

src/components/m-do-topic/components/funList.vue

@@ -0,0 +1,171 @@
+<template>
+  <view class="function-list">
+    <div
+      v-if="midFunc.includes('collect')"
+      @click="
+        () => {
+          $emit('collect');
+        }
+      "
+      class="function-item"
+    >
+      <van-icon
+        v-if="!privateProblemListItem.isCollect"
+        name="star-o"
+        size="25px"
+      />
+      <van-icon
+        color="#ffde00ff"
+        v-if="privateProblemListItem.isCollect"
+        name="star"
+        size="25px"
+      />
+      <span>收藏</span>
+    </div>
+    <!-- <div class="function-item" @click="answerAudioPlay">
+      <m-icon type="a-dtda" size="25px" />
+      <span>读题+答案</span>
+    </div> -->
+    <div
+      v-if="midFunc.includes('readQuestionAndAnswer')"
+      @click="
+        () => {
+          $emit('readQuestionAndAnswer');
+        }
+      "
+      class="function-item"
+    >
+      <m-jp-icon type="a-dtda" size="25px" />
+      <span>读题+答案</span>
+    </div>
+    <div
+      v-if="midFunc.includes('readQuestion')"
+      @click="readQuestion()"
+      class="function-item"
+    >
+      <m-jp-icon type="duti" size="25px" />
+      <span>读题</span>
+    </div>
+    <div
+      v-if="midFunc.includes('skill')"
+      @click="
+        () => {
+          explainJqVisible = true;
+        }
+      "
+      class="function-item"
+    >
+      <m-jp-icon type="jqjj" size="25px" />
+      <span>技巧讲解</span>
+    </div>
+    <!-- <div class="function-item" @click="currentAnswerIndexBack">
+      <m-icon type="shangyiti" size="25px" />
+      <span>上一题</span>
+    </div>
+    <div class="function-item" @click="skillsShow = true">
+      <m-icon type="zongtishu" size="25px" />
+      <span>1/100</span>
+    </div>
+    <div class="function-item" @click="currentAnswerIndexGo">
+      <m-icon type="xiayiti" size="25px" />
+      <span>下一题</span>
+    </div> -->
+    <explainJq
+      :show="explainJqVisible"
+      :explainJqGif="problemListItem.explainGif"
+      :explainJq="problemListItem.explainJq"
+      :explainMp3="problemListItem.explainMp3"
+      @close="
+        () => {
+          explainJqVisible = false;
+        }
+      "
+    ></explainJq>
+  </view>
+</template>
+
+<script>
+import utils from "@/utils/index";
+import explainJq from "./explainJq.vue";
+export default {
+  data() {
+    return {
+      explainJqVisible: false,
+    };
+  },
+  methods: {
+    readQuestion() {
+      let globalAudio = utils.wxUtils.getGlobAudio();
+      if (globalAudio) {
+        globalAudio.src = this.problemListItem.issuemp3;
+        globalAudio.stop();
+        globalAudio.play();
+      }
+    },
+    readQuestionAndAnswer() {
+      let globalAudio = utils.wxUtils.getGlobAudio();
+      this.$emit("completeTopic");
+
+      if (globalAudio) {
+        globalAudio.src = this.problemListItem.issuemp3;
+        globalAudio.stop();
+        globalAudio.play();
+        globalAudio.onEnded(() => {
+          globalAudio.src = this.problemListItem.answermp3;
+          globalAudio.stop();
+          globalAudio.play();
+          globalAudio.offEnded();
+        });
+      }
+    },
+  },
+  computed: {
+    //private的
+    privateProblemListItem() {
+      return this.problemListItem;
+    },
+  },
+  components: {
+    explainJq,
+  },
+  props: {
+    problemListItem: {
+      type: Object,
+      default: () => {
+        return {};
+      },
+    },
+    midFunc: {
+      type: Array,
+      default: () => {
+        return [];
+      },
+    },
+  },
+};
+</script>
+
+<style lang="scss" scoped>
+.function-list {
+  width: 100%;
+  font-size: 13px;
+  display: flex;
+  justify-content: space-around;
+  flex-wrap: wrap;
+  padding: 8px;
+  box-sizing: border-box;
+  border-top: 2rpx solid #d8d8d8;
+  .function-item {
+    width: 20%;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    font-size: 13px;
+    font-weight: 400;
+    color: #8a9099;
+    span {
+      margin-top: 5px;
+    }
+  }
+}
+</style>

src/components/m-do-topic/components/tabbar.vue

@@ -0,0 +1,47 @@
+<template>
+  <view
+    class="box"
+    :style="{
+      height: height
+    }"
+  >
+    <slot></slot>
+  </view>
+</template>
+
+<script>
+export default {
+  data() {
+    return {};
+  },
+  methods: {
+    name() {},
+  },
+  props: {
+    height: {
+      type: String,
+      default: "0rpx",
+    },
+  },
+};
+</script>
+
+<style lang="scss" scoped>
+.box{
+    width: 100%;
+    display:flex;
+    justify-content: space-between;
+    overflow: scroll;
+    position: fixed;
+    bottom: 0;
+    font-size: 14px;
+    background: #fff;
+    padding:0 30rpx;
+    border-top: 2rpx solid #d8d8d8;
+    padding-top: 5rpx;
+
+
+}
+
+
+</style>

src/otherPages/exercise/index.vue

@@ -4,12 +4,14 @@
     <!-- <view style="text-align:center;">
       <van-count-down :time="time"></van-count-down>
     </view> -->
-    <view class="divider"></view>
+
     <m-do-topic
+      :bottomFunc="['previous', 'next', 'score','explain','selectCatalogue']"
+      :midFunc="['collect','readQuestion','readQuestionAndAnswer','skill']"
       :trueNum.sync="trueNum"
       :falseNum.sync="falseNum"
       :query="query"
-      :problemListIndex="problemListIndex"
+      :problemListIndex.sync="problemListIndex"
     ></m-do-topic>
     <!-- <view class="function-list">
       <div class="function-item">
@@ -24,133 +26,7 @@
         <span>读题</span>
       </div>
     </view> -->
-    <explainJs
-      @close="
-        () => {
-          explainJsVisible = false;
-        }
-      "
-      :explainJs="problemList[problemListIndex].explainJs"
-      :explainjsmp3="problemList[problemListIndex].explainjsmp3"
-      :show="explainJsVisible"
-    ></explainJs>
-    <!-- #ifdef MP-WEIXIN -->
-    <van-tabbar height="20px">
-      <van-tabbar-item @click="goBeforeTopics"
-        ><van-icon
-          slot="icon"
-          custom-style="transform: rotate(90deg);"
-          custom-class="last-subject"
-          name="down"
-          size="18px"
-        />上一题
-      </van-tabbar-item>
-      <van-tabbar-item>
-        <icon slot="icon" class="icon-box-img" type="success" size="18px"></icon
-        >{{ trueNum }}</van-tabbar-item
-      >
-      <van-tabbar-item
-        ><icon
-          slot="icon"
-          class="icon-box-img"
-          type="cancel"
-          size="18px"
-        ></icon>
-        {{ falseNum }}
-      </van-tabbar-item>
-      <van-tabbar-item
-        ><van-icon slot="icon" size="18px" name="description" />{{
-          problemListIndex + 1
-        }}/{{ problemListTotal }}
-      </van-tabbar-item>
-      <van-tabbar-item
-        @click="
-          () => {
-            explainJsVisible = true;
-          }
-        "
-        ><icon slot="icon" type="warn" size="18px" />解释
-      </van-tabbar-item>
-      <van-tabbar-item @click="goNextTopics"
-        ><van-icon
-          slot="icon"
-          custom-style="transform: rotate(-90deg);"
-          custom-class="last-subject"
-          name="down"
-          size="18px"
-        />下一题
-      </van-tabbar-item>
-    </van-tabbar>
-    <!-- #endif -->
-    <!-- #ifdef MP-TOUTIAO -->
-    <tabbar height="45px">
-      <view class="h-full tabbar-item">
-        <view @click="goBeforeTopics">
-          <van-icon
-            slot="icon"
-            custom-style="transform: rotate(90deg);"
-            custom-class="last-subject"
-            name="down"
-            size="18px"
-          />
-          <view style="width: 100%"> 上一题 </view>
-        </view>
-      </view>
-
-      <view class="h-full tabbar-item">
-        <view class="tabbar-item">
-          <icon
-            class="icon-box-img"
-            color="#06c05f"
-            type="success"
-            size="18px"
-          ></icon
-          ><view style="width: 100%; color: #06c05f">{{ trueNum }}</view>
-        </view>
-        <view style="margin-left: 15rpx" class="tabbar-item">
-          <icon class="icon-box-img" type="clear" size="18px"></icon>
-          <view style="width: 100%; color: red">{{ falseNum }}</view>
-        </view>
-      </view>
-      <view
-        @click="
-          () => {
-            selectProblemListVisible = true;
-          }
-        "
-        class="h-full tabbar-item"
-      >
-        <van-icon size="18px" name="description" /><view style="width: 100%"
-          >{{ problemListIndex + 1 }}/{{ problemListTotal }}</view
-        >
-      </view>
 
-      <view
-        @click="
-          () => {
-            explainJsVisible = true;
-          }
-        "
-        class="h-full tabbar-item"
-      >
-        <icon type="warn" size="18" /><view
-          style="width: 100%; text-align: center"
-          >解释</view
-        >
-      </view>
-
-      <view @click="goNextTopics" class="h-full tabbar-item">
-        <van-icon
-          slot="icon"
-          custom-style="transform: rotate(-90deg);"
-          custom-class="last-subject"
-          name="down"
-          size="18px"
-        />
-        <view style="width: 100%"> 下一题 </view>
-      </view>
-    </tabbar>
-    <!-- #endif -->
     <van-overlay
       @click-overlay="
         () => {

src/otherPages/mockExam/index.vue

@@ -4,13 +4,15 @@
     <view style="text-align: center">
       <van-count-down :time="time"></van-count-down>
     </view>
-    <view class="divider"></view>
     <m-do-topic
-      :hiddenFunction="true"
+      type="exam"
+      :bottomFunc="['previous', 'next', 'submitExam', 'catalogue']"
+      :midFunc="['collect', 'readQuestion', 'readQuestionAndAnswer']"
+      :hiddenMode="true"
       :trueNum.sync="trueNum"
       :falseNum.sync="falseNum"
       :query="query"
-      :problemListIndex="problemListIndex"
+      :problemListIndex.sync="problemListIndex"
     ></m-do-topic>
     <!-- #ifdef MP-WEIXIN -->
     <van-tabbar>
@@ -43,7 +45,7 @@
     </van-tabbar>
     <!-- #endif -->
     <!-- #ifdef MP-TOUTIAO -->
-    <tabbar height="35px">
+    <!-- <tabbar height="35px">
       <view @click="goBeforeTopics" class="flex-all-center h-full">
         <van-icon
           slot="icon"
@@ -72,7 +74,7 @@
           size="18px"
         />
       </view>
-    </tabbar>
+    </tabbar> -->
     <!-- #endif -->
   </view>
 </template>
@@ -255,7 +257,7 @@ export default {
       let that = this;
       let scorePerQuestion = 0;
       query.subject === "4" ? (scorePerQuestion = 2) : (scorePerQuestion = 1);
-      score = this.trueNum*scorePerQuestion
+      score = this.trueNum * scorePerQuestion;
       uni.showModal({
         title: "是否交卷",
         content: "交卷后不可再修改了",