HM21St_Page_User/src/views/bookShelf/components/PhraseModel.vue

<!--  -->
<template>
  <div class="NNPE-ArticleView" v-if="articleInfo">
    <template v-if="resArr[0]&&resArr[0].wordsList">
        <h2>
            <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="[
                    itemR.tokens[9]===''?'marginRight':'',itemR.marginRight?'marginSingleRight':'',
                    itemR.isExplain||itemR.explainNumber?'hasExplain':''
                ]">
                <template v-if="itemR.isShow">
                    <template v-if="itemR.isExplain">
                        <span class="explain-sub" @click="showItem(itemR)">
                            <img :src="require('../../../assets/explainBg-'+itemR.explainNumber+'.png')"/>
                        </span>
                    </template>
                    <template v-else>
                        <span
                                class="NNPE-chs"
                                :class="[
                                    itemR.type,itemR.tokens[9]===''?'marginRight':'',itemR.highIndex?'fontWeight':'',itemR.marginRight?'marginSingleRight':'',
                                ]"
                                @click="showItem(itemR)"
                                >{{ itemR.tokens[2] }}</span
                            >
                            <template v-if="itemR.explainNumber">
                                <span class="explain-sub" @click="showItem(itemR)">
                                    <img :src="require('../../../assets/explainBg-'+itemR.explainNumber+'.png')"/>
                                </span>
                            </template>
                            <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[8]===''?'marginLeft':'',resArr[0].wordsList[indexR + 1].highIndex?'fontWeight':'',resArr[0].wordsList[indexR + 1].marginRight?'marginSingleRight':'',
                                    ]"
                                @click="showItem(resArr[0].wordsList[indexR + 1])"
                                >{{ resArr[0].wordsList[indexR + 1].tokens[2] }}</span
                            >
                    </template>
                </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'}">
        {{articleInfo.art_author+' · '+articleInfo.study_phase_name+'版 · 第 '+articleInfo.iss_no+' 期 · '+articleInfo.release_date+' · '+articleInfo.chn_item+(articleInfo.page_no_in_pub?' · P'+articleInfo.page_no_in_pub:'')}}
    </h6>
    <div class="audio-box">
        <div
            class="aduioLine-content aduioLine-box"
            v-if="
                articleInfo.art_sound_url
            " :style="{background:colorObj.audiobg,borderColor:colorObj.audioBorder}"
        >
            <AudioLine
                audioId="artNormalAudio"
                :mp3="articleInfo.art_sound_url"
                :getCurTime="getCurTime"
                ref="audioLine"
                :mp3Source="'mp3'"
            />
            <svg-icon icon-class="icon-wrapper" class="wrapper"></svg-icon>
        </div>
    </div>
    <template v-if="resArr.length > 0">
      <div class="table-box">
        <div
          :class="['NNPE-detail']"
          v-for="(item, index) in resArr"
          :key="'detail' + index"
        >
          <div class="wordsList-box">
            <template v-if="index!==0">
                <div class="nnpe-sentence-box">
                    <div v-for="(pItem, pIndex) in item.wordsList" :key="'wordsList' + pIndex" class="word-box" :class="[pItem.isExplain||pItem.explainNumber?'hasExplain':'']">
                        <template v-if="pItem.isShow">
                            <template v-if="pItem.isExplain">
                                <span class="explain-sub" @click="showItem(pItem)">
                                    <img :src="require('../../../assets/explainBg-'+pItem.explainNumber+'.png')"/>
                                </span>
                            </template>
                            <template v-else>
                                <div
                                    :class="[
                                    'NNPE-words',
                                    ]"
                                >
                                    <span
                                        class="NNPE-chs"
                                        :class="[
                                            pItem.type,pItem.tokens[9]===''?'marginRight':'',pItem.highIndex?'fontWeight':'',pItem.marginRigh?'marginSingleRight':''
                                        ]"
                                        :style="{fontSize:wordFontsize + 'px',color: colorObj.contentColor}"
                                        @click="showItem(pItem)"
                                        >{{ pItem.tokens[2] }}</span
                                    >
                                    <template v-if="pItem.explainNumber">
                                        <span class="explain-sub" @click="showItem(pItem)">
                                            <img :src="require('../../../assets/explainBg-'+pItem.explainNumber+'.png')"/>
                                        </span>
                                    </template>
                                    <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].type,item.wordsList[pIndex + 1].tokens[8]===''?'marginLeft':'',item.wordsList[pIndex + 1].highIndex?'fontWeight':'',item.wordsList[pIndex + 1].marginRight?'marginSingleRight':''
                                            ]"
                                        :style="{fontSize:wordFontsize + 'px',color: colorObj.contentColor}"
                                        @click="showItem(item.wordsList[pIndex + 1])"
                                        >{{ item.wordsList[pIndex + 1].tokens[2] }}</span
                                    >
                                </div>
                            </template>
                        </template>
                    </div>
                </div>
            </template>
          </div>
        </div>
      </div>
    </template>
    <div class="explain-box" v-if="showExplainFlag&&showObj">
        <div class="explain-box-top">
            <p>注释</p>
            <i class="el-icon-close" @click="closeExplain"></i>
        </div>
        <h3>{{showObj.exp_title}}</h3>
        <span>{{showObj.exp_content}}</span>
    </div>
    <el-dialog
        :visible.sync="showPhraseFlag"
        :show-close="false"
        :close-on-click-modal="false"
        width="580px"
        :modal="false"
        class="login-dialog phrase-box"
        v-if="showPhraseFlag&&showObj">
        <phrase-card :dataObj="showObj" @closeWord="closeExplain" @changeLike="changeLike" :likePhrase="likePhraseList"></phrase-card>
    </el-dialog>
    <el-dialog
        :visible.sync="showWordFlag"
        :show-close="false"
        :close-on-click-modal="false"
        width="570px"
        class="login-dialog"
        :modal="false"
        v-if="showWordFlag">
        <WordCard @closeWord="closeExplain" :dataObj="showObj" @changeLike="changeLike" :likePhrase="likeWord"/>
    </el-dialog>
  </div>
