精读卡片

src/views/bookShelf/articlePeruseDetail.vue

@@ -25,11 +25,18 @@
                 <p :style="{color:bgColorList[activeIndex].sourceColor}">{{peruseDetail.introduction}}</p>
             </div>
             <div class="article-content" :style="{borderColor:bgColorList[activeIndex].boxBorder}">
+                <div class="tabs-box">
+                    <a :class="[tabsIndex===0?'active':'']" @click="handleChangeTabs(0)">原文</a>
+                    <a :class="[tabsIndex===1?'active':'']" @click="handleChangeTabs(1)">讲解</a>
+                </div>
                 <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.sentenceStyle"></div>
+                    <div class="article-en" :class="[index===0?'article-en-title':'',tabsIndex===0?'original':'']" :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 class="voice-box" v-if="tabsIndex===1">
+
+                    </div>
+                    <div class="backgroundImg" v-if="index===0&&peruseDetail.content.backgroundImg">
+                        <el-image style="width: 100%; height: 100%" :src="peruseDetail.content.backgroundImg" fit="contain"></el-image>
                     </div>
                 </div>
             </div>
@@ -53,7 +60,24 @@
             </div>
         </div>
     </div>
-    <a class="translate" :class="[translateFlag?'active':'']" @click="translateFlag=!translateFlag"><svg-icon icon-class="translate" class="wrapper"></svg-icon></a>
+    <a class="translate" :class="[translateFlag?'active':'']" @click="changeTranslate"><svg-icon icon-class="translate" class="wrapper"></svg-icon></a>
+    <div 
+        class="words-notes"
+        ref="wordcarden"
+        v-if="wordsNotes"
+    >
+        <a class="close-btn" @click="wordsNotes=!wordsNotes">
+            <i class="el-icon-close"></i>
+        </a>
+        <h4>{{wordDetail.phrase}}</h4>
+        <span v-if="wordDetail.symbol" class="symbol">
+            /{{wordDetail.symbol}}/
+        </span>
+        <label>{{wordType[wordDetail.type]}}</label>
+        <template v-for="(itemw,index) in wordDetail.explainDetailsList">
+            <div class="explain" v-html="itemw.content" :key="index"></div>
+        </template>
+    </div>
   </div>
 </template>
 
@@ -243,6 +267,15 @@ export default {
         noRead: true, // 未读
         support: false, // 点赞
         oppose: false, // 不支持
+        knowledgeList: [],
+        wordDetail: null,
+        wordsNotes: false,
+        wordType:{
+            '1':'基础词汇和固定搭配',
+            '2':'高阶词汇和固定搭配',
+            '3':'难句解析'
+        },
+        tabsIndex: 1,
     }
   },
   methods: {
@@ -266,6 +299,7 @@ export default {
                 })
                 if(res.data.content.knowledgeList&&res.data.content.knowledgeList.length>0){
                     this.handleWords(res.data.content.knowledgeList)
+                    this.knowledgeList = res.data.content.knowledgeList
                 }
                 this.loading = false
 
@@ -297,11 +331,8 @@ export default {
                             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>"
+                                    let id = item.knowList[i].id
+                                    arrs[indexe] = `<b class="word-phrase" style="cursor:pointer" onclick="showWordDetail('${id}')">${iteme}</b>`
                                 }
                             }
                         }
@@ -310,7 +341,32 @@ export default {
             })
             itema.sentenceStyle = arrs.join(' ')
         })
-        
+    },
+    // 获取卡片详情
+    getWordDetail(id){
+        for(let i = 0; i< this.knowledgeList.length; i++){
+            if(this.knowledgeList[i].knowList&&this.knowledgeList[i].knowList.length>0){
+                for(let j = 0; j< this.knowledgeList[i].knowList.length; j++){
+                    if(this.knowledgeList[i].knowList[j].id === id){
+                        this.wordDetail = this.knowledgeList[i].knowList[j]
+                        this.wordsNotes = true
+                        return
+                    }
+                }
+            }
+        }
+    },
+    changeTranslate(){
+        if(this.tabsIndex===0){
+            this.$message.warning('原文不支持译文')
+            return
+        }
+        this.translateFlag = !this.translateFlag
+    },
+    handleChangeTabs(val){
+        this.tabsIndex = val
+        this.translateFlag = false
+        this.wordsNotes = false
     }
   },
   created(){
@@ -319,6 +375,13 @@ export default {
     }
   },
   mounted(){
+    let _this = this
+    window.showWordDetail = function(id){
+        if(_this.tabsIndex===0){
+            return
+        }
+        _this.getWordDetail(id)
+    }
   }
 }
 </script>
