今日修改了做题部分的语音部分

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

@@ -0,0 +1,175 @@
+<template>
+  <van-overlay z-index="10" :show="show">
+    <div class="skills-box">
+      <div class="skills">
+        <image
+          class="skills-gif"
+          v-if="explainJqGif"
+          :src="explainJqGif"
+        ></image>
+        <div class="text">{{ explainJq }}</div>
+        <div class="btn">
+          <span
+            @click="
+              () => {
+                $emit('close');
+              }
+            "
+          >
+            关闭
+          </span>
+          <span
+            @click="
+              () => {
+                playexplainMp3();
+              }
+            "
+          >
+            语音重播
+          </span>
+        </div>
+      </div>
+    </div>
+  </van-overlay>
+</template>
+
+<script>
+import utils from "@/utils/index";
+export default {
+  data() {
+    return {};
+  },
+  methods: {
+    playexplainMp3() {
+      let audio = utils.wxUtils.getGlobAudio();
+      audio.stop();
+      console.log(this.explainMp3, "explainMp3");
+      audio.src = this.explainMp3;
+      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();
+      console.log(this.explainMp3);
+      if (newValue) {
+        audio.src = this.explainMp3;
+
+        audio.play();
+      } else {
+        audio.stop();
+      }
+    },
+  },
+  props: {
+    show: {
+      type: Boolean,
+      default: false,
+    },
+    explainJq: {
+      type: String,
+      default: "",
+    },
+    explainJqGif: {
+      type: String,
+      default: "",
+    },
+    explainMp3: {
+      type: String,
+      default:
+        "https://t1-1305573081.file.myqcloud.com/kt/explain_js_mp3/explainJS683.mp3",
+    },
+  },
+};
+</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;
+    .skills-gif {
+      width: 100%;
+    }
+    .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/m-do-topic.vue

@@ -388,12 +388,30 @@
       <span>读题+答案</span>
     </div> -->
       <div
-        @click="readQuestion(problemList[problemListIndex].issuemp3)"
+        @click="
+          readQuestionAndAnswer();
+          completeQuestion();
+        "
         class="function-item"
       >
-        <van-icon name="bullhorn-o" size="25px" />
+        <m-jp-icon type="a-dtda" size="25px" />
+        <span>读题+答案</span>
+      </div>
+      <div @click="readQuestion()" class="function-item">
+        <m-jp-icon type="duti" size="25px" />
         <span>读题</span>
       </div>
+      <div
+        @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>
@@ -407,6 +425,17 @@
       <span>下一题</span>
     </div> -->
     </view>
+    <explainJq
+      :show="explainJqVisible"
+      :explainJqGif="problemList[problemListIndex].explainGif"
+      :explainJq="problemList[problemListIndex].explainJq"
+      :explainMp3="problemList[problemListIndex].explainMp3"
+      @close="
+        () => {
+          explainJqVisible = false;
+        }
+      "
+    ></explainJq>
   </view>
 </template>
 
@@ -416,6 +445,8 @@ import mRadioGroup from "@/components/m-radio-group/m-radio-group.vue";
 import mCheckbox from "@/components/m-checkbox/m-checkbox.vue";
 import mCheckboxGroup from "@/components/m-checkbox-group/m-checkbox-group.vue";
 import api from "@/api/index";
