GCLS_Page_Book_Component_NPC/src/components/Adult/Preview.vue

<!--  -->
<template>
  <div class="NNPE-Big-Book-preview">
    <div class="NNPE-title">
      <h1>{{ fatherName }}</h1>
      <div class="NNPE-operate">
        <a class="btn-prev" @click="handleNNPEprev"></a>
        <a class="btn-next" @click="handleNNPEnext"></a>
      </div>
    </div>
    <div class="NNPE-Book-content-inner" v-if="cur">
      <div v-for="(item, index) in cur.cur_fn_data" :key="index">
        <h2 v-if="item.Ztitle">{{ item.Ztitle }}</h2>
        <h3 v-if="item.Ftitle">{{ item.Ftitle }}</h3>
        <div
          :class="['NNPE-tableList', item.Isbg ? 'NNPE-tableList-hasBg' : '']"
        >
          <div
            class="NNPE-tableList-tr"
            v-for="(items, indexs) in item.table_list"
            :key="indexs"
          >
            <div
              :class="[
                'NNPE-tableList-item',
                items.length == 1 ? 'NNPE-tableList-item-noMargin' : '',
              ]"
              v-for="(itemss, indexss) in items"
              :key="indexss"
            >
              <template v-if="itemss.data">
                <template v-if="itemss.data.type == 'ligature'">
                  <Ligature :curQue="itemss.que" />
                </template>
                <template v-if="itemss.data.type == 'image_chs'">
                  <Picture :curQue="itemss.data" />
                </template>
                <template v-if="itemss.data.type == 'record_chs'">
                  <Record :curQue="itemss.data" />
                </template>
                <template v-if="itemss.data.type == 'phrase_chs'">
                  <WordPhrase :curQue="itemss.data" />
                </template>
                <template v-if="itemss.data.type == 'NewWord_chs'">
                  <WordPhrase :curQue="itemss.data" />
                </template>
                <template v-if="itemss.data.type == 'annotation_chs'">
                  <WordPhrase :curQue="itemss.data" />
                </template>
                <template v-if="itemss.data.type == 'notes_chs'">
                  <Notes :curQue="itemss.data" />
                </template>
                <template v-if="itemss.data.type == 'article_chs'">
                  <ArticleTemChs
                    :curQue="itemss.data"
                    :NNPENewWordList="NNPENewWordList"
                    :NNPENewPhraseList="NNPENewPhraseList"
                    :NNPEAnnotationList="NNPEAnnotationList"
                  />
                </template>
              </template>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import Picture from "./preview/Picture.vue"; // 图片模板
