文内检索

src/views/bookShelf/articleDetail.vue

@@ -22,7 +22,7 @@
             <div class="atricle-data">
                 <normal-model :titleFontsize="wordFontsize+30" :wordFontsize="wordFontsize" :colorObj="bgColorList[activeIndex]" :articleType="articleType" :style="{'padding':'0 40px'}" v-if="menuType==='original'" :articleInfo="articleInfo"></normal-model>
                 <phrase-model :titleFontsize="wordFontsize+30" :wordFontsize="wordFontsize" :colorObj="bgColorList[activeIndex]" :articleType="articleType" :style="{'padding':'0 40px'}" v-if="menuType==='newWord'" :articleInfo="articleInfo" :likePhraseList="likePhraseList" :likeWord="likeWordList" @changeLike="changeLike"></phrase-model>
-                <normal-model :titleFontsize="wordFontsize+30" :wordFontsize="wordFontsize" :colorObj="bgColorList[activeIndex]" :articleType="articleType" :style="{'padding':'0 40px'}" v-if="menuType==='search'" :articleInfo="articleInfo"></normal-model>
+                <inner-text-search :titleFontsize="wordFontsize+30" :wordFontsize="wordFontsize" :colorObj="bgColorList[activeIndex]" :articleType="articleType" :style="{'padding':'0 40px'}" v-if="menuType==='search'" :articleInfo="articleInfo"></inner-text-search>
                 <div class="article-btn" v-if="this.$route.query.iss_id">
                     <div class="left">
                         <span :class="['support colloct-article',!noRead?'active':'']" @click="changeStatus('noRead')"><svg-icon icon-class="like-line" :style="{marginRight:articleNumber?'8px':'0px'}"></svg-icon>{{articleNumber?articleNumber:''}}</span>
@@ -179,6 +179,7 @@ import NormalModel from "./components/NormalModel.vue"
 import PhraseModel from "./components/PhraseModel.vue"
 import MenuRight from "./components/MenuRight.vue"
 import ArticleInfo from "./components/ArticleInfo.vue"
+import InnerTextSearch from "./components/InnerTextSearch.vue"
 import * as echarts from "echarts";
 import { getLogin } from "@/api/ajax";
 import { getToken } from '@/utils/auth'
@@ -196,7 +197,8 @@ export default {
     NormalModel,
     MenuRight,
     PhraseModel,
-    ArticleInfo
+    ArticleInfo,
+    InnerTextSearch
   },
   data(){
     return{

src/views/bookShelf/components/InnerTextSearch.vue

@@ -2,61 +2,32 @@
 <template>
   <div class="NNPE-ArticleView" v-if="articleInfo">
     <template v-if="resArr[0]&&resArr[0].wordsList[0]&&resArr[0].wordsList[0].hasOwnProperty('pno')&&resArr[0].wordsList[0].pno===0">
-        <h2 @click="
-                handleChangeTime(
-                    resArr[0].timeList &&
-                    resArr[0].timeList[0] &&
-                    resArr[0].timeList[0].s
-                )
-                "
-                @mouseover="handleMouseover(resArr[0])"
-                @mouseleave="handleMouseleave"
-                :class="[
-                    'NNPE-words',
-                    isPlaying &&
-                    resArr[0].timeList &&
-                    resArr[0].timeList[0] &&
-                    curTime >= resArr[0].timeList[0].s &&
-                    curTime <= resArr[0].timeList[0].e
-                        ? 'sentActive'
-                        : '',
-                    resArr[0].wordsList[0].pno == paraIndex && resArr[0].wordsList[0].sno == sentIndex
-                        ? 'overActive'
-                        : '',
-                ]">
+        <h2 :class="['NNPE-words',]">
             <span v-for="(itemR,indexR) in resArr[0].wordsList" :key="indexR" :style="{color:colorObj.titleColor,fontSize:(wordFontsize+30)+'px',lineHeight:(wordFontsize+38)+'px',marginRight:'10px',fontWeight:'700',cursor:'pointer'}" 
             :class="[
-                    isPlaying &&
-                    resArr[0].timeList &&
-                    resArr[0].timeList[0] &&
-                    curTime >=
-                        resArr[0].timeList[0].tokens[indexR].s &&
-                    curTime <= resArr[0].timeList[0].e
-                        ? 'wordActive'
-                        : '',
                     itemR.tokens[9]===' '||itemR.marginRight?'marginRight':''
                 ]">
