Practicechs

src/components/Adult/inputModules/ArticleTemChs/components/SegbywordChs.vue

@@ -194,7 +194,6 @@ export default {
       this.wordsSegList = detail;
     },
     handleWordsList(list) {
-      debugger;
       let seg_words = [];
       list.forEach((item, index) => {
         let sent_str = item.join(" ");

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

@@ -20,7 +20,7 @@
               v-for="(pItem, pIndex) in item.wordsList"
               :key="'wordsList' + pIndex"
               :class="[pItem.wordIndex == 0 ? 'textLeft' : 'textCenter']"
-              @click="handleChangeTime(item.timeList[pItem.sentIndex])"
+              @click="handleChangeTime(item.timeList[pItem.sentIndex].bg)"
             >
               <template v-if="!pItem.width">
                 <template v-if="pItem.isShow">
@@ -39,8 +39,8 @@
                       <span
                         class="NNPE-chs"
                         :class="[
-                          curTime >= item.timeList[pItem.sentIndex] &&
-                          curTime <= item.timeList[pItem.sentIndex + 1]
+                          curTime >= item.timeList[pItem.sentIndex].bg &&
+                          curTime <= item.timeList[pItem.sentIndex].ed
                             ? 'active'
                             : '',
                         ]"
@@ -55,8 +55,8 @@
                         class="NNPE-chs"
                         style="text-align: left"
                         :class="[
-                          curTime >= item.timeList[pItem.sentIndex] &&
-                          curTime <= item.timeList[pItem.sentIndex + 1]
+                          curTime >= item.timeList[pItem.sentIndex].bg &&
+                          curTime <= item.timeList[pItem.sentIndex].ed
                             ? 'active'
                             : '',
                         ]"
@@ -76,8 +76,8 @@
                     <span
                       class="NNPE-chs"
                       :class="[
-                        curTime >= item.timeList[pItem.sentIndex] &&
-                        curTime <= item.timeList[pItem.sentIndex + 1]
+                        curTime >= item.timeList[pItem.sentIndex].bg &&
+                        curTime <= item.timeList[pItem.sentIndex].ed
                           ? 'active'
                           : '',
                         pItem.padding ? 'padding' : '',
@@ -132,7 +132,7 @@ export default {
   //方法集合
   methods: {
     getCurTime(curTime) {
-      this.curTime = curTime;
+      this.curTime = curTime * 1000;
     },
     handleData() {
       let resArr = [];
@@ -160,6 +160,7 @@ export default {
             let obj = {
               paraIndex: dIndex, //段落索引
               sentIndex: sIndex, //在段落中句子索引
+              //articleSentIndex: asIndex, //在文章中句子索引
               wordIndex: wIndex, //单词的索引
               pinyin: wItem.pinyin,
               chs: wItem.chs,
@@ -171,25 +172,19 @@ export default {
             paraArr.push(obj);
           });
         });
-
-        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);
-        }
-
+        let curSentencesLeg = dItem.sentences.length;
+        let startLeg = dIndex == 0 ? 0 : curQue.detail[dIndex - 1].endLeg;
+        let endLeg = startLeg + curSentencesLeg;
+        dItem.endLeg = endLeg;
+        let timeList = curQue.wordTime.slice(startLeg, endLeg);
         let paraObj = {
           wordsList: paraArr,
-          timeList: dItem.timeList,
+          timeList: timeList,
         };
         resArr.push(paraObj);
       });
       this.resArr = resArr;
+      console.log("Normal");
       console.log(this.resArr);
 
       // 循环文章图片
