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"
                        :style="wordStyle(itemCon.config)"
                        >{{ 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(
                            item.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"
                        :style="
                          wordStyle(item.detail.wordsList[indexCon + 1].config)
                        "
                        >{{ item.detail.wordsList[indexCon + 1].chs }}</span
                      >
                      <span
                        class="pinyin"
                        :class="[
                          noFont.indexOf(
                            item.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"
                    :style="wordStyle(itemCon.config)"
                    >{{ 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: {
    wordStyle() {
      return function(config) {
        if (config) {
          let sizeVal = config.fontSize.replace("px", "");
          return {
            minHeight: Number(sizeVal) + 9 + "px",
            lineHeight: Number(sizeVal) + 8 + "px",
            fontSize: config.fontSize,
            fontFamily: config.fontFamily
          };
        }
      };
    }
  },
  watch: {},
  //方法集合
  methods: {
    // 处理数据
    handleData() {
      let _this = this;
      let curQue = JSON.parse(JSON.stringify(this.curQue));
      curQue.option.forEach((dItem, dIndex) => {
        let paraArr = [];
        if (dItem.detail) {
          dItem.detail.wordsList.forEach((sItem, sIndex) => {
            this.mergeWordSymbol(dItem.detail.wordsList, sItem, sIndex);
            let obj = {
              pinyin: sItem.pinyin,
              chs: sItem.chs,
              isShow: sItem.isShow,
              config: {
                fontColor: sItem.fontColor,
                fontFamily: sItem.fontFamily,
                fontSize: sItem.fontSize,
                underLine: sItem.underLine,
                wordPadding: sItem.wordPadding
              }
            };
            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;
        }
      } 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;
  margin-bottom: 24px;
  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>