GCLS_Page_Book_Component_NPC/src/components/Adult/preview/ArticleViewChs/index.vue

<!--  -->
<template>
  <div class="NPC-ArticleView NPC-ArticleView-container">
    <div class="ArticleView-header">
      <template v-if="curQue.checkList.indexOf(1) > -1">
        <el-switch
          style="display: block"
          v-model="showPhrases"
          :active-color="activeColor"
          inactive-color="rgba(0,0,0,0.1)"
          active-text=""
          inactive-text="本课生词"
          @change="handleSwitchChange('showPractice', 'showWord')"
        >
        </el-switch>
      </template>
      <template v-if="curQue.checkList.indexOf(2) > -1">
        <el-switch
          style="display: block"
          v-model="showPractice"
          :active-color="activeColor"
          inactive-color="rgba(0,0,0,0.1)"
          active-text=""
          inactive-text="语音练习"
          @change="handleSwitchChange('showPhrases', 'showWord')"
        >
        </el-switch>
      </template>
      <template v-if="curQue.checkList.indexOf(3) > -1">
        <el-switch
          style="display: block"
          v-model="showWord"
          :active-color="activeColor"
          inactive-color="rgba(0,0,0,0.1)"
          active-text=""
          inactive-text="取词"
          @change="handleSwitchChange('showPhrases', 'showPractice')"
        >
        </el-switch>
      </template>
      <!-- <div class="setting-fontsize">
        <a @click="handleFontsize('-')"
          ><img src="../../../../assets/newImage/common/btn-reduce.png"
        /></a>
        <img src="../../../../assets/newImage/common/font-size.png" />
        <a @click="handleFontsize('+')"
          ><img src="../../../../assets/newImage/common/btn-increase.png"
        /></a>
      </div> -->
    </div>
    <div class="ArticleView-body" ref="ArticleViewbody">
      <NormalModelChs
        :curQue="curQue"
        :titleFontsize="titleFontsize"
        :wordFontsize="wordFontsize"
        :bodyLeft="bodyLeft"
        :bodyWidth="bodyWidth"
        :themeColor="themeColor"
        :noFont="noFont"
        v-if="!showPhrases && !showPractice && !showWord"
        :currentTreeID="currentTreeID"
        :config="config"
        @changeConfig="changeConfig"
      />
      <PhraseModel
        :curQue="curQue"
        :titleFontsize="titleFontsize"
        :wordFontsize="wordFontsize"
        :NNPENewWordList="NNPENewWordList"
        :themeColor="themeColor"
        :noFont="noFont"
        :currentTreeID="currentTreeID"
        :bodyLeft="bodyLeft"
        v-if="showPhrases"
        :config="config"
        @changeConfig="changeConfig"
      />
      <Practice
        :curQue="curQue"
        :titleFontsize="titleFontsize"
        :wordFontsize="wordFontsize"
        :themeColor="themeColor"
        :noFont="noFont"
        :NNPENewWordList="NNPENewWordList"
        :currentTreeID="currentTreeID"
        v-if="showPractice"
        :config="config"
        @changeConfig="changeConfig"
      />
      <WordModel
        :curQue="curQue"
        :titleFontsize="titleFontsize"
        :wordFontsize="wordFontsize"
        :bodyLeft="bodyLeft"
        :bodyWidth="bodyWidth"
        :NNPENewWordList="NNPENewWordList"
        :themeColor="themeColor"
        :noFont="noFont"
        :currentTreeID="currentTreeID"
        v-if="showWord"
        :config="config"
        @changeConfig="changeConfig"
      />
    </div>
  </div>
</template>

<script>
import PhraseModel from "./PhraseModelChs.vue";
import NormalModelChs from "./NormalModelChs.vue";
import Practice from "./Practicechs.vue"; // 语音练习模式
import WordModel from "./WordModelChs.vue"; // 语音练习模式