@@ -203,23 +198,12 @@ export default {
     mergeWordSymbol(sItem, wItem, curIndex) {
       let leg = sItem.length;
       if (curIndex < leg - 1) {
-        let nextIndex = curIndex + 1;
-        let chs = sItem[nextIndex].chs;
-        let pinyin = sItem[nextIndex].pinyin;
-        // if (this.chsFhList.indexOf(chs) > -1) {
-        //   wItem.chs = "<a>" + wItem.chs + "</a><a>" + chs + "</a>";
-        //   wItem.pinyin = "<a>" + wItem.pinyin + "</a><a>" + pinyin + "</a>";
-        // }
         if (this.chsFhList.indexOf(wItem.chs) > -1) {
           wItem.isShow = false;
         } else {
           wItem.isShow = true;
         }
       }
-
-      // if (this.enFhList.indexOf(wItem.pinyin) > -1) {
-      //   wItem.className = "textLeft";
-      // }
     },
     //判断是否有padding
     judgePad(sItem, wItem, curIndex) {
@@ -252,27 +236,7 @@ export default {
     //点击播放某个句子
     handleChangeTime(time) {
       this.curTime = time;
-      this.$refs.audioLine.onTimeupdateTime(time);
-    },
-    chinaDict(e) {
-      let _this = this;
-      console.log(e);
-      // if (e.target.nodeName === "SPAN") {
-      //   const val = e.target.innerHTML;
-      //   if (_this.oldHz != val) {
-      //     this.isWordCard = false;
-      //     setTimeout(() => {
-      //       _this.hz = val;
-      //       alert(_this.hz);
-      //     }, 50);
-      //     this.top = e.clientY + 20;
-      //     this.left = e.clientX;
-      //   }
-      // } else if (e.target.tagName === "IMG") {
-      //   // 图片地址 e.target.attributes[0].nodeValue
-      //   this.articleSrc = e.target.attributes[0].nodeValue;
-      //   // this.handleSrcListIndex()
-      // }
+      this.$refs.audioLine.onTimeupdateTime(time / 1000);
     },
   },
   //生命周期 - 创建完成（可以访问当前this实例）
@@ -328,7 +292,7 @@ export default {
             }
           }
           &.padding {
-            padding-right: 6px;
+            padding: 0 3px;
           }
         }
       }
@@ -361,7 +325,7 @@ export default {
           }
         }
         &.padding {
-          padding-right: 6px;
+          padding: 0 3px;
         }
       }
     }

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

