GCLS_Page_Book_Component_NPC/src/components/Adult/preview/TextProblem.vue

<!--  -->
<template>
  <div class="Big-Book-prev-Textdes Textproblem" v-if="curQue">
      <h2 v-if="curQue.title">{{curQue.title}}</h2>
      <ul>
          <li v-for="(item,index) in curQue.option" :key="index">
              <b v-if="item.number">{{item.number}}</b>
              <div class="content-right">
                  <template v-if="item.detail.wordsList.length>0">
                      <div class="con-box">
                          <div :class="['con-item',indexCon===0?'con-item-0':'']" v-for="(itemCon,indexCon) in item.detail.resArr" :key="indexCon" v-show="itemCon.isShow">
                              <template v-if="item.detail.wordsList[indexCon + 1] && item.detail.wordsList[indexCon + 1].chs && chsFhList.indexOf(item.detail.wordsList[indexCon + 1].chs) > -1">
                                  <div class="synthesis-box">
                                      <div>
                                            <span class="pinyin" :class="[noFont.indexOf(itemCon.pinyin)>-1?'noFont':'']" v-if="item.detail.pyPosition=='top'">{{itemCon.pinyin}}</span>
                                            <span class="hanzi content-con">{{itemCon.chs}}</span>
                                            <span class="pinyin" :class="[noFont.indexOf(itemCon.pinyin)>-1?'noFont':'']" v-if="item.detail.pyPosition=='bottom'">{{itemCon.pinyin}}</span>
                                        </div>
                                        <div style="text-align: left">
                                            <span class="pinyin" :class="[noFont.indexOf(items.detail.wordsList[indexCon + 1].pinyin)>-1?'noFont':'']" v-if="item.detail.pyPosition=='top'">{{item.detail.wordsList[indexCon + 1].pinyin}}</span>
                                            <span class="hanzi content-con">{{item.detail.wordsList[indexCon + 1].chs}}</span>
                                            <span class="pinyin" :class="[noFont.indexOf(items.detail.wordsList[indexCon + 1].pinyin)>-1?'noFont':'']" v-if="item.detail.pyPosition=='bottom'">{{item.detail.wordsList[indexCon + 1].pinyin}}</span>
                                        </div>
                                  </div>
                                  
                              </template>
                              <template v-else>
                                    <span class="pinyin" :class="[noFont.indexOf(itemCon.pinyin)>-1?'noFont':'']" v-if="item.detail.pyPosition=='top'">{{itemCon.pinyin}}</span>
                                    <span class="hanzi content-con">{{itemCon.chs}}</span>
                                    <span class="pinyin" :class="[noFont.indexOf(itemCon.pinyin)>-1?'noFont':'']" v-if="item.detail.pyPosition=='bottom'">{{itemCon.pinyin}}</span>
                              </template>
                          </div>
                      </div>
                  </template>
                  <template v-else>
                      <p class="hanzi content-con">
                          {{item.detail.sentence}}
                      </p>
                  </template>
                  <span class="english" v-if="item.en">{{item.en}}</span>
              </div>
          </li>
      </ul>
  </div>
</template>

<script>
export default {
  components: {},
  props: ["curQue"],
  data() {
    return {
        chsFhList: ["，", "。", "“", "：", "》", "《", "？", "！", "；"],
        noFont: ['~','!','@','#','$','%','^','&','*','(',')'], // 对应不要拼音字体
    };
  },
  computed: {},
  watch: {},
  //方法集合
  methods: {
    // 处理数据
    handleData(){
        let _this = this
        let curQue = JSON.parse(JSON.stringify(this.curQue));
        curQue.option.forEach((dItem, dIndex) => {
            let paraArr = []
            dItem.detail.wordsList.forEach((sItem, sIndex) => {
                this.mergeWordSymbol(dItem.detail.wordsList, sItem, sIndex);
                let obj = {
                    pinyin: sItem.pinyin,
                    chs: sItem.chs,
                    isShow: sItem.isShow,
                };
                paraArr.push(obj);
            })
            this.$set(_this.curQue.option[dIndex].detail,'resArr',paraArr)
        })
    },
    //词和标点合一起
    mergeWordSymbol(sItem, wItem, curIndex) {
        let leg = sItem.length;
        if (curIndex < leg - 1) {
            if (this.chsFhList.indexOf(wItem.chs) > -1) {
                wItem.isShow = false;
            } else {
                wItem.isShow = true;
            }
        }
    },
  },
  //生命周期 - 创建完成（可以访问当前this实例）
  created() {
      this.handleData()
  },
  //生命周期 - 挂载完成（可以访问DOM元素）
  mounted() {},
  beforeCreate() {}, //生命周期 - 创建之前
  beforeMount() {}, //生命周期 - 挂载之前
  beforeUpdate() {}, //生命周期 - 更新之前
  updated() {}, //生命周期 - 更新之后
  beforeDestroy() {}, //生命周期 - 销毁之前
  destroyed() {}, //生命周期 - 销毁完成
  activated() {}, //如果页面有keep-alive缓存功能，这个函数会触发
};
</script>
<style lang='scss' scoped>
//@import url(); 引入公共css类
.Textproblem{
    width: 100%;
    padding: 8px 24px;
    background: #F7F7F7;
    border: 1px solid rgba(0, 0, 0, 0.1);
    border-radius: 8px;
    h2{
        margin: 16px 0 0;
        font-weight: 500;
        font-size: 16px;
        line-height: 24px;
        color: #000000;
    }
    ul{
        padding-top: 16px;
        li{
            display: flex;
            margin-bottom: 16px;
            b{
                color: rgba(0, 0, 0, 0.85);
                font-size: 16px;
                line-height: 24px;
                font-family: 'FZJCGFKTK';
                margin-right: 4px;
                font-weight: normal;
            }
            .content-right{
                flex: 1;
                .content-con{
                    font-size: 16px;
                    line-height: 24px;
                    color: #000000;
                    font-family: 'FZJCGFKTK';
                    margin: 0;
                    &.content-con-small{
                        font-size: 16px;
                    }
                }
                .con-box{
                    display: flex;
                    flex-flow: wrap;
                    .con-item{
                        text-align: center;
                        padding: 0 1px;
                        &.con-item-0{
                            text-align: left;
                            padding-left: 0;
                        }
                    }
                    span{
                        display: block;
                    }
                    .pinyin{
                        font-family: 'GB-PINYINOK-B';
                        font-size: 12px;
                        line-height: 20px;
                        color: #000000;
                        height: 20px;
                        &.noFont{
                            font-family: initial;
                        }
                    }
                    .synthesis-box{
                        display: flex;
                    }
                }
                .english{
                    color: rgba(0, 0, 0, 0.85);
                    font-size: 14px;
                    line-height: 150%;
                    font-family: 'robot';
                    display: block;
                    word-break: break-word;
                }
            }
        }
    }
}
</style>