@@ -408,6 +471,9 @@ export default {
                 &.active{
                     color: #5E89EF;
                 }
+                &.original{
+                    margin-bottom: 24px;
+                }
             }
             .article-en-title{
                 color:rgba(0, 0, 0, 0.88);
@@ -508,6 +574,11 @@ export default {
                 color: rgba(23, 93, 255, 1);
             }
         }
+        .backgroundImg{
+            width: 100%;
+            height: 258px;
+            margin-bottom: 24px;
+        }
     }
 }
 .translate{
@@ -530,6 +601,89 @@ export default {
         box-shadow: 0px 2px 4px -1px rgba(0, 0, 0, 0.12), 0px 4px 5px 0px rgba(0, 0, 0, 0.08), 0px 1px 10px 0px rgba(0, 0, 0, 0.05);
     }
 }
+.words-notes{
+    border-radius: 4px;
+    border: 1px solid rgba(0, 0, 0, 0.08);
+    background: #F7F7F7;
+    box-shadow: 0px 8px 10px -5px rgba(0, 0, 0, 0.08), 0px 16px 24px 2px rgba(0, 0, 0, 0.04), 0px 6px 30px 5px rgba(0, 0, 0, 0.05);
+    padding: 16px 24px;
+    width: 302px;
+    position: fixed;
+    left: 50%;
+    top: 50%;
+    margin-top: -150px;
+    margin-left: -151px;
+    max-height: 480px;
+    overflow: auto;
+    .close-btn{
+        position: absolute;
+        width: 24px;
+        height: 24px;
+        right: 4px;
+        top: 4px;
+        padding: 4px;
+        cursor: pointer;
+        color: rgba(153, 153, 153, 1);
+    }
+    h4{
+        color: #000;
+        font-size: 24px;
+        font-weight: 700;
+        line-height: 32px;
+        margin: 0;
+    }
+    .symbol{
+        color:rgba(0, 0, 0, 0.64);
+        font-size: 14px;
+        font-weight: 400;
+        line-height: 22px;
+        display: block;
+        margin-top: 8px;
+    }
+    label{
+        border-radius: 4px;
+        background: #CAEFCE;
+        padding: 2px 4px;
+        margin: 8px 0;
+        color:rgba(0, 0, 0, 0.48);
+        font-size: 16px;
+        font-weight: 400;
+        line-height: 24px;
+        display: inline-block;
+    }
+    .explain{
+        color:rgba(0, 0, 0, 0.88);
+        font-size: 14px;
+        font-weight: 400;
+        line-height: 22px;
+        p{
+            margin: 4px 0;
+        }
+    }
+}
+.tabs-box{
+    display: flex;
+    padding-bottom: 16px;
+    justify-content: center;
+    a{
+        font-size: 14px;
+        line-height: 22px;
+        color: #4E5969;
+        border-radius: 100px;
+        padding: 5px 16px;
+        margin-right: 12px;
+        width: 108px;
+        text-align: center;
+        &:hover{
+            background: #F2F3F5;
+        }
+        &.active{
+            background: #F2F3F5;
+            font-weight: 500;
+            color: #165DFF;
+        }
+    }
+}
 </style>
 <style lang="scss">
 .article-fontsize{
@@ -645,4 +799,19 @@ export default {
         }
     }
 }
+.words-notes{
+    .explain{
+        p{
+            margin: 4px 0;
+        }
+    }
+}
+.article-en{
+    &.original{
+        b{
+            font-weight: 400;
+            cursor: initial !important;
+        }
+    }
+}
 </style>