GCLS_Page_Book_Component_NPC/src/components/Adult/Preview.vue

<!--  -->
<template>
  <div
    class="NNPE-Big-Book-preview adult-book-preview-sty"
    :class="['NNPE-Big-Book-preview-' + themeColor]"
    v-if="cur"
  >
    <div
      class="NNPE-title"
    >
      <!-- 页眉 -->
      <div class="NNPE-title-left">
        <div
          v-for="(item, index) in cur.detailList"
          :key="index"
          class="NNPE-title-item"
        >
          <template v-if="item.wordsList.length == 0">
            <p
              v-if="item.sentence"
              :class="[
                'content-con',
                /^[\u4e00-\u9fa5]/.test(item.sentence) ? 'hasCn' : '',
              ]"
            >
              {{ item.sentence }}
            </p>
          </template>
          <template v-else>
            <div class="con-box">
              <div
                v-for="(itemCon, indexCon) in item.resArr"
                v-show="itemCon.isShow"
                :key="indexCon"
                :class="['con-item', indexCon === 0 ? 'con-item-0' : '']"
              >
                <template
                  v-if="
                    item.wordsList[indexCon + 1] &&
                      item.wordsList[indexCon + 1].chs &&
                      chsFhList.indexOf(item.wordsList[indexCon + 1].chs) > -1
                  "
                >
                  <div class="synthesis-box">
                    <div>
                      <span class="pinyin" :class="[noFont.indexOf(itemCon.pinyin)>-1?'noFont':'']">{{ itemCon.pinyin }}</span>
                      <span class="hanzi content-con">{{ itemCon.chs }}</span>
                    </div>
                    <div style="text-align: left">
                      <span class="pinyin" :class="[noFont.indexOf(items.detail.wordsList[indexCon + 1].pinyin)>-1?'noFont':'']">{{
                        item.wordsList[indexCon + 1].pinyin
                      }}</span>
                      <span class="hanzi content-con">{{
                        item.wordsList[indexCon + 1].chs
                      }}</span>
                    </div>
                  </div>
                </template>
                <template v-else>
                  <span class="pinyin" :class="[noFont.indexOf(itemCon.pinyin)>-1?'noFont':'']">{{ itemCon.pinyin }}</span>
                  <span class="hanzi content-con">{{ itemCon.chs }}</span>
                </template>
              </div>
            </div>
          </template>
        </div>
      </div>
      <div class="NNPE-operate" v-if="isShowTitle">
        <a class="btn-prev" @click="handleNNPEprev" />
        <a class="btn-next" @click="handleNNPEnext" />
      </div>
    </div>
    <div
      v-if="
        cur.classTopic && cur.classTopic.length > 0 && cur.classTopic[0].con
      "
      class="classTopic-box"
    >
      <span
        v-for="(item, index) in cur.classTopic"
        :key="index"
        :class="item.font"
      >
        {{ item.con }}
      </span>
    </div>
    <div v-if="cur" class="NNPE-Book-content-inner">
      <div v-for="(item, index) in cur.cur_fn_data" :key="index">
        <h2 v-if="item.z_title || item.number">
          <b v-if="item.number">{{ item.number }}</b
          >{{ item.z_title }}
        </h2>
        <h3 v-if="item.f_title">{{ item.f_title }}</h3>
        <div
          :class="['NNPE-tableList', item.is_bg ? 'NNPE-tableList-hasBg' : '']"
        >
          <div
            v-for="(items, indexs) in item.table_list"
            :key="indexs"
            class="NNPE-tableList-tr"
            :class="[indexs===item.table_list.length-1?'NNPE-tableList-tr-last':'']"
          >
            <div
              v-for="(itemss, indexss) in items"
              :key="indexss"
              :class="[
                'NNPE-tableList-item',
                items.length == 1
                  ? 'NNPE-tableList-item-noMargin'
                  : 'NNPE-tableList-item' + items.length,
              ]"
            >
              <template v-if="itemss.data">
                <template v-if="itemss.type == 'ligature_chs'">
                  <Ligature :cur-que="itemss.data" :theme-color="themeColor" />
                </template>
                <template v-if="itemss.data.type == 'image'">
                  <Picture :cur-que="itemss.data" :child-type="itemss.type" :theme-color="themeColor" />
                </template>
                <template v-if="itemss.type == 'record_chs'">
                  <Record :cur-que="itemss.data" :theme-color="themeColor" />
                </template>
                <template v-if="itemss.type == 'phrase_chs'">
                  <WordPhrase :cur-que="itemss.data" :theme-color="themeColor" />
                </template>
                <template v-if="itemss.type == 'NewWord_chs'">
                  <WordPhrase :cur-que="itemss.data" :theme-color="themeColor" />
                </template>
                <template v-if="itemss.type == 'annotation_chs'">
                  <WordPhrase :cur-que="itemss.data" :theme-color="themeColor" />
                </template>
                <template v-if="itemss.type == 'notes_chs'">
                  <Notes :cur-que="itemss.data" :theme-color="themeColor" />
                </template>
                <template v-if="itemss.type == 'article_chs'">
                  <ArticleTemChs
                    :cur-que="itemss.data"
                    :n-n-p-e-new-word-list="NNPENewWordList"
                    :n-n-p-e-new-phrase-list="NNPENewPhraseList"
                    :n-n-p-e-annotation-list="NNPEAnnotationList"
                    :theme-color="themeColor"
                  />
                </template>
                <template v-if="itemss.type == 'sentence_segword_chs'">
                  <SentenceSegWordViewChs :cur-que="itemss.data" :theme-color="themeColor" />
                </template>
                <template v-if="itemss.type == 'dialogue_article_chs'">
                  <DialogueArticleViewChs
                    :cur-que="itemss.data"
                    :n-n-p-e-new-word-list="NNPENewWordList"
                    :n-n-p-e-new-phrase-list="NNPENewPhraseList"
                    :n-n-p-e-annotation-list="NNPEAnnotationList"
                    :color-box="colorBox"
                    :theme-color="themeColor"
                  />
                </template>
                <template v-if="itemss.type == 'dialogue_answer_chs'">
                  <DialogueAnswerViewChs
                    :cur-que="itemss.data"
                    :color-box="colorBox"
                    :theme-color="themeColor"
                  />
                </template>
                <template v-if="itemss.type == 'input_record_chs'">
                  <InputHasRecord :cur-que="itemss.data" :theme-color="themeColor" />
                </template>
                <template v-if="itemss.type == 'recordHZ_inputPY_chs'">
                  <TextInputRecord :cur-que="itemss.data" :theme-color="themeColor" />
                </template>
                <template
                  v-if="
                    itemss.type == 'inputItem_chs' ||
                      itemss.type == 'sentence_input_chs' ||
                      itemss.type == 'sentence_judge_chs' ||
                      itemss.type == 'sentence_record_chs' ||
                      itemss.type == 'sentence_input_record_chs'
                  "
                >
                  <SentenceInput :cur-que="itemss.data" :theme-color="themeColor" />
                </template>
                <template v-if="itemss.type == 'NumberCombination_chs'">
                  <NumberSelectHasRecord :cur-que="itemss.data" :theme-color="themeColor" />
                </template>
                <template v-if="itemss.type === 'voice_matrix'">
                  <voice-matrix :cur-que="itemss.data" :theme-color="themeColor" />
                </template>
                <template v-if="itemss.type == 'toneSelect_chs'">
                  <SelectTone :cur-que="itemss.data" :theme-color="themeColor" />
                </template>
                <template v-if="itemss.type == 'sudoku_chs'">
                  <Soduko :cur-que="itemss.data" :theme-color="themeColor" />
                </template>
                <template v-if="itemss.type == 'single_chs'">
                  <Single :cur-que="itemss.data" :theme-color="themeColor" />
                </template>
                <template v-if="itemss.type == 'text_problem_chs'">
                  <TextProblem :cur-que="itemss.data" :theme-color="themeColor" />
                </template>
                <template v-if="itemss.type == 'newWord_preview_chs'">
                  <NewWordShow :cur-que="itemss.data" :theme-color="themeColor" />
                </template>
                <template
                  v-if="itemss.type == 'listen_record_single_syllable_chs'"
                >
                  <SelectYinjie :cur-que="itemss.data" :theme-color="themeColor" />
                </template>
                <template v-if="itemss.type == 'sentence_listen_read_chs'">
                  <SentenceListenRead :cur-que="itemss.data" :theme-color="themeColor" />
                </template>
                <template v-if="itemss.type == 'sort_chs'">
                  <SentenceSortQP :cur-que="itemss.data" :theme-color="themeColor" />
                </template>
                <template v-if="itemss.type == 'checkbox_self_assessment_chs'">
                  <Checkbox :cur-que="itemss.data" :theme-color="themeColor" />
                </template>
                <template
                  v-if="
                    itemss.type == 'record_control_mini' ||
                      itemss.type == 'record_control_normal' ||
                      itemss.type == 'record_control_pro' ||
                      itemss.type == 'record_control_promax'
                  "
                >
                  <RecordModule :cur-que="itemss.data" :theme-color="themeColor" />
                </template>
                <template
                  v-if="
                    itemss.type == 'upload_control_chs' ||
                      itemss.type == 'upload_control_preview_chs'
                  "
                >
                  <UploadControlView
                    :cur-que="itemss.data"
                    :type="itemss.type"
                    :theme-color="themeColor"
                  />
                </template>
                <template v-if="itemss.type == 'CourseStart_chs'">
                  <CourseStart
                    :cur-que="itemss.data"
                    :handle-n-n-p-enext="handleNNPEnext"
                    :theme-color="themeColor"
                  />
                </template>
                <template v-if="itemss.type == 'tinydemo_chs'">
                  <Tinydemo :cur-que="itemss.data" :theme-color="themeColor" />
                </template>
                <template v-if="itemss.type == 'video_chs'">
                  <VideoControl :cur-que="itemss.data" :type="itemss.type" :theme-color="themeColor" />
                </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 DialogueArticleViewChs from "./preview/DialogueArticleViewChs/index.vue"; // 文章模板
