文章注释与音频

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

@@ -93,6 +93,8 @@
                             pItem.className ? pItem.className : '',
                             noFont.indexOf(pItem.pinyin) > -1 ? 'noFont' : '',
                           ]"
+                          @click.stop="viewNotes($event, pItem.pinyin, item.timeList && item.timeList[pItem.sentIndex] && item.timeList[pItem.sentIndex].bg,
+                            item.timeList && item.timeList[pItem.sentIndex] && item.timeList[pItem.sentIndex].ed)"
                           >{{ pItem.pinyin }}</span
                         >
                         <span
@@ -122,7 +124,9 @@
                                 curTime < item.timeList[pItem.sentIndex].ed
                                   ? 'wordActive'
                                   : '',
-                              ]"
+                              ]"                              
+                              @click.stop="viewNotes($event, pItem.chs[wIndex], item.timeList && item.timeList[pItem.sentIndex] && item.timeList[pItem.sentIndex].bg,
+                            item.timeList && item.timeList[pItem.sentIndex] && item.timeList[pItem.sentIndex].ed)"
                               >{{
                                   NumberList.indexOf(pItem.pinyin) == -1
                                     ? pItem.chs[wIndex]
@@ -140,6 +144,8 @@
                             pItem.className ? pItem.className : '',
                             noFont.indexOf(pItem.pinyin) > -1 ? 'noFont' : '',
                           ]"
+                          @click.stop="viewNotes($event, pItem.pinyin, item.timeList && item.timeList[pItem.sentIndex] && item.timeList[pItem.sentIndex].bg,
+                            item.timeList && item.timeList[pItem.sentIndex] && item.timeList[pItem.sentIndex].ed)"
                           >{{ pItem.pinyin }}</span
                         >
                       </span>
@@ -154,6 +160,8 @@
                               : '',
                           ]"
                           style="text-align: left"
+                          @click.stop="viewNotes($event, item.wordsList[pIndex + 1].pinyin, item.timeList && item.timeList[pItem.sentIndex] && item.timeList[pItem.sentIndex].bg,
+                            item.timeList && item.timeList[pItem.sentIndex] && item.timeList[pItem.sentIndex].ed)"
                           >{{ item.wordsList[pIndex + 1].pinyin }}</span
                         >
                         <span
@@ -180,6 +188,8 @@
                               ? 'wordActive'
                               : '',
                           ]"
+                          @click.stop="viewNotes($event, item.wordsList[pIndex + 1].chs, item.timeList && item.timeList[pItem.sentIndex] && item.timeList[pItem.sentIndex].bg,
+                            item.timeList && item.timeList[pItem.sentIndex] && item.timeList[pItem.sentIndex].ed)"
                           >{{ NumberList.indexOf(
                                 item.wordsList[pIndex + 1].pinyin
                               ) == -1
@@ -197,7 +207,9 @@
                               ? 'noFont'
                               : '',
                           ]"
-                          style="text-align: left"
+                          style="text-align: left"                          
+                          @click.stop="viewNotes($event, item.wordsList[pIndex + 1].pinyin, item.timeList && item.timeList[pItem.sentIndex] && item.timeList[pItem.sentIndex].bg,
+                            item.timeList && item.timeList[pItem.sentIndex] && item.timeList[pItem.sentIndex].ed)"
                           >{{ item.wordsList[pIndex + 1].pinyin }}</span
                         >
                       </span>
@@ -223,6 +235,14 @@
                               : '',
                           ]"
                           style="text-align: left"
+                          @click.stop="
+                              viewNotes(
+                                $event,
+                                item.wordsList[pIndex + 2].pinyin, 
+                                item.timeList && item.timeList[pItem.sentIndex] && item.timeList[pItem.sentIndex].bg,
+                                item.timeList && item.timeList[pItem.sentIndex] && item.timeList[pItem.sentIndex].ed
+                              )
+                            "
                           >{{ item.wordsList[pIndex + 2].pinyin }}</span
                         >
                         <span
@@ -249,6 +269,14 @@
                               ? 'wordActive'
                               : '',
                           ]"
+                          @click.stop="
+                              viewNotes(
+                                $event,
+                                item.wordsList[pIndex + 2].chs, 
+                                item.timeList && item.timeList[pItem.sentIndex] && item.timeList[pItem.sentIndex].bg,
+                                item.timeList && item.timeList[pItem.sentIndex] && item.timeList[pItem.sentIndex].ed
+                              )
+                            "
                           >{{ NumberList.indexOf(
                                 item.wordsList[pIndex + 2].pinyin
                               ) == -1
@@ -267,6 +295,14 @@
                               : '',
                           ]"
                           style="text-align: left"
+                          @click.stop="
+                              viewNotes(
+                                $event,
+                                item.wordsList[pIndex + 2].pinyin, 
+                                item.timeList && item.timeList[pItem.sentIndex] && item.timeList[pItem.sentIndex].bg,
+                                item.timeList && item.timeList[pItem.sentIndex] && item.timeList[pItem.sentIndex].ed
+                              )
+                            "
                           >{{ item.wordsList[pIndex + 2].pinyin }}</span
                         >
                       </span>
@@ -280,6 +316,8 @@
                           pItem.className ? pItem.className : '',
                           noFont.indexOf(pItem.pinyin) > -1 ? 'noFont' : '',
                         ]"
