修改新实用反馈问题

src/components/Adult/preview/AudioLine.vue

@@ -86,6 +86,7 @@ export default {
       audioAllTime: null, // 展示总时间
       duioCurrentTime: null, // 剩余时间
       count: 0,
+      loading: null,
     };
   },
   // 计算属性 类似于data概念
@@ -128,6 +129,12 @@ export default {
     let audioId = _this.audioId;
     _this.$refs[audioId].addEventListener("loadstart", function () {
       console.log("音频开始加载");
+      _this.loading = _this.$loading({
+        lock: true,
+        text: "Loading",
+        spinner: "el-icon-loading",
+        background: "rgba(0, 0, 0, 0.7)",
+      });
     });
     _this.$refs[audioId].addEventListener("play", function () {
       console.log("音频开始播放了");
@@ -205,6 +212,8 @@ export default {
       //setTimeout(() => {
       console.log("音频加载完成");
       _this.audio.loading = false;
+      _this.loading.close();
+
       //}, 10000);
     },
     // 点击 拖拽播放音频

src/components/Adult/preview/components/Practice.vue

@@ -34,7 +34,14 @@
                 :targetDiv="'pra' + item.con + index"
               />
             </div>
-            <div class="left-content-pra"></div>
+            <div class="left-content-pra">
+              <div>
+                <span v-if="item.pinyin">{{ item.pinyin.toLowerCase() }}</span>
+                <div style="margin-left: 4px" v-if="mp3Url">
+                  <Audio :mp3="mp3Url ? mp3Url : ''" :themeColor="themeColor" />
+                </div>
+              </div>
+            </div>
             <div class="footer">
               <div @click="collectFlag = !collectFlag" class="bg-box">
                 <template v-if="collectFlag">
@@ -213,13 +220,16 @@
 import Strockplayredline from "./Strockplayredline.vue";
 import Strockred from "./Strockred.vue";
 import Freewrite from "./Freewrite.vue";
+import Audio from "./AudioRed.vue";
+
 export default {
   components: {
     Strockplayredline,
     Strockred,
     Freewrite,
+    Audio,
   },
-  props: ["cur", "changePraShow", "themeColor", "currentTreeID"],
+  props: ["cur", "changePraShow", "themeColor", "currentTreeID", "mp3Url"],
   data() {
     return {
       //   learn_mode: "",
@@ -351,6 +361,18 @@ export default {
     width: 144px;
     .left-content-pra {
       height: 162px;
+      > div {
+        margin-top: 8px;
+        display: flex;
+        justify-content: center;
+        align-items: center;
+        > span {
+          font-family: "GB-PINYINOK-B";
+          color: #2c2c2c;
+          font-size: 20px;
+          line-height: 24px;
+        }
+      }
     }
   }
   .right-content {

src/components/Adult/preview/components/WordPhraseDetail.vue

@@ -70,12 +70,15 @@
           </div>
           <div class="wordInfor">
             <div class="yinpin">
-              <span class="pinyintext"> {{ data.pinyin }}</span>
+              <span class="pinyintext"> {{ data.pinyin.toLowerCase() }}</span>
               <template
                 v-if="data.mp3_list && data.mp3_list[0] && data.mp3_list[0].id"
               >
                 <Audio :mp3="data.mp3_list[0].id" :themeColor="themeColor" />
               </template>
+              <template v-else-if="data.mp3Url">
+                <Audio :mp3="data.mp3Url" :themeColor="themeColor" />
+              </template>
             </div>
             <p
               class="jieshu"
@@ -349,12 +352,35 @@ export default {
     },
     handleExample(list) {
       list = list.map((item, index) => {
-        let b = item.begin_position;
-        let e = item.end_position;
+        let wordIndex = null;
+        for (let i = 0; i < item.sentence.length; i++) {
+          if (item.sentence[i] == item.word) {
+            wordIndex = i;
+          }
+        }
+        // let b = item.begin_position;
+        // let e = item.end_position;
+        // let sent = item.sentence;
+        // let part1 = sent.substring(0, b);
+        // let part2 = sent.substring(b, e);
+        // let part3 = sent.substring(e);
         let sent = item.sentence;
-        let part1 = sent.substring(0, b);
-        let part2 = sent.substring(b, e);
-        let part3 = sent.substring(e);
+        let part1 = "";
+        let part2 = "";
+        let part3 = "";
+        if (wordIndex === 0) {
+          part1 = "";
+          part2 = sent.substring(0, 1);
+          part3 = sent.substring(1);
+        } else if (wordIndex === item.sentence.length - 1) {
+          part1 = sent.substring(0, wordIndex);
+          part2 = sent.substring(wordIndex);
+          part3 = "";
+        } else {
+          part1 = sent.substring(0, wordIndex);
+          part2 = sent.substring(wordIndex, wordIndex + 1);
+          part3 = sent.substring(wordIndex + 1);
+        }
         let res =
           part1 + '<span style="color:#DE4444;">' + part2 + "</span>" + part3;
         item.res = res;

src/components/Adult/preview/components/Wordcard.vue

@@ -11,7 +11,7 @@
       <i class="el-icon-close" @click="changeWordCard(false)"></i>
     </div>
     <div class="bwc-top" v-if="word.detail">
-      <span v-if="word.detail.pinyin">{{ word.detail.pinyin }}</span>
+      <span v-if="word.detail.pinyin">{{ word.detail.pinyin.toLowerCase() }}</span>
       <div style="margin-left: 4px" v-if="mp3Url">
         <Audio :mp3="mp3Url ? mp3Url : ''" :themeColor="themeColor" />
       </div>
@@ -139,6 +139,7 @@
         :cur="curData"
         :themeColor="themeColor"
         :currentTreeID="currentTreeID"
+        :mp3Url="mp3Url"
       />
     </div>
     <div class="practiceBox" v-if="isIntpShow">