HM21St_Page_User/src/views/bookShelf/articlePeruseDetail.vue

<template>
  <div class="bookStore" :style="{background:bgColorList[activeIndex].contentBg}" v-loading="loading" v-if="peruseDetail">
    <Header :LoginNavIndex="1"/>
    <div class="navBar" :class="['navBar-'+bgColorList[activeIndex].type]" :style="{background:bgColorList[activeIndex].navBg}">
        <div class="navBar-left">
            <a class="goback" @click="$router.go(-1)"><i class="el-icon-arrow-left"></i> 第 {{peruseDetail.batch}} 期</a>
            <div class="border"></div>
            <p class="article-title">{{peruseDetail.cn_title}}</p>
        </div>
        <div class="navBar-right">
            <el-input-number class="article-fontsize" v-model="wordFontsize" :step="2" step-strictly :min="12" :max="24" :style="{borderColor:bgColorList[activeIndex].boxBorder}"></el-input-number>
            <ul class="article-color" :style="{borderColor:bgColorList[activeIndex].boxBorder}">
                <li :class="['color-item',activeIndex===indexC?'active':'']" v-for="(itemC,indexC) in bgColorList" :key="indexC" @click="handleChangeBgColor(indexC)" :style="{borderColor:activeIndex===indexC?itemC.border_active:''}">
                    <a :style="{background:itemC.border,borderColor:activeIndex===indexC?itemC.borderColor:''}"></a>
                </li>
            </ul>
        </div>
    </div>
    <div class="article-box">
        <div class="artricle-inner" :style="{background:bgColorList[activeIndex].contentInnerBg}">
            <div class="article-top">
                <span class="preparation" :style="{color:bgColorList[activeIndex].sourceColor}">导读</span>
                <h3 :style="{color:bgColorList[activeIndex].contentColor}">{{peruseDetail.en_title+' '+peruseDetail.cn_title}}</h3>
                <label v-if="peruseDetail.label" :style="{background:tagBg[0],color:tagColor[0]}">{{ '# ' + peruseDetail.label}}</label>
                <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':'',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" 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>
            <div class="article-bottom">
                <div class="left">
                    <span :class="['support',support?'active':'']" @click="changeStatus('support')"><svg-icon icon-class="support"></svg-icon>2847</span>
                    <span :class="['oppose',oppose?'active':'']" @click="changeStatus('oppose')"><svg-icon icon-class="oppose"></svg-icon></span>
                </div>
                <div class="center">
                    <el-button type="text" class="btn-left" @click="handlePage('-')"><svg-icon icon-class="arrow-left-line"></svg-icon>上一篇</el-button>
                    <el-button type="text" class="btn-right" @click="handlePage('+')">下一篇<svg-icon icon-class="arrow-right-line"></svg-icon></el-button>
                </div>
                <div class="right">
                    <template v-if="noRead">
                        <span class="support" @click="changeStatus('noRead')"><svg-icon icon-class="no-read"></svg-icon>标记为已读</span>
                    </template>
                    <template v-else>
                        <span class="support readed" @click="changeStatus('noRead')"><svg-icon icon-class="readed"></svg-icon>已读</span>
                    </template>
                </div>
            </div>
        </div>
    </div>
    <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>

