GCLS_Page_Book_Component_NPC/src/components/Adult/phonePreview/CourseStart.vue

<template>
  <div class="NPC-courseStart">
    <h2
      :class="[curQue.titleType == 'cn' ? 'hanzi' : '']"
      :style="{ fontSize: baseSizePhone + 10 + 'px' }"
    >
      {{ curQue.title }}
    </h2>
    <div class="item-content">
      <template v-if="curQue.detail.wordsList.length == 0">
        <p
          :class="['content-con']"
          v-if="curQue.detail.sentence"
          :style="{ fontSize: baseSizePhone + 24 + 'px' }"
        >
          {{ curQue.detail.sentence }}
        </p>
      </template>
      <template v-else>
        <div class="con-box">
          <div
            :class="['con-item', indexCon === 0 ? 'con-item-0' : '']"
            v-for="(itemCon, indexCon) in curQue.detail.resArr"
            :key="indexCon"
            v-show="itemCon.isShow"
          >
            <template
              v-if="
                curQue.detail.wordsList[indexCon + 1] &&
                  curQue.detail.wordsList[indexCon + 1].chs &&
                  chsFhList.indexOf(curQue.detail.wordsList[indexCon + 1].chs) >
                    -1
              "
            >
              <div class="synthesis-box">
                <div>
                  <span
                    class="pinyin"
                    :class="[
                      noFont.indexOf(itemCon.pinyin) > -1 ? 'noFont' : ''
                    ]"
                    :style="{ fontSize: baseSizePhone + 10 + 'px' }"
                    >{{ itemCon.pinyin }}</span
                  >
                  <span
                    class="hanzi content-con"
                    :style="{ fontSize: baseSizePhone + 26 + 'px' }"
                    >{{ itemCon.chs }}</span
                  >
                </div>
                <div style="text-align: left">
                  <span
                    class="pinyin"
                    :class="[
                      noFont.indexOf(
                        items.detail.wordsList[indexCon + 1].pinyin
                      ) > -1
                        ? 'noFont'
                        : ''
                    ]"
                    :style="{ fontSize: baseSizePhone + 10 + 'px' }"
                    >{{ curQue.detail.wordsList[indexCon + 1].pinyin }}</span
                  >
                  <span
                    class="hanzi content-con"
                    :style="{ fontSize: baseSizePhone + 26 + 'px' }"
                    >{{ curQue.detail.wordsList[indexCon + 1].chs }}</span
                  >
                </div>
              </div>
            </template>
            <template v-else>
              <span
                class="pinyin"
                :class="[noFont.indexOf(itemCon.pinyin) > -1 ? 'noFont' : '']"
                :style="{ fontSize: baseSizePhone + 10 + 'px' }"
                >{{ itemCon.pinyin }}</span
              >
              <span
                class="hanzi content-con"
                :style="{ fontSize: baseSizePhone + 26 + 'px' }"
                >{{ itemCon.chs }}</span
              >
            </template>
          </div>
        </div>
      </template>
      <b
        class="content-en"
        v-if="curQue.en"
        :style="{ fontSize: baseSizePhone + 6 + 'px' }"
        >{{ curQue.en }}</b
      >
    </div>
    <div class="item-intro-box">
      <div
        class="item-intro"
        :style="{
          textIndent: curQue.textindent ? '2em' : '',
          fontSize: baseSizePhone + 2 + 'px'
        }"
        v-if="curQue.con"
      >
        {{ curQue.con }}
      </div>
      <template v-if="curQue.conDetail && curQue.conDetail.sentence">
        <div class="item-intro">
          <OneSentenceTemp
            :detail="curQue.conDetail"
            :TaskModel="TaskModel"
            :Bookanswer="[]"
            :correctAnswer="[]"
            :isInput="false"
            :pyPosition="'top'"
            :pyColors="'rgba(255, 255, 255, 0.85)'"
            :fn_check_list="[]"
            :pyNumber="pyNumber"
            :record_check="[]"
            :maxFontsize="baseSizePhone"
            :textIndent="curQue.textindent"
          />
        </div>
      </template>
    </div>
    <a
      class="start-btn"
      @click="handleNNPEnext"
      :style="{ fontSize: baseSizePhone + 6 + 'px' }"
      >开始学习</a
    >
  </div>
</template>