+                        @click.stop="viewNotes($event, pItem.pinyin, item.timeList && item.timeList[pItem.sentIndex] && item.timeList[pItem.sentIndex].bg,
+                            item.timeList && item.timeList[pItem.sentIndex] && item.timeList[pItem.sentIndex].ed)"
                         >{{ pItem.pinyin }}</span
                       >
                       <span
@@ -311,6 +349,8 @@
                                 ? 'wordActive'
                                 : '',
                             ]"
+                            @click.stop="viewNotes($event, pItem.chs[wIndex], item.timeList && item.timeList[pItem.sentIndex] && item.timeList[pItem.sentIndex].bg,
+                            item.timeList && item.timeList[pItem.sentIndex] && item.timeList[pItem.sentIndex].ed)"
                             >{{  NumberList.indexOf(pItem.pinyin) == -1
                                   ? pItem.chs[wIndex]
                                   : "" }}</span
@@ -324,7 +364,9 @@
                           pItem.chs != '“' && pItem.padding ? 'padding' : '',
                           pItem.className ? pItem.className : '',
                           noFont.indexOf(pItem.pinyin) > -1 ? 'noFont' : '',
-                        ]"
+                        ]"                        
+                        @click.stop="viewNotes($event, pItem.pinyin, item.timeList && item.timeList[pItem.sentIndex] && item.timeList[pItem.sentIndex].bg,
+                            item.timeList && item.timeList[pItem.sentIndex] && item.timeList[pItem.sentIndex].ed)"
                         >{{ pItem.pinyin }}</span
                       >
                     </template>
@@ -614,6 +656,39 @@ export default {
       this.paraIndex = -1;
       this.sentIndex = -1;
     },
+    viewNotes(e, noteNum, time, ed) {
+      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) {
+            noteIndex = "" + i + "";
+            break;
+          }
+        }
+      }else{
+        _this.handleChangeTime(time, ed)
+      }
+      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 = 642;
+
+      if (left - this.bodyLeft > this.contentWidth / 2) {
+        _this.left = left - width + 10;
+      } else {
+        _this.left = left - 200;
+      }
+    },
     // 处理分词数据
     handleNote(val) {
       let _this = this;

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

@@ -137,6 +137,7 @@
                               pItem.className ? pItem.className : '',
                               noFont.indexOf(pItem.pinyin) > -1 ? 'noFont' : '',
                             ]"
+                            @click.stop="viewNotes($event, pItem.pinyin, item.timeList && item.timeList.length > 0 && item.timeList[pItem.sentIndex].bg, item, item.timeList && item.timeList.length > 0 && item.timeList[pItem.sentIndex].ed)"
                             >{{ pItem.pinyin }}</span
                           >
                           <span class="NNPE-chs">
@@ -153,6 +154,9 @@
                                     ? 'wordActive'
                                     : '',
                                 ]"
+                                @click.stop="
+                                  viewNotes($event, pItem.chs[wIndex], item.timeList && item.timeList.length > 0 && item.timeList[pItem.sentIndex].bg, item, item.timeList && item.timeList.length > 0 && item.timeList[pItem.sentIndex].ed)
+                                "
                                 >{{
                                   NumberList.indexOf(pItem.pinyin) == -1
                                     ? pItem.chs[wIndex]
@@ -172,6 +176,7 @@
                               pItem.className ? pItem.className : '',
                               noFont.indexOf(pItem.pinyin) > -1 ? 'noFont' : '',
                             ]"
+                            @click.stop="viewNotes($event, pItem.pinyin, item.timeList && item.timeList.length > 0 && item.timeList[pItem.sentIndex].bg, item, item.timeList && item.timeList.length > 0 && item.timeList[pItem.sentIndex].ed)"
                             >{{ pItem.pinyin }}</span
                           >
                         </span>
@@ -190,6 +195,12 @@
                                 ? 'noFont'
                                 : '',
                             ]"
+                            @click.stop="
+                              viewNotes(
+                                $event,
+                                item.wordsList[pIndex + 1].pinyin, item.timeList && item.timeList.length > 0 && item.timeList[pItem.sentIndex].bg, item, item.timeList && item.timeList.length > 0 && item.timeList[pItem.sentIndex].ed
+                              )
+                            "
                             style="text-align: left"
                             >{{ item.wordsList[pIndex + 1].pinyin }}</span
                           >
