注释，对话文章

src/components/Adult/inputModules/Notes.vue

@@ -66,7 +66,7 @@
           <span class="adult-book-lable"></span>
           <Upload
             :changeFillId="changeImage"
-            :datafileList="curQueItem.img_list"
+            :datafileList="fileCon[index] && fileCon[index].img_list"
             :filleNumber="imgNumber"
             :uploadType="'image'"
             :index="index"
@@ -87,10 +87,12 @@ export default {
   data() {
     return {
       imgNumber: 10000,
-      fileCon: {
-        img_list: [],
-        mp3_list: [],
-      },
+      fileCon: [
+        {
+          img_list: [],
+          mp3_list: [],
+        },
+      ],
       data_structure: {
         type: "notes_chs",
         name: "注释",
@@ -130,7 +132,6 @@ export default {
     },
 
     changeImage(fileList, duration, index) {
-      console.log(fileList);
       const articleImgList = JSON.parse(JSON.stringify(fileList));
       const articleImgRes = [];
       articleImgList.forEach((item) => {
@@ -156,7 +157,13 @@ export default {
       let res_data = JSON.parse(JSON.stringify(this.data_structure));
       this.changeCurQue(res_data);
     } else {
-      //this.fileCon;
+      let fileCon = [];
+      this.curQue.option.forEach((item) => {
+        let obj = { img_list: item.img_list };
+        fileCon.push(obj);
+      });
+      this.fileCon = JSON.parse(JSON.stringify(fileCon));
+      console.log(this.fileCon);
     }
   },
   beforeCreate() {}, //生命周期 - 创建之前

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

@@ -31,6 +31,7 @@
                   <template v-if="pItem.isShow">
                     <template
                       v-if="
+                        item.wordsList[pIndex + 1] &&
                         item.wordsList[pIndex + 1].chs &&
                         chsFhList.indexOf(item.wordsList[pIndex + 1].chs) > -1
                       "

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

@@ -57,6 +57,7 @@
                     <template v-if="pItem.isShow">
                       <template
                         v-if="
+                          item.wordsList[pIndex + 1] &&
                           item.wordsList[pIndex + 1].chs &&
                           chsFhList.indexOf(item.wordsList[pIndex + 1].chs) > -1
                         "
@@ -127,9 +128,12 @@
                             pItem.padding ? 'padding' : '',
                             pItem.className ? pItem.className : '',
                           ]"
+                          @click="viewNotes($event, pItem.pinyin)"
                           >{{ pItem.pinyin }}</span
                         >
+
                         <span
+                          v-if="pItem.chs != '#'"
                           class="NNPE-chs"
                           :class="[
                             item.timeList.length > 0 &&
@@ -209,6 +213,28 @@ export default {
       curTime: 0, //单位s
       chsFhList: ["，", "。", "“", "：", "》", "《", "？", "！", "；"],
       enFhList: [",", ".", ";", "?", "!", ":", ">", "<"],
+      NumberList: [
+        "①",
+        "②",
+        "③",
+        "④",
+        "⑤",
+        "⑥",
+        "⑦",
+        "⑧",
+        "⑨",
+        "⑩",
+        "⑪",
+        "⑫",
+        "⑬",
+        "⑭",
+        "⑮",
+        "⑯",
+        "⑰",
+        "⑱",
+        "⑲",
+        "⑳",
+      ],
       newWords: ["鱼", "辩礼义"],
       oldHz: "",
       hz: "",
@@ -216,10 +242,44 @@ export default {
       left: 0,
       articleImg: {}, // 文章图片
       isHasRemark: false,
+      isNoteShow: false,
+      noteNum: "",
+      oldNoteNum: "",
+      clientY: 0,
+      top: 0,
+      left: 0,
     };
   },
   computed: {},
-  watch: {},
+  watch: {
+    noteNum: {
+      handler: function (val, oldVal) {
+        let _this = this;
+        if (val) {
+          _this.handleNote(val);
+        }
+      },
+      // 深度观察监听
+      deep: true,
+    },
+    isNoteShow: {
+      handler: function (val, oldVal) {
+        let _this = this;
+        if (val) {
+          setTimeout(() => {
+            _this.cardHeight = _this.$refs.wordcard.offsetHeight;
+            if (_this.screenHeight - _this.clientY > _this.cardHeight) {
+              _this.top = _this.clientY + 20;
+            } else {
+              _this.top = _this.clientY - _this.cardHeight - 30;
+            }
+          }, 50);
+        }
+      },
+      // 深度观察监听
+      deep: true,
+    },
+  },
   //方法集合
   methods: {
     handleWav() {},
@@ -241,7 +301,7 @@ export default {
         dItem.wordsList.forEach((sItem, sIndex) => {
           sItem.forEach((wItem, wIndex) => {
             //this.judgePad(sItem, wItem, wIndex);
-            this.mergeWordSymbol(sItem, wItem, wIndex);
+            this.mergeWordSymbol(wItem, wIndex);
             let obj = {
               paraIndex: dIndex, //段落索引
               sentIndex: sIndex, //在段落中句子索引
@@ -290,14 +350,11 @@ export default {
       }
     },
     //词和标点合一起
-    mergeWordSymbol(sItem, wItem, curIndex) {
-      let leg = sItem.length;
-      if (curIndex < leg - 1) {
-        if (this.chsFhList.indexOf(wItem.chs) > -1) {
-          wItem.isShow = false;
-        } else {
-          wItem.isShow = true;
-        }
+    mergeWordSymbol(wItem, curIndex) {
+      if (this.chsFhList.indexOf(wItem.chs) > -1) {
+        wItem.isShow = false;
+      } else {
+        wItem.isShow = true;
       }
     },
     //获取角色
@@ -346,8 +403,54 @@ export default {
     },
     //点击播放某个句子
     handleChangeTime(time) {
-      this.curTime = time;
-      this.$refs.audioLine.onTimeupdateTime(time / 1000);
+      if (item.timeList && item.timeList.length > 0) {
+        this.curTime = time;
+        this.$refs.audioLine.onTimeupdateTime(time / 1000);
+      }
+    },
+    viewNotes(e, noteNum) {
+      let _this = this;
+      let noteIndex = "";
+      if (_this.NumberList.indexOf(noteNum) > -1) {
+        for (let i = 0; i < _this.NumberList.length; i++) {
+          if (_this.NumberList[i] == noteNum) {
+            _this.noteIndex = "" + i + "";
+            break;
+          }
+        }
+      }
+      this.showNoteDetail(e, noteIndex);
+    },
+    showNoteDetail(e, noteNum) {
+      let _this = this;
+      if (_this.oldNoteNum != noteNum) {
+        this.isNoteShow = false;
+        setTimeout(() => {
+          _this.noteNum = noteNum;
+        }, 50);
+      }
+      _this.clientY = e.clientY;
+      let left = e.clientX;
+      let width = 0;
+      if (item.chs.length == 1 || item.chs.length == 2) {
+        width = 304;
+      } else if (item.chs.length == 3 || item.chs.length == 4) {
+        width = 432;
+      } else if (item.chs.length > 3) {
+        width = 560;
+      }
+      if (left - this.bodyLeft > this.contentWidth / 2) {
+        _this.left = left - width + 10;
+      } else {
+        _this.left = left;
+      }
+    },
+    // 处理分词数据
+    handleNote(val) {
+      let _this = this;
+      _this.isNoteShow = true;
+      _this.oldNoteNum = val;
+      //this.
     },
   },
   //生命周期 - 创建完成（可以访问当前this实例）

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

@@ -50,6 +50,7 @@
         :bodyLeft="bodyLeft"
         :bodyWidth="bodyWidth"
         :colorBox="colorBox"
+        :NotesList="NotesList"
         v-if="!showPhrases && !showPractice && !showWord"
       />
       <PhraseModel
@@ -89,7 +90,7 @@ import WordModel from "./WordModelChs.vue"; // 语音练习模式
 
 export default {
   name: "ArticleView",
-  props: ["curQue", "NNPENewWordList", "colorBox"],
+  props: ["curQue", "NNPENewWordList", "NotesList", "colorBox"],
   components: { NormalModelChs, Practice, WordModel, PhraseModel },
   data() {
     return {