文章

src/components/Adult/inputModules/DialogueArticleChs/index.vue

@@ -61,6 +61,16 @@
         :handleMp3Base64="handleChange"
       />
     </div>
+     <div class="adult-book-input-item">
+      <span class="adult-book-lable">功能配置：</span>
+      <div class="adult-book-main" v-if="curQue.checkList">
+      <el-checkbox-group v-model="curQue.checkList">
+        <el-checkbox :label="1">显示生词功能</el-checkbox>
+        <el-checkbox :label="2">语音练习模式</el-checkbox>
+        <el-checkbox :label="3">取词功能</el-checkbox>
+      </el-checkbox-group>
+      </div>
+    </div>
     <div class="adult-book-input-item">
       <span class="adult-book-lable">文章提示：</span>
       <el-input
@@ -270,6 +280,7 @@ export default {
         detail: [],
         wordTime: [],
         taskId: "",
+        checkList:[]
       },
       isWordTime: false,
     };
@@ -522,6 +533,9 @@ export default {
       if (!this.curQue.notice) {
         this.curQue.notice = "";
       }
+      if(!this.curQue.checkList){
+        this.$set(this.curQue,'checkList',[1,2,3])
+      }
       if (this.curQue.detail && this.curQue.detail.length > 0) {
         if (this.curQue.detail[0].para) {
           this.isPara = true;

src/components/Adult/preview/ArticleViewChs/NormalModelChs.vue

@@ -8,6 +8,7 @@
       "
     >
       <AudioLine
+        audioId="artNormalAudio"
         :mp3="curQue.mp3_list[0].id"
         :getCurTime="getCurTime"
         ref="audioLine"
@@ -70,18 +71,25 @@
                             pItem.sentIndex == sentIndex
                               ? 'overActive'
                               : '',
-                            item.timeList &&
-                            item.timeList[pItem.sentIndex] &&
-                            curTime >=
-                              item.timeList[pItem.sentIndex].wordsResultList[
-                                pItem.wordIndex
-                              ].wordBg &&
-                            curTime <= item.timeList[pItem.sentIndex].ed
-                              ? 'wordActive'
-                              : '',
                           ]"
-                          >{{ pItem.chs }}</span
                         >
+                          <template>
+                            <span
+                              v-for="(wItem, wIndex) in pItem.leg"
+                              :key="'ci' + wIndex + pIndex + index"
+                              :class="[
+                                isPlaying &&
+                                pItem.chstimeList &&
+                                pItem.chstimeList[wIndex] &&
+                                curTime >= pItem.chstimeList[wIndex].wordBg &&
+                                curTime < item.timeList[pItem.sentIndex].ed
+                                  ? 'wordActive'
+                                  : '',
+                              ]"
+                              >{{ pItem.chs[wIndex] }}</span
+                            >
+                          </template>
+                        </span>
                         <span
                           v-if="curQue.pyPosition == 'bottom'"
                           :class="[
@@ -109,6 +117,7 @@
                           class="NNPE-chs"
                           style="text-align: left"
                           :class="[
+                            isPlaying &&
                             item.timeList &&
                             item.timeList[pItem.sentIndex] &&
                             curTime >= item.timeList[pItem.sentIndex].bg &&
@@ -119,11 +128,11 @@
                             pItem.sentIndex == sentIndex
                               ? 'overActive'
                               : '',
-                            curTime >= item.timeList &&
-                            item.timeList[pItem.sentIndex] &&
-                            item.timeList[pItem.sentIndex].wordsResultList[
-                              pItem.wordIndex
-                            ].wordBg &&
+                            pItem.chstimeList &&
+                            pItem.chstimeList[pItem.leg - 1] &&
+                            curTime >=
+                              pItem.chstimeList[pItem.leg - 1].wordBg &&
+                            curQue.wordTime &&
                             curTime <= item.timeList[pItem.sentIndex].ed
                               ? 'wordActive'
                               : '',
@@ -169,17 +178,25 @@
                           pItem.sentIndex == sentIndex
                             ? 'overActive'
                             : '',
-                          curTime >= item.timeList &&
-                          item.timeList[pItem.sentIndex] &&
-                          item.timeList[pItem.sentIndex].wordsResultList[
-                            pItem.wordIndex
-                          ].wordBg &&
-                          curTime <= item.timeList[pItem.sentIndex].ed
-                            ? 'wordActive'
-                            : '',
                         ]"
-                        >{{ pItem.chs }}</span
                       >