@@ -207,6 +218,9 @@
                                 ? 'wordActive'
                                 : '',
                             ]"
+                            @click.stop="
+                              viewNotes($event, item.wordsList[pIndex + 1].chs, item.timeList && item.timeList.length > 0 && item.timeList[pItem.sentIndex].bg, item, item.timeList && item.timeList.length > 0 && item.timeList[pItem.sentIndex].ed)
+                            "
                             >{{
                               NumberList.indexOf(
                                 item.wordsList[pIndex + 1].pinyin
@@ -229,6 +243,12 @@
                                 ? 'noFont'
                                 : '',
                             ]"
+                            @click.stop="
+                              viewNotes(
+                                $event,
+                                item.wordsList[pIndex + 1].pinyin, item.timeList && item.timeList.length > 0 && item.timeList[pItem.sentIndex].bg, item, item.timeList && item.timeList.length > 0 && item.timeList[pItem.sentIndex].ed
+                              )
+                            "
                             style="text-align: left"
                             >{{ item.wordsList[pIndex + 1].pinyin }}</span
                           >
@@ -259,6 +279,12 @@
                                 ? 'noFont'
                                 : '',
                             ]"
+                            @click.stop="
+                              viewNotes(
+                                $event,
+                                item.wordsList[pIndex + 2].pinyin, item.timeList && item.timeList.length > 0 && item.timeList[pItem.sentIndex].bg, item, item.timeList && item.timeList.length > 0 && item.timeList[pItem.sentIndex].ed
+                              )
+                            "
                             style="text-align: left"
                             >{{ item.wordsList[pIndex + 2].pinyin }}</span
                           >
@@ -275,6 +301,9 @@
                                 ? 'wordActive'
                                 : '',
                             ]"
+                            @click.stop="
+                              viewNotes($event, item.wordsList[pIndex + 2].chs, item.timeList && item.timeList.length > 0 && item.timeList[pItem.sentIndex].bg, item, item.timeList && item.timeList.length > 0 && item.timeList[pItem.sentIndex].ed)
+                            "
                             >{{
                               NumberList.indexOf(
                                 item.wordsList[pIndex + 2].pinyin
@@ -297,6 +326,12 @@
                                 ? 'noFont'
                                 : '',
                             ]"
+                            @click.stop="
+                              viewNotes(
+                                $event,
+                                item.wordsList[pIndex + 2].pinyin, item.timeList && item.timeList.length > 0 && item.timeList[pItem.sentIndex].bg, item, item.timeList && item.timeList.length > 0 && item.timeList[pItem.sentIndex].ed
+                              )
+                            "
                             style="text-align: left"
                             >{{ item.wordsList[pIndex + 2].pinyin }}</span
                           >
@@ -315,6 +350,7 @@
                             pItem.className ? pItem.className : '',
                             noFont.indexOf(pItem.pinyin) > -1 ? 'noFont' : '',
                           ]"
+                          @click.stop="viewNotes($event, pItem.pinyin, item.timeList && item.timeList.length > 0 && item.timeList[pItem.sentIndex].bg, item, item.timeList && item.timeList.length > 0 && item.timeList[pItem.sentIndex].ed)"
                           >{{ pItem.pinyin }}</span
                         >
 
@@ -338,6 +374,7 @@
                                   ? 'wordActive'
                                   : '',
                               ]"
+                              @click.stop="viewNotes($event, pItem.chs[wIndex], item.timeList && item.timeList.length > 0 && item.timeList[pItem.sentIndex].bg, item, item.timeList && item.timeList.length > 0 && item.timeList[pItem.sentIndex].ed)"
                               >{{
                                 NumberList.indexOf(pItem.pinyin) == -1
                                   ? pItem.chs[wIndex]
@@ -358,6 +395,7 @@
                             pItem.className ? pItem.className : '',
                             noFont.indexOf(pItem.pinyin) > -1 ? 'noFont' : '',
                           ]"
+                          @click.stop="viewNotes($event, pItem.pinyin, item.timeList && item.timeList.length > 0 && item.timeList[pItem.sentIndex].bg, item, item.timeList && item.timeList.length > 0 && item.timeList[pItem.sentIndex].ed)"
                           >{{ pItem.pinyin }}</span
                         >
                       </template>
@@ -740,6 +778,40 @@ export default {
     emptyEd() {
       this.ed = undefined;
     },
+    viewNotes(e, noteNum, time, item, ed) {
+      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) {
+            noteIndex = "" + i + "";
+            break;
+          }
+        }
+      }else{
+        _this.handleChangeTime(time, item, ed)
+      }
+      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 = 642;
+
+      if (left - this.bodyLeft > this.contentWidth / 2) {
+        _this.left = left - width + 10;
+      } else {
+        _this.left = left - 200;
+      }
+    },
+
     // 处理分词数据
     handleNote(val) {
       let _this = this;