@@ -0,0 +1,395 @@
+<!--  -->
+<template>
+  <div class="NNPE-ArticleView" v-if="curQue">
+    <AudioLine
+      :mp3="curQue.mp3_list[0].url"
+      :getCurTime="getCurTime"
+      ref="audioLine"
+    />
+    <template v-if="resArr.length > 0">
+      <div
+        :class="['NNPE-detail', item.isTitle ? 'NNPE-detail-title' : '']"
+        v-for="(item, index) in resArr"
+        :key="'detail' + index"
+      >
+        <div class="wordsList-box">
+          <img :src="articleImg[index]" v-if="articleImg[0] && index == 0" />
+          <div>
+            <div
+              class="NNPE-words"
+              v-for="(pItem, pIndex) in item.wordsList"
+              :key="'wordsList' + pIndex"
+              :class="[pItem.wordIndex == 0 ? 'textLeft' : 'textCenter']"
+              @click="showWordDetail($event, pItem.chs)"
+            >
+              <template v-if="!pItem.width">
+                <template v-if="pItem.isShow">
+                  <template
+                    v-if="
+                      item.wordsList[pIndex + 1].chs &&
+                      chsFhList.indexOf(item.wordsList[pIndex + 1].chs) > -1
+                    "
+                  >
+                    <span class="NNPE-words-box">
+                      <span
+                        class="NNPE-pinyin"
+                        :class="[pItem.className ? pItem.className : '']"
+                        >{{ pItem.pinyin }}</span
+                      >
+                      <span
+                        :class="[
+                          'NNPE-chs',
+                          newWordList.indexOf(pItem.chs) > -1 ? 'active' : '',
+                        ]"
+                        >{{ pItem.chs }}</span
+                      >
+                    </span>
+                    <span class="NNPE-words-box">
+                      <span class="NNPE-pinyin" style="text-align: left">{{
+                        item.wordsList[pIndex + 1].pinyin
+                      }}</span>
+                      <span class="NNPE-chs" style="text-align: left">{{
+                        item.wordsList[pIndex + 1].chs
+                      }}</span>
+                    </span>
+                  </template>
+                  <template v-else>
+                    <span
+                      class="NNPE-pinyin"
+                      :class="[
+                        pItem.padding ? 'padding' : '',
+                        pItem.className ? pItem.className : '',
+                      ]"
+                      >{{ pItem.pinyin }}</span
+                    >
+                    <span
+                      class="NNPE-chs"
+                      :class="[
+                        pItem.padding ? 'padding' : '',
+                        newWordList.indexOf(pItem.chs) > -1 ? 'active' : '',
+                      ]"
+                      >{{ pItem.chs }}</span
+                    >
+                  </template>
+                </template>
+              </template>
+              <template v-else>
+                <span
+                  :style="{
+                    height: pItem.height + 'px',
+                    width: pItem.width + 'px',
+                  }"
+                ></span>
+              </template>
+            </div>
+          </div>
+          <img :src="articleImg[index + 1]" v-if="articleImg[index + 1]" />
+        </div>
+      </div>
+    </template>
+    <template v-if="isShow">
+      <div
+        class="NNPE-wordDetail"
+        :style="{ top: top + 'px', left: left + 'px' }"
+      >
+        <Wordcard :word="word" :changeWordCard="changeWordCard" />
+      </div>
+    </template>
+  </div>
+</template>
+
+<script>
+import { timeStrToSen } from "@/utils/index";
+import AudioLine from "../AudioLine.vue";
+import Wordcard from "../components/Wordcard.vue"; // 卡片
+export default {
+  name: "PhraseModelChs",
+  props: ["curQue", "NNPENewWordList"],
+  components: {
+    AudioLine,
+    Wordcard,
+  },
+  data() {
+    return {
+      resArr: [],
+      curTime: 0, //单位s
+      chsFhList: ["，", "。", "“", "：", "》", "《", "？", "！", "；"],
+      enFhList: [",", ".", ";", "?", "!", ":", ">", "<"],
+      newWords: ["鱼", "辩礼义"],
+      oldHz: "",
+      hz: "",
+      top: 0,
+      left: 0,
+      articleImg: {}, // 文章图片
+      newWordList: [],
+      word: null,
+      isShow: false,
+    };
+  },
+  computed: {},
+  watch: {},
+  //方法集合
+  methods: {
+    getCurTime(curTime) {
+      this.curTime = curTime;
+    },
+    handleData() {
+      let resArr = [];
+      let leg = this.curQue.detail.length;
+      let curQue = JSON.parse(JSON.stringify(this.curQue));
+      curQue.detail.forEach((dItem, dIndex) => {
+        let paraArr = [
+          {
+            pinyin: "",
+            chs: "",
+            width: 20,
+            height: 20,
+          },
+          {
+            width: 20,
+            height: 20,
+            pinyin: "",
+            chs: "",
+          },
+        ];
+        dItem.wordsList.forEach((sItem, sIndex) => {
+          sItem.forEach((wItem, wIndex) => {
+            //this.judgePad(sItem, wItem, wIndex);
+            this.mergeWordSymbol(sItem, wItem, wIndex);
+            let obj = {
+              paraIndex: dIndex, //段落索引
+              sentIndex: sIndex, //在段落中句子索引
+              wordIndex: wIndex, //单词的索引
+              pinyin: wItem.pinyin,
+              chs: wItem.chs,
+              padding: true, //wItem.padding,
+              className: wItem.className,
+              isShow: wItem.isShow,
+              isNewWord: this.newWords.indexOf(wItem.chs) > -1 ? true : false,
+            };
+            paraArr.push(obj);
+          });
+        });
+
+        let paraObj = {
+          wordsList: paraArr,
+        };
+        resArr.push(paraObj);
+      });
+      this.resArr = resArr;
+      console.log(this.resArr);
+
+      // 循环文章图片
+      if (curQue.img_list) {
+        curQue.img_list.forEach((item) => {
+          this.articleImg[item.imgNumber] = item.url;
+        });
+      }
+    },
+    //词和标点合一起
+    mergeWordSymbol(sItem, wItem, curIndex) {
+      let leg = sItem.length;
+      if (curIndex < leg - 1) {
+        let nextIndex = curIndex + 1;
+        let chs = sItem[nextIndex].chs;
+        let pinyin = sItem[nextIndex].pinyin;
+        // if (this.chsFhList.indexOf(chs) > -1) {
+        //   wItem.chs = "<a>" + wItem.chs + "</a><a>" + chs + "</a>";
+        //   wItem.pinyin = "<a>" + wItem.pinyin + "</a><a>" + pinyin + "</a>";
+        // }
+        if (this.chsFhList.indexOf(wItem.chs) > -1) {
+          wItem.isShow = false;
+        } else {
+          wItem.isShow = true;
+        }
+      }
+
+      // if (this.enFhList.indexOf(wItem.pinyin) > -1) {
+      //   wItem.className = "textLeft";
+      // }
+    },
+    //判断是否有padding
+    judgePad(sItem, wItem, curIndex) {
+      let leg = sItem.length;
+      if (curIndex < leg - 1) {
+        let nextIndex = curIndex + 1;
+        let chs = sItem[nextIndex].chs;
+        if (
+          this.chsFhList.indexOf(chs) > -1 ||
+          this.chsFhList.indexOf(wItem.chs) > -1
+        ) {
+          wItem.padding = false;
+        } else {
+          wItem.padding = true;
+        }
+        if (this.enFhList.indexOf(wItem.pinyin) > -1) {
+          wItem.className = "textLeft";
+        }
+      }
+    },
+    //转化时间
+    handleTimeList(list) {
+      let listRes = [];
+      list.forEach((item) => {
+        let res = timeStrToSen(item);
+        listRes.push(res);
+      });
+      return listRes;
+    },
+    //点击播放某个句子
+    handleChangeTime(time) {
+      this.curTime = time;
+      this.$refs.audioLine.onTimeupdateTime(time);
+    },
+    handleNewword() {
+      let NewWordList = [];
+      this.NNPENewWordList.forEach((item) => {
+        NewWordList.push(item.new_word);
+      });
+      this.newWordList = JSON.parse(JSON.stringify(NewWordList));
+    },
+    showWordDetail(e, word) {
+      let _this = this;
+      let wordArr = this.NNPENewWordList.filter(
+        (item) => item.new_word == word
+      );
+      this.word = wordArr[0];
+      console.log(this.word);
+      this.isShow = true;
+
+      _this.top = e.clientY + 20;
+      let left = e.clientX;
+      if (left - this.bodyLeft > this.contentWidth / 2) {
+        _this.left = left - 560;
+      } else {
+        _this.left = left;
+      }
+    },
+    changeWordCard() {},
+  },
+  //生命周期 - 创建完成（可以访问当前this实例）
+  created() {},
+  //生命周期 - 挂载完成（可以访问DOM元素）
+  mounted() {
+    console.log(this.curQue);
+    if (this.curQue) {
+      this.handleData();
+    }
+    console.log("生词");
+    console.log(this.NNPENewWordList);
+    if (this.NNPENewWordList && this.NNPENewWordList.length > 0) {
+      this.handleNewword();
+    }
+  },
+  beforeCreate() {}, //生命周期 - 创建之前
+  beforeMount() {}, //生命周期 - 挂载之前
+  beforeUpdate() {}, //生命周期 - 更新之前
+  updated() {}, //生命周期 - 更新之后
+  beforeDestroy() {}, //生命周期 - 销毁之前
+  destroyed() {}, //生命周期 - 销毁完成
+  activated() {}, //如果页面有keep-alive缓存功能，这个函数会触发
+};
+</script>
+<style lang='scss' scoped>
+//@import url(); 引入公共css类
+.NNPE-ArticleView {
+  width: 100%;
+  .NNPE-detail {
+    clear: both;
+    overflow: hidden;
+    .NNPE-words {
+      float: left;
+      padding: 0 0px 8px 0px;
+      &-box {
+        float: left;
+        > span {
+          display: block;
+          &.NNPE-pinyin {
+            font-family: "GB-PINYINOK-B";
+            font-weight: normal;
+            font-size: 14px;
+            line-height: 150%;
+            color: #000000;
+            height: 21px;
+            &.textLeft {
+              text-align: left;
+            }
+          }
+          &.NNPE-chs {
+            font-family: "FZJCGFKTK";
+            font-size: 24px;
+            line-height: 150%;
+            color: #000000;
+            &.active {
+              color: #e35454;
+            }
+          }
+          &.padding {
+            padding: 0 3px;
+          }
+        }
+      }
+      &.textLeft {
+        text-align: left;
+      }
+      &.textCenter {
+        text-align: center;
+      }
+      > span {
+        display: block;
+        &.NNPE-pinyin {
+          font-family: "GB-PINYINOK-B";
+          font-weight: normal;
+          font-size: 14px;
+          line-height: 150%;
+          color: #000000;
+          height: 21px;
+          &.textLeft {
+            text-align: left;
+          }
+        }
+        &.NNPE-chs {
+          font-family: "FZJCGFKTK";
+          font-size: 24px;
+          line-height: 150%;
+          color: #000000;
+          &.active {
+            color: #e35454;
+          }
+        }
+        &.padding {
+          padding: 0 3px;
+        }
+      }
+    }
+    &.NNPE-detail-title {
+      .wordsList-box {
+        > div {
+          display: flex;
+          justify-content: center;
+        }
+      }
+    }
+    .index {
+      width: 48px;
+      box-sizing: border-box;
+      padding: 8px;
+      text-align: right;
+      border-right: 1px solid rgba(0, 0, 0, 0.1);
+      b {
+        font-weight: 400;
+        color: #000000;
+        line-height: 1.5;
+      }
+    }
+    .wordsList-box {
+      width: 100%;
+      padding: 6px 24px 12px 24px;
+      > img {
+        width: 100%;
+        display: block;
+      }
+    }
+  }
+}
+</style>

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