import Record from "./preview/Record.vue"; // 音频播放
import Soundrecord from "./preview/Soundrecord.vue"; // 录音模板
import ArticleTemChs from "./preview/ArticleViewChs/index.vue"; // 文章模板
import WordPhrase from "./preview/WordPhrase.vue"; // 生词 短语
import Notes from "./preview/Notes.vue"; // 注释
import Ligature from "./preview/Ligature.vue";
export default {
  name: "preview",
  components: {
    Picture,
    Record,
    Soundrecord,
    ArticleTemChs,
    WordPhrase,
    Notes,
    Ligature,
  },
  props: ["context", "fatherName"],
  data() {
    return {
      contextData: null,
      queIndex: -1, // 题目的索引
      cur: null, // 当前的题目
      watchIndex: -1, // 监听的值
      queList: [],
      queTotal: 0, // 题目总数
      NNPENewWordList: [], // 存放文章的生词
      NNPENewPhraseList: [], // 存放文章的短语
      NNPEAnnotationList: [], // 存放文章注释
      height: "", //总体的高度
    };
  },
  computed: {},
  watch: {
    context: {
      handler: function (val, oldVal) {
        const _this = this;
        if (val) {
          _this.initContextData();
        }
      },
      // 深度观察监听
      deep: true,
    },
  },
  //方法集合
  methods: {
    initContextData() {
      const _this = this;
      _this.contextData = JSON.parse(JSON.stringify(_this.context));
      _this.queIndex = 0;
      _this.NNPENewWordList = [];
      _this.NNPENewPhraseList = [];
      _this.watchIndex = _this.queIndex + new Date().getTime();
      if (_this.contextData) {
        const list = _this.contextData;
        if (list && list.length > 0) {
          _this.queList = list;
          _this.cur = list[_this.queIndex];
          _this.queTotal = list.length;
          _this.cur.cur_fn_data.forEach((item) => {
            item.table_list.forEach((items) => {
              items.forEach((itemss) => {
                if (itemss.data && itemss.data.type == "NewWord_chs") {
                  _this.NNPENewWordList = _this.NNPENewWordList.concat(
                    itemss.data.option
                  );
                } else if (itemss.data && itemss.data.type == "notes_chs") {
                  _this.NNPEAnnotationList = _this.NNPEAnnotationList.concat(
                    itemss.data.option
                  );
                }
              });
            });
          });
        }
      }
    },
    // 上一页
    handleNNPEprev() {
      const _this = this;
      if (_this.queIndex == 0) {
        // this.$message({
        //   message: "已经是第一题",
        //   type: "success",
        // });
      } else {
        _this.queIndex = _this.queIndex - 1;
        _this.watchIndex = _this.queIndex + new Date().getTime();
        _this.cur = _this.queList[_this.queIndex];
      }
    },
    // 下一页
    handleNNPEnext() {
      const _this = this;
      if (_this.queIndex == _this.queTotal - 1) {
        // this.$message({
        //   message: "已经是最后一题",
        //   type: "success",
        // });
      } else {
        _this.queIndex = _this.queIndex + 1;
        _this.watchIndex = _this.queIndex + new Date().getTime();
        _this.cur = _this.queList[_this.queIndex];
      }
    },
  },
  //生命周期 - 创建完成（可以访问当前this实例）
  created() {},
  //生命周期 - 挂载完成（可以访问DOM元素）
  mounted() {
    const _this = this;
    if (_this.context) {
      _this.initContextData();
    }
  },
  beforeCreate() {}, //生命周期 - 创建之前
  beforeMount() {}, //生命周期 - 挂载之前
  beforeUpdate() {}, //生命周期 - 更新之前
  updated() {}, //生命周期 - 更新之后
  beforeDestroy() {}, //生命周期 - 销毁之前
  destroyed() {}, //生命周期 - 销毁完成
  activated() {}, //如果页面有keep-alive缓存功能，这个函数会触发
};
</script>
<style lang='scss' scoped>
//@import url(); 引入公共css类
.NNPE-Big-Book-preview {
  width: 860px;
  margin: 0 auto;
  position: relative;
  .NNPE-title {
    background: #4f92f6;
    padding: 20px 24px;
    position: relative;
    h1 {
      color: #ffffff;
      font-weight: bold;
      font-size: 16px;
      line-height: 150%;
      margin: 0;
    }
    .NNPE-operate {
      position: absolute;
      top: 10px;
      right: 20px;
      a {
        background: #66a3ff url("../../assets/newImage/common/btn-pre.png")
          center no-repeat;
        border-radius: 4px;
        width: 44px;
        height: 44px;
        display: inline-block;
        margin: 0 4px;
        &.btn-next {
          background: #66a3ff url("../../assets/newImage/common/btn-next.png")
            center no-repeat;
        }
        &:hover {
          background-color: #3f75c4;
        }
      }
    }
  }
  .NNPE-Book-content-inner {
    padding: 0 40px;
    > div {
      padding-top: 24px;
      > h2 {
        color: #000000;
        font-size: 16px;
        line-height: 150%;
        font-weight: bold;
        margin: 0;
      }
      > h3 {
        color: #000000;
        font-size: 16px;
        line-height: 150%;
        font-weight: normal;
        margin: 8px 0 16px 0;
      }
    }
    .NNPE-tableList {
      background: #fff;
      padding: 12px 8px;
      border-radius: 8px;
      &.NNPE-tableList-hasBg {
        background: #f3f3f3;
      }
      .NNPE-tableList-tr {
        display: flex;
        justify-content: space-between;
        // flex-flow: wrap;
        .NNPE-tableList-item {
          width: 100%;
          margin: 12px 16px;
          // padding: 16px;
          // background: #FFFFFF;
          // border-radius: 4px;
          display: flex;
          flex-flow: wrap;
          justify-content: center;
          &.NNPE-tableList-item-noMargin {
            margin: 0;
          }
        }
      }
    }
  }
}
</style>