+import utils from "@/utils/index";
+import explainJq from "./components/explainJq.vue";
 export default {
   data() {
     return {
@@ -487,6 +518,7 @@ export default {
         mtc: "摩托车",
         kc: "客车",
       },
+      explainJqVisible: false,
     };
   },
   watch: {
@@ -568,6 +600,18 @@ export default {
     },
   },
   methods: {
+    completeQuestion() {
+      this.problemList[this.problemListIndex].optsArr.forEach((item, index) => {
+        if (item.isAnswer) {
+          this.$set(
+            this.problemList[this.problemListIndex].optsArr[index],
+            "selected",
+            true
+          );
+        }
+      });
+      this.$set(this.problemList[this.problemListIndex], "isCompleted", true);
+    },
     collectTopics(e) {
       api.exam
         .studentQuestionCollection({
@@ -591,17 +635,33 @@ export default {
               "isCollect",
               false
             );
-              uni.showToast({
+            uni.showToast({
               title: "取消收藏",
-              icon:'fail'
+              icon: "fail",
             });
           }
         });
     },
-    readQuestion(e) {
+    readQuestionAndAnswer() {
+      let globalAudio = utils.wxUtils.getGlobAudio();
+
+      if (globalAudio) {
+        globalAudio.src = this.problemList[this.problemListIndex].issuemp3;
+        globalAudio.stop();
+        globalAudio.play();
+        globalAudio.onEnded(() => {
+          globalAudio.src = this.problemList[this.problemListIndex].answermp3;
+          globalAudio.stop();
+          globalAudio.play();
+          globalAudio.offEnded()
+        });
+      
+      }
+    },
+    readQuestion() {
       let globalAudio = utils.wxUtils.getGlobAudio();
       if (globalAudio) {
-        globalAudio.src = e;
+        globalAudio.src = this.problemList[this.problemListIndex].issuemp3;
         globalAudio.stop();
         globalAudio.play();
       }
@@ -786,6 +846,7 @@ export default {
     mRadioGroup,
     mCheckbox,
     mCheckboxGroup,
+    explainJq,
   },
 
   props: {
@@ -833,6 +894,7 @@ export default {
 }
 .problem-box {
   padding: 15rpx;
+  padding-bottom: 45px;
   background: #fff;
   /deep/ .van-checkbox {
     padding-bottom: 15rpx;
@@ -911,11 +973,12 @@ export default {
   display: flex;
   justify-content: space-around;
   flex-wrap: wrap;
-  padding: 15px;
+  padding: 8px;
   box-sizing: border-box;
+  border-top: 2rpx solid #d8d8d8;
   .function-item {
     margin-bottom: 20px;
-    width: 30%;
+    width: 20%;
     display: flex;
     flex-direction: column;
     align-items: center;

src/otherPages/exercise/index.vue

@@ -151,8 +151,14 @@
       </view>
     </tabbar>
     <!-- #endif -->
-
-    <van-overlay :show="selectProblemListVisible">
+    <van-overlay
+      @click-overlay="
+        () => {
+          selectProblemListVisible = false;
+        }
+      "
+      :show="selectProblemListVisible"
+    >
       <view class="select-problem">
         <view class="problem-index">
           <view class="problem-header">
@@ -178,20 +184,48 @@
             </view>
             <view class="problem-header-right">
               <van-icon size="18px" name="description" />
-              <view style="font-size: 14px;display:flex;align-items:center;"
+              <view style="font-size: 14px; display: flex; align-items: center"
                 >{{ problemListIndex + 1 }}/{{ problemListTotal }}</view
               >
             </view>
           </view>
           <view class="problem-body">
             <view class="problem-listBody">
-              <view class="problem-listItem" :key="index" v-for="(item,index) in problemList">
-                {{index+1}}
-
+              <view
+                class="problem-listItem"
+                :key="index"
+                v-for="(item, index) in problemList"
+                :class="{
+                  'problem-listItem_dui':
+                    item.userAnswer.length && item.userAnswer == item.answer,
+                  'problem-listItem_cuo':
+                    item.userAnswer.length && item.userAnswer !== item.answer,
+                }"
+              >
+                {{ index + 1 }}
               </view>
             </view>
-
-
+          </view>
+          <view class="problem-bottom">
+            <view
+              @click="
+                () => {
+                  selectProblemListVisible = false;
+                }
+              "
+              class="problem-bottom-sure"
+              >确定
+            </view>
+            <view
+              @click="
+                () => {
+                  selectProblemListVisible = false;
+                }
+              "
+              class="problem-bottom-close"
+            >
+              关闭</view
+            >
           </view>
         </view>
       </view>
@@ -666,6 +700,28 @@ export default {
     border-radius: 16rpx;
     padding-top: 50rpx;
   }
+  .problem-bottom {
+    width: 100%;
+    display: flex;
+    height: 80rpx;
+    .problem-bottom-sure {
+      width: 50%;
+      height: 100%;
+      border-right: 2rpx solid #d8d8d8;
+      border-top: 2rpx solid #d8d8d8;
+      text-align: center;
+      color: #498ef5;
+      line-height: 80rpx;
+    }
+    .problem-bottom-close {
+      width: 50%;
+      height: 100%;
+      color: red;
+      text-align: center;
+      border-top: 2rpx solid #d8d8d8;
+      line-height: 80rpx;
+    }
+  }
   .problem-header {
     display: flex;
     justify-content: space-between;
@@ -691,26 +747,33 @@ export default {
       align-content: center;
     }
   }
-  .problem-body{
-    padding:0rpx 8rpx;
+  .problem-body {
     height: 480rpx;
     padding-top: 30rpx;
-    .problem-listBody{
-      display: flex;
-      flex-wrap: wrap;
+    overflow-y: scroll;
 
-      .problem-listItem{
-        width: 105rpx;
-        height: 105rpx;
-        line-height: 105rpx;
+    .problem-listBody {
+      display: inline-block;
+      overflow: hidden;
+      .problem-listItem {
+        display: inline-block;
+        width: 99rpx;
+        height: 99rpx;
+        line-height: 100rpx;
         text-align: center;
         border-radius: 50%;
         border: 2rpx #d8d8d8 solid;
-
+        margin-bottom: 15rpx;
+        margin-left: 13rpx;
+        margin-right: 13rpx;
+      }
+      .problem-listItem_dui {
+        background: #01c18d;
+      }
+      .problem-listItem_cuo {
+        background: red;
       }
-
     }
-
   }
 }
 .tabbar-item {

src/pages/carVideo/components/userInfoHead.vue

@@ -26,7 +26,7 @@
         class="diamond"
         :src="diamond"
       ></image>
-      <text style="margin-left:15rpx;">vip会员</text>
+      <text v-if="isVip" style="margin-left: 15rpx">vip会员</text>
       <image
         @click="goBuyVip"
         v-if="!isVip"