修改句子朗读+写的打点 及渲染的样式

src/components/Adult/common/SentenceModule.vue

@@ -53,7 +53,7 @@
         @blur="onBlur(curQueItem, 'con')"
       ></el-input>
     </div>
-    <div class="adult-book-input-item" v-if="type=='recordHZ_inputPY_chs'">
+    <div class="adult-book-input-item" v-if="type == 'recordHZ_inputPY_chs'">
       <span class="adult-book-lable"></span>
       <span v-if="curQue.wordTime.length > 0" class="lrc">
         <el-input v-model="curQue.wordTime[index].bg" size="small" />

src/components/Adult/inputModules/Sentence.vue

@@ -69,10 +69,12 @@
       </div>
       <div
         class="adult-book-input-item"
-        v-if="type == 'sentence_listen_read_chs'"
+        v-if="
+          type == 'sentence_listen_read_chs' || type == 'recordHZ_inputPY_chs'
+        "
       >
         <span class="adult-book-lable">句子类型</span>
-        <el-radio-group v-model="curQue.sentenceType">
+        <el-radio-group v-model="curQue.sentenceType" @change="forupdata">
           <el-radio label="chinese">中文</el-radio>
           <el-radio label="pinyin">拼音</el-radio>
         </el-radio-group>
@@ -141,6 +143,8 @@ export default {
         lrc_list: [],
         wordTime: [],
         taskId: "",
+        sentenceType: "chinese",
+
         option: [
           {
             number: "",
@@ -224,11 +228,21 @@ export default {
   watch: {},
   //方法集合
   methods: {
+    forupdata() {
+      this.$forceUpdate();
+    },
     createWordTime() {
       this.curQue.detail = [];
-      this.curQue.option.forEach((item) => {
-        this.curQue.detail.push(item.detail);
-      });
+      if (this.type == "recordHZ_inputPY_chs") {
+        this.curQue.option.forEach((item) => {
+          this.curQue.detail.push(item);
+        });
+      } else {
+        this.curQue.option.forEach((item) => {
+          this.curQue.detail.push(item.detail);
+        });
+      }
+
       if (this.curQue.taskId) {
         let verseList = [];
         let numberArr = [];
@@ -236,9 +250,15 @@ export default {
           numberArr.push(this.numberToChinese(i + 1));
         });
         for (let i = 0; i < this.curQue.detail.length; i++) {
-          verseList = verseList.concat(
-            `${numberArr[i]} ` + this.curQue.detail[i].sentence
-          );
+          if (this.type == "recordHZ_inputPY_chs") {
+            verseList = verseList.concat(
+              `${numberArr[i]} ` + this.curQue.detail[i].con
+            );
+          } else {
+            verseList = verseList.concat(
+              `${numberArr[i]} ` + this.curQue.detail[i].sentence
+            );
+          }
         }
         if (verseList.length > 0) {
           this.isWordTime = true;
@@ -495,6 +515,14 @@ export default {
       this.curQue.option.forEach((item) => {
         item.answer = `${item.answer}`;
       });
+      if (this.type == "recordHZ_inputPY_chs") {
+        if (!this.curQue.lrc_list) {
+          this.curQue.lrc_list = [];
+        }
+        if (!this.curQue.sentenceType) {
+          this.curQue.sentenceType = "chinese";
+        }
+      }
     }
   },
   //生命周期 - 挂载完成（可以访问DOM元素）

src/components/Adult/preview/TextInputRecord.vue

@@ -2,13 +2,39 @@
 <template>
   <div class="Big-Book-prev-Textdes" v-if="curQue">
     <h2 v-if="curQue.title">{{ curQue.title }}</h2>
+    <div
+      class="aduioLine-box"
+      v-if="
+        curQue.mp3_list && curQue.mp3_list.length > 0 && curQue.mp3_list[0].url
+      "
+    >
+      <AudioLine
+        audioId="sentenceListenAudio"
+        :mp3="curQue.mp3_list[0].url"
+        :getCurTime="getCurTime"
+        :themeColor="themeColor"
+        ref="audioLine"
+        @handleListenRead="handleListenRead"
+      />
+    </div>
     <ul>
       <li v-for="(items, indexs) in curQue.option" :key="indexs">
-        <Audio
+        <!-- <Audio
           :mp3="items.mp3_list.length > 0 ? items.mp3_list[0].url : ''"
           :themeColor="themeColor"
           class="audio-play"
-        />
+        /> -->
+        <a
+          :class="[
+            'play-btn',
+            curTime >= curQue.wordTime[indexs].bg &&
+            curTime < curQue.wordTime[indexs].ed &&
+            stopAudio
+              ? 'active'
+              : '',
+          ]"
+          @click="handleChangeTime(curQue.wordTime[indexs].bg)"
+        ></a>
         <b v-if="items.number">{{ items.number }}</b>
         <span
           :style="{ width: items.con ? '260px' : '' }"
@@ -35,8 +61,10 @@
 <script>
 import Soundrecord from "../preview/Soundrecord.vue"; // 录音模板
 import Audio from "../preview/components/AudioRed.vue"; // 音频播放
+import AudioLine from "../preview/AudioLine.vue";
+
 export default {
-  components: { Soundrecord, Audio },
+  components: { Soundrecord, Audio, AudioLine },
   props: ["curQue", "themeColor"],
   data() {
     return {
@@ -54,12 +82,25 @@ export default {
         ["Ī", "Í", "Î", "Ì", "I"],
         ["Ū", "Ú", "Û", "Ù", "U"],
       ],
+      curTime: null,
+      stopAudio: false,
     };
   },
   computed: {},
   watch: {},
   //方法集合
   methods: {
+    handleChangeTime(time) {
+      let _this = this;
+      _this.curTime = time;
+      _this.$refs.audioLine.onTimeupdateTime(time / 1000, true);
+    },
+    getCurTime(curTime) {
+      this.curTime = curTime * 1000;
+    },
+    handleListenRead(playFlag) {
+      this.stopAudio = playFlag;
+    },
     // input 输入时
     handleInput(e) {
       e.target.value = e.target.value ? e.target.value.trim() : "";
@@ -190,6 +231,11 @@ export default {
 .Big-Book-prev-Textdes {
   width: 100%;
   // margin-top: 16px;
+  background: #f7f7f7;
+  border: 1px solid rgba(0, 0, 0, 0.1);
+  box-sizing: border-box;
+  border-radius: 8px;
+  overflow: hidden;
   h2 {
     font-weight: normal;
     font-size: 16px;
@@ -202,6 +248,7 @@ export default {
     flex-flow: wrap;
     justify-content: start;
     list-style: none;
+    padding: 24px;
     li {
       width: 100%;
       background: #ffffff;
@@ -228,6 +275,18 @@ export default {
         font-family: "robot";
         line-height: 16px;
       }
+      .play-btn {
+        width: 16px;
+        height: 16px;
+        background: url("../../../assets/NPC/play-red.png") center no-repeat;
+        background-size: cover;
+        margin-right: 8px;
+
+        &.active {
+          background-image: url("../../../assets/NPC/icon-voice-play-red.png");
+          background-size: cover;
+        }
+      }
       .item-con {
         min-width: 80px;
         font-size: 16px;
@@ -273,6 +332,14 @@ export default {
       b {
         background: #24b99e;
       }
+      .play-btn {
+        background: url("../../../assets/NPC/play-green.png") center no-repeat;
+        background-size: cover;
+        &.active {
+          background-image: url("../../../assets/NPC/icon-voice-play-green.png");
+          background-size: cover;
+        }
+      }
     }
   }
 }
@@ -282,6 +349,14 @@ export default {
       b {
         background: #bd8865;
       }
+      .play-btn {
+        background: url("../../../assets/NPC/play-brown.png") center no-repeat;
+        background-size: cover;
+        &.active {
+          background-image: url("../../../assets/NPC/icon-voice-play-brown.png");
+          background-size: cover;
+        }
+      }
     }
   }
 }