+                        <template>
+                          <span
+                            v-for="(wItem, wIndex) in pItem.leg"
+                            :key="'ci' + wIndex + pIndex + index"
+                            :class="[
+                              isPlaying &&
+                              pItem.chstimeList &&
+                              pItem.chstimeList[wIndex] &&
+                              curTime >= pItem.chstimeList[wIndex].wordBg &&
+                              curTime < item.timeList[pItem.sentIndex].ed
+                                ? 'wordActive'
+                                : '',
+                            ]"
+                            >{{ pItem.chs[wIndex] }}</span
+                          >
+                        </template>
+                      </span>
                       <span
                         v-if="curQue.pyPosition == 'bottom'"
                         class="NNPE-pinyin"
@@ -216,7 +233,7 @@ import { timeStrToSen } from "@/utils/index";
 import AudioLine from "../AudioLine.vue";
 export default {
   name: "NormalModelChs",
-  props: ["curQue","noFont"],
+  props: ["curQue", "noFont"],
   components: {
     AudioLine,
   },
@@ -227,7 +244,7 @@ export default {
       chsFhList: ["，", "。", "“", "：", "》", "《", "？", "！", "；"],
       enFhList: [",", ".", ";", "?", "!", ":", ">", "<"],
       newWords: ["鱼", "辩礼义"],
-      
+
       oldHz: "",
       hz: "",
       top: 0,
@@ -237,7 +254,12 @@ export default {
       sentIndex: -1, // 句子索引
     };
   },
-  computed: {},
+  computed: {
+    isPlaying: function () {
+      let playing = this.$refs.audioLine.audio.isPlaying;
+      return playing;
+    },
+  },
   watch: {},
   //方法集合
   methods: {
@@ -246,8 +268,9 @@ export default {
     },
     handleData() {
       let resArr = [];
-      let leg = this.curQue.detail.length;
       let curQue = JSON.parse(JSON.stringify(this.curQue));
+      let wordTimeList = curQue.wordTime;
+      let asIndex = 0;
       curQue.detail.forEach((dItem, dIndex) => {
         let paraArr = [
           {
@@ -264,8 +287,17 @@ export default {
           },
         ];
         dItem.wordsList.forEach((sItem, sIndex) => {
+          let sentArr = [];
           sItem.forEach((wItem, wIndex) => {
-            //this.judgePad(sItem, wItem, wIndex);
+            let startIndex =
+              wIndex == 0
+                ? 0
+                : sentArr[wIndex - 1].startIndex +
+                  sentArr[wIndex - 1].chs.length;
+            let endIndex =
+              wIndex == 0
+                ? wItem.chs.length
+                : sentArr[wIndex - 1].endIndex + wItem.chs.length;
             this.mergeWordSymbol(wItem);
             let obj = {
               paraIndex: dIndex, //段落索引
@@ -278,8 +310,21 @@ export default {
               className: wItem.className,
               isShow: wItem.isShow,
               isNewWord: this.newWords.indexOf(wItem.chs) > -1 ? true : false,
+              startIndex: startIndex,
+              endIndex: endIndex,
+              leg: wItem.chs.length,
             };
+            if (wordTimeList && wordTimeList.length > 0) {
+              obj.chstimeList = wordTimeList[asIndex].wordsResultList.slice(
+                startIndex,
+                endIndex
+              );
+            }
+            sentArr.push(obj);
             paraArr.push(obj);
+            if (wIndex == sItem.length - 1) {
+              asIndex++;
+            }
           });
         });
         let curSentencesLeg = dItem.sentences.length;
@@ -414,15 +459,19 @@ export default {
             font-size: 20px;
             line-height: 28px;
             color: #000000;
-            &.active {
-              background: rgba(222, 68, 68, 0.15);
-            }
             &.overActive {
               background: rgba(0, 0, 0, 0.06);
             }
+            &.active {
+              background: rgba(222, 68, 68, 0.15);
+            }
+
             &.wordActive {
               color: rgba(222, 68, 68, 1);
             }
+            .wordActive {
+              color: rgba(222, 68, 68, 1);
+            }
           }
           &.padding {
             padding: 0 3px;
@@ -456,15 +505,19 @@ export default {
           font-size: 20px;
           line-height: 28px;
           color: #000000;
-          &.active {
-            background: rgba(222, 68, 68, 0.15);
-          }
           &.overActive {
             background: rgba(0, 0, 0, 0.06);
           }
+          &.active {
+            background: rgba(222, 68, 68, 0.15);
+          }
+
           &.wordActive {
             color: rgba(222, 68, 68, 1);
           }
+          .wordActive {
+            color: rgba(222, 68, 68, 1);
+          }
         }
         &.padding {
           padding: 0 3px;

src/components/Adult/preview/ArticleViewChs/Practicechs.vue

@@ -11,6 +11,7 @@
         "
       >
         <AudioLine
+          audioId="artPraAudio"
           :mp3="curQue.mp3_list[0].url"
           :getCurTime="getCurTime"
           ref="audioLine"
@@ -239,6 +240,20 @@
               class="luyin-box"
               @handleParentPlay="handleParentPlay"
             />
+            <div>
+              <AudioLine
+                :mp3="curQue.mp3_list[0].url"
+                :getCurTime="getCurTime"
+                :ref="'audioLine' + index"
+                :audioId="'artPraAudioId' + index"
+                :stopAudio="stopAudio"
+                :width="555"
+                :hideSlider="true"
+                :bg="curQue.wordTime[index].bg"
+                :ed="curQue.wordTime[index].ed"
+                @handleChangeStopAudio="handleChangeStopAudio"
+              />
+            </div>
           </div>
         </div>
       </div>
@@ -270,10 +285,16 @@ export default {
       currSent: null, //当前句子的时间
     };
   },
-  computed: {},
+  computed: {
+    isPlaying: function () {
+      let playing = this.$refs.audioLine.audio.isPlaying;
+      return playing;
+    },
+  },
   watch: {},
   //方法集合
   methods: {
+    pauseOther() {},
     getCurTime(curTime) {
       let _this = this;
       if (_this.isRepeat) {
@@ -379,68 +400,7 @@ export default {
         }
       }
     },
-    handleData2() {
-      let resArr = [],
-        timeArr = [];
-      let leg = this.curQue.detail.length;
-      let curQue = JSON.parse(JSON.stringify(this.curQue));
-      curQue.detail.forEach((dItem, dIndex) => {
-        let endTime = 0;
-        if (dIndex < leg - 1) {
-          endTime = curQue.detail[dIndex + 1].timeList[0];
-          dItem.timeList.push(endTime);
-          dItem.timeList = this.handleTimeList(dItem.timeList);
-        } else {
-          dItem.timeList = this.handleTimeList(dItem.timeList);
-          endTime = curQue.mp3_list[0].duration;
-          dItem.timeList.push(endTime);
-        }
-
-        dItem.wordsList.forEach((sItem, sIndex) => {
-          let time_diff = dItem.timeList[sIndex + 1] - dItem.timeList[sIndex];
-          let wordsLeg = dItem.sentences[sIndex].length;
-          let wordTime = time_diff / wordsLeg;
-          // console.log(time_diff, wordsLeg, wordTime);
-          let sentArr = [];
-          sItem.forEach((wItem, wIndex) => {
-            let preTotal = wIndex > 0 ? sentArr[wIndex - 1].endTime : 0;
-            let endTime =
-              wIndex > 0
-                ? wordTime * wItem.chs.length + preTotal
-                : dItem.timeList[sIndex] + wordTime * wItem.chs.length;
-            //console.log("endTime" + endTime);
-            let startTime =
-              wIndex > 0 ? sentArr[wIndex - 1].endTime : dItem.timeList[sIndex];
-            this.judgePad(sItem, wItem, wIndex);
-            let obj = {
-              paraIndex: dIndex, //段落索引
-              sentIndex: sIndex, //在段落中句子索引
-              wordIndex: wIndex, //单词的索引
-              pinyin: wItem.pinyin,
-              chs: wItem.chs,
-              padding: wItem.padding,
-              className: wItem.className,
-              startTime: startTime,
-              endTime: endTime,
-            };
-            sentArr.push(obj);
-          });
-          resArr.push(sentArr);
-        });
 
-        timeArr.push(dItem.timeList);
-      });
-      let timeList = [];
-      timeArr.forEach((item) => {
-        item.forEach((aItem) => {
-          if (timeList.indexOf(aItem) < 0) {
-            timeList.push(aItem);
-          }
-        });
-      });
-      this.resObj = { sentList: resArr, timeList: timeList };
-      console.log(this.resObj);
-    },
     //判断是否有padding
     judgePad(sItem, wItem, curIndex) {
       let leg = sItem.length;
@@ -486,7 +446,7 @@ export default {
       _this.sentIndex = index;
       if (time) {
         _this.curTime = time;
-        _this.$refs.audioLine.onTimeupdateTime(time / 1000);
+        _this.$refs.audioLine.onTimeupdateTime(time / 1000, true);
       }
     },
     handleWav(data) {},

src/components/Adult/preview/AudioLine.vue

@@ -1,6 +1,6 @@
 <template>
   <div class="Audio">
-    <div class="audioLine">
+    <div class="audioLine" v-if="!hideSlider">
       <div
         class="play"
         :class="audio.playing ? 'playBtn' : 'pauseBtn'"
@@ -29,6 +29,20 @@
         @timeupdate="onTimeupdate"
       />
     </div>
+    <div class="audioLine" v-else>
+      <div
+        class="play"
+        :class="audio.playing ? 'playBtn' : 'pauseBtn'"
+        @click="PlayAudio"
+      />
+    </div>
+    <audio
+      :ref="audioId"
+      :src="mp3"
+      @loadedmetadata="onLoadedmetadata"
+      @timeupdate="onTimeupdate"
+      :id="audioId"
+    />
   </div>
 </template>
 
@@ -38,7 +52,18 @@
 export default {
   // import引入的组件需要注入到对象中才能使用
   components: {},
-  props: ["mp3", "getCurTime", "stopAudio", "width", "isRepeat", "themeColor"],
+  props: [
+    "mp3",
+    "getCurTime",
+    "stopAudio",
+    "width",
+    "isRepeat",
+    "themeColor",
+    "hideSlider",
+    "ed",
+    "bg",
+    "audioId",
+  ],
   data() {
     // 这里存放数据
     return {
@@ -50,6 +75,7 @@ export default {
         currentTime: 0,
         // 音频最大播放时长
         maxTime: 0,
+        isPlaying: false,
       },
       audioAllTime: null, // 展示总时间
       duioCurrentTime: null, // 剩余时间
@@ -73,7 +99,7 @@ export default {
       handler(val, oldVal) {
         const _this = this;
         if (val) {
-          _this.$refs.audio.pause();
+          _this.$refs[_this.audioId].pause();
           _this.audio.playing = false;
         }
       },
@@ -91,20 +117,23 @@ export default {
   // 生命周期 - 挂载完成（可以访问DOM元素）
   mounted() {
     let _this = this;
-    _this.$refs.audio.addEventListener("play", function () {
+    let audioId = _this.audioId;
+    _this.$refs[audioId].addEventListener("play", function () {
       _this.audio.playing = true;
+      _this.audio.isPlaying = true;
     });
-    _this.$refs.audio.addEventListener("pause", function () {
+    _this.$refs[audioId].addEventListener("pause", function () {
       _this.audio.playing = false;
     });
-    _this.$refs.audio.addEventListener("ended", function () {
+    _this.$refs[audioId].addEventListener("ended", function () {
       _this.audio.playing = false;
+      _this.audio.isPlaying = false;
     });
     this.$nextTick(() => {
       document
         .getElementsByClassName("el-slider__button-wrapper")[0]
         .addEventListener("mousedown", function () {
-          _this.$refs.audio.pause();
+          _this.$refs[audioId].pause();
           _this.audio.playing = false;
         });
     });
@@ -115,39 +144,28 @@ export default {
   updated() {},
   // 如果页面有keep-alive缓存功能，这个函数会触发
   activated() {},
-  // 生命周期 - 创建完成（可以访问当前this实例）
-  created() {},
-  // 生命周期 - 挂载完成（可以访问DOM元素）
-  mounted() {
-    let _this = this;
-    _this.$refs.audio.addEventListener("play", function () {
-      _this.audio.playing = true;
-    });
-    _this.$refs.audio.addEventListener("pause", function () {
-      _this.audio.playing = false;
-    });
-    _this.$refs.audio.addEventListener("ended", function () {
-      _this.audio.playing = false;
-      _this.$emit("handleListenRead", false);
-    });
-    this.$nextTick(() => {
-      document
-        .getElementsByClassName("el-slider__button-wrapper")[0]
-        .addEventListener("mousedown", function () {
-          _this.$refs.audio.pause();
-          _this.audio.playing = false;
-        });
-    });
-  },
   // 方法集合
   methods: {
     PlayAudio() {
+      let audioId = this.audioId;
+      let audio = document.getElementsByTagName("audio");
+      audio.forEach((item) => {
+        if (item.id !== audioId) {
+          item.pause();
+        }
+      });
+
       if (this.audio.playing) {
-        this.$refs.audio.pause();
+        this.$refs[audioId].pause();
         this.audio.playing = false;
         this.$emit("handleListenRead", false);
       } else {
-        this.$refs.audio.play();
+        if (this.hideSlider) {
+          this.$refs[audioId].play();
+          this.onTimeupdateTime(this.bg / 1000);
+        } else {
+          this.$refs[audioId].play();
+        }
         this.audio.playing = true;
         this.$emit("handleChangeStopAudio");
         this.$emit("handleListenRead", true);
@@ -155,14 +173,16 @@ export default {
     },
     // 点击 拖拽播放音频
     changeCurrentTime(value) {
-      this.$refs.audio.play();
+      let audioId = this.audioId;
+      this.$refs[audioId].play();
       this.audio.playing = true;
-      this.$refs.audio.currentTime = parseInt(
+      this.$refs[audioId].currentTime = parseInt(
         (value / 100) * this.audio.maxTime
       );
     },
     mousedown() {
-      this.$refs.audio.pause();
+      let audioId = this.audioId;
+      this.$refs[audioId].pause();
       this.audio.playing = false;
     },
     // 进度条格式化toolTip
@@ -177,15 +197,26 @@ export default {
     },
     // 当音频当前时间改变后，进度条也要改变
     onTimeupdate(res) {
+      let audioId = this.audioId;
       this.audio.currentTime = res.target.currentTime;
       this.getCurTime(res.target.currentTime);
       this.playValue = (this.audio.currentTime / this.audio.maxTime) * 100;
+      if (this.audio.currentTime * 1000 > this.ed) {
+        this.$refs[audioId].pause();
+      }
     },
     onTimeupdateTime(res, playFlag) {
-      this.$refs.audio.currentTime = res;
+      let audioId = this.audioId;
+      this.$refs[audioId].currentTime = res;
       this.playValue = (res / this.audio.maxTime) * 100;
       if (playFlag) {
-        this.$refs.audio.play();
+        let audio = document.getElementsByTagName("audio");
+        audio.forEach((item) => {
+          if (item.id !== audioId) {
+            item.pause();
+          }
+        });
+        this.$refs[audioId].play();
       }
     },
     // 将整数转换成 时：分：秒的格式

src/components/Adult/preview/DialogueArticleViewChs/NormalModelChs.vue

@@ -96,20 +96,24 @@
                             ]"
                             >{{ pItem.pinyin }}</span
                           >
-                          <span
-                            class="NNPE-chs"
-                            :class="[
-                              item.timeList.length > 0 &&
-                              curTime >=
-                                item.timeList[pItem.sentIndex].wordsResultList[
-                                  pItem.wordIndex
-                                ].wordBg &&
-                              curTime <= item.timeList[pItem.sentIndex].ed
-                                ? 'wordActive'
-                                : '',
-                            ]"
-                            >{{ pItem.chs }}</span
-                          >
+                          <span class="NNPE-chs">
+                            <template>
+                              <span
+                                v-for="(wItem, wIndex) in pItem.leg"
+                                :key="'ci' + wIndex + pIndex + index"
+                                :class="[
+                                  isPlaying &&
+                                  pItem.chstimeList &&
+                                  pItem.chstimeList[wIndex] &&
+                                  curTime >= pItem.chstimeList[wIndex].wordBg &&
+                                  curTime < item.timeList[pItem.sentIndex].ed
+                                    ? 'wordActive'
+                                    : '',
+                                ]"
+                                >{{ pItem.chs[wIndex] }}</span
+                              >
+                            </template>
+                          </span>
                           <span
                             v-if="curQue.pyPosition == 'bottom'"
                             class="NNPE-pinyin"
@@ -138,11 +142,12 @@
                             class="NNPE-chs"
                             style="text-align: left"
                             :class="[
-                              item.timeList.length > 0 &&
+                              isPlaying &&
+                              pItem.chstimeList &&
+                              pItem.chstimeList[pItem.leg - 1] &&
                               curTime >=
-                                item.timeList[pItem.sentIndex].wordsResultList[
-                                  pItem.wordIndex
-                                ].wordBg &&
+                                pItem.chstimeList[pItem.leg - 1].wordBg &&
+                              curQue.wordTime &&
                               curTime <= item.timeList[pItem.sentIndex].ed
                                 ? 'wordActive'
                                 : '',
@@ -180,19 +185,25 @@
                         <span
                           v-if="pItem.chs != '#'"
                           class="NNPE-chs"
-                          :class="[
-                            item.timeList.length > 0 &&
-                            curTime >=
-                              item.timeList[pItem.sentIndex].wordsResultList[
-                                pItem.wordIndex
-                              ].wordBg &&
-                            curTime <= item.timeList[pItem.sentIndex].ed
-                              ? 'wordActive'
-                              : '',
-                            pItem.padding ? 'padding' : '',
-                          ]"
-                          >{{ pItem.chs }}</span
+                          :class="[pItem.padding ? 'padding' : '']"
                         >
+                          <template>
+                            <span
+                              v-for="(wItem, wIndex) in pItem.leg"
+                              :key="'ci' + wIndex + pIndex + index"
+                              :class="[
+                                isPlaying &&
+                                pItem.chstimeList &&
+                                pItem.chstimeList[wIndex] &&
+                                curTime >= pItem.chstimeList[wIndex].wordBg &&
+                                curTime <= item.timeList[pItem.sentIndex].ed
+                                  ? 'wordActive'
+                                  : '',
+                              ]"
+                              >{{ pItem.chs[wIndex] }}</span
+                            >
+                          </template>
+                        </span>
                         <span
                           v-if="curQue.pyPosition == 'bottom'"
                           class="NNPE-pinyin"
@@ -339,7 +350,12 @@ export default {
       screenHeight: 0,
     };
   },
-  computed: {},
+  computed: {
+    isPlaying: function () {
+      let playing = this.$refs.audioLine.audio.isPlaying;
+      return playing;
+    },
+  },
   watch: {
     noteNum: {
       handler: function (val, oldVal) {
@@ -378,9 +394,9 @@ export default {
     },
     handleData() {
       let resArr = [];
-
-      let leg = this.curQue.detail.length;
       let curQue = JSON.parse(JSON.stringify(this.curQue));
+      let wordTimeList = curQue.wordTime;
+      let asIndex = 0;
       curQue.detail.forEach((dItem, dIndex) => {
         let roleDetail = this.getRole(dItem);
         let remarkDetail = dItem.remark;
@@ -389,13 +405,23 @@ export default {
         }
         let paraArr = [];
         dItem.wordsList.forEach((sItem, sIndex) => {
+          let sentArr = [];
           sItem.forEach((wItem, wIndex) => {
             //this.judgePad(sItem, wItem, wIndex);
+            let startIndex =
+              wIndex == 0
+                ? 0
+                : sentArr[wIndex - 1].startIndex +
+                  sentArr[wIndex - 1].chs.length;
+            let endIndex =
+              wIndex == 0
+                ? wItem.chs.length
+                : sentArr[wIndex - 1].endIndex + wItem.chs.length;
             this.mergeWordSymbol(wItem);
             let obj = {
               paraIndex: dIndex, //段落索引
               sentIndex: sIndex, //在段落中句子索引
-              //articleSentIndex: asIndex, //在文章中句子索引
+              articleSentIndex: asIndex, //在文章中句子索引
               wordIndex: wIndex, //单词的索引
               pinyin: wItem.pinyin,
               chs: wItem.chs,
@@ -403,10 +429,25 @@ export default {
               className: wItem.className,
               isShow: wItem.isShow,
               isNewWord: this.newWords.indexOf(wItem.chs) > -1 ? true : false,
+              startIndex: startIndex,
+              endIndex: endIndex,
+              leg: wItem.chs.length,
+              chstimeList: [],
             };
+            if (wordTimeList && wordTimeList.length > 0) {
+              obj.chstimeList = wordTimeList[asIndex].wordsResultList.slice(
+                startIndex,
+                endIndex
+              );
+            }
+            sentArr.push(obj);
             paraArr.push(obj);
+            if (wIndex == sItem.length - 1) {
+              asIndex++;
+            }
           });
         });
+
         let curSentencesLeg = dItem.sentences.length;
         let startLeg = dIndex == 0 ? 0 : curQue.detail[dIndex - 1].endLeg;
         let endLeg = startLeg + curSentencesLeg;
@@ -439,6 +480,16 @@ export default {
         });
       }
     },
+    mergeWordTime(resArr, wordTimeList) {
+      resArr.forEach((item, index) => {
+        let wordsResultList = wordTimeList[index].wordsResultList;
+        item.forEach((wItem) => {
+          let startIndex = wItem.startIndex;
+          let endIndex = wItem.endIndex;
+          wItem.timeList = wordsResultList.slice(startIndex, endIndex);
+        });
+      });
+    },
     //词和标点合一起
     mergeWordSymbol(wItem) {
       if (this.chsFhList.indexOf(wItem.chs) > -1) {
@@ -495,7 +546,7 @@ export default {
     handleChangeTime(time, item) {
       if (item.timeList && item.timeList.length > 0) {
         this.curTime = time;
-        this.$refs.audioLine.onTimeupdateTime(time / 1000);
+        this.$refs.audioLine.onTimeupdateTime(time / 1000, true);
       }
     },
     viewNotes(e, noteNum) {
@@ -662,6 +713,9 @@ export default {
             &.textLeft {
               text-align: left;
             }
+            &.wordActive {
+              color: #de4444;
+            }
           }
           &.NNPE-chs {
             font-family: "FZJCGFKTK";
@@ -674,6 +728,9 @@ export default {
             &.wordActive {
               color: #de4444;
             }
+            .wordActive {
+              color: #de4444;
+            }
           }
           &.padding {
             padding: 0 3px;
@@ -701,6 +758,9 @@ export default {
           &.textLeft {
             text-align: left;
           }
+          &.wordActive {
+            color: #de4444;
+          }
         }
         &.NNPE-chs {
           font-family: "FZJCGFKTK";
@@ -713,6 +773,9 @@ export default {
           &.wordActive {
             color: #de4444;
           }
+          .wordActive {
+            color: #de4444;
+          }
         }
         &.padding {
           padding: 0 3px;

src/components/Adult/preview/DialogueArticleViewChs/PhraseModelChs.vue

@@ -319,7 +319,8 @@ export default {
       curNoteCon: null,
     };
   },
-  computed: {},
+  computed: {
+  },
   watch: {
     hz: {
       handler: function (val, oldVal) {

src/components/Adult/preview/DialogueArticleViewChs/Practicechs.vue

@@ -148,6 +148,7 @@
                                   v-for="(wItem, wIndex) in pItem.leg"
                                   :key="'ci' + wIndex + pIndex + index"
                                   :class="[
+                                    isPlaying &&
                                     pItem.timeList &&
                                     pItem.timeList[wIndex] &&
                                     curTime >= pItem.timeList[wIndex].wordBg &&
@@ -197,6 +198,7 @@
                             <span class="NNPE-chs" style="text-align: left">
                               <span
                                 :class="[
+                                  isPlaying &&
                                   pItem.timeList[pItem.leg - 1] &&
                                   curTime >=
                                     pItem.timeList[pItem.leg - 1].wordBg &&
@@ -262,6 +264,7 @@
                                 v-for="(wItem, wIndex) in pItem.leg"
                                 :key="'ci' + wIndex + pIndex + index"
                                 :class="[
+                                  isPlaying &&
                                   pItem.timeList &&
                                   pItem.timeList[wIndex] &&
                                   curTime >= pItem.timeList[wIndex].wordBg &&
@@ -400,7 +403,12 @@ export default {
       currSent: null, //当前句子的时间
     };
   },
-  computed: {},
+  computed: {
+    isPlaying: function () {
+      let playing = this.$refs.audioLine.audio.isPlaying;
+      return playing;
+    },
+  },
   watch: {},
   //方法集合
   methods: {
@@ -478,21 +486,13 @@ export default {
           sentArrTotal.push(sentArr);
           resArr.push(obj);
         });
-
-        timeArr.push(dItem.timeList);
       });
       if (wordTimeList && wordTimeList.length > 0) {
         this.mergeWordTime(sentArrTotal, wordTimeList);
       }
-      let timeList = [];
-      timeArr.forEach((item) => {
-        item.forEach((aItem) => {
-          if (timeList.indexOf(aItem) < 0) {
-            timeList.push(aItem);
-          }
-        });
-      });
-      this.resObj = { sentList: resArr, timeList: timeList };
+
+      this.resObj = { sentList: resArr };
+      console.log("语音练习");
       console.log(this.resObj);
     },
     //获取角色
@@ -529,68 +529,7 @@ export default {
         wItem.isShow = true;
       }
     },
-    handleData2() {
-      let resArr = [],
-        timeArr = [];
-      let leg = this.curQue.detail.length;
-      let curQue = JSON.parse(JSON.stringify(this.curQue));
-      curQue.detail.forEach((dItem, dIndex) => {
-        let endTime = 0;
-        if (dIndex < leg - 1) {
-          endTime = curQue.detail[dIndex + 1].timeList[0];
-          dItem.timeList.push(endTime);
-          dItem.timeList = this.handleTimeList(dItem.timeList);
-        } else {
-          dItem.timeList = this.handleTimeList(dItem.timeList);
-          endTime = curQue.mp3_list[0].duration;
-          dItem.timeList.push(endTime);
-        }
 
-        dItem.wordsList.forEach((sItem, sIndex) => {
-          let time_diff = dItem.timeList[sIndex + 1] - dItem.timeList[sIndex];
-          let wordsLeg = dItem.sentences[sIndex].length;
-          let wordTime = time_diff / wordsLeg;
-          // console.log(time_diff, wordsLeg, wordTime);
-          let sentArr = [];
-          sItem.forEach((wItem, wIndex) => {
-            let preTotal = wIndex > 0 ? sentArr[wIndex - 1].endTime : 0;
-            let endTime =
-              wIndex > 0
-                ? wordTime * wItem.chs.length + preTotal
-                : dItem.timeList[sIndex] + wordTime * wItem.chs.length;
-            //console.log("endTime" + endTime);
-            let startTime =
-              wIndex > 0 ? sentArr[wIndex - 1].endTime : dItem.timeList[sIndex];
-            this.judgePad(sItem, wItem, wIndex);
-            let obj = {
-              paraIndex: dIndex, //段落索引
-              sentIndex: sIndex, //在段落中句子索引
-              wordIndex: wIndex, //单词的索引
-              pinyin: wItem.pinyin,
-              chs: wItem.chs,
-              padding: wItem.padding,
-              className: wItem.className,
-              startTime: startTime,
-              endTime: endTime,
-            };
-            sentArr.push(obj);
-          });
-          resArr.push(sentArr);
-        });
-
-        timeArr.push(dItem.timeList);
-      });
-      let timeList = [];
-      timeArr.forEach((item) => {
-        item.forEach((aItem) => {
-          if (timeList.indexOf(aItem) < 0) {
-            timeList.push(aItem);
-          }
-        });
-      });
-      this.resObj = { sentList: resArr, timeList: timeList, enList: enList };
-      console.log(this.resObj);
-    },
     //判断是否有padding
     judgePad(sItem, wItem, curIndex) {
       let leg = sItem.length;
@@ -636,7 +575,7 @@ export default {
       _this.sentIndex = index;
       if (time) {
         _this.curTime = time;
-        _this.$refs.audioLine.onTimeupdateTime(time / 1000);
+        _this.$refs.audioLine.onTimeupdateTime(time / 1000, true);
       }
     },
     handleWav(data) {},
@@ -663,7 +602,6 @@ export default {
   created() {},
   //生命周期 - 挂载完成（可以访问DOM元素）
   mounted() {
-    console.log(this.curQue);
     if (this.curQue) {
       this.handleData();
     }

src/components/Adult/preview/DialogueArticleViewChs/index.vue

@@ -1,37 +1,43 @@
 <!--  -->
 <template>
-  <div class="NPC-ArticleView NPC-ArticleView-container">
+  <div class="NPC-ArticleView NPC-ArticleView-container" v-if="curQue">
     <div class="ArticleView-header">
-      <el-switch
-        style="display: block"
-        v-model="showPhrases"
-        :active-color="activeColor"
-        inactive-color="rgba(0,0,0,0.1)"
-        active-text=""
-        inactive-text="本课生词"
-        @change="handleSwitchChange('showPractice', 'showWord')"
-      >
-      </el-switch>
-      <el-switch
-        style="display: block"
-        v-model="showPractice"
-        :active-color="activeColor"
-        inactive-color="rgba(0,0,0,0.1)"
-        active-text=""
-        inactive-text="语音练习"
-        @change="handleSwitchChange('showPhrases', 'showWord')"
-      >
-      </el-switch>
-      <el-switch
-        style="display: block"
-        v-model="showWord"
-        :active-color="activeColor"
-        inactive-color="rgba(0,0,0,0.1)"
-        active-text=""
-        inactive-text="取词"
-        @change="handleSwitchChange('showPhrases', 'showPractice')"
-      >
-      </el-switch>
+      <template v-if="curQue.checkList.indexOf(1) > -1">
+        <el-switch
+          style="display: block"
+          v-model="showPhrases"
+          :active-color="activeColor"
+          inactive-color="rgba(0,0,0,0.1)"
+          active-text=""
+          inactive-text="本课生词"
+          @change="handleSwitchChange('showPractice', 'showWord')"
+        >
+        </el-switch>
+      </template>
+      <template v-if="curQue.checkList.indexOf(2) > -1">
+        <el-switch
+          style="display: block"
+          v-model="showPractice"
+          :active-color="activeColor"
+          inactive-color="rgba(0,0,0,0.1)"
+          active-text=""
+          inactive-text="语音练习"
+          @change="handleSwitchChange('showPhrases', 'showWord')"
+        >
+        </el-switch>
+      </template>
+      <template v-if="curQue.checkList.indexOf(3) > -1">
+        <el-switch
+          style="display: block"
+          v-model="showWord"
+          :active-color="activeColor"
+          inactive-color="rgba(0,0,0,0.1)"
+          active-text=""
+          inactive-text="取词"
+          @change="handleSwitchChange('showPhrases', 'showPractice')"
+        >
+        </el-switch>
+      </template>
       <!-- <div class="setting-fontsize">
         <a @click="handleFontsize('-')"
           ><img src="../../../../assets/newImage/common/btn-reduce.png"

src/components/Adult/preview/WordPhrase.vue

@@ -35,7 +35,7 @@
               :key="'curQue.option' + index"
             >
               <div
-                class="NPC-word-row"
+                :class="['NPC-word-row',mp3_index == sItem.sIndex?'active':'']"
                 v-for="(sItem, sIndex) in item"
                 :key="'curQue.option.child' + sIndex"
               >
@@ -368,13 +368,16 @@ export default {
     > .NPC-word-tr {
       background: #fff;
       border-radius: 8px;
-      padding: 8px 16px 0px 16px;
+      padding: 4px 0px 4px 0px;
       margin-bottom: 8px;
       .NPC-word-row {
         cursor: pointer;
         display: flex;
         justify-content: flex-start;
-        padding-bottom: 8px;
+        padding: 4px 16px 4px 16px;
+        &.active{
+          background:rgba(222, 68, 68, 0.15); 
+        }
         > span {
           font-size: 16px;
           line-height: 150%;

src/styles/index.scss

@@ -232,6 +232,12 @@ input:-ms-input-placeholder {
             display: block;
         }
     }
+    .adult-book-main{
+      min-height: 32px;
+      display:flex;
+      justify-content: flex-start;
+      align-items:center;
+    }
     .adult-book-input {
         width: 500px;
         margin-right: 10px;