</template>

<script>
import AudioLine from "@/components/common/AudioLine.vue"
import PhraseCard from "./PhraseCard.vue"
import WordCard from "../../personalCenter/components/WordCard.vue"
export default {
  name: "ArticleView",
  props: [ "titleFontsize", "wordFontsize", "colorObj","articleType","articleInfo","likePhraseList","likeWord"],
  components: {
    AudioLine,
    PhraseCard,
    WordCard
  },
  data() {
    return {
      resArr: [],
      curTime: 0, //单位s
      enFhList: [
        ",",
        ".",
        ";",
        "?",
        "!",
        ":",
        ">",
        "<",
        "'",
        "’",
        "n't",
        "n’t",
        "n’ts",
        "n‘t",
        "'t",
        "’t",
        "‘t",
        "'s",
        "’s",
        "‘s",
        "'m",
        "’m",
        "‘m",
        "'re",
        "’re",
        "‘re",
        "'d",
        "’d",
        "‘d",
        "'ve",
        "’ve",
        "‘ve",
        ")",
        "'ll",
        "’ll",
        "‘ll",
        "”",
      ],
      articleImg: {}, // 文章图片
      allWordList: [], // 生词短语注释总列表
      tokensArr: [],
      sentenceList: [],
      wordLit:[],
      annotationList: [],
      phraseList: [],
      showObj:null,
      activeObjIndex: null,
      showWordFlag: false,
      showPhraseFlag: false,
      showExplainFlag: false,
    };
  },
  computed: {
    isPlaying: function () {
      let playing = false;
      if (this.$refs.audioLine) {
        playing = this.$refs.audioLine.audio.isPlaying;
      }
      return playing;
    },
  },
  watch: {
    likeWordList:{
      handler(val, oldVal) {
        const _this = this;
        if (val) {
            debugger
            this.phraseList.forEach(item=>{
                item.type='phrase'
                item.collect = this.likePhraseList.indexOf(item.exp_title)>-1?true:false
            })
        }
      },
      // 深度观察监听
      deep: true,
    },
    likeWord:{
      handler(val, oldVal) {
        const _this = this;
        if (val) {
            this.wordLit.forEach(item=>{
                item.type='newWord'
                item.exp_title = item.word_name
                let paraStr = ''
                if(item.word_explain&&item.word_explain.word_para_list){
                    item.word_explain.word_para_list.forEach(items=>{
                        paraStr += items.para
                    })
                }
                item.exp_content = paraStr
                item.collect = this.likeWord.indexOf(item.word_name)>-1?true:false
            })
        }
      },
      // 深度观察监听
      deep: true,
    },
  },
  //方法集合
  methods: {
    getCurTime(curTime) {
      this.curTime = curTime * 1000;
    },
    handleData() {
        let explainNumber = 1
        let resArr = [];
        let articleInfo = JSON.parse(JSON.stringify(this.articleInfo));
        this.sentenceList = articleInfo.art_corpus_data?articleInfo.art_corpus_data.sentList:[]
        this.wordLit = articleInfo.art_voc_data?articleInfo.art_voc_data:[]
        this.annotationList = articleInfo.art_phrase_data?articleInfo.art_explain_data:[]
        this.phraseList = articleInfo.art_explain_data?articleInfo.art_phrase_data:[]
        this.wordLit.forEach(item=>{
            item.type='newWord'
            item.exp_title = item.word_name
            let paraStr = ''
            if(item.word_explain&&item.word_explain.word_para_list){
                item.word_explain.word_para_list.forEach(items=>{
                    paraStr += items.para
                })
            }
            item.exp_content = paraStr
            item.collect = this.likeWord.indexOf(item.word_name)>-1?true:false
        })
        this.phraseList.forEach(item=>{
            item.type='phrase'
            item.collect = this.likePhraseList.indexOf(item.exp_title)>-1?true:false
        })
        this.annotationList.forEach(item=>{
            item.type='explain'
        })
        this.allWordList = this.wordLit.concat(this.phraseList).concat(this.annotationList)
        let leg = articleInfo.art_corpus_data.sentList[articleInfo.art_corpus_data.sentList.length-1].pno
        this.sentenceList.forEach((item,index) => {
            let flag = ''
            item.StyleTokens = []
            item.tokens.forEach((items,indexs)=>{
                let obj = {
                    tokens: items,
                    marginRight: indexs===item.tokens.length-1
                }
                this.allWordList.forEach((itema,indexa)=>{
                    itema.bind_sent_data.bind_sents.forEach((itemb,indexb)=>{
                        if(itemb.sent_id===item.id){
                            if(itema.type==='explain'){
                                if(indexs===itemb.sel_token_idxes[itemb.sel_token_idxes.length-1]){
                                    obj.highIndex = true
                                    obj.type = itema.type
                                    obj.word_id = itema.id // 生词注释短语的id
                                    obj.explainNumber = explainNumber
                                    explainNumber ++
                                }
                            }else{
                                itemb.sel_token_idxes.forEach(itemi=>{
                                    if(indexs===itemi){
                                        obj.highIndex = true
                                        obj.type = itema.type
                                        obj.word_id = itema.id // 生词注释短语的id
                                    }
                                })
                            }
                            
                            if(itemb.sel_token_idxes.length===0&&itema.type==='explain'&&indexs===item.tokens.length-1){
                                flag = itema.id
                            }
                        }
                    })
                })
                item.StyleTokens.push(obj)
                if(flag){
                    item.StyleTokens.push({
                        tokens: [
                            0, 8, "Students", "", "", "", "", "", "", " ", 0, "", "", ""
                        ],
                        type: 'explain',
                        word_id: flag,
                        isExplain: true,
                        explainNumber: explainNumber
                    })
                    explainNumber ++
                }
            })
        });
        for(let i=0;i<leg+1;i++){
            let obj = {
                wordsList: []
            }
            resArr.push(obj)
        }
        this.sentenceList.forEach((item,index) => {
            item.StyleTokens.forEach((items,indexs)=>{
                items.isShow = this.enFhList.indexOf(items.tokens[2])==-1
                resArr[item.pno].wordsList.push(items)
            })
          });
          this.resArr = resArr;
    },
    showItem(item){
        if(!item.isShow){
            return
        }else{         
            if(item.type==='explain'){
                this.annotationList.forEach(itemi=>{
                    if(item.word_id===itemi.id){
                        this.showObj = itemi
                    }
                })
                this.showExplainFlag = true
            }else if(item.type==='phrase'){
                this.phraseList.forEach((itemi,indexi)=>{
                    if(item.word_id===itemi.id){
                        this.showObj = itemi
                        this.activeObjIndex = indexi
                    }
                })
                this.showPhraseFlag = true
            }else if(item.type==='newWord'){
                this.wordLit.forEach(itemi=>{
                    if(item.word_id===itemi.id){
                        let obj = {
                            src: itemi.ph_file_url?itemi.ph_file_url:'',
                            word: itemi.word_name,
                            symbol: itemi.word_explain.ph?itemi.word_explain.ph:'',
                            paraList: itemi.word_explain.word_para_list,
                            type: itemi.word_explain.vl_level?itemi.word_explain.vl_level:'',
                            typeCn: itemi.word_explain.vl_level_name?itemi.word_explain.vl_level_name:'',
                            rate: itemi.word_explain.star?itemi.word_explain.star:null,
                            originalObj: itemi,
                            hasVoice: itemi.word_explain.ph_mp3_id||itemi.word_explain.ph_file_url?true:false,
                            id: itemi.id,
                            collect: this.likeWord.indexOf(itemi.word_name)>-1?true:false,
                            isNew: true
                        }
                        this.showObj = obj
                    }
                })
                this.showWordFlag = true
            }else{
                let obj = {
                    word: item.tokens[2],
                    isNew: false
                }
                this.showObj = obj
                this.showWordFlag = true
            }
        }
        // console.log(item)
    },
    closeExplain(){
        this.showExplainFlag = false
        this.showPhraseFlag = false
        this.showWordFlag = false
        this.showObj = null
    },
    changeLike(obj,list){
        this.$emit('changeLike',obj,list)
    }
  },
  //生命周期 - 创建完成（可以访问当前this实例）
  created() {},
  //生命周期 - 挂载完成（可以访问DOM元素）
  mounted() {
    if (this.articleInfo) {
      this.handleData();
    }
  },
  beforeCreate() {}, //生命周期 - 创建之前
  beforeMount() {}, //生命周期 - 挂载之前
  beforeUpdate() {}, //生命周期 - 更新之前
  updated() {}, //生命周期 - 更新之后
  beforeDestroy() {}, //生命周期 - 销毁之前
  destroyed() {}, //生命周期 - 销毁完成
  activated() {}, //如果页面有keep-alive缓存功能，这个函数会触发
};
</script>
<style lang='scss' scoped>
//@import url(); 引入公共css类
.NNPE-ArticleView {
  width: 100%;
  .nnpe-article-author{
      margin: 24px 0;
  }
  h2{
    display: flex;
    flex-flow: wrap;
    &.sentActive {
        background: rgba(24, 144, 255, 0.1);
    }
    &.overActive {
        background: rgba(0, 0, 0, 0.06);
    }
    .wordActive {
        color: #175DFF !important;
    }
    .hasExplain{
        min-width: 3px;
        position: relative;
    }
    .explain-sub{
        position: absolute;
        bottom: -25px;
        right: -10px;
        z-index: 1;
        font-size: 0;
        cursor: pointer;
        img{
            width: 14px;
            height: 12px;
        }
    }
  }
  .table-box {
    // background: #f7f7f7;
    // border-top: 1px solid rgba(0, 0, 0, 0.1);
    :last-child {
      :last-child.wordsList-box {
        padding-bottom: 40px;
      }
    }
    .wordsList-box {
      flex: 1;
      padding: 6px 0 12px 0;
      .nnpe-sentence-box {
        display: flex;
        flex-flow: wrap;
        .word-box{
            position: relative;
            &.hasExplain{
                min-width: 3px;
            }
            .explain-sub{
                position: absolute;
                bottom: -5px;
                right: -10px;
                z-index: 1;
                font-size: 0;
                cursor: pointer;
                img{
                    width: 14px;
                    height: 12px;
                }
            }
        }
      }
      > img {
        max-width: 50%;
        display: block;
        padding: 16px 0;
        margin: 0 auto;
      }
    }
  }
  .NNPE-detail {
    clear: both;
    overflow: hidden;
    display: flex;
    .NNPE-words {
      float: left;
      padding: 0;
      &.noPadding{
          padding:0;
      }
      &.sentActive {
        background: rgba(24, 144, 255, 0.1);
      }
      &.overActive {
        background: rgba(0, 0, 0, 0.06);
      }
      > span {
        float: left;
        cursor: pointer;
        &.NNPE-chs {
          //   font-size: 24px;
          font-family: 'Smartisan';
          line-height: 150%;
          color: #000000;
          padding: 0 3px;
          &.wordActive {
            color: #175DFF !important;
          }
          &.marginRight{
            padding-right: 0;
          }
          &.marginLeft{
            padding-left: 0;
          }
          &.marginSingleRight{
            padding: 0 3px 0 0;
          }
          &.fontWeight{
            font-weight: bold;
          }
          &.newWord{
            color: #3459D2 !important;
          }
          &.phrase{
            color: #FF802B !important;
          }
          &.explain{
            // color: #23C847 !important;
            font-weight: 400;
          }
        }
        &.padding {
          padding: 0 3px;
          cursor: pointer;
        }
      }
    }
  }
}
.audio-box{
    display: flex;
    align-items: center;
    justify-content: space-between;
    .explain-video{
        background: #FFB224;
        border-color: #FFB224;
        color: #FFFFFF;
        width: 136px;
        height: 48px;
        padding: 0;
        font-weight: 500;
        font-size: 16px;
        border-radius: 30px;
        .svg-icon{
            margin-right: 8px;
        }
    }
}
.aduioLine-box{
    width: 516px;
    height: 48px;
    background: #FFFFFF;
    border: 1px solid #EBEBEB;
    border-radius: 30px;
    display: flex;
    align-items: center;
    padding: 8px 24px;
    .wrapper{
        width: 24px;
        height: 24px;
        flex-shrink: 0;
        color: #175DFF;
        margin-left: 8px;
    }
    .Audio{
        width: 430px;
    }
}
.explain-box{
    width: 451px;
    position: fixed;
    z-index: 1;
    top: 50%;
    left: 50%;
    margin-left: -225px;
    margin-top: -90px;
    border-radius: 4px;
    background: #FFF;
    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;
    &-top{
        display: flex;
        justify-content: space-between;
        align-items: center;
        p{
            margin: 0;
            color: #000;
            font-size: 14px;
            font-weight: 400;
            line-height: 22px;
        }
        .el-icon-close{
            cursor: pointer;
        }
    }
    h3{
        color:#2F3742;
        font-size: 20px;
        font-weight: 700;
        line-height: 28px;
        margin: 8px 0 0 0;
    }
    >span{
        display: block;
        margin: 8px 0 0 0;
        color:#667180;
        font-size: 14px;
        font-weight: 400;
        line-height: 22px;
    }
}
.phrase-box{
    // border-radius: 8px;
    // border: 1px solid #EBEBEB;
    // background: #FFF;
    // 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);
    // width: 580px;
    // height: 200px;
    // position: fixed;
    // left: 50%;
    // margin-left: -290px;
    // top: 200px;
    // z-index: 1;
}
</style>