<script>
import Header from "../../components/Header.vue";
import NavBar from "../../components/common/NavBar.vue"
import { getLogin } from "@/api/ajax";
export default {
  name: 'articleDetail',
  computed: {
    
  },
  components: {
    Header,
    NavBar
  },
  data(){
    return{
        wordFontsize: 16, // 文章文字大小
        bgColorList:[
            {
                type:'white',
                contentBg:'#F2F3F5',
                contentInnerBg:'#FFFFFF',
                navBg:'#FFFFFF',
                border:'#E5E6EB',
                bg:'#FFFFFF',
                border_active:'#3459D2',
                boxBorder:'#E5E6EB',
                titleColor:'#1F2C5C',
                sourceColor:'#929CA8',
                contentColor:'#2F3742',
                btnColor:'#3459D2',
                glossaryTitle:'#2F3742',
                glossarySubtitle:'#4E5969',
                glossaryBg:'#F7F8FA',
                newWordColor:'#175DFF',
                newWordOtherColor:'#667180',
                newWordStar:'#FFB224',
                newWordType:{
                    'daochu':{
                        text:'导出',
                        color:'#F5319D',
                        bg:'#FFE8F1'
                    },
                    'xuanbi':{
                        text:'选必',
                        color:'#175DFF',
                        bg:'#D9E2FC'
                    }
                },
                phraseColor:'#ED5F00',
                phraseOhterColor:'#2F3742',
                annotationTitle:'#4E5969',
                annotationOhter:'#667180',
                statisticTitle:'#2F3742',
                statisticValue:'#3459D2',
                menuBg:'#EEF3FF',
                audiobg:'#FFFFFF',
                audioBorder:'#EBEBEB'
            },
            {
                type:'darkGreen',
                contentBg:'#C2C9C6',
                contentInnerBg:'#DFE4E2',
                navBg:'#236E55',
                border:'#5BB99A',
                bg:'#FFFFFF',
                border_active:'#FFFFFF',
                boxBorder:'#1B5441',
                titleColor:'#1F2C5C',
                sourceColor:'#929CA8',
                contentColor:'#2F3742',
                btnColor:'#3459D2',
                glossaryTitle:'#393F3C',
                glossarySubtitle:'#66736D',
                glossaryBg:'#D7DCDA',
                newWordColor:'#175DFF',
                newWordOtherColor:'#667180',
                newWordStar:'#FFB224',
                newWordType:{
                    'daochu':{
                        text:'导出',
                        color:'#F5319D',
                        bg:'#FFE8F1'
                    },
                    'xuanbi':{
                        text:'选必',
                        color:'#175DFF',
                        bg:'#D9E2FC'
                    }
                },
                phraseColor:'#ED5F00',
                phraseOhterColor:'#2F3742',
                statisticTitle:'#393F3C',
                statisticValue:'#299772',
                menuBg:'#E9F7F2',
                audiobg:'#ECEFED',
                audioBorder:'#DFE4E2'
            },
            {
                type:'darkBlue',
                contentBg:'#1C2129',
                contentInnerBg:'#2F3742',
                navBg:'#2F3742',
                border:'#1F2C5C',
                bg:'#1F2C5C',
                border_active:'#FFFFFF',
                boxBorder:'#1C2129',
                titleColor:'#5373E7',
                sourceColor:'#929CA8',
                contentColor:'#C1C5CD',
                btnColor:'#5373E7',
                glossaryTitle:'#929CA8',
                glossarySubtitle:'#929CA8',
                glossaryBg:'#3E4855',
                newWordColor:'#8DA4EF',
                newWordOtherColor:'#929CA8',
                newWordStar:'#816C00',
                newWordType:{
                    'daochu':{
                        text:'导出',
                        color:'#801D45',
                        bg:'#F04F88'
                    },
                    'xuanbi':{
                        text:'选必',
                        color:'#0A2E81',
                        bg:'#5E89EF'
                    }
                },
                phraseColor:'#ED5F00',
                phraseOhterColor:'#929CA8',
                statisticTitle:'#D0D3D9',
                statisticValue:'#5373E7',
                menuBg:'#EEF3FF',
                audiobg:'#3E4855',
                audioBorder:'#2F3742'
            },
            {
                type:'armyGreen',
                contentBg:'#2A2F2C',
                contentInnerBg:'#393F3C',
                navBg:'#393F3C',
                border:'#13392E',
                bg:'#13392E',
                border_active:'#FFFFFF',
                boxBorder:'#2A2F2C',
                titleColor:'#30A47D',
                sourceColor:'#99A29E',
                contentColor:'#C1C5CD',
                btnColor:'#30A47D',
                glossaryTitle:'#99A29E',
                glossarySubtitle:'#99A29E',
                glossaryBg:'#4A524E',
                newWordColor:'#8DA4EF',
                newWordOtherColor:'#99A29E',
                newWordStar:'#816C00',
                newWordType:{
                    'daochu':{
                        text:'导出',
                        color:'#801D45',
                        bg:'#F04F88'
                    },
                    'xuanbi':{
                        text:'选必',
                        color:'#0A2E81',
                        bg:'#5E89EF'
                    }
                },
                phraseColor:'#ED5F00',
                phraseOhterColor:'#99A29E',
                statisticTitle:'#D0D3D9',
                statisticValue:'#30A47D',
                menuBg:'#EEF3FF',
                audiobg:'#4A524E',
                audioBorder:'#393F3C'
            }
        ],
        activeIndex:0, // 选择主题色的索引
        peruseId: this.$route.query.peruseId?this.$route.query.peruseId:'',
        peruseDetail: null,
        loading: false,
        tagBg:['#C9EBFF'], // 标签背景色
        tagColor:['#006DAA'], // 标签字体颜色
        translateFlag: false,
        noRead: true, // 未读
        support: false, // 点赞
        oppose: false, // 不支持
        knowledgeList: [],
        wordDetail: null,
        wordsNotes: false,
        wordType:{
            '1':'基础词汇和固定搭配',
            '2':'高阶词汇和固定搭配',
            '3':'难句解析'
        },
        tabsIndex: 1,
    }
  },
  methods: {
    // 切换主题颜色
    handleChangeBgColor(index){
        this.activeIndex = index
    },
    // 获取精读详情
    getPeruseDetail(){
        this.loading = true
        let MethodName = "/PaperServer/Client/Iread/GetIreadDetail";
        let data = {
            id: this.peruseId
        }
        getLogin(MethodName, data)
        .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.knowledgeList = res.data.content.knowledgeList
                }
                this.loading = false

            }
        })
        .catch(() => {
            this.loading = false
        }); 
    },
    handlePage(type){
        if(type==='-'){
            
        }else{
            
        }
    },
    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){
                                    let id = item.knowList[i].id
                                    arrs[indexe] = `<b class="word-phrase" style="cursor:pointer" onclick="showWordDetail('${id}')">${iteme}</b>`
                                }
                            }
                        }
                    }
                })
            })
            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(){
    if(this.peruseId){
        this.getPeruseDetail()
    }
  },
  mounted(){
    let _this = this
    window.showWordDetail = function(id){
        if(_this.tabsIndex===0){
            return
        }
        _this.getWordDetail(id)
    }
  }
}
</script>

