Merge branch 'master' into lhd

# Conflicts:
#	src/views/book/courseware/preview/components/character_structure/CharacterStructurePreview.vue

src/views/book/courseware/preview/components/article/PhraseModelChs.vue

@@ -271,9 +271,9 @@
                 </div>
               </div>
               <div
+                v-if="curQue.property.multilingual_position === 'para'"
                 class="multilingual-para"
                 :class="[item.isTitle ? 'multilingual-para-center' : '']"
-                v-if="curQue.property.multilingual_position === 'para'"
               >
                 {{
                   curQue.detail[index].multilingualTextList && curQue.detail[index].multilingualTextList[multilingual]
@@ -564,9 +564,9 @@
                 {{ item.enwords }}
               </div>
               <div
+                v-if="curQue.property.multilingual_position === 'para'"
                 class="multilingual-para"
                 :class="[item.isTitle ? 'multilingual-para-center' : '']"
-                v-if="curQue.property.multilingual_position === 'para'"
               >
                 {{
                   curQue.detail[index].multilingualTextList[multilingual]
@@ -582,11 +582,11 @@
         </div>
       </template>
     </template>
-    <div class="multilingual" v-for="(items, indexs) in curQue.detail" :key="indexs">
+    <div v-for="(items, indexs) in curQue.detail" :key="indexs" class="multilingual">
       <div
+        v-if="curQue.property.multilingual_position === 'all'"
         class="multilingual-para"
         :class="[items.isTitle ? 'multilingual-para-center' : '']"
-        v-if="curQue.property.multilingual_position === 'all'"
       >
         {{
           items.multilingualTextList && items.multilingualTextList[multilingual]
@@ -665,8 +665,8 @@
           :mp3-url="activeWord ? activeWord.newWordMp3 : ''"
           :bg="activeWord ? activeWord.bg : null"
           :ed="activeWord ? activeWord.ed : null"
-          @changeCurQue="changeCurQue"
           :attrib="attrib"
+          @changeCurQue="changeCurQue"
         />
       </div>
     </template>
@@ -984,8 +984,8 @@ export default {
       this.resObj = { sentList: resArrs, timeList };
     },
     findLightWord(wItem, startIndex, sentence, sItem) {
-      let endIndex = 0,
-        words = '';
+      let endIndex = 0;
+      let words = '';
       this.newWordList.forEach((item) => {
         if (item.length == 1) {
           if (item == wItem.chs && !wItem.banLight) {
@@ -1089,7 +1089,7 @@ export default {
       }
       let pos = time.indexOf(':');
       let min = 0;
-      var sec = 0;
+      let sec = 0;
       if (pos > 0) {
         min = parseInt(time.substring(0, pos));
         sec = parseFloat(time.substring(pos + 1));
@@ -1192,7 +1192,7 @@ export default {
       if (answer) {
         let writeModel = this.curQue.Bookanswer.writeModel;
         let hz = answer.hz;
-        if (writeModel.hasOwnProperty(hz)) {
+        if (writeModel.hasOwn(hz)) {
           writeModel[hz].push(answer);
         } else {
           writeModel[hz] = [answer];
@@ -1207,7 +1207,7 @@ export default {
       if (_this.NumberList.indexOf(noteNum) > -1) {
         for (let i = 0; i < _this.NumberList.length; i++) {
           if (_this.NumberList[i] == noteNum) {
-            noteIndex = String(i) + '';
+            noteIndex = `${String(i)}`;
             break;
           }
         }

src/views/book/courseware/preview/components/article/WordModelChs.vue

@@ -270,9 +270,9 @@
                 </div>
               </div>
               <div
+                v-if="curQue.property.multilingual_position === 'para'"
                 class="multilingual-para"
                 :class="[item.isTitle ? 'multilingual-para-center' : '']"
-                v-if="curQue.property.multilingual_position === 'para'"
               >
                 {{
                   curQue.detail[index].multilingualTextList && curQue.detail[index].multilingualTextList[multilingual]
@@ -536,9 +536,9 @@
                 {{ item.enwords }}
               </div>
               <div
+                v-if="curQue.property.multilingual_position === 'para'"
                 class="multilingual-para"
                 :class="[item.isTitle ? 'multilingual-para-center' : '']"
-                v-if="curQue.property.multilingual_position === 'para'"
               >
                 {{
                   curQue.detail[index].multilingualTextList[multilingual]
@@ -554,11 +554,11 @@
         </div>
       </template>
     </template>
-    <div class="multilingual" v-for="(items, indexs) in curQue.detail" :key="indexs">
+    <div v-for="(items, indexs) in curQue.detail" :key="indexs" class="multilingual">
       <div
+        v-if="curQue.property.multilingual_position === 'all'"
         class="multilingual-para"
         :class="[items.isTitle ? 'multilingual-para-center' : '']"
-        v-if="curQue.property.multilingual_position === 'all'"
       >
         {{
           items.multilingualTextList && items.multilingualTextList[multilingual]
@@ -634,8 +634,8 @@
           :current-tree-i-d="currentTreeID"
           :TaskModel="TaskModel"
           :write-list="curQue.Bookanswer.writeModel"
-          @changeCurQue="changeCurQue"
           :attrib="attrib"
+          @changeCurQue="changeCurQue"
         />
       </div>
     </template>
@@ -961,7 +961,7 @@ export default {
       }
       let pos = time.indexOf(':');
       let min = 0;
-      var sec = 0;
+      let sec = 0;
       if (pos > 0) {
         min = parseInt(time.substring(0, pos));
         sec = parseFloat(time.substring(pos + 1));
@@ -1041,7 +1041,7 @@ export default {
       if (answer) {
         let writeModel = this.curQue.Bookanswer.writeModel;
         let hz = answer.hz;
-        if (writeModel.hasOwnProperty(hz)) {
+        if (writeModel.hasOwn(hz)) {
           writeModel[hz].push(answer);
         } else {
           writeModel[hz] = [answer];

src/views/book/courseware/preview/components/article/index.vue

@@ -79,9 +79,9 @@
             :config="config"
             :NNPEAnnotationList="NNPEAnnotationList"
             :col-length="colLength"
-            @changeConfig="changeConfig"
             :multilingual="showLang && getLang() ? getLang() : ''"
             :attrib="data.unified_attrib"
+            @changeConfig="changeConfig"
           />
           <PhraseModel
             v-if="showPhrases"
@@ -98,9 +98,9 @@
             :NNPEAnnotationList="NNPEAnnotationList"
             :col-length="colLength"
             :NpcNewWordMp3="NpcNewWordMp3"
-            @changeConfig="changeConfig"
             :multilingual="showLang && getLang() ? getLang() : ''"
             :attrib="data.unified_attrib"
+            @changeConfig="changeConfig"
           />
           <Practice
             v-if="showPractice"
@@ -116,9 +116,9 @@
             :col-length="colLength"
             :NpcNewWordMp3="NpcNewWordMp3"
             :is-full="isFull"
-            @changeConfig="changeConfig"
             :multilingual="showLang && getLang() ? getLang() : ''"
             :attrib="data.unified_attrib"
+            @changeConfig="changeConfig"
           />
           <WordModel
             v-if="showWord"
@@ -134,9 +134,9 @@
             :config="config"
             :TaskModel="isJudgingRightWrong ? 'ANSWER' : ''"
             :col-length="colLength"
-            @changeConfig="changeConfig"
             :multilingual="showLang && getLang() ? getLang() : ''"
             :attrib="data.unified_attrib"
+            @changeConfig="changeConfig"
           />
         </div>
         <div :id="'screen-' + mathNum" class="voice-full-screen">
@@ -154,23 +154,23 @@
             :config="config"
             :TaskModel="isJudgingRightWrong ? 'ANSWER' : ''"
             :NpcNewWordMp3="NpcNewWordMp3"
+            :attrib="data.unified_attrib"
             @handleWav="handleWav"
             @changePinyin="changePinyins"
             @changeEN="changeENs"
             @exitFullscreen="exitFullscreen"
             @changeIsFull="changeIsFull"
-            :attrib="data.unified_attrib"
           />
         </div>
       </div>
       <template v-if="data.new_word_list.new_word_list.length > 0">
-        <NewWordPreview :newData="data.new_word_list"></NewWordPreview>
+        <NewWordPreview :new-data="data.new_word_list" />
       </template>
       <template v-if="data.other_word_list.new_word_list.length > 0">
-        <NewWordPreview :newData="data.other_word_list"></NewWordPreview>
+        <NewWordPreview :new-data="data.other_word_list" />
       </template>
       <template v-if="data.notes_list.option.length > 0">
-        <NotesPreview :notesData="data.notes_list"></NotesPreview>
+        <NotesPreview :notes-data="data.notes_list" />
       </template>
     </div>
   </div>
@@ -256,7 +256,7 @@ export default {
             let trans_arr = item.translation.split('\n');
             this.data.detail.forEach((items) => {
               let items_trans_arr = [];
-              if (!items.hasOwnProperty('multilingualTextList')) {
+              if (!items.hasOwn('multilingualTextList')) {
                 this.$set(items, 'multilingualTextList', {});
               }
               if (items.para) {
@@ -435,7 +435,7 @@ export default {
           let trans_arr = item.translation.split('\n');
           this.data.detail.forEach((items) => {
             let items_trans_arr = [];
-            if (!items.hasOwnProperty('multilingualTextList')) {
+            if (!items.hasOwn('multilingualTextList')) {
               this.$set(items, 'multilingualTextList', {});
             }
             if (items.para) {

src/views/book/courseware/preview/components/character_structure/CharacterStructurePreview.vue

@@ -13,12 +13,12 @@
         <draggable
           v-model="SortArr"
           animation="300"
-          @start="onStart($event)"
-          @end="onEnd($event)"
-          @choose="choose($event)"
           group="site"
           class="content-box"
           :disabled="disabled"
+          @start="onStart($event)"
+          @end="onEnd($event)"
+          @choose="choose($event)"
         >
           <transition-group>
             <div
@@ -57,8 +57,8 @@
           </div>
           <div class="hzpinyin">
             <div
-              class="pinyin"
               v-if="isEnable(data.property.view_pinyin)"
+              class="pinyin"
               :style="{
                 fontSize: data.unified_attrib && data.unified_attrib.pinyin_size ? data.unified_attrib.pinyin_size : '',
               }"
@@ -138,10 +138,10 @@
                   />
                 </div>
                 <div
+                  v-if="answer.answer_list[row].answer_list.length == 0"
+                  :key="row"
                   class="option_one"
                   :class="[isJudgingRightWrong && items.answer ? 'wrong' : '']"
-                  :key="row"
-                  v-if="answer.answer_list[row].answer_list.length == 0"
                   :style="{
                     borderColor:
                       data.unified_attrib && data.unified_attrib.topic_color ? data.unified_attrib.topic_color : '',
@@ -172,7 +172,7 @@
               {{ row + 1 }}
             </div>
             <div class="hzpinyin">
-              <div class="pinyin" v-if="isEnable(data.property.view_pinyin)">
+              <div v-if="isEnable(data.property.view_pinyin)" class="pinyin">
                 {{ items.pinyin }}
               </div>
               <template v-if="items.hz_info.length > 0">
@@ -268,7 +268,7 @@ export default {
       correctArr: [],
     };
   },
-  //计算属性 类似于data概念
+  // 计算属性 类似于data概念
   computed: {},
   watch: {
     'data.option_list': {
@@ -289,22 +289,22 @@ export default {
       let index = e.item.outerHTML.indexOf('id');
       let formIndex = e.item.outerHTML[index + 4];
       let formIndex2 = e.item.outerHTML[index + 5];
-      if (formIndex * 1 != NaN) {
-        this.currentId = formIndex * 1;
+      if (Number(formIndex) != NaN) {
+        this.currentId = Number(formIndex);
       }
-      if (formIndex2 * 1 != NaN) {
-        this.currentId = (this.currentId + '' + formIndex2) * 1;
+      if (Number(formIndex2) != NaN) {
+        this.currentId = (String(this.currentId) + formIndex2) * 1;
       }
     },
-    //开始拖拽事件
+    // 开始拖拽事件
     onStart() {
       this.drag = true;
       this.dragData = JSON.parse(JSON.stringify(this.SortArr));
     },
-    //拖拽结束事件
+    // 拖拽结束事件
     onEnd(e) {
       this.drag = false;
-      let formIndex = e.to.firstChild.attributes[1].value[4] * 1;
+      let formIndex = Number(e.to.firstChild.attributes[1].value[4]);
       if (`${formIndex}` != 'NaN') {
         if (this.answer.answer_list[formIndex].answer_list.length > 1) {
           let arr = [];
@@ -337,7 +337,7 @@ export default {
                 ? this.data.structure_select_list.find((p) => p.file_id === items.answer)
                   ? this.data.structure_select_list.find((p) => p.file_id === items.answer).value
                   : ''
-                : require('@/assets/structure/structure-' + items.answer + '.png'),
+                : require(`@/assets/structure/structure-${items.answer}.png`),
             userAnswerJudge: 'example',
           };
           this.single.push({

src/views/book/courseware/preview/components/dialogue_article/PhraseModelChs.vue

@@ -1,24 +1,24 @@
 <!--  -->
 <template>
-  <div class="NNPE-ArticleView" v-if="curQue">
+  <div v-if="curQue" class="NNPE-ArticleView">
     <div
-      class="aduioLine-box aduioLine-practice-npc"
       v-if="
         ((curQue.mp3_list && curQue.mp3_list.length > 0 && curQue.mp3_list[0].url) ||
           config.isHasPY ||
           config.isHasEN) &&
         curQue.property.mp3_position === 'top'
       "
+      class="aduioLine-box aduioLine-practice-npc"
     >
       <div class="aduioLine-content">
         <template v-if="curQue.mp3_list && curQue.mp3_list.length > 0 && curQue.mp3_list[0].url">
           <AudioLine
-            audioId="diaPhraAudio"
+            ref="audioLine"
+            audio-id="diaPhraAudio"
             :mp3="curQue.mp3_list[0].url"
-            :getCurTime="getCurTime"
-            :mp3Source="curQue.mp3_list[0].source"
+            :get-cur-time="getCurTime"
+            :mp3-source="curQue.mp3_list[0].source"
             :width="colLength == 2 ? 200 : isPhone ? 200 : 790"
-            ref="audioLine"
           />
         </template>
       </div>
@@ -54,23 +54,23 @@
           <div :class="['empty-left', isHasRemark ? 'hasRemark' : '']"></div>
           <div class="empty-right"></div>
         </div>
-        <p :class="['notice', isHasRemark ? 'hasRemark' : '']" v-if="curQue.notice">
+        <p v-if="curQue.notice" :class="['notice', isHasRemark ? 'hasRemark' : '']">
           {{ curQue.notice }}
         </p>
         <div
-          :class="['NNPE-detail', item.isTitle ? 'NNPE-detail-title' : '']"
           v-for="(item, index) in resArr"
           :key="'detail' + index"
+          :class="['NNPE-detail', item.isTitle ? 'NNPE-detail-title' : '']"
         >
           <div :class="['article-content', isHasRemark ? 'hasRemark' : '']">
-            <RoleChs :curRole="item.roleDetail" :type="curQue.property.role_img_type" />
+            <RoleChs :cur-role="item.roleDetail" :type="curQue.property.role_img_type" />
             <div class="wordsList-box">
-              <img :src="articleImg[index]" v-if="articleImg[0] && index == 0" />
+              <img v-if="articleImg[0] && index == 0" :src="articleImg[index]" />
               <!-- <div class="roleDetail" v-if="item.roleDetail.detail && item.roleDetail.detail.wordsList.length > 0">
                 <span class="pinyin">{{ item.roleDetail.detail.wordsList | handlePinyin }}</span>
                 <span class="chs">{{ item.roleDetail.detail.wordsList | handleChs }}</span>
               </div> -->
-              <div class="roleDetail" v-if="item.roleDetail.fullName || item.roleDetail.fullPinyin">
+              <div v-if="item.roleDetail.fullName || item.roleDetail.fullPinyin" class="roleDetail">
                 <span class="chs">{{ item.roleDetail.fullName }}</span>
                 <span class="pinyin">{{ item.roleDetail.fullPinyin }}</span>
               </div>
@@ -83,9 +83,9 @@
                 </div>
                 <div style="overflow: hidden; clear: both"></div>
                 <div
-                  class="NNPE-words"
                   v-for="(pItem, pIndex) in item.wordsList"
                   :key="'wordsList' + pIndex"
+                  class="NNPE-words"
                   :class="[
                     pItem.chs != '“' && pItem.wordIndex == 0 ? 'textLeft' : 'textCenter',
                     pItem.chs == '“' ? 'textRight' : '',
@@ -119,12 +119,12 @@
                               newWordList.indexOf(pItem.chs) > -1 ? 'newActive' : '',
                               pItem.words ? 'newActive' : '',
                             ]"
-                            @click.stop="viewNotes($event, pItem.words ? pItem.words : pItem.chs)"
                             :style="{
                               fontFamily: pItem.config.fontFamily,
                               height: '28px',
                               display: 'inline-block',
                             }"
+                            @click.stop="viewNotes($event, pItem.words ? pItem.words : pItem.chs)"
                             >{{ NumberList.indexOf(pItem.pinyin) == -1 ? pItem.chs : '' }}</span
                           >
                           <span
@@ -150,6 +150,11 @@
                           <span
                             class="NNPE-chs"
                             style="text-align: left"
+                            :style="{
+                              fontFamily: item.wordsList[pIndex + 1].config.fontFamily,
+                              height: '28px',
+                              display: 'inline-block',
+                            }"
                             @click.stop="
                               viewNotes(
                                 $event,
@@ -158,11 +163,6 @@
                                   : item.wordsList[pIndex + 1].chs,
                               )
                             "
-                            :style="{
-                              fontFamily: item.wordsList[pIndex + 1].config.fontFamily,
-                              height: '28px',
-                              display: 'inline-block',
-                            }"
                             >{{
                               NumberList.indexOf(item.wordsList[pIndex + 1].pinyin) == -1
                                 ? item.wordsList[pIndex + 1].chs
@@ -173,19 +173,19 @@
                             v-if="curQue.property.pinyin_position == 'bottom' && config.isShowPY && item.dhaspinyin"
                             class="NNPE-pinyin"
                             :class="[noFont.indexOf(item.wordsList[pIndex + 1].pinyin) > -1 ? 'noFont' : '']"
-                            @click.stop="viewNotes($event, item.wordsList[pIndex + 1].pinyin)"
                             style="text-align: left"
+                            @click.stop="viewNotes($event, item.wordsList[pIndex + 1].pinyin)"
                             >{{ item.wordsList[pIndex + 1].pinyin }}</span
                           >
                         </span>
                         <span
-                          class="NNPE-words-box"
                           v-if="
                             item.wordsList[pIndex + 2] &&
                             item.wordsList[pIndex + 2].chs &&
                             (chsFhList.indexOf(item.wordsList[pIndex + 2].chs) > -1 ||
                               NumberList.indexOf(item.wordsList[pIndex + 2].chs) > -1)
                           "
+                          class="NNPE-words-box"
                         >
                           <span
                             v-if="curQue.property.pinyin_position == 'top' && config.isShowPY && item.dhaspinyin"
@@ -193,8 +193,8 @@
                               'NNPE-pinyin',
                               noFont.indexOf(item.wordsList[pIndex + 2].pinyin) > -1 ? 'noFont' : '',
                             ]"
-                            @click.stop="viewNotes($event, item.wordsList[pIndex + 2].pinyin)"
                             style="text-align: left"
+                            @click.stop="viewNotes($event, item.wordsList[pIndex + 2].pinyin)"
                             >{{ item.wordsList[pIndex + 2].pinyin }}</span
                           >
                           <span
@@ -209,6 +209,11 @@
                                 ? 'wordActive'
                                 : '',
                             ]"
+                            :style="{
+                              fontFamily: item.wordsList[pIndex + 2].config.fontFamily,
+                              height: '28px',
+                              display: 'inline-block',
+                            }"
                             @click.stop="
                               viewNotes(
                                 $event,
@@ -217,11 +222,6 @@
                                   : item.wordsList[pIndex + 2].chs,
                               )
                             "
-                            :style="{
-                              fontFamily: item.wordsList[pIndex + 2].config.fontFamily,
-                              height: '28px',
-                              display: 'inline-block',
-                            }"
                             >{{
                               NumberList.indexOf(item.wordsList[pIndex + 2].pinyin) == -1
                                 ? item.wordsList[pIndex + 2].chs
@@ -234,8 +234,8 @@
                               'NNPE-pinyin',
                               noFont.indexOf(item.wordsList[pIndex + 2].pinyin) > -1 ? 'noFont' : '',
                             ]"
-                            @click.stop="viewNotes($event, item.wordsList[pIndex + 2].pinyin)"
                             style="text-align: left"
+                            @click.stop="viewNotes($event, item.wordsList[pIndex + 2].pinyin)"
                             >{{ item.wordsList[pIndex + 2].pinyin }}</span
                           >
                         </span>
@@ -260,12 +260,12 @@
                             pItem.chs != '“' && pItem.padding && config.isShowPY ? 'padding' : '',
                             pItem.words ? 'newActive' : '',
                           ]"
-                          @click.stop="viewNotes($event, pItem.words ? pItem.words : pItem.chs)"
                           :style="{
                             fontFamily: pItem.config.fontFamily,
                             height: '28px',
                             display: 'inline-block',
                           }"
+                          @click.stop="viewNotes($event, pItem.words ? pItem.words : pItem.chs)"
                           >{{ NumberList.indexOf(pItem.pinyin) == -1 ? pItem.chs : '' }}</span
                         >
                         <span
@@ -303,9 +303,9 @@
                   {{ item.enwords }}
                 </div>
                 <div
+                  v-if="curQue.property.multilingual_position === 'para'"
                   class="multilingual-para"
                   :class="[item.isTitle ? 'multilingual-para-center' : '']"
-                  v-if="curQue.property.multilingual_position === 'para'"
                 >
                   {{
                     curQue.detail[index].multilingualTextList && curQue.detail[index].multilingualTextList[multilingual]
@@ -314,13 +314,13 @@
                   }}
                 </div>
               </div>
-              <img :src="articleImg[index + 1]" v-if="articleImg[index + 1]" />
+              <img v-if="articleImg[index + 1]" :src="articleImg[index + 1]" />
             </div>
           </div>
           <div class="remarkBox remark-top">
             <RemarkChs
-              :remarkDetail="item.remarkDetail"
-              :marginTop="item.roleDetail.detail && item.roleDetail.detail.wordsList.length > 0 ? 44 : 8"
+              :remark-detail="item.remarkDetail"
+              :margin-top="item.roleDetail.detail && item.roleDetail.detail.wordsList.length > 0 ? 44 : 8"
             />
           </div>
         </div>
@@ -330,9 +330,9 @@
         </div>
         <template v-for="(items, indexs) in curQue.detail">
           <div
-            class="multilingual"
-            :key="indexs"
             v-if="curQue.property.multilingual_position === 'all' && items.multilingualTextList[multilingual]"
+            :key="indexs"
+            class="multilingual"
           >
             <div class="multilingual-para" :class="[items.isTitle ? 'multilingual-para-center' : '']">
               {{
@@ -343,29 +343,29 @@
             </div>
           </div>
         </template>
-        <div class="dia-article-record" v-if="1 == 2">
-          <Soundrecord @handleWav="handleWav" type="promax" class="luyin-box" />
+        <div v-if="1 == 2" class="dia-article-record">
+          <Soundrecord type="promax" class="luyin-box" @handleWav="handleWav" />
         </div>
       </div>
     </template>
     <div
-      class="aduioLine-box aduioLine-practice-npc aduioLine-box-bottom"
       v-if="
         ((curQue.mp3_list && curQue.mp3_list.length > 0 && curQue.mp3_list[0].url) ||
           config.isHasPY ||
           config.isHasEN) &&
         curQue.property.mp3_position === 'bottom'
       "
+      class="aduioLine-box aduioLine-practice-npc aduioLine-box-bottom"
     >
       <div class="aduioLine-content">
         <template v-if="curQue.mp3_list && curQue.mp3_list.length > 0 && curQue.mp3_list[0].url">
           <AudioLine
-            audioId="diaPhraAudio"
+            ref="audioLine"
+            audio-id="diaPhraAudio"
             :mp3="curQue.mp3_list[0].url"
-            :getCurTime="getCurTime"
-            :mp3Source="curQue.mp3_list[0].source"
+            :get-cur-time="getCurTime"
+            :mp3-source="curQue.mp3_list[0].source"
             :width="colLength == 2 ? 200 : isPhone ? 200 : 790"
-            ref="audioLine"
           />
         </template>
       </div>
@@ -404,16 +404,16 @@
       >
         <Wordcard
           :word="word"
-          :changeWordCard="changeWordCard"
-          :themeColor="attrib ? attrib.topic_color : '#e35454'"
-          :currentTreeID="currentTreeID"
+          :change-word-card="changeWordCard"
+          :theme-color="attrib ? attrib.topic_color : '#e35454'"
+          :current-tree-i-d="currentTreeID"
           :TaskModel="TaskModel"
-          :writeList="curQue.Bookanswer.writeModel"
-          @changeCurQue="changeCurQue"
-          :mp3Url="wordPlayMp3"
+          :write-list="curQue.Bookanswer.writeModel"
+          :mp3-url="wordPlayMp3"
           :bg="wordbgs"
           :ed="wordeds"
           :attrib="attrib"
+          @changeCurQue="changeCurQue"
         />
       </div>
     </template>
@@ -426,7 +426,7 @@
           left: windowWidth > 642 ? '' : '0px',
         }"
       >
-        <Notecard :item="curNoteCon" :changeCard="changeCard" :attrib="attrib" />
+        <Notecard :item="curNoteCon" :change-card="changeCard" :attrib="attrib" />
       </div>
     </template>
   </div>
@@ -442,22 +442,6 @@ import RemarkChs from './RemarkChs.vue';
 import Soundrecord from '../../common/SoundRecord.vue';
 export default {
   name: 'PhraseModelChs',
-  props: [
-    'curQue',
-    'bodyLeft',
-    'NNPENewWordList',
-    'NNPEAnnotationList',
-    'colorBox',
-    'attrib',
-    'noFont',
-    'currentTreeID',
-    'config',
-    'TaskModel',
-    'colLength',
-    'NpcNewWordMp3',
-    'isPhone',
-    'multilingual',
-  ],
   components: {
     AudioLine,
     Wordcard,
@@ -471,7 +455,7 @@ export default {
       let str = '';
       wordsList.forEach((item, index) => {
         if (index < wordsList.length - 1) {
-          str += item.pinyin + ' ';
+          str += `${item.pinyin} `;
         } else {
           str += item.pinyin;
         }
@@ -482,7 +466,7 @@ export default {
       let str = '';
       wordsList.forEach((item, index) => {
         if (index < wordsList.length - 1) {
-          str += item.chs + ' ';
+          str += `${item.chs} `;
         } else {
           str += item.chs;
         }
@@ -490,10 +474,26 @@ export default {
       return str;
     },
   },
+  props: [
+    'curQue',
+    'bodyLeft',
+    'NNPENewWordList',
+    'NNPEAnnotationList',
+    'colorBox',
+    'attrib',
+    'noFont',
+    'currentTreeID',
+    'config',
+    'TaskModel',
+    'colLength',
+    'NpcNewWordMp3',
+    'isPhone',
+    'multilingual',
+  ],
   data() {
     return {
       resArr: [],
-      curTime: 0, //单位s
+      curTime: 0, // 单位s
       chsFhList: ['，', '。', '”', '：', '》', '？', '！', '；', '#', '、'],
       enFhList: [',', '.', ';', '?', '!', ':', '>', '<'],
       NumberList: ['①', '②', '③', '④', '⑤', '⑥', '⑦', '⑧', '⑨', '⑩', '⑪', '⑫', '⑬', '⑭', '⑮', '⑯', '⑰', '⑱', '⑲', '⑳'],
@@ -528,7 +528,7 @@ export default {
   computed: {},
   watch: {
     hz: {
-      handler: function (val, oldVal) {
+      handler(val, oldVal) {
         let _this = this;
         if (val) {
           _this.handleNewWords(val, _this.top, _this.left);
@@ -538,7 +538,7 @@ export default {
       deep: true,
     },
     isShow: {
-      handler: function (val, oldVal) {
+      handler(val, oldVal) {
         let _this = this;
         if (val) {
           setTimeout(() => {
@@ -555,7 +555,7 @@ export default {
       deep: true,
     },
     noteNum: {
-      handler: function (val, oldVal) {
+      handler(val, oldVal) {
         let _this = this;
         if (val) {
           _this.handleNote(val);
@@ -565,7 +565,7 @@ export default {
       deep: true,
     },
     isNoteShow: {
-      handler: function (val, oldVal) {
+      handler(val, oldVal) {
         let _this = this;
         if (val) {
           setTimeout(() => {
@@ -582,9 +582,31 @@ export default {
       deep: true,
     },
   },
-  //方法集合
+  // 生命周期 - 创建完成（可以访问当前this实例）
+  created() {},
+  // 生命周期 - 挂载完成（可以访问DOM元素）
+  mounted() {
+    if (this.NNPENewWordList && this.NNPENewWordList.length > 0) {
+      this.handleNewword();
+    }
+    if (this.curQue) {
+      this.handleData();
+    }
+    window.addEventListener('resize', this.getScreenHeight);
+    this.getScreenHeight();
+  },
+  beforeCreate() {}, // 生命周期 - 创建之前
+  beforeMount() {}, // 生命周期 - 挂载之前
+  beforeUpdate() {}, // 生命周期 - 更新之前
+  updated() {}, // 生命周期 - 更新之后
+  beforeDestroy() {
+    window.removeEventListener('resize', this.getScreenHeight);
+  }, // 生命周期 - 销毁之前
+  destroyed() {}, // 生命周期 - 销毁完成
+  activated() {},
+  // 方法集合
   methods: {
-    //拼音的显示和隐藏
+    // 拼音的显示和隐藏
     changePinyin() {
       if (this.config.isHasPY) {
         this.$emit('changeConfig', 'isShowPY');
@@ -620,27 +642,25 @@ export default {
         dItem.wordsList.forEach((sItem, sIndex) => {
           let sentence = dItem.sentences[sIndex];
           sItem.forEach((wItem, wIndex) => {
-            //this.judgePad(sItem, wItem, wIndex);
+            // this.judgePad(sItem, wItem, wIndex);
             this.mergeWordSymbol(wItem);
             let words = '';
             if (this.newWordList.length > 0) {
               if (!this.highWords) {
                 this.findLightWord(wItem, wIndex, sentence, sItem);
                 words = this.highWords ? this.highWords.words : '';
+              } else if (wIndex > this.highWords.endIndex - 1) {
+                this.highWords = null;
+                this.findLightWord(wItem, wIndex, sentence, sItem);
+                words = this.highWords ? this.highWords.words : '';
               } else {
-                if (wIndex > this.highWords.endIndex - 1) {
-                  this.highWords = null;
-                  this.findLightWord(wItem, wIndex, sentence, sItem);
-                  words = this.highWords ? this.highWords.words : '';
-                } else {
-                  words = this.highWords ? this.highWords.words : '';
-                }
+                words = this.highWords ? this.highWords.words : '';
               }
             }
             let obj = {
-              paraIndex: dIndex, //段落索引
-              sentIndex: sIndex, //在段落中句子索引
-              wordIndex: wIndex, //单词的索引
+              paraIndex: dIndex, // 段落索引
+              sentIndex: sIndex, // 在段落中句子索引
+              wordIndex: wIndex, // 单词的索引
               pinyin:
                 curQue.pinyin_type === 'pinyin'
                   ? curQue.property.is_first_sentence_first_hz_pinyin_first_char_upper_case === 'true' && wIndex === 0
@@ -648,11 +668,11 @@ export default {
                     : wItem.pinyin
                   : wItem.pinyin_tone,
               chs: wItem.chs,
-              padding: true, //wItem.padding,
+              padding: true, // wItem.padding,
               className: wItem.className,
               isShow: wItem.isShow,
-              words: words,
-              isNewWord: this.newWords.indexOf(wItem.chs) > -1 ? true : false,
+              words,
+              isNewWord: this.newWords.indexOf(wItem.chs) > -1,
               config: {
                 fontFamily: wItem.fontFamily,
               },
@@ -662,13 +682,13 @@ export default {
           });
         });
         let enwords =
-          dItem.sentencesEn && dItem.sentencesEn.length > 0 ? dItem.sentencesEn.join(' ').replace(/\'/g, '’') : '';
+          dItem.sentencesEn && dItem.sentencesEn.length > 0 ? dItem.sentencesEn.join(' ').replace(/\\'/g, '’') : '';
         let paraObj = {
           wordsList: paraArr,
-          enwords: enwords,
-          roleDetail: roleDetail,
-          remarkDetail: remarkDetail,
-          dhaspinyin: dhaspinyin,
+          enwords,
+          roleDetail,
+          remarkDetail,
+          dhaspinyin,
         };
         resArr.push(paraObj);
       });
@@ -682,43 +702,41 @@ export default {
       }
     },
     findLightWord(wItem, startIndex, sentence, sItem) {
-      let words = '',
-        endIndex = 0;
+      let endIndex = 0;
+      let words = '';
       this.newWordList.forEach((item) => {
-        if (item.length == 1) {
-          if (item == wItem.chs && !wItem.banLight) {
+        if (item.length === 1) {
+          if (item === wItem.chs && !wItem.banLight) {
             words = wItem.chs;
             endIndex = startIndex + 1;
           }
-        } else {
-          if (item[0] == wItem.chs && sentence.indexOf(item) > -1) {
-            let index = null;
-            let chsStr = '';
-            for (let i = startIndex; i < sItem.length + 1; i++) {
-              index = i;
-              if (chsStr.length == item.length) {
-                break;
-              } else {
-                chsStr += sItem[i] ? sItem[i].chs : '';
-              }
-            }
-            if (chsStr == item && !wItem.banLight) {
-              words = item;
-              endIndex = index;
+        } else if (item[0] === wItem.chs && sentence.indexOf(item) > -1) {
+          let index = null;
+          let chsStr = '';
+          for (let i = startIndex; i < sItem.length + 1; i++) {
+            index = i;
+            if (chsStr.length === item.length) {
+              break;
+            } else {
+              chsStr += sItem[i] ? sItem[i].chs : '';
             }
-          } else if (wItem.new_word && wItem.new_word == item && !wItem.banLight) {
+          }
+          if (chsStr === item && !wItem.banLight) {
             words = item;
-            endIndex = startIndex + 1;
+            endIndex = index;
           }
+        } else if (wItem.new_word && wItem.new_word === item && !wItem.banLight) {
+          words = item;
+          endIndex = startIndex + 1;
         }
       });
       if (words) {
-        this.highWords = { words: words, endIndex: endIndex };
+        this.highWords = { words, endIndex };
       } else {
         this.highWords = null;
       }
     },
-    //词和标点合一起
+    // 词和标点合一起
     mergeWordSymbol(wItem) {
       if (this.chsFhList.indexOf(wItem.chs) > -1 || this.NumberList.indexOf(wItem.chs) > -1) {
         wItem.isShow = false;
@@ -726,14 +744,14 @@ export default {
         wItem.isShow = true;
       }
     },
-    //获取角色
+    // 获取角色
     getRole(dItem) {
       let roleIndex = dItem.roleIndex;
       let resObj = null;
       let roleList = JSON.parse(JSON.stringify(this.curQue.property.role_list));
       for (let i = 0; i < roleList.length; i++) {
         let item = roleList[i];
-        if (item.id == roleIndex) {
+        if (item.id === roleIndex) {
           resObj = item;
           // resObj.color = this.colorBox[i];
           break;
@@ -742,7 +760,7 @@ export default {
 
       return resObj;
     },
-    //判断是否有padding
+    // 判断是否有padding
     judgePad(sItem, wItem, curIndex) {
       let leg = sItem.length;
       if (curIndex < leg - 1) {
@@ -758,7 +776,7 @@ export default {
         }
       }
     },
-    //转化时间
+    // 转化时间
     handleTimeList(list) {
       let listRes = [];
       list.forEach((item) => {
@@ -767,7 +785,7 @@ export default {
       });
       return listRes;
     },
-    //点击播放某个句子
+    // 点击播放某个句子
     handleChangeTime(time) {
       this.curTime = time;
       this.$refs.audioLine.onTimeupdateTime(time);
@@ -794,12 +812,12 @@ export default {
       if (word && this.newWordList.indexOf(word) > -1) {
         this.highWordsArr.push(word);
       }
-      if (words && word != words && this.newWordList.indexOf(words) > -1) {
+      if (words && word !== words && this.newWordList.indexOf(words) > -1) {
         this.highWordsArr.push(words);
       }
       if (this.newWordList.indexOf(word) > -1 || this.newWordList.indexOf(words) > -1) {
         if (word && this.newWordList.indexOf(word) > -1) {
-          if (_this.oldHz != word) {
+          if (_this.oldHz !== word) {
             this.isShow = false;
             setTimeout(() => {
               _this.hz = word;
@@ -854,8 +872,8 @@ export default {
             JSON.stringify({
               list: wordlist,
               detail: item,
-              top: top,
-              left: left,
+              top,
+              left,
             }),
           );
           break;
@@ -881,36 +899,34 @@ export default {
       if (_this.NumberList.indexOf(noteNum) > -1) {
         for (let i = 0; i < _this.NumberList.length; i++) {
           if (_this.NumberList[i] == noteNum) {
-            noteIndex = '' + i + '';
+            noteIndex = `${String(i)}`;
             break;
           }
         }
         this.showNoteDetail(e, noteIndex);
-      } else {
-        if (this.newWordList.indexOf(noteNum) > -1) {
-          if (_this.oldHz != noteNum) {
-            this.isShow = false;
-            setTimeout(() => {
-              _this.hz = noteNum;
-            }, 50);
-          }
-          _this.clientY = e.clientY;
-          let left = e.clientX;
-          let width = 0;
-
-          if (noteNum.length == 1 || noteNum.length == 2) {
-            width = 304;
-          } else if (noteNum.length == 3 || noteNum.length == 4) {
-            width = 432;
-          } else if (noteNum.length > 3) {
-            width = 560;
-          }
+      } else if (this.newWordList.indexOf(noteNum) > -1) {
+        if (_this.oldHz != noteNum) {
+          this.isShow = false;
+          setTimeout(() => {
+            _this.hz = noteNum;
+          }, 50);
+        }
+        _this.clientY = e.clientY;
+        let left = e.clientX;
+        let width = 0;
 
-          if (left - this.bodyLeft > this.contentWidth / 2) {
-            _this.left = left - width + 10;
-          } else {
-            _this.left = left;
-          }
+        if (noteNum.length == 1 || noteNum.length == 2) {
+          width = 304;
+        } else if (noteNum.length == 3 || noteNum.length == 4) {
+          width = 432;
+        } else if (noteNum.length > 3) {
+          width = 560;
+        }
+
+        if (left - this.bodyLeft > this.contentWidth / 2) {
+          _this.left = left - width + 10;
+        } else {
+          _this.left = left;
         }
       }
     },
@@ -954,40 +970,17 @@ export default {
       if (answer) {
         let writeModel = this.curQue.Bookanswer.writeModel;
         let hz = answer.hz;
-        if (writeModel.hasOwnProperty(hz)) {
+        if (writeModel.hasOwn(hz)) {
           writeModel[hz].push(answer);
         } else {
           writeModel[hz] = [answer];
         }
       }
     },
-  },
-  //生命周期 - 创建完成（可以访问当前this实例）
-  created() {},
-  //生命周期 - 挂载完成（可以访问DOM元素）
-  mounted() {
-    if (this.NNPENewWordList && this.NNPENewWordList.length > 0) {
-      this.handleNewword();
-    }
-    if (this.curQue) {
-      this.handleData();
-    }
-    window.addEventListener('resize', this.getScreenHeight);
-    this.getScreenHeight();
-  },
-  beforeCreate() {}, //生命周期 - 创建之前
-  beforeMount() {}, //生命周期 - 挂载之前
-  beforeUpdate() {}, //生命周期 - 更新之前
-  updated() {}, //生命周期 - 更新之后
-  beforeDestroy() {
-    window.removeEventListener('resize', this.getScreenHeight);
-  }, //生命周期 - 销毁之前
-  destroyed() {}, //生命周期 - 销毁完成
-  activated() {}, //如果页面有keep-alive缓存功能，这个函数会触发
+  }, // 如果页面有keep-alive缓存功能，这个函数会触发
 };
 </script>
 <style lang="scss" scoped>
-//@import url(); 引入公共css类
 .NNPE-ArticleView {
   width: 100%;
 

src/views/book/courseware/preview/components/dialogue_article/WordModelChs.vue

@@ -1,24 +1,24 @@
 <!--  -->
 <template>
-  <div class="NNPE-ArticleView" ref="ArticleView" v-if="curQue">
+  <div v-if="curQue" ref="ArticleView" class="NNPE-ArticleView">
     <div
-      class="aduioLine-box aduioLine-practice-npc"
       v-if="
         ((curQue.mp3_list && curQue.mp3_list.length > 0 && curQue.mp3_list[0].url) ||
           config.isHasPY ||
           config.isHasEN) &&
         curQue.property.mp3_position === 'top'
       "
+      class="aduioLine-box aduioLine-practice-npc"
     >
       <div class="aduioLine-content">
         <template v-if="curQue.mp3_list && curQue.mp3_list.length > 0 && curQue.mp3_list[0].url">
           <AudioLine
-            audioId="diaPhraAudio"
+            ref="audioLine"
+            audio-id="diaPhraAudio"
             :mp3="curQue.mp3_list[0].url"
-            :getCurTime="getCurTime"
-            :mp3Source="curQue.mp3_list[0].source"
+            :get-cur-time="getCurTime"
+            :mp3-source="curQue.mp3_list[0].source"
             :width="colLength == 2 ? 200 : isPhone ? 200 : 790"
-            ref="audioLine"
           />
         </template>
       </div>
@@ -54,21 +54,21 @@
           <div :class="['empty-left']"></div>
           <div class="empty-right"></div>
         </div>
-        <p class="notice" v-if="curQue.notice">{{ curQue.notice }}</p>
+        <p v-if="curQue.notice" class="notice">{{ curQue.notice }}</p>
         <div
-          :class="['NNPE-detail', item.isTitle ? 'NNPE-detail-title' : '']"
           v-for="(item, index) in resArr"
           :key="'detail' + index"
+          :class="['NNPE-detail', item.isTitle ? 'NNPE-detail-title' : '']"
         >
           <div class="article-content">
-            <RoleChs :curRole="item.roleDetail" :type="curQue.property.role_img_type" />
+            <RoleChs :cur-role="item.roleDetail" :type="curQue.property.role_img_type" />
             <div class="wordsList-box">
-              <img :src="articleImg[index]" v-if="articleImg[0] && index == 0" />
+              <img v-if="articleImg[0] && index == 0" :src="articleImg[index]" />
               <!-- <div class="roleDetail" v-if="item.roleDetail.detail && item.roleDetail.detail.wordsList.length > 0">
                 <span class="pinyin">{{ item.roleDetail.detail.wordsList | handlePinyin }}</span>
                 <span class="chs">{{ item.roleDetail.detail.wordsList | handleChs }}</span>
               </div> -->
-              <div class="roleDetail" v-if="item.roleDetail.fullName || item.roleDetail.fullPinyin">
+              <div v-if="item.roleDetail.fullName || item.roleDetail.fullPinyin" class="roleDetail">
                 <span class="chs">{{ item.roleDetail.fullName }}</span>
                 <span class="pinyin">{{ item.roleDetail.fullPinyin }}</span>
               </div>
@@ -81,9 +81,9 @@
                 </div>
                 <div style="overflow: hidden; clear: both"></div>
                 <div
-                  class="NNPE-words"
                   v-for="(pItem, pIndex) in item.wordsList"
                   :key="'wordsList' + pIndex"
+                  class="NNPE-words"
                   :class="[
                     pItem.chs != '“' && pItem.wordIndex == 0 ? 'textLeft' : 'textCenter',
                     pItem.chs == '“' ? 'textRight' : '',
@@ -169,12 +169,12 @@
                           >
                         </span>
                         <span
-                          class="NNPE-words-box"
                           v-if="
                             item.wordsList[pIndex + 2] &&
                             item.wordsList[pIndex + 2].chs &&
                             chsFhList.indexOf(item.wordsList[pIndex + 2].chs) > -1
                           "
+                          class="NNPE-words-box"
                           @click="showWordDetail($event, item.wordsList[pIndex + 2])"
                         >
                           <span
@@ -242,12 +242,12 @@
                               ? 'wordActive'
                               : '',
                           ]"
-                          @click="showWordDetail($event, pItem)"
                           :style="{
                             fontFamily: pItem.config.fontFamily,
                             height: '28px',
                             display: 'inline-block',
                           }"
+                          @click="showWordDetail($event, pItem)"
                           >{{ NumberList.indexOf(pItem.pinyin) == -1 ? pItem.chs : '' }}</span
                         >
                         <span
@@ -285,9 +285,9 @@
                   {{ item.enwords }}
                 </div>
                 <div
+                  v-if="curQue.property.multilingual_position === 'para'"
                   class="multilingual-para"
                   :class="[item.isTitle ? 'multilingual-para-center' : '']"
-                  v-if="curQue.property.multilingual_position === 'para'"
                 >
                   {{
                     curQue.detail[index].multilingualTextList && curQue.detail[index].multilingualTextList[multilingual]
@@ -296,7 +296,7 @@
                   }}
                 </div>
               </div>
-              <img :src="articleImg[index + 1]" v-if="articleImg[index + 1]" />
+              <img v-if="articleImg[index + 1]" :src="articleImg[index + 1]" />
             </div>
           </div>
         </div>
@@ -306,9 +306,9 @@
         </div>
         <template v-for="(items, indexs) in curQue.detail">
           <div
-            class="multilingual"
-            :key="indexs"
             v-if="curQue.property.multilingual_position === 'all' && items.multilingualTextList[multilingual]"
+            :key="indexs"
+            class="multilingual"
           >
             <div class="multilingual-para" :class="[items.isTitle ? 'multilingual-para-center' : '']">
               {{
@@ -319,35 +319,35 @@
             </div>
           </div>
         </template>
-        <div class="dia-article-record" v-if="curQue.Bookanswer">
+        <div v-if="curQue.Bookanswer" class="dia-article-record">
           <Soundrecord
-            @handleWav="handleWav"
             :TaskModel="TaskModel"
-            :answerRecordList="curQue.Bookanswer.wordModel.recordList"
+            :answer-record-list="curQue.Bookanswer.wordModel.recordList"
             type="promax"
             class="luyin-box"
+            @handleWav="handleWav"
           />
         </div>
       </div>
     </template>
     <div
-      class="aduioLine-box aduioLine-practice-npc aduioLine-box-bottom"
       v-if="
         ((curQue.mp3_list && curQue.mp3_list.length > 0 && curQue.mp3_list[0].url) ||
           config.isHasPY ||
           config.isHasEN) &&
         curQue.property.mp3_position === 'bottom'
       "
+      class="aduioLine-box aduioLine-practice-npc aduioLine-box-bottom"
     >
       <div class="aduioLine-content">
         <template v-if="curQue.mp3_list && curQue.mp3_list.length > 0 && curQue.mp3_list[0].url">
           <AudioLine
-            audioId="diaPhraAudio"
+            ref="audioLine"
+            audio-id="diaPhraAudio"
             :mp3="curQue.mp3_list[0].url"
-            :getCurTime="getCurTime"
-            :mp3Source="curQue.mp3_list[0].source"
+            :get-cur-time="getCurTime"
+            :mp3-source="curQue.mp3_list[0].source"
             :width="colLength == 2 ? 200 : isPhone ? 200 : 790"
-            ref="audioLine"
           />
         </template>
       </div>
@@ -386,13 +386,13 @@
       >
         <Wordcard
           :word="word"
-          :changeWordCard="changeWordCard"
-          :themeColor="attrib ? attrib.topic_color : '#e35454'"
-          :currentTreeID="currentTreeID"
+          :change-word-card="changeWordCard"
+          :theme-color="attrib ? attrib.topic_color : '#e35454'"
+          :current-tree-i-d="currentTreeID"
           :TaskModel="TaskModel"
-          :writeList="curQue.Bookanswer.writeModel"
-          @changeCurQue="changeCurQue"
+          :write-list="curQue.Bookanswer.writeModel"
           :attrib="attrib"
+          @changeCurQue="changeCurQue"
         />
       </div>
     </template>
@@ -405,7 +405,7 @@
           left: windowWidth > 642 ? '' : '0px',
         }"
       >
-        <Notecard :item="curNoteCon" :changeCard="changeCard" :attrib="attrib" />
+        <Notecard :item="curNoteCon" :change-card="changeCard" :attrib="attrib" />
       </div>
     </template>
   </div>
@@ -421,20 +421,6 @@ import RemarkChs from './RemarkChs.vue';
 import Soundrecord from '../../common/SoundRecord.vue';
 export default {
   name: 'WordModelChs',
-  props: [
-    'curQue',
-    'bodyLeft',
-    'NNPENewWordList',
-    'colorBox',
-    'attrib',
-    'noFont',
-    'currentTreeID',
-    'config',
-    'TaskModel',
-    'colLength',
-    'isPhone',
-    'multilingual',
-  ],
   components: {
     AudioLine,
     Wordcard,
@@ -448,7 +434,7 @@ export default {
       let str = '';
       wordsList.forEach((item, index) => {
         if (index < wordsList.length - 1) {
-          str += item.pinyin + ' ';
+          str += `${item.pinyin} `;
         } else {
           str += item.pinyin;
         }
@@ -459,7 +445,7 @@ export default {
       let str = '';
       wordsList.forEach((item, index) => {
         if (index < wordsList.length - 1) {
-          str += item.chs + ' ';
+          str += `${item.chs} `;
         } else {
           str += item.chs;
         }
@@ -467,10 +453,24 @@ export default {
       return str;
     },
   },
+  props: [
+    'curQue',
+    'bodyLeft',
+    'NNPENewWordList',
+    'colorBox',
+    'attrib',
+    'noFont',
+    'currentTreeID',
+    'config',
+    'TaskModel',
+    'colLength',
+    'isPhone',
+    'multilingual',
+  ],
   data() {
     return {
       resArr: [],
-      curTime: 0, //单位s
+      curTime: 0, // 单位s
       chsFhList: ['，', '。', '”', '：', '》', '？', '！', '；', '、', '……'],
       enFhList: [',', '.', ';', '?', '!', ':', '>', '<'],
       NumberList: ['①', '②', '③', '④', '⑤', '⑥', '⑦', '⑧', '⑨', '⑩', '⑪', '⑫', '⑬', '⑭', '⑮', '⑯', '⑰', '⑱', '⑲', '⑳'],
@@ -502,7 +502,7 @@ export default {
   computed: {},
   watch: {
     hz: {
-      handler: function (val, oldVal) {
+      handler(val, oldVal) {
         let _this = this;
         if (val) {
           if (_this.NumberList.indexOf(val) > -1) {
@@ -515,7 +515,7 @@ export default {
       deep: true,
     },
     isShow: {
-      handler: function (val, oldVal) {
+      handler(val, oldVal) {
         let _this = this;
         if (val) {
           setTimeout(() => {
@@ -532,7 +532,7 @@ export default {
       deep: true,
     },
     noteNum: {
-      handler: function (val, oldVal) {
+      handler(val, oldVal) {
         let _this = this;
         if (val) {
           _this.handleNote(val);
@@ -542,7 +542,7 @@ export default {
       deep: true,
     },
     isNoteShow: {
-      handler: function (val, oldVal) {
+      handler(val, oldVal) {
         let _this = this;
         if (val) {
           setTimeout(() => {
@@ -559,9 +559,30 @@ export default {
       deep: true,
     },
   },
-  //方法集合
+  // 生命周期 - 创建完成（可以访问当前this实例）
+  created() {},
+  // 生命周期 - 挂载完成（可以访问DOM元素）
+  mounted() {
+    if (this.curQue) {
+      this.handleData();
+    }
+
+    window.addEventListener('resize', this.getScreenHeight);
+    this.getScreenHeight();
+  },
+  beforeCreate() {}, // 生命周期 - 创建之前
+  beforeMount() {}, // 生命周期 - 挂载之前
+  beforeUpdate() {}, // 生命周期 - 更新之前
+  updated() {}, // 生命周期 - 更新之后
+  beforeDestroy() {
+    this.isShow = false;
+    window.removeEventListener('resize', this.getScreenHeight);
+  }, // 生命周期 - 销毁之前
+  destroyed() {}, // 生命周期 - 销毁完成
+  activated() {},
+  // 方法集合
   methods: {
-    //拼音的显示和隐藏
+    // 拼音的显示和隐藏
     changePinyin() {
       if (this.config.isHasPY) {
         this.$emit('changeConfig', 'isShowPY');
@@ -574,7 +595,7 @@ export default {
       }
     },
     handleWav(list, tmIndex) {
-      tmIndex = tmIndex ? tmIndex : 0;
+      tmIndex = tmIndex || 0;
       this.$set(this.curQue.Bookanswer.wordModel, 'recordList', list);
     },
     getCurTime(curTime) {
@@ -595,12 +616,12 @@ export default {
         let paraArr = [];
         dItem.wordsList.forEach((sItem, sIndex) => {
           sItem.forEach((wItem, wIndex) => {
-            //this.judgePad(sItem, wItem, wIndex);
+            // this.judgePad(sItem, wItem, wIndex);
             this.mergeWordSymbol(wItem);
             let obj = {
-              paraIndex: dIndex, //段落索引
-              sentIndex: sIndex, //在段落中句子索引
-              wordIndex: wIndex, //单词的索引
+              paraIndex: dIndex, // 段落索引
+              sentIndex: sIndex, // 在段落中句子索引
+              wordIndex: wIndex, // 单词的索引
               pinyin:
                 curQue.pinyin_type === 'pinyin'
                   ? curQue.property.is_first_sentence_first_hz_pinyin_first_char_upper_case === 'true' && wIndex === 0
@@ -611,7 +632,7 @@ export default {
               padding: true,
               className: wItem.className,
               isShow: wItem.isShow,
-              isNewWord: this.newWords.indexOf(wItem.chs) > -1 ? true : false,
+              isNewWord: this.newWords.indexOf(wItem.chs) > -1,
               config: {
                 fontFamily: wItem.fontFamily,
               },
@@ -630,11 +651,11 @@ export default {
           dItem.sentencesEn && dItem.sentencesEn.length > 0 ? dItem.sentencesEn.join(' ').replace(/\'/g, '’') : '';
         let paraObj = {
           wordsList: paraArr,
-          enwords: enwords,
-          timeList: timeList,
-          roleDetail: roleDetail,
-          remarkDetail: remarkDetail,
-          dhaspinyin: dhaspinyin,
+          enwords,
+          timeList,
+          roleDetail,
+          remarkDetail,
+          dhaspinyin,
         };
         resArr.push(paraObj);
       });
@@ -646,7 +667,7 @@ export default {
         });
       }
     },
-    //词和标点合一起
+    // 词和标点合一起
     mergeWordSymbol(wItem) {
       if (this.chsFhList.indexOf(wItem.chs) > -1 || this.NumberList.indexOf(wItem.pinyin) > -1) {
         wItem.isShow = false;
@@ -654,7 +675,7 @@ export default {
         wItem.isShow = true;
       }
     },
-    //获取角色
+    // 获取角色
     getRole(dItem) {
       let roleIndex = dItem.roleIndex;
       let resObj = null;
@@ -670,7 +691,7 @@ export default {
 
       return resObj;
     },
-    //判断是否有padding
+    // 判断是否有padding
     judgePad(sItem, wItem, curIndex) {
       let leg = sItem.length;
       if (curIndex < leg - 1) {
@@ -686,7 +707,7 @@ export default {
         }
       }
     },
-    //转化时间
+    // 转化时间
     handleTimeList(list) {
       let listRes = [];
       list.forEach((item) => {
@@ -695,7 +716,7 @@ export default {
       });
       return listRes;
     },
-    //点击播放某个句子
+    // 点击播放某个句子
     handleChangeTime(time) {
       this.curTime = time;
       this.$refs.audioLine.onTimeupdateTime(time / 1000);
@@ -796,7 +817,7 @@ export default {
       if (_this.NumberList.indexOf(noteNum) > -1) {
         for (let i = 0; i < _this.NumberList.length; i++) {
           if (_this.NumberList[i] == noteNum) {
-            noteIndex = '' + i + '';
+            noteIndex = `${String(i)}`;
             break;
           }
         }
@@ -817,12 +838,10 @@ export default {
 
       if (left - this.bodyLeft > this.contentWidth / 2) {
         _this.left = left - width + 10;
+      } else if (left - 200 > 500) {
+        _this.left = 500;
       } else {
-        if (left - 200 > 500) {
-          _this.left = 500;
-        } else {
-          _this.left = left - 200;
-        }
+        _this.left = left - 200;
       }
     },
     // 处理注释数据
@@ -845,7 +864,7 @@ export default {
       if (answer) {
         let writeModel = this.curQue.Bookanswer.writeModel;
         let hz = answer.hz;
-        if (writeModel.hasOwnProperty(hz)) {
+        if (writeModel.hasOwn(hz)) {
           writeModel[hz].push(answer);
         } else {
           writeModel[hz] = [answer];
@@ -853,32 +872,10 @@ export default {
         console.log(this.curQue.Bookanswer);
       }
     },
-  },
-  //生命周期 - 创建完成（可以访问当前this实例）
-  created() {},
-  //生命周期 - 挂载完成（可以访问DOM元素）
-  mounted() {
-    if (this.curQue) {
-      this.handleData();
-    }
-
-    window.addEventListener('resize', this.getScreenHeight);
-    this.getScreenHeight();
-  },
-  beforeCreate() {}, //生命周期 - 创建之前
-  beforeMount() {}, //生命周期 - 挂载之前
-  beforeUpdate() {}, //生命周期 - 更新之前
-  updated() {}, //生命周期 - 更新之后
-  beforeDestroy() {
-    this.isShow = false;
-    window.removeEventListener('resize', this.getScreenHeight);
-  }, //生命周期 - 销毁之前
-  destroyed() {}, //生命周期 - 销毁完成
-  activated() {}, //如果页面有keep-alive缓存功能，这个函数会触发
+  }, // 如果页面有keep-alive缓存功能，这个函数会触发
 };
 </script>
 <style lang="scss" scoped>
-//@import url(); 引入公共css类
 .NNPE-ArticleView {
   position: relative;
   width: 100%;

src/views/book/courseware/preview/components/dialogue_article/index.vue

@@ -9,13 +9,13 @@
           <a class="ArticleView-full" @click="fullScreen">黑板模式</a>
           <div>
             <div
-              class="left"
-              @click="submit"
-              :style="{ marginLeft: '104px' }"
               v-if="
                 (tokenData && tokenData.popedom_code_list && tokenData.popedom_code_list.indexOf(2100001) != -1) ||
                 (tokenData && tokenData.user_type === 'APP')
               "
+              class="left"
+              :style="{ marginLeft: '104px' }"
+              @click="submit"
             >
               <!-- <img src="@/assets/wbfx-icon.png" alt="" /> -->
               文本分析
@@ -24,139 +24,136 @@
           <div class="right">
             <template v-if="data.property.is_enable_new_word === 'true'">
               <el-switch
-                style="display: block"
                 v-model="showPhrases"
+                style="display: block"
                 :active-color="bookInfo.theme_color"
                 inactive-color="rgba(0,0,0,0.1)"
                 active-text=""
                 inactive-text="本课生词"
                 @change="handleSwitchChange('showPractice', 'showWord')"
-              >
-              </el-switch>
+              />
             </template>
             <template v-if="data.property.is_enable_read === 'true'">
               <el-switch
-                style="display: block"
                 v-model="showPractice"
+                style="display: block"
                 :active-color="bookInfo.theme_color"
                 inactive-color="rgba(0,0,0,0.1)"
                 active-text=""
                 inactive-text="语音练习"
                 @change="handleSwitchChange('showPhrases', 'showWord')"
-              >
-              </el-switch>
+              />
             </template>
             <template v-if="data.property.is_enable_word === 'true'">
               <el-switch
-                style="display: block"
                 v-model="showWord"
+                style="display: block"
                 :active-color="bookInfo.theme_color"
                 inactive-color="rgba(0,0,0,0.1)"
                 active-text=""
                 inactive-text="取词"
                 @change="handleSwitchChange('showPhrases', 'showPractice')"
-              >
-              </el-switch>
+              />
             </template>
           </div>
         </div>
-        <div class="ArticleView-body" ref="ArticleViewbody">
+        <div ref="ArticleViewbody" class="ArticleView-body">
           <NormalModelChs
-            :curQue="data"
-            :titleFontsize="titleFontsize"
-            :wordFontsize="wordFontsize"
-            :bodyLeft="bodyLeft"
-            :bodyWidth="bodyWidth"
-            :attrib="data.unified_attrib"
-            :noFont="noFont"
             v-if="!showPhrases && !showPractice && !showWord"
+            :cur-que="data"
+            :title-fontsize="titleFontsize"
+            :word-fontsize="wordFontsize"
+            :body-left="bodyLeft"
+            :body-width="bodyWidth"
+            :attrib="data.unified_attrib"
+            :no-font="noFont"
             :config="config"
-            @changeConfig="changeConfig"
             :NNPEAnnotationList="NNPEAnnotationList"
-            :colLength="colLength"
+            :col-length="colLength"
             :multilingual="showLang && getLang() ? getLang() : ''"
+            @changeConfig="changeConfig"
           />
           <PhraseModel
-            :curQue="data"
-            :titleFontsize="titleFontsize"
-            :wordFontsize="wordFontsize"
+            v-if="showPhrases"
+            :cur-que="data"
+            :title-fontsize="titleFontsize"
+            :word-fontsize="wordFontsize"
             :NNPENewWordList="NNPENewWordList"
             :attrib="data.unified_attrib"
-            :noFont="noFont"
-            :bodyLeft="bodyLeft"
-            v-if="showPhrases"
+            :no-font="noFont"
+            :body-left="bodyLeft"
             :config="config"
-            @changeConfig="changeConfig"
             :TaskModel="isJudgingRightWrong ? 'ANSWER' : ''"
             :NNPEAnnotationList="NNPEAnnotationList"
-            :colLength="colLength"
+            :col-length="colLength"
             :NpcNewWordMp3="NpcNewWordMp3"
             :multilingual="showLang && getLang() ? getLang() : ''"
+            @changeConfig="changeConfig"
           />
           <Practice
-            :curQue="data"
-            :titleFontsize="titleFontsize"
-            :wordFontsize="wordFontsize"
+            v-if="showPractice"
+            :cur-que="data"
+            :title-fontsize="titleFontsize"
+            :word-fontsize="wordFontsize"
             :attrib="data.unified_attrib"
-            :noFont="noFont"
+            :no-font="noFont"
             :NNPENewWordList="NNPENewWordList"
-            v-if="showPractice"
             :config="config"
-            @changeConfig="changeConfig"
             :TaskModel="isJudgingRightWrong ? 'ANSWER' : ''"
-            :colLength="colLength"
+            :col-length="colLength"
             :NpcNewWordMp3="NpcNewWordMp3"
-            :isFull="isFull"
+            :is-full="isFull"
             :multilingual="showLang && getLang() ? getLang() : ''"
+            @changeConfig="changeConfig"
           />
           <WordModel
-            :curQue="data"
-            :titleFontsize="titleFontsize"
-            :wordFontsize="wordFontsize"
-            :bodyLeft="bodyLeft"
-            :bodyWidth="bodyWidth"
+            v-if="showWord"
+            :cur-que="data"
+            :title-fontsize="titleFontsize"
+            :word-fontsize="wordFontsize"
+            :body-left="bodyLeft"
+            :body-width="bodyWidth"
             :NNPENewWordList="NNPENewWordList"
             :attrib="data.unified_attrib"
-            :noFont="noFont"
-            v-if="showWord"
+            :no-font="noFont"
             :config="config"
-            @changeConfig="changeConfig"
             :TaskModel="isJudgingRightWrong ? 'ANSWER' : ''"
-            :colLength="colLength"
+            :col-length="colLength"
             :multilingual="showLang && getLang() ? getLang() : ''"
+            @changeConfig="changeConfig"
           />
         </div>
-        <div class="voice-full-screen" :id="'screen-' + mathNum">
+        <div :id="'screen-' + mathNum" class="voice-full-screen">
           <Voicefullscreen
             v-if="isFull && resObj"
-            :themeColor="bookInfo.theme_color"
-            :curQue="data"
-            :sentList="resObj.sentList"
-            :sentIndex="0"
+            :theme-color="bookInfo.theme_color"
+            :cur-que="data"
+            :sent-list="resObj.sentList"
+            :sent-index="0"
             :mp3="data.mp3_list && data.mp3_list[0] ? data.mp3_list[0].url : ''"
-            :noFont="noFont"
+            :no-font="noFont"
             :NNPENewWordList="NNPENewWordList"
-            :isFull="isFull"
+            :is-full="isFull"
             :config="config"
             :TaskModel="isJudgingRightWrong ? 'ANSWER' : ''"
+            :NpcNewWordMp3="NpcNewWordMp3"
+            :attrib="data.unified_attrib"
             @handleWav="handleWav"
             @changePinyin="changePinyins"
             @changeEN="changeENs"
             @exitFullscreen="exitFullscreen"
             @changeIsFull="changeIsFull"
-            :NpcNewWordMp3="NpcNewWordMp3"
-            :attrib="data.unified_attrib"
           />
         </div>
       </div>
       <template v-if="data.new_word_list.new_word_list.length > 0">
-        <NewWordPreview :newData="data.new_word_list"></NewWordPreview>
+        <NewWordPreview :new-data="data.new_word_list" />
       </template>
       <template v-if="data.other_word_list.new_word_list.length > 0">
-        <NewWordPreview :newData="data.other_word_list"></NewWordPreview>
+        <NewWordPreview :new-data="data.other_word_list" />
       </template>
       <template v-if="data.notes_list.option.length > 0">
-        <NotesPreview :notesData="data.notes_list"></NotesPreview>
+        <NotesPreview :notes-data="data.notes_list" />
       </template>
     </div>
   </div>
@@ -190,6 +187,52 @@ export default {
   },
   mixins: [PreviewMixin],
   inject: ['bookInfo'],
+  data() {
+    return {
+      data: getArticleData(),
+      showPreview: true, // 全文预览
+      showPhrases: false, // 显示单词和短语
+      showPractice: false, // 语音练习
+
+      showWord: false, // 取词
+      titleFontsize: 20, // 标题字号初始值
+      wordFontsize: 16, // 文章内容字号初始值
+      bodyLeft: 0,
+      bodyWidth: 0,
+      noFont: ['~', '!', '@', '#', '$', '%', '^', '&', '*', '(', ')', '/'],
+      config: {
+        isShowEN: false,
+        isHasEN: false,
+        isShowPY: false,
+        isHasPY: false,
+      },
+      userAnswer: {
+        normalModel: {
+          recordList: [],
+        },
+        writeModel: {}, // 生词/取词模式
+        practiceModel: {}, // 练习模式
+        wordModel: {
+          recordList: [],
+        },
+      },
+      tokenData: getToken(),
+      mathNum: Math.random().toString(36).substr(2),
+      isFull: false,
+      resObj: null,
+      chsFhList: ['，', '。', '”', '：', '》', '？', '！', '；', '、'],
+      highWords: null,
+      highWordsArr: [],
+      highIndex: 0,
+      newWordList: [],
+      NNPEAnnotationList: [],
+      NNPENewWordList: [],
+      NpcNewWordMp3: [],
+      colLength: 1,
+      multilingualTextList: {},
+    };
+  },
+  computed: {},
   watch: {
     showLang: {
       handler(val) {
@@ -198,7 +241,7 @@ export default {
             let trans_arr = item.translation.split('\n');
             this.data.detail.forEach((items) => {
               let items_trans_arr = [];
-              if (!items.hasOwnProperty('multilingualTextList')) {
+              if (!items.hasOwn('multilingualTextList')) {
                 this.$set(items, 'multilingualTextList', {});
               }
               if (items.para) {
@@ -245,52 +288,6 @@ export default {
       immediate: true,
     },
   },
-  data() {
-    return {
-      data: getArticleData(),
-      showPreview: true, // 全文预览
-      showPhrases: false, // 显示单词和短语
-      showPractice: false, // 语音练习
-
-      showWord: false, // 取词
-      titleFontsize: 20, // 标题字号初始值
-      wordFontsize: 16, // 文章内容字号初始值
-      bodyLeft: 0,
-      bodyWidth: 0,
-      noFont: ['~', '!', '@', '#', '$', '%', '^', '&', '*', '(', ')', '/'],
-      config: {
-        isShowEN: false,
-        isHasEN: false,
-        isShowPY: false,
-        isHasPY: false,
-      },
-      userAnswer: {
-        normalModel: {
-          recordList: [],
-        },
-        writeModel: {}, //生词/取词模式
-        practiceModel: {}, //练习模式
-        wordModel: {
-          recordList: [],
-        },
-      },
-      tokenData: getToken(),
-      mathNum: Math.random().toString(36).substr(2),
-      isFull: false,
-      resObj: null,
-      chsFhList: ['，', '。', '”', '：', '》', '？', '！', '；', '、'],
-      highWords: null,
-      highWordsArr: [],
-      highIndex: 0,
-      newWordList: [],
-      NNPEAnnotationList: [],
-      NNPENewWordList: [],
-      NpcNewWordMp3: [],
-      colLength: 1,
-      multilingualTextList: {},
-    };
-  },
-  computed: {},
   created() {},
   methods: {
     changeConfig(obj) {
@@ -299,7 +296,7 @@ export default {
     changeIsFull() {
       this.isFull = false;
     },
-    //拼音的显示和隐藏
+    // 拼音的显示和隐藏
     changePinyins() {
       if (this.config.isHasPY) {
         this.changeConfig('isShowPY');
@@ -315,13 +312,13 @@ export default {
     handleFontsize(symbol) {
       if (symbol == '+') {
         if (this.wordFontsize < 24) {
-          this.titleFontsize = this.titleFontsize + 2;
-          this.wordFontsize = this.wordFontsize + 2;
+          this.titleFontsize += 2;
+          this.wordFontsize += 2;
         }
       } else if (symbol == '-') {
         if (this.wordFontsize > 12) {
-          this.titleFontsize = this.titleFontsize - 2;
-          this.wordFontsize = this.wordFontsize - 2;
+          this.titleFontsize -= 2;
+          this.wordFontsize -= 2;
         }
       }
     },
@@ -352,14 +349,14 @@ export default {
         text: this.data.content,
       })
         .then((res) => {
-          window.open(window.location.origin + `/GCLS-TC/#/textanalysis/Result?id=${res.record.id}&type=文本分析`);
+          window.open(`${window.location.origin}/GCLS-TC/#/textanalysis/Result?id=${res.record.id}&type=文本分析`);
           loading.close();
         })
         .catch((res) => {
           loading.close();
         });
     },
-    //语音全屏
+    // 语音全屏
     fullScreen() {
       this.pauseAudio();
       this.pauseVideo();
@@ -383,8 +380,8 @@ export default {
       }
     },
     goFullscreen() {
-      let id = 'screen-' + this.mathNum;
-      var element = document.getElementById(id);
+      let id = `screen-${this.mathNum}`;
+      let element = document.getElementById(id);
       if (element.requestFullscreen) {
         element.requestFullscreen();
       } else if (element.msRequestFullscreen) {
@@ -422,7 +419,7 @@ export default {
           let trans_arr = item.translation.split('\n');
           this.data.detail.forEach((items) => {
             let items_trans_arr = [];
-            if (!items.hasOwnProperty('multilingualTextList')) {
+            if (!items.hasOwn('multilingualTextList')) {
               this.$set(items, 'multilingualTextList', {});
             }
             if (items.para) {
@@ -445,9 +442,9 @@ export default {
         .concat(this.data.new_word_list.new_word_list)
         .concat(this.data.other_word_list.new_word_list);
       this.NNPEAnnotationList = this.data.notes_list.option;
-      let resArr = [],
-        sentArrTotal = [],
-        timeArr = [];
+      let resArr = [];
+      let sentArrTotal = [];
+      let timeArr = [];
       let curQue = JSON.parse(JSON.stringify(this.data));
       let wordTimeList = curQue.wordTime;
       let dhaspinyin = false; // 每段是否有拼音
@@ -467,30 +464,28 @@ export default {
               if (!this.highWords) {
                 this.findLightWord(wItem, wIndex, sentence, sItem);
                 words = this.highWords ? this.highWords.words : '';
+              } else if (wIndex > this.highWords.endIndex - 1) {
+                this.highWords = null;
+                this.findLightWord(wItem, wIndex, sentence, sItem);
+                words = this.highWords ? this.highWords.words : '';
               } else {
-                if (wIndex > this.highWords.endIndex - 1) {
-                  this.highWords = null;
-                  this.findLightWord(wItem, wIndex, sentence, sItem);
-                  words = this.highWords ? this.highWords.words : '';
-                } else {
-                  words = this.highWords ? this.highWords.words : '';
-                }
+                words = this.highWords ? this.highWords.words : '';
               }
             }
             let obj = {
-              paraIndex: dIndex, //段落索引
-              sentIndex: sIndex, //在段落中句子索引
-              wordIndex: wIndex, //单词的索引
+              paraIndex: dIndex, // 段落索引
+              sentIndex: sIndex, // 在段落中句子索引
+              wordIndex: wIndex, // 单词的索引
               pinyin: wItem.pinyin,
               chs: wItem.chs,
               padding: true,
               className: wItem.className,
               isShow: wItem.isShow,
-              startIndex: startIndex,
-              endIndex: endIndex,
+              startIndex,
+              endIndex,
               leg: wItem.chs.length,
               timeList: [],
-              words: words,
+              words,
               config: {
                 fontFamily: wItem.fontFamily,
               },
@@ -499,7 +494,7 @@ export default {
             if (wItem.pinyin) dhaspinyin = true;
           });
           let objs = {
-            sentArr: sentArr,
+            sentArr,
             enwords: dItem.sentencesEn && dItem.sentencesEn[sIndex] && dItem.sentencesEn[sIndex].replace(/\'/g, '’'),
           };
           sentArrTotal.push(sentArr);
@@ -523,8 +518,8 @@ export default {
       });
       this.resObj = {
         sentList: resArr,
-        timeList: timeList,
-        dhaspinyinArr: dhaspinyinArr,
+        timeList,
+        dhaspinyinArr,
       };
     },
     mergeWordTime(resArr, wordTimeList) {
@@ -538,43 +533,41 @@ export default {
       });
     },
     findLightWord(wItem, startIndex, sentence, sItem) {
-      let words = '',
-        endIndex = 0;
+      let endIndex = 0;
+      let words = '';
       this.newWordList.forEach((item) => {
         if (item.length == 1) {
           if (item == wItem.chs && !wItem.banLight) {
             words = wItem.chs;
             endIndex = startIndex + 1;
           }
-        } else {
-          if (item[0] == wItem.chs && sentence.indexOf(item) > -1) {
-            let index = null;
-            let chsStr = '';
-            for (let i = startIndex; i < sItem.length + 1; i++) {
-              index = i;
-              if (chsStr.length == item.length) {
-                break;
-              } else {
-                chsStr += sItem[i] ? sItem[i].chs : '';
-              }
-            }
-            if (chsStr == item && !wItem.banLight) {
-              words = item;
-              endIndex = index;
+        } else if (item[0] == wItem.chs && sentence.indexOf(item) > -1) {
+          let index = null;
+          let chsStr = '';
+          for (let i = startIndex; i < sItem.length + 1; i++) {
+            index = i;
+            if (chsStr.length == item.length) {
+              break;
+            } else {
+              chsStr += sItem[i] ? sItem[i].chs : '';
             }
-          } else if (wItem.new_word && wItem.new_word == item && !wItem.banLight) {
+          }
+          if (chsStr == item && !wItem.banLight) {
             words = item;
-            endIndex = startIndex + 1;
+            endIndex = index;
           }
+        } else if (wItem.new_word && wItem.new_word == item && !wItem.banLight) {
+          words = item;
+          endIndex = startIndex + 1;
         }
       });
       if (words) {
-        this.highWords = { words: words, endIndex: endIndex };
+        this.highWords = { words, endIndex };
       } else {
         this.highWords = null;
       }
     },
-    //词和标点合一起
+    // 词和标点合一起
     mergeWordSymbol(wItem) {
       if (this.chsFhList.indexOf(wItem.chs) > -1) {
         wItem.isShow = false;
@@ -583,7 +576,7 @@ export default {
       }
     },
     handleWav(list, tmIndex) {
-      tmIndex = tmIndex ? tmIndex : 0;
+      tmIndex = tmIndex || 0;
       this.data.Bookanswer.practiceModel[tmIndex] = {
         recordList: [],
       };

src/views/book/courseware/preview/components/image_text/ImageTextPreview.vue

@@ -90,26 +90,26 @@
       </div>
     </div>
     <el-dialog
+      v-if="mageazineDetailShow"
       :visible.sync="mageazineDetailShow"
       :show-close="false"
       :close-on-click-modal="false"
       width="80%"
       class="login-dialog magazine-detail-dialog"
       :modal="false"
-      v-if="mageazineDetailShow"
     >
       <magazine-sentence
-        :fontSize="fontSize"
-        :sentenceTheme="sentenceTheme"
+        :font-size="fontSize"
+        :sentence-theme="sentenceTheme"
         :data="data.word_time"
-        :activeIndex="sentIndex"
-        @closeWord="closeMagazineSentence"
-        @changeTheme="changeTheme"
-        :mp3Url="mp3_url"
-        :multilingualTextList="showLang && multilingualTextList[getLang()] ? multilingualTextList[getLang()] : []"
+        :active-index="sentIndex"
+        :mp3-url="mp3_url"
+        :multilingual-text-list="showLang && multilingualTextList[getLang()] ? multilingualTextList[getLang()] : []"
         :property="data.property"
         :attrib="data.unified_attrib"
-      ></magazine-sentence>
+        @closeWord="closeMagazineSentence"
+        @changeTheme="changeTheme"
+      />
     </el-dialog>
   </div>
 </template>

src/views/book/courseware/preview/components/image_text/components/MagazineSentence.vue

@@ -1,14 +1,14 @@
 <template>
   <div class="sentence-box" :style="{ background: themeList[sentenceTheme].bg }">
     <div class="sentence-top">
-      <a class="play-btn" @click="handlePlay" :style="{ background: themeList[sentenceTheme].playBtnBg }">
-        <svg-icon v-if="isPlay" icon-class="pause" size="24"></svg-icon>
-        <svg-icon v-else icon-class="play" size="24"></svg-icon>
+      <a class="play-btn" :style="{ background: themeList[sentenceTheme].playBtnBg }" @click="handlePlay">
+        <svg-icon v-if="isPlay" icon-class="pause" size="24" />
+        <svg-icon v-else icon-class="play" size="24" />
       </a>
       <div class="sentence-right" :style="{ color: themeList[sentenceTheme].rightBtnColor }">
-        <a class="btn" @click="handlePage('-')"><svg-icon icon-class="arrow-left-s-line" size="24"></svg-icon></a>
+        <a class="btn" @click="handlePage('-')"><svg-icon icon-class="arrow-left-s-line" size="24" /></a>
         <span>{{ sentenceActive + 1 + '/' + data.length }}</span>
-        <a class="btn" @click="handlePage('+')"><svg-icon icon-class="arrow-right-s-line" size="24"></svg-icon></a>
+        <a class="btn" @click="handlePage('+')"><svg-icon icon-class="arrow-right-s-line" size="24" /></a>
         <i class="el-icon-close" @click="closeWord"></i>
       </div>
     </div>
@@ -189,7 +189,7 @@
           </template>
         </div>
       </template>
-      <div class="NPC-notes-note" v-if="multilingualTextList[sentenceActive]">
+      <div v-if="multilingualTextList[sentenceActive]" class="NPC-notes-note">
         {{ multilingualTextList[sentenceActive] }}
       </div>
     </div>
@@ -234,13 +234,13 @@
       </div>
       <ul class="article-color" :style="{ background: themeList[sentenceTheme].bottomBg }">
         <li
-          :class="['color-item', sentenceTheme === indexC ? 'active' : '']"
           v-for="(itemC, indexC) in themeList"
           :key="indexC"
-          @click="handleChangeBgColor(indexC, 'theme')"
+          :class="['color-item', sentenceTheme === indexC ? 'active' : '']"
           :style="{
             borderColor: sentenceTheme === indexC ? itemC.boxBorder : '',
           }"
+          @click="handleChangeBgColor(indexC, 'theme')"
         >
           <a
             :style="{
@@ -255,15 +255,15 @@
 </template>
 
 <script>
-//这里可以导入其它文件（比如：组件，工具js，第三方插件js，json文件，图片文件等等）
-//例如：import 《组件名称》from ‘《组件路径》';
+// 这里可以导入其它文件（比如：组件，工具js，第三方插件js，json文件，图片文件等等）
+// 例如：import 《组件名称》from ‘《组件路径》';
 
 export default {
-  //import引入的组件需要注入到对象中才能使用
+  // import引入的组件需要注入到对象中才能使用
   components: {},
   props: ['fontSize', 'sentenceTheme', 'data', 'activeIndex', 'mp3Url', 'multilingualTextList', 'property', 'attrib'],
   data() {
-    //这里存放数据
+    // 这里存放数据
     return {
       isPlay: false, // 音频是否在播放
       sentenceActive: this.activeIndex,
@@ -345,11 +345,54 @@ export default {
       noFont: ['~', '!', '@', '#', '$', '%', '^', '&', '*', '(', ')', '/'],
     };
   },
-  //计算属性 类似于data概念
+  // 计算属性 类似于data概念
   computed: {},
-  //监控data中数据变化
+  // 监控data中数据变化
   watch: {},
-  //方法集合
+  // 生命周期 - 创建完成（可以访问当前this实例）
+  created() {
+    if (this.attrib) {
+      this.themeList[0] = {
+        type: 'white',
+        bg: '#E5E6EB',
+        playBtnBg: this.attrib.topic_color, // 播放按钮背景色
+        rightBtnColor: 'rgba(0, 0, 0, 0.96)', // 右侧按钮颜色
+        contentBg: '#F7F8FA',
+        sentenceColor: 'rgba(0, 0, 0, 0.96)',
+        sentenceActiveColor: this.attrib.topic_color,
+        bottomBg: '#F2F3F5',
+        bottomBarActiveBtnBg: '#FFFFFF',
+        bottomBarColor: '#4E5969',
+        bottomBarActive: this.attrib.topic_color,
+        bottomBarBorder: '#E5E6EB',
+        themeBg: '#FFFFFF',
+        themeActiveBorder: '#E5E6EB',
+        boxBorder: this.attrib.topic_color, // 选中时高亮的外圈边框
+      };
+    }
+    this.handleData();
+  },
+  // 生命周期 - 挂载完成（可以访问DOM元素）
+  mounted() {
+    let _this = this;
+    _this.audio.addEventListener('timeupdate', function () {
+      _this.currentTime = _this.audio.currentTime;
+      const currentTime = _this.audio.currentTime;
+      if (_this.ed && currentTime >= _this.ed) {
+        _this.audio.pause();
+        _this.isPlay = false;
+        _this.currentTime = 0;
+        _this.activeWordIndex = null;
+      }
+    });
+  },
+  // 生命周期-挂载之前
+  beforeMount() {},
+  // 生命周期-更新之后
+  updated() {},
+  // 如果页面有keep-alive缓存功能，这个函数会触发
+  activated() {},
+  // 方法集合
   methods: {
     // 播放、暂停
     handlePlay() {
@@ -397,15 +440,13 @@ export default {
         } else {
           this.$message.warning('已经是第一句');
         }
+      } else if (this.sentenceActive < this.data.length - 1) {
+        this.audio.pause();
+        this.isPlay = false;
+        this.currentTime = 0;
+        this.sentenceActive++;
       } else {
-        if (this.sentenceActive < this.data.length - 1) {
-          this.audio.pause();
-          this.isPlay = false;
-          this.currentTime = 0;
-          this.sentenceActive++;
-        } else {
-          this.$message.warning('已经是最后一句');
-        }
+        this.$message.warning('已经是最后一句');
       }
     },
     // 切换主题颜色
@@ -433,57 +474,14 @@ export default {
       }
     },
   },
-  //生命周期 - 创建完成（可以访问当前this实例）
-  created() {
-    if (this.attrib) {
-      this.themeList[0] = {
-        type: 'white',
-        bg: '#E5E6EB',
-        playBtnBg: this.attrib.topic_color, // 播放按钮背景色
-        rightBtnColor: 'rgba(0, 0, 0, 0.96)', // 右侧按钮颜色
-        contentBg: '#F7F8FA',
-        sentenceColor: 'rgba(0, 0, 0, 0.96)',
-        sentenceActiveColor: this.attrib.topic_color,
-        bottomBg: '#F2F3F5',
-        bottomBarActiveBtnBg: '#FFFFFF',
-        bottomBarColor: '#4E5969',
-        bottomBarActive: this.attrib.topic_color,
-        bottomBarBorder: '#E5E6EB',
-        themeBg: '#FFFFFF',
-        themeActiveBorder: '#E5E6EB',
-        boxBorder: this.attrib.topic_color, // 选中时高亮的外圈边框
-      };
-    }
-    this.handleData();
-  },
-  //生命周期 - 挂载完成（可以访问DOM元素）
-  mounted() {
-    let _this = this;
-    _this.audio.addEventListener('timeupdate', function () {
-      _this.currentTime = _this.audio.currentTime;
-      const currentTime = _this.audio.currentTime;
-      if (_this.ed && currentTime >= _this.ed) {
-        _this.audio.pause();
-        _this.isPlay = false;
-        _this.currentTime = 0;
-        _this.activeWordIndex = null;
-      }
-    });
-  },
-  //生命周期-创建之前
+  // 生命周期-创建之前
   beforeCreated() {},
-  //生命周期-挂载之前
-  beforeMount() {},
-  //生命周期-更新之前
+  // 生命周期-更新之前
   beforUpdate() {},
-  //生命周期-更新之后
-  updated() {},
-  //生命周期-销毁之前
+  // 生命周期-销毁之前
   beforeDestory() {},
-  //生命周期-销毁完成
+  // 生命周期-销毁完成
   destoryed() {},
-  //如果页面有keep-alive缓存功能，这个函数会触发
-  activated() {},
 };
 </script>
 <style lang="scss" scoped>

src/views/book/courseware/preview/components/new_word/components/Strockplayredline.vue

@@ -89,7 +89,6 @@ export default {
 };
 </script>
 <style lang="scss" scoped>
-//@import url(); 引入公共css类
 .strockplay-redInner {
   position: relative;
   box-sizing: border-box;

src/views/book/courseware/preview/components/notes/NotesPreview.vue

@@ -14,7 +14,7 @@
         >
           <div class="NPC-top-left">
             <span class="NPC-topTitle-text" v-html="data.title_con"></span>
-            <span class="NPC-topTitle-text" v-if="showLang">
+            <span v-if="showLang" class="NPC-topTitle-text">
               {{ titleTrans[getLang()] }}
             </span>
           </div>
@@ -30,11 +30,11 @@
               <div class="NPC-notes-con">
                 <span
                   class="NPC-notes-con-number"
-                  v-html="item.number"
                   :style="{
                     color:
                       data.unified_attrib && data.unified_attrib.topic_color ? data.unified_attrib.topic_color : '',
                   }"
+                  v-html="item.number"
                 ></span>
                 <div class="NPC-notes-con-box">
                   <template v-if="isEnable(data.property.view_pinyin)">
@@ -42,19 +42,18 @@
                       <span
                         v-if="data.property.pinyin_position === 'top'"
                         class="pinyin"
-                        v-html="item.pinyin"
                         :style="{
                           fontSize:
                             data.unified_attrib && data.unified_attrib.pinyin_size
                               ? data.unified_attrib.pinyin_size
                               : '',
                         }"
+                        v-html="item.pinyin"
                       >
                       </span>
                       <span>
                         <span
                           v-if="data.property.pinyin_position === 'front'"
-                          v-html="item.pinyin"
                           class="pinyin pinyin-front"
                           :style="{
                             fontSize:
@@ -62,10 +61,10 @@
                                 ? data.unified_attrib.pinyin_size
                                 : '',
                           }"
+                          v-html="item.pinyin"
                         ></span
                         ><span
                           class="NPC-notes-con-text"
-                          v-html="item.con"
                           :style="{
                             color:
                               data.unified_attrib && data.unified_attrib.topic_color
@@ -74,10 +73,10 @@
                             fontSize:
                               data.unified_attrib && data.unified_attrib.font_size ? data.unified_attrib.font_size : '',
                           }"
+                          v-html="item.con"
                         ></span
                         ><span
                           v-if="data.property.pinyin_position === 'back'"
-                          v-html="item.pinyin"
                           class="pinyin pinyin-back"
                           :style="{
                             fontSize:
@@ -85,34 +84,35 @@
                                 ? data.unified_attrib.pinyin_size
                                 : '',
                           }"
+                          v-html="item.pinyin"
                         ></span>
                       </span>
                       <span
                         v-if="data.property.pinyin_position === 'bottom'"
                         class="pinyin"
-                        v-html="item.pinyin"
                         :style="{
                           fontSize:
                             data.unified_attrib && data.unified_attrib.pinyin_size
                               ? data.unified_attrib.pinyin_size
                               : '',
                         }"
+                        v-html="item.pinyin"
                       ></span>
                     </p>
                   </template>
 
                   <span
-                    class="NPC-notes-con-text"
-                    v-html="item.con"
                     v-else
+                    class="NPC-notes-con-text"
                     :style="{
                       color:
                         data.unified_attrib && data.unified_attrib.topic_color ? data.unified_attrib.topic_color : '',
                       fontSize:
                         data.unified_attrib && data.unified_attrib.font_size ? data.unified_attrib.font_size : '',
                     }"
+                    v-html="item.con"
                   ></span>
-                  <span class="multilingual" v-if="showLang">
+                  <span v-if="showLang" class="multilingual">
                     {{
                       multilingualTextList[getLang()] &&
                       multilingualTextList[getLang()][index] &&
@@ -129,7 +129,7 @@
               <div v-if="item.file_list[0]" class="NPC-notes-note-img">
                 <el-image :src="item.pic_url" :preview-src-list="[item.pic_url]" fit="contain" />
               </div>
-              <div class="NPC-notes-note" v-if="showLang">
+              <div v-if="showLang" class="NPC-notes-note">
                 {{
                   multilingualTextList[getLang()] &&
                   multilingualTextList[getLang()][index] &&
@@ -155,8 +155,8 @@ import { GetFileURLMap } from '@/api/app';
 export default {
   name: 'NotesPreview',
   components: {},
-  props: ['notesData'],
   mixins: [PreviewMixin],
+  props: ['notesData'],
   data() {
     return {
       data: this.notesData ? this.notesData : getNotesData(),

src/views/book/courseware/preview/components/pinyin_base/PinyinBasePreview.vue

@@ -141,8 +141,8 @@
             class="record-box"
             :answer-record-list="data.record_list"
             :task-model="isJudgingRightWrong ? 'ANSWER' : ''"
-            @handleWav="handleWav"
             :attrib="data.unified_attrib"
+            @handleWav="handleWav"
           />
         </template>
       </div>

src/views/book/courseware/preview/components/upload_preview/UploadPreviewPreview.vue

@@ -24,13 +24,13 @@
             v-for="(label, index) in label_list"
             :key="index"
             :class="[index === active_index ? 'active' : '']"
-            @click="active_index = index"
             :style="{
               color:
                 index === active_index && data.unified_attrib && data.unified_attrib.topic_color
                   ? data.unified_attrib.topic_color
                   : '',
             }"
+            @click="active_index = index"
             >{{ label }}</span
           >
         </div>