import SentenceSegWordViewChs from "./preview/SentenceSegWordViewChs.vue"; // 句子分词
import WordPhrase from "./preview/WordPhrase.vue"; // 生词短语
import Notes from "./preview/Notes.vue"; // 注释
import Ligature from "./preview/Ligature.vue";
import InputHasRecord from "./preview/InputHasRecord.vue"; // 输入加录音
import TextInputRecord from "./preview/TextInputRecord.vue"; // 文本+输入+录音
import SentenceInput from "./preview/SentenceInput.vue"; // 输入选项
import NumberSelectHasRecord from "./preview/NumberSelectHasRecord.vue"; // 数字组合
import SelectTone from "./preview/SelectTone.vue"; // 选择声调
import Soduko from "./preview/Soduko.vue"; // 数独
import Single from "./preview/Single.vue"; // 单选
import TextProblem from "./preview/TextProblem.vue"; // 课文上方的问题
import NewWordShow from "./preview/NewWordShow.vue"; // 生字展示
import SelectYinjie from "./preview/SelectYinjie.vue"; // 选择音节
import SentenceListenRead from "./preview/SentenceListenRead.vue"; // 听并朗读
import SentenceSortQP from "./preview/SentenceSortQP.vue"; // 句子拖拽排序
import Checkbox from "./preview/CheckBoxModule.vue"; // 问卷调查-多选题
import VoiceMatrix from "./preview/VoiceMatrix.vue"; // 语音矩阵
import RecordModule from "./preview/RecordModule.vue"; // 录音组件
import UploadControlView from "./preview/UploadControlView.vue"; // 预览控件
import DialogueAnswerViewChs from "./preview/DialogueArticleViewChs/DialogueAnswerViewChs.vue"; // 文章模板
import CourseStart from "./preview/CourseStart.vue"; // 封面
import Tinydemo from "./preview/TinyModule.vue"; // 富文本
import VideoControl from "./preview/VideoControl.vue"; // 视频控件