<script>
//这里可以导入其它文件（比如：组件，工具js，第三方插件js，json文件，图片文件等等）
//例如：import 《组件名称》from ‘《组件路径》';
import OneSentenceTemp from "./components/OneSentenceTemp.vue";
export default {
  //import引入的组件需要注入到对象中才能使用
  components: { OneSentenceTemp },
  props: ["curQue", "handleNNPEnext", "TaskModel", "baseSizePhone"],
  data() {
    //这里存放数据
    return {
      chsFhList: ["，", "。", "“", "：", "》", "？", "！", "；"],
      noFont: ["~", "!", "@", "#", "$", "%", "^", "&", "*", "(", ")"], // 对应不要拼音字体
      pyNumber: 0,
      maxFontsize: 16,
      titleChsFhList: ["，", "”", "。", "：", "》", "？", "！", "；"]
    };
  },
  //计算属性 类似于data概念
  computed: {},
  //监控data中数据变化
  watch: {},
  //方法集合
  methods: {
    // 处理数据
    handleData() {
      let _this = this;
      let curQue = JSON.parse(JSON.stringify(this.curQue));
      let paraArr = [];
      curQue.detail.wordsList.forEach((sItem, sIndex) => {
        let obj = {
          pinyin: sItem.pinyin,
          chs: sItem.chs,
          isShow: true
        };
        paraArr.push(obj);
      });
      this.$set(_this.curQue.detail, "resArr", paraArr);

      if (this.curQue.hasOwnProperty("conDetail")) {
        let isHasPY = 0;
        let maxFontsize = 16;
        if (this.curQue.conDetail.wordsList.length > 0) {
          this.curQue.conDetail.wordsList.forEach((sItem, sIndex) => {
            this.mergeWordSymbol(sItem);
            if (sItem.pinyin) {
              isHasPY++;
            }
            sItem.fontColor = "rgba(255, 255, 255, 0.85)";
            let fontSize = JSON.parse(JSON.stringify(sItem.fontSize));
            fontSize = Number(fontSize.replace("px", ""));
            maxFontsize = fontSize > maxFontsize ? fontSize : maxFontsize;
          });
        }
        this.maxFontsize = maxFontsize;
        this.pyNumber = isHasPY;
      }
    },
    //词和标点合一起
    mergeWordSymbol(sItem) {
      if (this.titleChsFhList.indexOf(sItem.chs) > -1) {
        sItem.isShow = false;
      } else {
        sItem.isShow = true;
      }
    }
  },
  //生命周期 - 创建完成（可以访问当前this实例）
  created() {
    this.handleData();
  },
  //生命周期 - 挂载完成（可以访问DOM元素）
  mounted() {},
  //生命周期-创建之前
  beforeCreated() {},
  //生命周期-挂载之前
  beforeMount() {},
  //生命周期-更新之前
  beforUpdate() {},
  //生命周期-更新之后
  updated() {},
  //生命周期-销毁之前
  beforeDestory() {},
  //生命周期-销毁完成
  destoryed() {},
  //如果页面有keep-alive缓存功能，这个函数会触发
  activated() {}
};
</script>
<style lang="scss" scoped>
/* @import url(); 引入css类 */
.NPC-courseStart {
  width: 100%;
  background: #e35454;
  color: rgba(255, 255, 255, 0.85);
  padding: 15px;
  h2 {
    font-size: 24px;
    line-height: 1.3;
    font-weight: normal;
    text-align: center;
    font-family: "robot";
    margin: 0;
    &.hanzi {
      font-family: "楷体", "FZJCGFKTK";
    }
  }
  .item-content {
    text-align: center;
    padding: 24px 0;
  }
  .content-con {
    font-size: 40px;
    line-height: 1.2;
    font-family: "楷体", "FZJCGFKTK";
    margin: 0;
    &.content-con-small {
      font-size: 16px;
    }
  }
  .content-en {
    font-weight: normal;
    font-size: 20px;
    line-height: 1.4;
    font-family: "robot";
    display: block;
  }
  .con-box {
    display: flex;
    flex-flow: wrap;
    justify-content: center;
    .con-item {
      text-align: center;
      padding: 0 3px;
    }
    span {
      display: block;
    }
    .pinyin {
      font-family: "GB-PINYINOK-B";
      font-size: 24px;
      line-height: 32px;
      height: 32px;
      &.noFont {
        font-family: initial;
      }
    }
    .synthesis-box {
      display: flex;
    }
  }
  .item-intro-box {
    min-height: 272px;
    .item-intro {
      background: #c43c3c;
      border: 1px solid rgba(0, 0, 0, 0.1);
      box-sizing: border-box;
      border-radius: 8px;
      padding: 15px;
      font-size: 16px;
      line-height: 150%;
      white-space: pre-wrap;
      word-break: break-word;
      text-align: justify;
      min-height: 96px;
    }
  }
  .start-btn {
    width: 160px;
    height: 40px;
    box-shadow: 0px 8px 24px rgba(103, 0, 0, 0.25);
    border-radius: 8px;
    background: #ffffff;
    border: 1px solid rgba(0, 0, 0, 0.1);
    display: block;
    margin: 24px auto;
    color: #e35454;
    font-size: 20px;
    line-height: 28px;
    text-align: center;
    line-height: 40px;
    &:active {
      background: rgba(255, 255, 255, 0.85);
    }
  }
}
.NPC-Big-Book-preview-green {
  .NPC-courseStart {
    background: #24b99e;
    .item-intro {
      background: #1fa189;
    }
    .start-btn {
      color: #24b99e;
    }
  }
}
.NPC-Big-Book-preview-brown {
  .NPC-courseStart {
    background: #bd8865;
    .item-intro {
      background: #a37557;
    }
    .start-btn {
      color: #bd8865;
    }
  }
}
</style>