精读

src/views/bookShelf/articlePeruseDetail.vue

@@ -26,10 +26,10 @@
             </div>
             <div class="article-content" :style="{borderColor:bgColorList[activeIndex].boxBorder}">
                 <div v-for="(item,index) in peruseDetail.content.article" :key="item.sectionId">
-                    <div class="article-en" :class="[index===0?'article-en-title':'']" :style="{color:index===0?bgColorList[activeIndex].titleColor:bgColorList[activeIndex].contentColor,fontSize:index===0?(wordFontsize+16)+'px':wordFontsize+'px',lineHeight:index===0?(wordFontsize+24)+'px':(wordFontsize+8)+'px'}" v-html="item.enArticle"></div>
+                    <div class="article-en" :class="[index===0?'article-en-title':'']" :style="{color:index===0?bgColorList[activeIndex].titleColor:bgColorList[activeIndex].contentColor,fontSize:index===0?(wordFontsize+16)+'px':wordFontsize+'px',lineHeight:index===0?(wordFontsize+24)+'px':(wordFontsize+8)+'px'}" v-html="item.sentenceStyle"></div>
                     <div class="article-cn" :class="[index===0?'article-cn-title':'']" v-if="translateFlag" :style="{color:index===0?bgColorList[activeIndex].sourceColor:bgColorList[activeIndex].contentColor,fontSize:wordFontsize+'px',lineHeight:(wordFontsize+8)+'px'}">{{item.chArticle}}</div>
                     <div class="voice-box">
-
+                        
                     </div>
                 </div>
             </div>
@@ -261,7 +261,14 @@ export default {
         .then((res) => {
             if(res.status===1){
                 this.peruseDetail = res.data
+                this.peruseDetail.content.article.forEach(item=>{
+                    item.sentenceStyle = item.enArticle
+                })
+                if(res.data.content.knowledgeList&&res.data.content.knowledgeList.length>0){
+                    this.handleWords(res.data.content.knowledgeList)
+                }
                 this.loading = false
+
             }
         })
         .catch(() => {
@@ -277,6 +284,33 @@ export default {
     },
     changeStatus(flag){
         this[flag] = !this[flag]
+    },
+    // 处理生词、短语、注释
+    handleWords(list){
+        let arr = JSON.parse(JSON.stringify(list))
+        this.peruseDetail.content.article.forEach((itema,indexa)=>{
+            let arrs = itema.enArticle.split(' ')
+            itema.enArticle.split(' ').forEach((iteme,indexe)=>{
+                arr.forEach(item =>{
+                    if(item.knowList&&item.knowList.length>0){
+                        for(let i = 0; i < item.knowList.length; i++){
+                            if(item.knowList[i].articleId===itema.sectionId){
+                                let positionArr = item.knowList[i].position.split(',')
+                                if(positionArr.indexOf(indexe.toString())>-1){
+                                    arrs[indexe] = "<b class='color-blue' data-id='" +
+                                                item.knowList[i].id +
+                                                "'>" +
+                                                iteme +
+                                                "</b>"
+                                }
+                            }
+                        }
+                    }
+                })
+            })
+            itema.sentenceStyle = arrs.join(' ')
+        })
+        
     }
   },
   created(){

src/views/bookStore/index.vue

@@ -54,7 +54,7 @@
         :userBg="'rgba(0, 0, 0, 0.24)'"
         :LoginNavIndex="0"
         :previousPage="'精读课堂'"
-        v-if="IssueList.length>0"
+        v-if="PeruseList.length>0"
       />
 
       <!-- <BookListModule