@@ -1,307 +0,0 @@
-<!--  -->
-<template>
-  <div class="NNPE-ArticleView" v-if="curQue">
-    <AudioLine
-      :mp3="curQue.mp3_list[0].url"
-      :getCurTime="getCurTime"
-      ref="audioLine"
-    />
-    <template v-if="resObj">
-      <div
-        class="NNPE-detail"
-        v-for="(item, index) in resObj.sentList"
-        :key="'detail' + index"
-        @click="handleChangeTime(resObj.timeList[index])"
-      >
-        <div
-          class="NNPE-words"
-          v-for="(pItem, pIndex) in item"
-          :key="'wordsList' + pIndex"
-          :class="[pItem.wordIndex == 0 ? 'textLeft' : 'textCenter']"
-        >
-          <template v-if="!pItem.width">
-            <span
-              class="NNPE-pinyin"
-              :class="[
-                pItem.padding ? 'padding' : '',
-                pItem.className ? pItem.className : '',
-              ]"
-              >{{ pItem.pinyin }}</span
-            >
-
-            <span
-              class="NNPE-chs"
-              :class="[
-                curTime >= resObj.timeList[index] &&
-                curTime <= resObj.timeList[index + 1] &&
-                curTime >= pItem.startTime
-                  ? 'active'
-                  : '',
-                pItem.padding ? 'padding' : '',
-              ]"
-              >{{ pItem.chs }}</span
-            >
-          </template>
-          <template v-else>
-            <span
-              :style="{
-                height: pItem.height + 'px',
-                width: pItem.width + 'px',
-              }"
-            ></span>
-          </template>
-        </div>
-      </div>
-    </template>
-  </div>
-</template>
-
-<script>
-import { timeStrToSen } from "@/utils/index";
-import AudioLine from "../AudioLine.vue";
-export default {
-  name: "ArticleView",
-  props: ["curQue"],
-  components: {
-    AudioLine,
-  },
-  data() {
-    return {
-      resObj: null,
-      curTime: 0, //单位s
-      chsFhList: ["，", "。", "“", "：", "》", "《", "？", "！", "；"],
-      enFhList: [",", ".", ";", "?", "!", ":", ">", "<"],
-    };
-  },
-  computed: {},
-  watch: {},
-  //方法集合
-  methods: {
-    getCurTime(curTime) {
-      this.curTime = curTime;
-    },
-    handleData() {
-      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 sentArr = [];
-          sItem.forEach((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);
-    },
-    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;
-      if (curIndex < leg - 1) {
-        let nextIndex = curIndex + 1;
-        let chs = sItem[nextIndex].chs;
-        if (
-          this.chsFhList.indexOf(chs) > -1 ||
-          this.chsFhList.indexOf(wItem.chs) > -1
-        ) {
-          wItem.padding = false;
-        } else {
-          wItem.padding = true;
-        }
-        if (this.enFhList.indexOf(wItem.pinyin) > -1) {
-          wItem.className = "textLeft";
-        }
-      }
-    },
-    //转化时间
-    handleTimeList(list) {
-      let listRes = [];
-      list.forEach((item) => {
-        let res = timeStrToSen(item);
-        listRes.push(res);
-      });
-      return listRes;
-    },
-    //计算总时间
-    countWordTime(sentArr) {
-      let total = 0;
-      sentArr.forEach((item) => {
-        total += item.endTime;
-      });
-      return total;
-    },
-    //点击播放某个句子
-    handleChangeTime(time) {
-      this.curTime = time;
-      this.$refs.audioLine.onTimeupdateTime(time);
-    },
-  },
-  //生命周期 - 创建完成（可以访问当前this实例）
-  created() {},
-  //生命周期 - 挂载完成（可以访问DOM元素）
-  mounted() {
-    console.log(this.curQue);
-    if (this.curQue) {
-      this.handleData();
-    }
-  },
-  beforeCreate() {}, //生命周期 - 创建之前
-  beforeMount() {}, //生命周期 - 挂载之前
-  beforeUpdate() {}, //生命周期 - 更新之前
-  updated() {}, //生命周期 - 更新之后
-  beforeDestroy() {}, //生命周期 - 销毁之前
-  destroyed() {}, //生命周期 - 销毁完成
-  activated() {}, //如果页面有keep-alive缓存功能，这个函数会触发
-};
-</script>
-<style lang='scss' scoped>
-//@import url(); 引入公共css类
-.NNPE-ArticleView {
-  width: 100%;
-  .NNPE-detail {
-    clear: both;
-    overflow: hidden;
-    width: 100%;
-    background: #ffffff;
-    border: 1px solid rgba(0, 0, 0, 0.1);
-    box-sizing: border-box;
-    border-radius: 8px;
-    margin-bottom: 8px;
-    box-sizing: border-box;
-    padding: 8px 16px 0px;
-    .NNPE-words {
-      float: left;
-      padding: 0 0px 8px 0px;
-      &.textLeft {
-        text-align: left;
-      }
-      &.textCenter {
-        text-align: center;
-      }
-      > span {
-        display: block;
-        &.NNPE-pinyin {
-          font-family: "GB-PINYINOK-B";
-          font-weight: normal;
-          font-size: 14px;
-          line-height: 20px;
-          color: #000000;
-          height: 20px;
-          &.textLeft {
-            text-align: left;
-          }
-        }
-        &.NNPE-chs {
-          font-family: "FZJCGFKTK";
-          font-size: 20px;
-          line-height: 150%;
-          color: #000000;
-          &.active {
-            background: rgba(60, 200, 99, 0.2);
-          }
-        }
-        &.padding {
-          padding-right: 6px;
-        }
-      }
-    }
-  }
-}
-</style>

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