<style lang="scss" scoped>
.bookStore{
    min-height: calc(100vh - 64px);
    padding-bottom: 10px;
    .navBar-right{
        display: flex;
        align-items: center;
    }
    .article-color{
        display: flex;
        width: 132px;
        height: 32px;
        justify-content: space-between;
        align-items: center;
        border: 1px solid #E5E6EB;
        border-radius: 40px;
        margin-left: 12px;
        padding: 4px;
        .color-item{
            padding: 2px;
            border: 2px solid transparent;
            border-radius: 50%;
            a{
                width: 16px;
                height: 16px;
                border-radius: 50%;
                display: block;
                border: 1px solid transparent;
                padding: 0;
            }
            
        }
    }
    .article-box{
        padding: 90px 0;
        .artricle-inner{
            width: 1000px;
            margin: 0 auto;
        }
        .article-top{
            padding: 16px 24px 24px;
            .preparation{
                color:#929CA8;
                font-size: 14px;
                font-weight: 400;
                line-height: 22px;
            }
            h3{
                color:#2F3742;
                font-size: 16px;
                font-weight: 500;
                line-height: 24px;
                margin: 8px 0;
            }
            label{
                margin: 0 8px 8px 0;
                border-radius: 2px;
                padding: 0 8px;
                font-weight: 400;
                font-size: 12px;
                line-height: 20px;
                display: inline-block;
            }
            p{
                color:#929CA8;
                font-size: 14px;
                font-weight: 400;
                line-height: 22px;
                margin: 0;
                word-break: break-word;
            }
        }
        .article-content{
            border-top: 1px dashed #E5E6EB;
            padding: 80px 120px 40px 120px;
            .article-en,.article-cn{
                color:#2F3742;
                font-size: 16px;
                font-weight: 400;
                line-height: 24px;
                word-break: break-word;
                text-indent: 2em;
                &.active{
                    color: #5E89EF;
                }
                &.original{
                    margin-bottom: 24px;
                }
            }
            .article-en-title{
                color:rgba(0, 0, 0, 0.88);
                font-size: 32px;
                font-weight: 500;
                line-height: 40px;
                text-align: center;
                text-indent: 0;
            }
            .article-cn-title{
                color:rgba(0, 0, 0, 0.48);
                font-size: 16px;
                font-weight: 500;
                line-height: 24px;
                text-align: center;
                text-indent: 0;
                margin-top: 4px;
            }
            .voice-box{
                padding: 4px 16px 4px 4px;
                border-radius: 40px;
                border: 1px solid #E5E6EB;
                background:#F2F3F5;
                width: 191px;
                margin: 24px 0;
            }
        }
        .article-bottom{
            padding: 16px;
            background: #F7F8FA;
            display: flex;
            justify-content: space-between;
            align-items: center;
            .right{
                width: 145px;
                margin-right: -8px;
                text-align: right;
            }
            .support{
                padding: 8px 16px;
                border-radius: 20px;
                background: #E5E6EB;
                margin-right: 8px;
                color:rgba(0, 0, 0, 0.88);
                font-size: 16px;
                font-weight: 400;
                line-height: 24px;
                cursor: pointer;
                .svg-icon{
                    margin-right: 8px;
                    color: rgba(23, 93, 255, 1);
                }
                &.active{
                    background: rgba(48, 110, 255, 1);
                    color: #fff;
                    .svg-icon{
                        color: #fff;
                    }
                }
            }
            .oppose{
                padding: 12px;
                border-radius: 20px;
                background: #E5E6EB;
                height: 40px;
                font-size: 16px;
                line-height: 16px;
                display: inline-block;
                cursor: pointer;
                .svg-icon{
                    width: 16px;
                    height: 16px;
                }
                &.active{
                    background: rgba(48, 110, 255, 1);
                    .svg-icon{
                        color: #fff;
                    }
                }
            }
            .btn-left,.btn-right{
                color: #3459D2;
                font-size: 16px;
                line-height: 24px;
                padding: 0;
                .svg-icon{
                    margin-right: 12px;
                }
            }
            .btn-right{
                .svg-icon{
                    margin-right: 0;
                    margin-left: 12px;
                }
            }
            .readed{
                background: rgba(231, 238, 255, 1);
                color: rgba(23, 93, 255, 1);
            }
        }
        .backgroundImg{
            width: 100%;
            height: 258px;
            margin-bottom: 24px;
        }
    }
}
.translate{
    position: fixed;
    z-index: 1;
    bottom: 200px;
    left: 50%;
    margin-left: 400px;
    padding: 12px;
    border-radius: 8px;
    background: #4F4F4F;
    box-shadow: 0px 5px 5px -3px rgba(0, 0, 0, 0.10), 0px 8px 10px 1px rgba(0, 0, 0, 0.06), 0px 3px 14px 2px rgba(0, 0, 0, 0.05);
    .svg-icon{
        width: 24px;
        height: 24px;
        color: #fff;
    }
    &.active{
        background: #175DFF;
        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{
    width: 144px;
    height: 32px;
    line-height: 30px;
    border: 1px solid #E5E6EB;
    border-radius: 40px;
    overflow: hidden;
    .el-input{
        height: 30px;
    }
    .el-input-number__decrease, .el-input-number__increase{
        height: 30px;
        border: none;
        background: transparent;
        color: #D9E2FC;
    }
    .el-input-number__decrease{
        border-right: 1px solid #1B5441;
    }
    .el-input-number__increase{
        border-left: 1px solid #1B5441;
    }
    .el-input__inner{
        height: 30px;
        border: none;
        line-height: 30px;
        background: transparent;
        color: #D9E2FC;
    }
}
.navBar{
    border-color: transparent;
    &-white{
        border-color: #EBEBEB;
        .el-input-number__decrease, .el-input-number__increase,.el-input__inner{
            color: #1C2129;
        }
        .el-input-number__decrease{
            border-right: 1px solid #E5E6EB;
        }
        .el-input-number__increase{
            border-left: 1px solid #E5E6EB;
        }
        .goback{
            color: #1D2129;
        }
        .border{
            background: #E5E6EB;
            height: 16px;
            margin-top: 2px;
        }
        .article-title{
            color: #86909C;
        }
    }
    &-darkGreen{
        .el-input-number__decrease{
            border-right: 1px solid #1B5441;
        }
        .el-input-number__increase{
            border-left: 1px solid #1B5441;
        }
        .goback{
            color: #E9F7F2;
        }
        .border{
            background: #1B5441;
            height: 16px;
            margin-top: 2px;
        }
        .article-title{
            color: #CCEBE1;
        }
    }
    &-darkBlue{
        .el-input-number__decrease{
            border-right: 1px solid #1C2129;
        }
        .el-input-number__increase{
            border-left: 1px solid #1C2129;
        }
        .goback{
            color: #E9F7F2;
        }
        .border{
            background: #667180;
            height: 16px;
            margin-top: 2px;
        }
        .article-title{
            color: #D9E2FC;
        }
    }
    &-armyGreen{
        .el-input-number__decrease{
            border-right: 1px solid #2A2F2C;
        }
        .el-input-number__increase{
            border-left: 1px solid #2A2F2C;
        }
        .goback{
            color: #E9F7F2;
        }
        .border{
            background: #99A29E;
            height: 16px;
            margin-top: 2px;
        }
        .article-title{
            color: #D9E2FC;
        }
    }
}
.words-notes{
    .explain{
        p{
            margin: 4px 0;
        }
    }
}
.article-en{
    &.original{
        b{
            font-weight: 400;
            cursor: initial !important;
        }
    }
}
</style>