export default {
  name: "Preview",
  components: {
    Picture,
    Record,
    Soundrecord,
    ArticleTemChs,
    DialogueArticleViewChs,
    SentenceSegWordViewChs,
    WordPhrase,
    Notes,
    Ligature,
    InputHasRecord,
    TextInputRecord,
    SentenceInput,
    NumberSelectHasRecord,
    SelectTone,
    Soduko,
    Single,
    TextProblem,
    NewWordShow,
    SelectYinjie,
    SentenceListenRead,
    SentenceSortQP,
    Checkbox,
    VoiceMatrix,
    RecordModule,
    UploadControlView,
    DialogueAnswerViewChs,
    CourseStart,
    Tinydemo,
    VideoControl,
  },
  props: [
    "context",
    "fatherName",
    "currentTreeID",
    "FatherTreeData",
    "changeId",
    "themeColor",
    "isShowTitle"
  ],
  data() {
    return {
      contextData: null,
      queIndex: -1, // 题目的索引
      cur: null, // 当前的题目
      watchIndex: -1, // 监听的值
      queList: [],
      queTotal: 0, // 题目总数
      NNPENewWordList: [], // 存放文章的生词
      NNPENewPhraseList: [], // 存放文章的短语
      NNPEAnnotationList: [], // 存放文章注释
      height: "", // 总体的高度
      colorBox: [
        {
          touxiang: "#72B51D",
          bg: "#E9F0DF",
        },
        {
          touxiang: "#DE4444",
          bg: "rgba(222, 68, 68, 0.1)",
        },
        {
          touxiang: "#A7A7A7",
          bg: "#ffffff",
        },
        {
          touxiang: "#4D91F6",
          bg: "#F1F7FF",
        },
        {
          touxiang: "#FF8A00",
          bg: "rgba(255, 138, 0, 0.1)",
        },
      ],
      chsFhList: ["，", "。", "“", "：", "》", "《", "？", "！", "；"],
      noFont: ['~','!','@','#','$','%','^','&','*','(',')'], // 对应不要拼音字体
      idArr: [], //当前的pid
    };
  },
  computed: {},
  watch: {
    context: {
      handler(val, oldVal) {
        const _this = this;
        if (val) {
          _this.initContextData();
          _this.handleTitleData();
        }
      },
      // 深度观察监听
      deep: true,
    },
  },
  // 生命周期 - 创建完成（可以访问当前this实例）
  created() {},
  // 生命周期 - 挂载完成（可以访问DOM元素）
  mounted() {
    const _this = this;
    if (_this.context) {
      _this.initContextData();
      _this.handleTitleData();
    }
  },
  beforeCreate() {}, // 生命周期 - 创建之前
  beforeMount() {}, // 生命周期 - 挂载之前
  beforeUpdate() {}, // 生命周期 - 更新之前
  updated() {}, // 生命周期 - 更新之后
  beforeDestroy() {}, // 生命周期 - 销毁之前
  destroyed() {}, // 生命周期 - 销毁完成
  activated() {},
  // 方法集合
  methods: {
    // 处理数据
    handleTitleData() {
      let _this = this;
      let curQue = JSON.parse(JSON.stringify(this.cur));
      curQue.detailList.forEach((dItem, dIndex) => {
        let paraArr = [];
        dItem.wordsList.forEach((sItem, sIndex) => {
          let obj = {
            pinyin: sItem.pinyin,
            chs: sItem.chs,
            isShow: true,
          };
          paraArr.push(obj);
        });
        this.$set(_this.cur.detailList[dIndex], "resArr", paraArr);
      });
    },
    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 = 1;
        //   _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
        //           );
        //         }
        //       });
        //     });
        //   });
        // }
        _this.cur = _this.contextData;
        _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() {
      let _this = this;
      if (_this.queIndex == 0) {
        _this.FatherTreeData.forEach((item, itemIndex) => {
          this.seekCurrentTree(item);
        });
        this.idArr.forEach((item, i) => {
          if (item == _this.currentTreeID) {
            if (i == 0) {
              this.$message({
                message: "已经是第一题",
                type: "success",
              });
            } else {
              _this.changeId(this.idArr[i - 1]);
            }
          }
        });
      } else {
        _this.queIndex -= 1;
        _this.watchIndex = _this.queIndex + new Date().getTime();
        _this.cur = _this.queList[_this.queIndex];
      }
    },
    // 递归寻找相同的目录并保存目录的pid
    seekCurrentTree(item) {
      if (item.is_courseware == "true") {
        this.idArr.push(item.id);
      }
      if (item.children) {
        item.children.forEach((it, index) => {
          if (it.is_courseware == "true") {
            this.idArr.push(it.id);
          }
          if (it.children) {
            this.seekCurrentTree(it);
          }
        });
      }
    },
    // 下一页
    handleNNPEnext() {
      const _this = this;
      if (_this.queIndex == _this.queTotal - 1) {
        _this.FatherTreeData.forEach((item, itemIndex) => {
          this.seekCurrentTree(item);
        });
        this.idArr.forEach((item, i) => {
          if (item == _this.currentTreeID) {
            if (i == this.idArr.length - 1) {
              this.$message({
                message: "已经是最后一题",
                type: "success",
              });
            } else {
              _this.changeId(this.idArr[i + 1]);
            }
          }
        });
      } else {
        _this.queIndex += 1;
        _this.watchIndex = _this.queIndex + new Date().getTime();
        _this.cur = _this.queList[_this.queIndex];
      }
    },
  }, // 如果页面有keep-alive缓存功能，这个函数会触发
};
</script>
<style lang='scss' scoped>
//@import url(); 引入公共css类
.NNPE-Big-Book-preview {
  width: 860px;
  margin: 0 auto;
  position: relative;
  .NNPE-title {
    background: #e35454;
    border-radius: 0px 0px 16px 16px;
    padding: 7px 24px;
    position: relative;
    height: 64px;
    display: flex;
    align-items: center;
    h1 {
      color: #ffffff;
      font-weight: bold;
      font-size: 16px;
      line-height: 150%;
      margin: 0;
    }
    .NNPE-title-left {
      display: flex;
      color: #ffffff;
      font-size: 20px;
      line-height: 28px;
      align-items: flex-end;
      .NNPE-title-item {
        margin-right: 12px;
      }
      .content-con {
        margin: 0;
        font-family: "robot";
        &.hasCn,
        &.hanzi {
          font-family: "FZJCGFKTK";
        }
      }
      .content-en {
        font-weight: normal;
        line-height: 28px;
        font-family: "robot";
      }
      .con-box {
        display: flex;
        flex-flow: wrap;
        justify-content: center;
        .con-item {
          text-align: center;
          padding: 0 1px;
        }
        span {
          display: block;
        }
        .pinyin {
          font-family: "GB-PINYINOK-B";
          font-size: 14px;
          line-height: 22px;
          height: 22px;
          &.noFont{
            font-family: initial;
          }
        }
        .synthesis-box {
          display: flex;
        }
      }
    }
    .NNPE-operate {
      position: absolute;
      top: 10px;
      right: 20px;
      a {
        background: #e35454 url("../../assets/newImage/common/btn-pre.png")
          center no-repeat;
        background-size: 24px;
        border-radius: 4px;
        width: 44px;
        height: 44px;
        display: inline-block;
        margin: 0 4px;
        &.btn-next {
          background: #e35454 url("../../assets/newImage/common/btn-next.png")
            center no-repeat;
          background-size: 24px;
        }
        &:hover {
          background-color: #F76565;
        }
        &:active {
          background-color: #d24444;
        }
      }
    }
  }
  .classTopic-box {
    background: #e35454;
    border-radius: 8px;
    width: 780px;
    margin: 24px auto 0 auto;
    text-align: center;
    padding: 8px 24px;
    span {
      font-size: 16px;
      line-height: 150%;
      color: #ffffff;
      padding: 0 1px;
      &.cn {
        font-family: "FZJCGFKTK";
      }
      &.en {
        font-family: "robot";
      }
      &.pinyin {
        font-family: "GB-PINYINOK-B";
      }
    }
  }
  .NNPE-Book-content-inner {
    padding: 0 40px;
    > div {
      padding-top: 24px;
      > h2 {
        color: #e35454;
        font-size: 16px;
        line-height: 150%;
        font-weight: bold;
        margin: 0;
        b {
          width: 48px;
          height: 24px;
          background: #e35454;
          border-radius: 8px;
          color: #ffffff;
          font-family: "robot";
          display: inline-block;
          text-align: center;
          font-size: 16px;
          margin-right: 14px;
        }
      }
      > h3 {
        color: #000000;
        font-size: 16px;
        line-height: 150%;
        font-weight: normal;
        margin: 8px 0 0 0;
      }
    }
    .NNPE-tableList {
      background: #fff;
      border-radius: 8px;
      margin-top: 16px;
      //   padding: 12px 8px;
      &.NNPE-tableList-hasBg {
        background: #f7f7f7;
        border: 1px solid rgba(0, 0, 0, 0.1);
        box-sizing: border-box;
        border-radius: 8px;
      }
      .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;
          }
          &.NNPE-tableList-item2 {
            width: 378px;
          }
          &.NNPE-tableList-item3 {
            width: 244px;
          }
        }
      }
    }
  }
}
.NNPE-Big-Book-preview-green{
    .NNPE-title {
        background: #24B99E;
        .NNPE-operate {
            a {
                background: #24B99E url("../../assets/newImage/common/btn-pre.png")
                center no-repeat;
                background-size: 24px;
                &.btn-next {
                    background: #24B99E url("../../assets/newImage/common/btn-next.png")
                        center no-repeat;
                    background-size: 24px;
                }
                &:hover {
                    background-color: #3DD4B8;
                }
                &:active {
                    background-color: #1FA189;
                }
            }
        }
    }
    .classTopic-box {
        background: #24B99E;
    }
    .NNPE-Book-content-inner {
        > div {
            > h2 {
                color: #24B99E;
                b{
                    background: #24B99E;
                }
            }
        }
    }
}
.NNPE-Big-Book-preview-brown{
    .NNPE-title {
        background: #BD8865;
        .NNPE-operate {
            a {
                background: #BD8865 url("../../assets/newImage/common/btn-pre.png")
                center no-repeat;
                background-size: 24px;
                &.btn-next {
                    background: #BD8865 url("../../assets/newImage/common/btn-next.png")
                        center no-repeat;
                    background-size: 24px;
                }
                &:hover{
                    background-color: #D6A687;
                }
                &:active {
                    background-color: #A37557;
                }
            }
        }
    }
    .classTopic-box {
        background: #BD8865;
    }
    .NNPE-Book-content-inner {
        > div {
            > h2 {
                color: #BD8865;
                b{
                    background: #BD8865;
                }
            }
        }
    }
}
</style>