@@ -7,11 +7,12 @@
       ref="audioLine"
     />
     <template v-if="resObj">
+      <!--  -->
       <div
         class="NNPE-detail"
         v-for="(item, index) in resObj.sentList"
         :key="'detail' + index"
-        @click="handleChangeTime(resObj.timeList[index])"
+        @click="handleChangeTime(curQue.wordTime[index].bg)"
       >
         <div
           class="NNPE-words"
@@ -20,32 +21,90 @@
           :class="[pItem.wordIndex == 0 ? 'textLeft' : 'textCenter']"
         >
           <template v-if="!pItem.width">
-            <span
-              class="NNPE-pinyin"
-              :class="[
-                pItem.padding ? 'padding' : '',
-                pItem.className ? pItem.className : '',
-              ]"
-              >{{ pItem.pinyin }}</span
-            >
-
-            <span class="NNPE-chs" :class="[pItem.padding ? 'padding' : '']">
-              <template v-if="pItem.timeList && pItem.timeList.length > 0">
+            <template v-if="pItem.isShow">
+              <template
+                v-if="
+                  item[pIndex + 1].chs &&
+                  chsFhList.indexOf(item[pIndex + 1].chs) > -1
+                "
+              >
+                <span class="NNPE-words-box">
+                  <span
+                    class="NNPE-pinyin"
+                    :class="[pItem.className ? pItem.className : '']"
+                    >{{ pItem.pinyin }}</span
+                  >
+                  <span
+                    class="NNPE-chs"
+                    :class="[pItem.padding ? 'padding' : '']"
+                  >
+                    <template
+                      v-if="pItem.timeList && pItem.timeList.length > 0"
+                    >
+                      <span
+                        v-for="(wItem, wIndex) in pItem.leg"
+                        :key="'ci' + wIndex + pIndex + index"
+                        :class="[
+                          pItem.timeList[wIndex] &&
+                          curTime >= pItem.timeList[wIndex].wordBg &&
+                          curTime <= curQue.wordTime[index].ed
+                            ? 'active'
+                            : '',
+                        ]"
+                        >{{ pItem.chs[wIndex] }}</span
+                      >
+                    </template>
+                  </span>
+                </span>
+                <span class="NNPE-words-box">
+                  <span class="NNPE-pinyin" style="text-align: left">{{
+                    item[pIndex + 1].pinyin
+                  }}</span>
+                  <span class="NNPE-chs" style="text-align: left">
+                    <span
+                      :class="[
+                        pItem.timeList[pItem.leg - 1] &&
+                        curTime >= pItem.timeList[pItem.leg - 1].wordBg &&
+                        curTime <= curQue.wordTime[index].ed
+                          ? 'active'
+                          : '',
+                      ]"
+                    >
+                      {{ item[pIndex + 1].chs }}</span
+                    >
+                  </span>
+                </span>
+              </template>
+              <template v-else>
                 <span