-                    <template v-if="itemR.isShow">
-                        <span
-                                class="NNPE-chs"
-                                :class="[
-                                    itemR.type,itemR.tokens[9]===' '||itemR.marginRight?'marginRight':'',itemR.highIndex?'fontWeight':''
-                                ]"
-                                >{{ itemR.tokens[2] }}</span
-                            >
-                            <span
-                                class="NNPE-chs NNPE-chs-both"
-                                v-if="resArr[0].wordsList[indexR + 1] &&
-                                resArr[0].wordsList[indexR + 1].tokens[2] &&
-                                enFhList.indexOf(resArr[0].wordsList[indexR + 1].tokens[2]) > -1"
-                                :class="[
-                                        resArr[0].wordsList[indexR + 1].type,resArr[0].wordsList[indexR + 1].tokens[9]===' '||resArr[0].wordsList[indexR + 1].marginRight?'marginRight':'',resArr[0].wordsList[indexR + 1].highIndex?'fontWeight':''
-                                    ]"
-                                >{{ resArr[0].wordsList[indexR + 1].tokens[2] }}</span
-                            >
-                    </template>
-                <!-- {{itemR.tokens[2]}} -->
-                </span>
+                <template v-if="itemR.isShow">
+                    <span
+                        class="NNPE-chs"
+                        :class="[
+                            itemR.type,itemR.tokens[9]===' '||itemR.marginRight?'marginRight':'',itemR.highIndex?'fontWeight':''
+                        ]"
+                        >{{ itemR.tokens[2] }}</span
+                    >
+                    <span
+                        class="NNPE-chs NNPE-chs-both"
+                        v-if="resArr[0].wordsList[indexR + 1] &&
+                        resArr[0].wordsList[indexR + 1].tokens[2] &&
+                        enFhList.indexOf(resArr[0].wordsList[indexR + 1].tokens[2]) > -1"
+                        :class="[
+                                resArr[0].wordsList[indexR + 1].type,resArr[0].wordsList[indexR + 1].tokens[9]===' '||resArr[0].wordsList[indexR + 1].marginRight?'marginRight':'',resArr[0].wordsList[indexR + 1].highIndex?'fontWeight':''
+                            ]"
+                        >{{ resArr[0].wordsList[indexR + 1].tokens[2] }}</span
+                    >
+                </template>
+            <!-- {{itemR.tokens[2]}} -->
+            </span>
         </h2>
     </template>
     <h6 class="nnpe-article-author" :style="{color:colorObj.sourceColor,fontSize:(wordFontsize-4)+'px',lineHeight:(wordFontsize+4)+'px',fontWeight:'400'}">
@@ -94,77 +65,26 @@
                         <div
                             :class="[
                             'NNPE-words',
-                            isPlaying &&
-                            item.timeList &&
-                            item.timeList[pItem.sno] &&
-                            curTime >= item.timeList[pItem.sno].s &&
-                            curTime <= item.timeList[pItem.sno].e
-                                ? 'sentActive'
-                                : '',
-                            pItem.pno == paraIndex && pItem.sno == sentIndex
-                                ? 'overActive'
-                                : '',
                             ]"
-                            @click="
-                            handleChangeTime(
-                                item.timeList &&
-                                item.timeList[pItem.sno] &&
-                                item.timeList[pItem.sno].s
-                            )
-                            "
-                            @mouseover="handleMouseover(pItem)"
-                            @mouseleave="handleMouseleave"
                         >