export default {
  name: "ArticleViewChs",
  props: ["curQue", "NNPENewWordList", "themeColor", "currentTreeID"],
  components: { NormalModelChs, Practice, WordModel, PhraseModel },
  data() {
    return {
      showPreview: true, // 全文预览
      showPhrases: false, // 显示单词和短语
      showPractice: false, // 语音练习

      showWord: false, // 取词
      titleFontsize: 20, // 标题字号初始值
      wordFontsize: 16, // 文章内容字号初始值
      bodyLeft: 0,
      bodyWidth: 0,
      noFont: ["~", "!", "@", "#", "$", "%", "^", "&", "*", "(", ")", "/"],
      config: {
        isShowEN: false,
        isHasEN: false,
        isShowPY: false,
        isHasPY: false,
      },
    };
  },
  computed: {
    activeColor: function () {
      let color = "";
      if (this.themeColor == "red") {
        color = "#DE4444";
      } else if (this.themeColor == "green") {
        color = "#24B99E";
      } else if (this.themeColor == "brown") {
        color = "#BD8865";
      }

      return color;
    },
  },
  watch: {
    currentTreeID: {
      handler: function () {
        this.showPreview = true; // 全文预览
        this.showPhrases = false; // 显示单词和短语
        this.showPractice = false; // 语音练习
        this.showWord = false; // 取词
      },
      deep: true,
    },
  },
  //方法集合
  methods: {
    changeConfig(obj) {
      this.config[obj] = !this.config[obj];
    },
    // 处理字体大小
    handleFontsize(symbol) {
      if (symbol == "+") {
        if (this.wordFontsize < 24) {
          this.titleFontsize = this.titleFontsize + 2;
          this.wordFontsize = this.wordFontsize + 2;
        }
      } else if (symbol == "-") {
        if (this.wordFontsize > 12) {
          this.titleFontsize = this.titleFontsize - 2;
          this.wordFontsize = this.wordFontsize - 2;
        }
      }
    },
    // 切换开关
    handleSwitchChange(obj1, obj2) {
      this[obj1] = false;
      this[obj2] = false;
      this.showPreview = false;
    },
    handleObj(list) {
      let pinyin = "";
      list.forEach((item) => {
        pinyin += item.pinyin;
      });
      return pinyin;
    },
  },
  //生命周期 - 创建完成（可以访问当前this实例）
  created() {},
  //生命周期 - 挂载完成（可以访问DOM元素）
  mounted() {
    console.log("我是文章预览");
    console.log(this.curQue);
    this.$nextTick(() => {
      this.bodyLeft = this.$refs.ArticleViewbody.getBoundingClientRect().left;
    });
    for (let i = 0; i < this.curQue.detail.length; i++) {
      let enStr = this.curQue.detail[i].sentencesEn
        ? this.curQue.detail[i].sentencesEn.join("")
        : "";
      if (enStr) {
        this.config.isShowEN = true;
        this.config.isHasEN = true;
      }
      let pinyin = this.handleObj(this.curQue.detail[i].wordsList);
      if (pinyin) {
        this.config.isShowPY = true;
        this.config.isHasPY = true;
      }
      if (enStr && pinyin) {
        break;
      }
    }
  },
  beforeCreate() {}, //生命周期 - 创建之前
  beforeMount() {}, //生命周期 - 挂载之前
  beforeUpdate() {}, //生命周期 - 更新之前
  updated() {}, //生命周期 - 更新之后
  beforeDestroy() {}, //生命周期 - 销毁之前
  destroyed() {}, //生命周期 - 销毁完成
  activated() {}, //如果页面有keep-alive缓存功能，这个函数会触发
};
</script>
<style lang='scss' scoped>
//@import url(); 引入公共css类
.NPC-ArticleView {
  width: 100%;
  &.NPC-ArticleView-container {
    margin-bottom: 24px;
  }
  .ArticleView-header {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    margin-bottom: 16px;
    .setting-fontsize {
      display: flex;
      margin-left: 24px;
      a {
        border: 1px solid rgba(0, 0, 0, 0.1);
        box-sizing: border-box;
        border-radius: 4px;
        display: block;
        height: 24px;
        width: 24px;
      }
      img {
        width: 100%;
      }
      > img {
        margin: 0 8px;
        width: 24px;
      }
    }
  }
  .ArticleView-body {
    border: 1px solid rgba(0, 0, 0, 0.1);
    box-sizing: border-box;
    border-radius: 8px;
    background: #fff;
    box-sizing: border-box;
    .aduioLine-box {
      border-bottom: 1px solid rgba(0, 0, 0, 0.1);
      width: 100%;
    }
  }
}
</style>
<style lang="scss">
.NPC-ArticleView {
  .ArticleView-header {
    .el-switch {
      margin-left: 24px;
    }
    .el-switch__core {
      width: 44px !important;
      height: 24px;
      border-radius: 20px;
    }
    .el-switch__core:after {
      top: 3px;
      left: 3px;
    }
    .el-switch.is-checked .el-switch__core::after {
      left: 100%;
      margin-left: -19px;
    }
    .el-switch__label {
      color: #000000;
    }
    .el-switch__label.is-active {
      color: rgba($color: #000000, $alpha: 0.3);
    }
    .el-switch__label--left {
      margin-right: 8px;
    }
  }
}
.ArticleView-body {
  .aduioLine-box {
    border-bottom: 1px solid rgba(0, 0, 0, 0.1);
    width: 100%;
  }
}
</style>