-                  v-for="(wItem, wIndex) in pItem.leg"
-                  :key="'ci' + wIndex + pIndex + index"
+                  class="NNPE-pinyin"
                   :class="[
-                    pItem.timeList[wIndex] &&
-                    curTime >= pItem.timeList[wIndex].wordBg &&
-                    curTime <= resObj.timeList[index + 1]
-                      ? 'active'
-                      : '',
+                    pItem.padding ? 'padding' : '',
+                    pItem.className ? pItem.className : '',
                   ]"
-                  >{{ pItem.chs[wIndex] }}</span
+                  >{{ pItem.pinyin }}</span
+                >
+                <span
+                  class="NNPE-chs"
+                  :class="[pItem.padding ? 'padding' : '']"
                 >
+                  <template v-if="pItem.timeList && pItem.timeList.length > 0">
+                    <span
+                      v-for="(wItem, wIndex) in pItem.leg"
+                      :key="'ci' + wIndex + pIndex + index"
+                      :class="[
+                        pItem.timeList[wIndex] &&
+                        curTime >= pItem.timeList[wIndex].wordBg &&
+                        curTime <= curQue.wordTime[index].ed
+                          ? 'active'
+                          : '',
+                      ]"
+                      >{{ pItem.chs[wIndex] }}</span
+                    >
+                  </template>
+                </span>
               </template>