-                                <span
-                                    class="NNPE-chs"
-                                    :class="[
-                                        isPlaying &&
-                                        item.timeList &&
-                                        item.timeList[pItem.sno] &&
-                                        item.timeList[pItem.sno].e &&
-                                        item.timeList[pItem.sno].tokens &&
-                                        item.timeList[pItem.sno].tokens[pItem.wIndex]&&
-                                        curTime >=
-                                            item.timeList[pItem.sno].tokens[pItem.wIndex].s &&
-                                        curTime <= item.timeList[pItem.sno].e
-                                            ? 'wordActive'
-                                            : '',
-                                        pItem.tokens[9]===' '||pItem.marginRight?'marginRight':''
-                                    ]"
-                                    :style="{fontSize:wordFontsize + 'px',color: isPlaying &&
-                                            item.timeList &&
-                                            item.timeList[pItem.sno] &&
-                                            item.timeList[pItem.sno].tokens[pItem.wIndex]&&
-                                            curTime >=
-                                                item.timeList[pItem.sno].tokens[pItem.wIndex].s &&
-                                            curTime <= item.timeList[pItem.sno].tokens[pItem.wIndex].e?colorObj.statisticValue:colorObj.contentColor}"
-                                    >{{ pItem.tokens[2] }}</span
-                                >
-                                <span
-                                class="NNPE-chs NNPE-chs-both"
-                                v-if="item.wordsList[pIndex + 1] &&
-                                item.wordsList[pIndex + 1].tokens[2] &&
-                                enFhList.indexOf(item.wordsList[pIndex + 1].tokens[2]) > -1"
+                            <span
+                                class="NNPE-chs"
                                 :class="[
-                                        isPlaying &&
-                                        item.timeList &&
-                                        item.timeList[pItem.sno] &&
-                                        item.timeList[pItem.sno].tokens[pItem.wIndex]&&
-                                        curTime >=
-                                            item.timeList[pItem.sno].tokens[pItem.wIndex].s &&
-                                        curTime <= item.timeList[pItem.sno].e
-                                            ? 'wordActive'
-                                            : '',
-                                        item.wordsList[pIndex + 1].tokens[9]===' '||item.wordsList[pIndex + 1].marginRight?'marginRight':''
-                                    ]"
-                                    :style="{fontSize:wordFontsize + 'px',color: isPlaying &&
-                                            item.timeList &&
-                                            item.timeList[pItem.sno] &&
-                                            item.timeList[pItem.sno].tokens[pItem.wIndex]&&
-                                            curTime >=
-                                                item.timeList[pItem.sno].tokens[pItem.wIndex].s &&
-                                            curTime <= item.timeList[pItem.sno].tokens[pItem.wIndex].e?colorObj.statisticValue:colorObj.contentColor}"
-                                >{{ item.wordsList[pIndex + 1].tokens[2] }}</span
+                                    pItem.tokens[9]===' '||pItem.marginRight?'marginRight':''
+                                ]"
+                                :style="{fontSize:wordFontsize + 'px',color: colorObj.contentColor}"
+                                >{{ pItem.tokens[2] }}</span
+                            >
+                            <span
+                            class="NNPE-chs NNPE-chs-both"
+                            v-if="item.wordsList[pIndex + 1] &&
+                            item.wordsList[pIndex + 1].tokens[2] &&
+                            enFhList.indexOf(item.wordsList[pIndex + 1].tokens[2]) > -1"
+                            :class="[
+                                    item.wordsList[pIndex + 1].tokens[9]===' '||item.wordsList[pIndex + 1].marginRight?'marginRight':''
+                                ]"
+                                :style="{fontSize:wordFontsize + 'px',color: colorObj.contentColor}"
+                            >{{ item.wordsList[pIndex + 1].tokens[2] }}</span
                             >
                         </div>
                     </template>
@@ -239,13 +159,6 @@ export default {
     };
   },
   computed: {
-    isPlaying: function () {
-      let playing = false;
-      if (this.$refs.audioLine) {
-        playing = this.$refs.audioLine.audio.isPlaying;
-      }
-      return playing;
-    },
   },
   watch: {},
   //方法集合
@@ -282,21 +195,6 @@ export default {
       });
       this.resArr = resArr;
     },
-    handleChangeTime(time) {
-      if (time>=0) {
-        this.curTime = time;
-        this.$refs.audioLine.onTimeupdateTime(time / 1000, true);
-      }
-    },
-    //经过每个词，高亮句子
-    handleMouseover(pItem) {
-      this.paraIndex = pItem.pno;
-      this.sentIndex = pItem.sno;
-    },
-    handleMouseleave() {
-      this.paraIndex = -1;
-      this.sentIndex = -1;
-    },
   },
   //生命周期 - 创建完成（可以访问当前this实例）
   created() {},