-              <!-- {{ pItem.chs }} -->
-            </span>
+            </template>
           </template>
           <template v-else>
             <span
@@ -64,6 +123,7 @@
 <script>
 import { timeStrToSen } from "@/utils/index";
 import AudioLine from "../AudioLine.vue";
+
 export default {
   name: "ArticleView",
   props: ["curQue"],
@@ -83,10 +143,9 @@ export default {
   //方法集合
   methods: {
     getCurTime(curTime) {
-      this.curTime = curTime;
+      this.curTime = curTime * 1000;
     },
     handleData() {
-      debugger;
       let resArr = [],
         timeArr = [];
       let curQue = JSON.parse(JSON.stringify(this.curQue));
@@ -105,15 +164,17 @@ export default {
               wIndex == 0
                 ? wItem.chs.length
                 : sentArr[wIndex - 1].endIndex + wItem.chs.length;
-            this.judgePad(sItem, wItem, wIndex);
+            // this.judgePad(sItem, wItem, wIndex);
+            this.mergeWordSymbol(sItem, wItem, wIndex);
             let obj = {
               paraIndex: dIndex, //段落索引
               sentIndex: sIndex, //在段落中句子索引
               wordIndex: wIndex, //单词的索引
               pinyin: wItem.pinyin,
               chs: wItem.chs,
-              padding: wItem.padding,
+              padding: true,
               className: wItem.className,
+              isShow: wItem.isShow,
               startIndex: startIndex,
               endIndex: endIndex,
               leg: wItem.chs.length,
@@ -140,7 +201,6 @@ export default {
     },
     mergeWordTime(resArr, wordTimeList) {
       resArr.forEach((item, index) => {
-        debugger;
         let wordsResultList = wordTimeList[index].wordsResultList;
         item.forEach((wItem) => {
           let startIndex = wItem.startIndex;
@@ -149,6 +209,19 @@ export default {
         });
       });
     },
+    //词和标点合一起
+    mergeWordSymbol(sItem, wItem, curIndex) {
+      let leg = sItem.length;
+      if (curIndex < leg - 1) {
+        let nextIndex = curIndex + 1;
+
+        if (this.chsFhList.indexOf(wItem.chs) > -1) {
+          wItem.isShow = false;
+        } else {
+          wItem.isShow = true;
+        }
+      }
+    },
     handleData2() {
       let resArr = [],
         timeArr = [];
@@ -250,7 +323,7 @@ export default {
     //点击播放某个句子
     handleChangeTime(time) {
       this.curTime = time;
-      this.$refs.audioLine.onTimeupdateTime(time);
+      this.$refs.audioLine.onTimeupdateTime(time / 1000);
     },
   },
   //生命周期 - 创建完成（可以访问当前this实例）
@@ -289,6 +362,35 @@ export default {
     .NNPE-words {
       float: left;
       padding: 0 0px 8px 0px;
+      &-box {
+        float: left;
+        > span {
+          display: block;
+          &.NNPE-pinyin {
+            font-family: "GB-PINYINOK-B";
+            font-weight: normal;
+            font-size: 14px;
+            line-height: 20px;
+            color: #000000;
+            height: 20px;
+            &.textLeft {
+              text-align: left;
+            }
+          }
+          &.NNPE-chs {
+            font-family: "FZJCGFKTK";
+            font-size: 20px;
+            line-height: 150%;
+            color: #000000;
+            .active {
+              color: #32a5d8;
+            }
+          }
+          // &.padding {
+          //   padding-right: 6px;
+          // }
+        }
+      }
       &.textLeft {
         text-align: left;
       }
@@ -313,12 +415,12 @@ export default {
           font-size: 20px;
           line-height: 150%;
           color: #000000;
-          &.active {
-            background: rgba(60, 200, 99, 0.2);
+          .active {
+            color: #32a5d8;
           }
         }
         &.padding {
-          padding-right: 6px;
+          padding: 0 3px;
         }
       }
     }

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

@@ -49,6 +49,13 @@
         :wordFontsize="wordFontsize"
         v-if="showPreview"
       />
+      <PhraseModel
+        :curQue="curQue"
+        :titleFontsize="titleFontsize"
+        :wordFontsize="wordFontsize"
+        :NNPENewWordList="NNPENewWordList"
+        v-if="showPhrases"
+      />
       <Practice
         :curQue="curQue"
         :titleFontsize="titleFontsize"
@@ -69,19 +76,21 @@
 </template>
 
 <script>
+import PhraseModel from "./PhraseModelChs.vue";
 import Preview from "./NormalModelChs.vue";
 import Practice from "./Practicechs.vue"; // 语音练习模式
 import WordModel from "./WordModelChs.vue"; // 语音练习模式
 
 export default {
   name: "ArticleView",
-  props: ["curQue","NNPENewWordList"],
-  components: { Preview, Practice, WordModel },
+  props: ["curQue", "NNPENewWordList"],
+  components: { Preview, Practice, WordModel, PhraseModel },
   data() {
     return {
       showPreview: true, // 全文预览
       showPhrases: false, // 显示单词和短语
       showPractice: false, // 语音练习
+
       showWord: false, // 取词
       titleFontsize: 20, // 标题字号初始值
       wordFontsize: 16, // 文章内容字号初始值
@@ -123,6 +132,7 @@ export default {
     this.$nextTick(() => {
       this.bodyLeft = this.$refs.ArticleViewbody.getBoundingClientRect().left;
     });
+    console.log(this.NNPENewWordList);
   },
   beforeCreate() {}, //生命周期 - 创建之前
   beforeMount() {}, //生命周期 - 挂载之前

src/views/adultInput.vue

@@ -163,7 +163,7 @@
                       </template>
                       <template v-else> </template>
                     </template>
-                       <template v-if="topicIitem.type == 'recordHZ_inputPY_chs'">
+                    <template v-if="topicIitem.type == 'recordHZ_inputPY_chs'">
                       <template v-if="topicIitem.is_edit">
                         <Sentence
                           :curQue="topicIitem.data"