GCLS_Page_Book_Component_NPC/src/components/Adult/preview/WordPhrase.vue

<template>
  <div class="NPC-zhedie" v-if="curQue">
    <div :class="curQue.titleBg == 'white' ? 'topTitleWhite' : 'topTitle'">
      <div class="NPC-top-left">
        <span class="NPC-topTitle-text">{{ curQue.title }}</span>
        <span
          :class="['NPC-play-all', playClass]"
          @click.stop="playNewwords"
        ></span>
      </div>
      <div class="NPC-top-right" @click="handleChangeTab">
        <span class="NPC-top-right-text">{{ wordShow ? "收起" : "展开" }}</span>
        <template v-if="curQue.titleBg == 'white'">
          <img
            v-if="wordShow"
            src="../../../assets/NPC/down-black.png"
            alt=""
          />
          <img v-else src="../../../assets/NPC/up-black.png" alt="" />
        </template>
        <template v-else>
          <img v-if="wordShow" src="../../../assets/NPC/down.png" alt="" />
          <img v-else src="../../../assets/NPC/up.png" alt="" />
        </template>
      </div>
    </div>

    <el-collapse-transition>
      <div
        class="NPC-word-list"
        v-if="curQue.option && curQue.option.length > 0"
        v-show="wordShow"
      >
        <ul class="NPC-word-table" cellspacing="0" border="0" cellpadding="0">
          <li
            class="NPC-word-tr"
            v-for="(item, index) in curQue.option"
            :key="'curQue.option' + index"
          >
            <div
              :class="[
                'NPC-word-row',
                playClass && mp3_index == sItem.sIndex ? 'active' : '',
              ]"
              v-for="(sItem, sIndex) in item"
              :key="'curQue.option.child' + sIndex"
            >
              <template
                v-if="
                  sItem.mp3_list &&
                  sItem.mp3_list.length > 0 &&
                  sItem.mp3_list[0].id
                "
              >
                <span
                  :class="[
                    themeColor == 'green'
                      ? 'NPC-play-btn-green'
                      : themeColor == 'red'
                      ? 'NPC-play-btn-red'
                      : 'NPC-play-btn-brown',
                    playClass && mp3_index == sItem.sIndex ? 'active' : '',
                  ]"
                  @click="palyAudio(sItem.sIndex)"
                ></span>
                <audio
                  :id="'word' + indexs + indexss + sItem.sIndex"
                  :src="sItem.mp3_list[0].id"
                ></audio>
              </template>
              <template v-else>
                <span style="width: 16px; height: 16px"></span>
              </template>
              <template v-if="sItem.mIndex == 0">
                <b class="tabNum">{{ index + 1 }}</b>
              </template>
              <div
                v-else
                style="width: 16px; height: 16px; margin-left: 8px"
              ></div>
              <template
                v-if="
                  sItem.pinyin_site &&
                  (sItem.pinyin_site == 'top' || sItem.pinyin_site == 'bottom')
                "
              >
                <div class="NPC-word-tab-box">
                  <span
                    class="NPC-word-tab-common NPC-word-tab-pinyin"
                    :class="[
                      sItem.motif_color
                        ? 'NPC-word-tab-pinyin-' + themeColor
                        : '',
                    ]"
                    v-if="sItem.pinyin_site == 'top'"
                  >
                    {{ sItem.pinyin }}
                  </span>
                  <span
                    class="NPC-word-tab-common NPC-word-tab-word"
                    :class="[
                      sItem.motif_color
                        ? 'NPC-word-tab-word-' + themeColor
                        : '',
                    ]"
                  >
                    {{ sItem.new_word }}
                  </span>
                  <span
                    class="NPC-word-tab-common NPC-word-tab-pinyin"
                    :class="[
                      sItem.motif_color
                        ? 'NPC-word-tab-pinyin-' + themeColor
                        : '',
                    ]"
                    v-if="sItem.pinyin_site == 'bottom'"
                  >
                    {{ sItem.pinyin }}
                  </span>
                </div>
                <span
                  class="NPC-word-tab-common NPC-word-tab-cixing"
                  v-html="sItem.cixing"
                ></span>
                <span
                  class="NPC-word-tab-common NPC-word-tab-def"
                  v-html="sItem.def_str"
                ></span>
              </template>
              <template v-else>
                <span
                  class="NPC-word-tab-common NPC-word-tab-pinyin"
                  :class="[
                    sItem.motif_color
                      ? 'NPC-word-tab-pinyin-' + themeColor
                      : '',
                  ]"
                  v-if="!sItem.pinyin_site || sItem.pinyin_site == 'first'"
                >
                  {{ sItem.pinyin }}
                </span>
                <span
                  class="NPC-word-tab-common NPC-word-tab-word"
                  :class="[
                    sItem.motif_color ? 'NPC-word-tab-word-' + themeColor : '',
                  ]"
                >
                  {{ sItem.new_word }}
                </span>
                <span
                  class="NPC-word-tab-common NPC-word-tab-pinyin"
                  :class="[
                    sItem.motif_color
                      ? 'NPC-word-tab-pinyin-' + themeColor
                      : '',
                  ]"
                  v-if="sItem.pinyin_site == 'last'"
                >
                  {{ sItem.pinyin }}
                </span>
                <span
                  class="NPC-word-tab-common NPC-word-tab-cixing"
                  v-html="sItem.cixing"
                ></span>
                <span
                  class="NPC-word-tab-common NPC-word-tab-def"
                  v-html="sItem.def_str"
                ></span>
              </template>
              <span v-if="curQue.isInfor">
                <img
                  src="../../../assets/NPC/detail-icon.png"
                  class="detail-icon"
                  @click="showDetail(sItem)"
                />
              </span>
            </div>
          </li>
        </ul>
      </div>
    </el-collapse-transition>
    <div class="practiceBox" v-if="detailShow">
      <WordPhraseDetail
        :data="data"
        :changeDetailIndex="changeDetailIndex"
        :closeWord="closeWordShow"
        :detailIndex="detailIndex"
        :optionRes="optionRes"
        :themeColor="themeColor"
        :currentTreeID="currentTreeID"
        type="newWordDetail"
      />
    </div>
    <audio ref="newwordAudio" />
  </div>
</template>

<script>
//这里可以导入其它文件（比如：组件，工具js，第三方插件js，json文件，图片文件等等）
//例如：import 《组件名称》from ‘《组件路径》';
import WordPhraseDetail from "./components/WordPhraseDetail.vue";
import { getHZChineseInfo } from "@/api/ajax";
export default {
  //import引入的组件需要注入到对象中才能使用
  components: {
    WordPhraseDetail,
  },
  props: ["curQue", "themeColor", "currentTreeID", "indexs", "indexss"],
  data() {
    //这里存放数据
    return {
      wordShow: true,
      data: null,
      detailShow: false,
      detailIndex: 0,
      audio: new Audio(),
      playClass: "",
      mp3_index: -1,
      playWord: null,
      optionRes: [],
      mp3List: [],
      isSuccess: false,
      loading: false,
      mp3: "",
    };
  },
  //计算属性 类似于data概念
  computed: {},
  //监控data中数据变化
  watch: {
    currentTreeID: {
      handler: function () {
        this.mp3_index = -1; // 全文预览
        this.optionRes = []; // 显示单词和短语
        this.mp3List = []; // 语音练习
        this.initData();
      },
      deep: true,
    },
  },
  //方法集合
  methods: {
    handleChange(val) {},
    palyAudio(sIndex) {
      let _this = this;
      _this.stopAudio();
      let node = document.getElementById(
        "word" + _this.indexs + _this.indexss + sIndex
      );
      let mp3 = node.src;
      let audio = document.getElementsByTagName("audio");
      audio.forEach((item) => {
        if (item.src != mp3) {
          item.pause();
        }
      });
      _this.playWord = node;
      if (node) {
        this.mp3_index = sIndex;
        node.play();
      }
      this.handleListenPlay(sIndex);
    },
    handleListenPlay(sIndex) {
      let _this = this;
      if (_this.playWord) {
        let _this = this;
        _this.playWord.addEventListener("play", function () {
          _this.playClass = "nn";
        });
        _this.playWord.addEventListener("pause", function () {
          _this.mp3_index = -1;
          _this.playClass = "";
        });
        _this.playWord.addEventListener("ended", function () {
          _this.mp3_index = -1;
          _this.playClass = "";
        });
      }
    },
    // 打开单词详情
    showDetail(item) {
      this.data = null;
      this.data = item;
      this.detailShow = true;
      this.detailIndex = item.sIndex;
    },

    // 关闭单词详情
    closeWordShow(val) {
      this.detailShow = val;
    },
    changeDetailIndex(val) {
      let _this = this;
      if (val == "last") {
        _this.detailIndex--;
      } else {
        _this.detailIndex++;
      }
      _this.data = null;
      _this.data = _this.optionRes[_this.detailIndex];
      //_this.getWordLiju(_this.data.new_word);
    },

    playNewwords() {
      let _this = this;
      if (_this.playWord) {
        _this.playWord.pause();
      }
      if (_this.playClass) {
        _this.$refs.newwordAudio.pause();
        // _this.mp3_index = -1;
        _this.playClass = "";
      } else {
        let mp3_index = _this.mp3_index == -1 ? 0 : _this.mp3_index;
        let leg = _this.mp3List.length;
        let mp3 = _this.mp3List[mp3_index].mp3_list[0].id;
        _this.mp3_index = _this.mp3List[mp3_index].sIndex;
        _this.handlePlayVoice(mp3);
        _this.$refs.newwordAudio.addEventListener("ended", function () {
          setTimeout(() => {
            if (_this.playClass != "nn") {
              if (mp3_index < leg - 1) {
                if (_this.playClass) {
                  mp3_index = mp3_index + 1;
                  _this.mp3_index = _this.mp3List[mp3_index].sIndex;
                  mp3 =
                    _this.mp3List[mp3_index].mp3_list.length > 0 &&
                    _this.mp3List[mp3_index].mp3_list[0].id;
                  if (mp3) {
                    _this.handlePlayVoice(mp3);
                  }
                }
              } else {
                _this.mp3_index = -1;
                _this.playClass = "";
              }
            }
          }, 1000);
        });
      }
    },
    handlePlayVoice3(mp3) {
      let _this = this;
      let audio = document.getElementsByTagName("audio");
      audio.forEach((item) => {
        if (item.src != mp3) {
          item.pause();
        }
      });
      if (!mp3) {
        return;
      }
      if (!_this.audio.paused) {
        _this.audio.pause();
      } else {
        _this.audio.pause();
        _this.audio.load();
        _this.audio.src = mp3;
        _this.audio.loop = false;
        _this.audio.play();
      }
    },
    handlePlayVoice(mp3) {
      let _this = this;

      let audio = document.getElementsByTagName("audio");
      audio.forEach((item) => {
        if (item.src != mp3) {
          item.pause();
        }
      });
      if (!mp3) {
        return;
      }
      // setTimeout(() => {
      //_this.$refs.newwordAudio.pause();
      _this.$refs.newwordAudio.src = mp3;
      //_this.$refs.newwordAudio.load();
      _this.$refs.newwordAudio.play();
      // }, 1000);
    },
    stopAudio() {
      this.$refs.newwordAudio.pause();
    },
    initData() {
      if (this.curQue.type == "NewWord_chs") {
        let resIndex = 0;
        let optionRes = [];
        let mp3List = [];
        this.curQue.option.forEach((item, index) => {
          optionRes = optionRes.concat(item);
          item.forEach((sItem, sIndex) => {
            sItem.mIndex = sIndex;
            sItem.sIndex = resIndex;
            resIndex++;
            sItem.def_str =
              sItem.definition_list.length > 0
                ? sItem.definition_list.join("    ")
                : "";
            if (sItem.mp3_list[0]) {
              mp3List.push(sItem);
            }
          });
        });
        this.optionRes = JSON.parse(JSON.stringify(optionRes));
        this.mp3List = mp3List;
      }
    },
    handleChangeTab() {
      this.wordShow = !this.wordShow;
    },
  },
  //生命周期 - 创建完成（可以访问当前this实例）
  created() {
    this.initData();
  },
  //生命周期 - 挂载完成（可以访问DOM元素）
  mounted() {
    let _this = this;
    _this.$refs.newwordAudio.addEventListener("play", function () {
      _this.playClass = "active";
    });
    _this.$refs.newwordAudio.addEventListener("pause", function () {
      //_this.playClass = "";
    });
  },
  //生命周期-创建之前
  beforeCreated() {},
  //生命周期-挂载之前
  beforeMount() {},
  //生命周期-更新之前
  beforUpdate() {},
  //生命周期-更新之后
  updated() {},
  //生命周期-销毁之前
  beforeDestory() {},
  //生命周期-销毁完成
  destoryed() {},
  //如果页面有keep-alive缓存功能，这个函数会触发
  activated() {},
};
</script>
<style lang="scss" scoped>
/* @import url(); 引入css类 */
.NPC-zhedie {
  width: 780px;
  margin-bottom: 24px;
  .practiceBox {
    position: fixed;
    left: 0;
    top: 0;
    z-index: 999;
    width: 100%;
    height: 100vh;
    background: rgba(0, 0, 0, 0.19);
    box-sizing: border-box;
    overflow: hidden;
    overflow-y: auto;
  }
  .NPC-word-list {
    background: #f7f7f7;
  }
  .NPC-word-table {
    width: 100%;
    > .NPC-word-tr {
      background: #fff;
      border-radius: 8px;

      margin-bottom: 8px;

      .NPC-word-row {
        cursor: pointer;
        display: flex;
        justify-content: flex-start;
        padding: 8px 13px 8px 12px;
        border-radius: 8px;
        &.active {
          background: linear-gradient(
              0deg,
              rgba(0, 0, 0, 0.08),
              rgba(0, 0, 0, 0.08)
            ),
            #ffffff;
        }
        > span {
          font-size: 16px;
          line-height: 150%;
          color: #000000;
        }
      }
      .tabNum {
        background: #de4444;
        text-align: center;
        width: 16px;
        height: 16px;
        color: #ffffff;
        border-radius: 50%;
        font-size: 12px;
        font-family: "robot";
        line-height: 16px;
        margin-top: 4px;
        margin-left: 8px;
      }
      .NPC-word-tab-box {
        width: 240px;
        span {
          display: block;
          width: 100%;
          color: #000000;
          margin: 2px 0;
        }
      }
      .NPC-word-tab-common {
        padding-left: 8px;
        width: 120px;
        box-sizing: border-box;
      }
      .NPC-word-tab-pinyin {
        font-family: "GB-PINYINOK-B";
        white-space: nowrap;
        font-size: 12px;
        &.NPC-word-tab-pinyin-red {
          color: #e35454;
        }
        &.NPC-word-tab-pinyin-green {
          color: #24b99e;
        }
        &.NPC-word-tab-pinyin-brown {
          color: #bd8865;
        }
      }
      .NPC-word-tab-word {
        font-family: "FZJCGFKTK";
        white-space: nowrap;
        font-size: 16px;
        &.NPC-word-tab-word-red {
          color: #e35454;
        }
        &.NPC-word-tab-word-green {
          color: #24b99e;
        }
        &.NPC-word-tab-word-brown {
          color: #bd8865;
        }
      }
      .NPC-word-tab-cixing {
        font-family: "robot";
        width: 48px;
        box-sizing: border-box;
        text-align: left;
        font-style: italic;
      }
      .NPC-word-tab-def {
        flex: 1;
        font-family: "robot";
        word-break: break-word;
        box-sizing: border-box;
        white-space: pre-wrap;
      }
    }
  }
  .NPC-play-btn-brown {
    margin-top: 4px;
    width: 16px;
    height: 16px;
    display: block;
    background: url("../../../assets/NPC/play-brown.png") no-repeat left top;
    background-size: 100% 100%;
    &.active {
      background: url("../../../assets/NPC/icon-voice-play-brown.png") no-repeat
        left top;
      background-size: 100% 100%;
    }
  }
  .NPC-play-btn-green {
    margin-top: 4px;
    width: 16px;
    height: 16px;
    display: block;
    background: url("../../../assets/NPC/play-green.png") no-repeat left top;
    background-size: 100% 100%;
    &.active {
      background: url("../../../assets/NPC/icon-voice-play-green.png") no-repeat
        left top;
      background-size: 100% 100%;
    }
  }
  .NPC-play-btn-red {
    margin-top: 4px;
    width: 16px;
    height: 16px;
    display: block;
    background: url("../../../assets/NPC/play-red.png") no-repeat left top;
    background-size: 100% 100%;
    &.active {
      background: url("../../../assets/NPC/icon-voice-play-red.png") no-repeat
        left top;
      background-size: 100% 100%;
    }
  }
  .NPC-word-list {
    padding: 20px 24px;
    border: 1px solid rgba(0, 0, 0, 0.1);
    border-top: none;
    border-radius: 0 0 8px 8px;
  }
  .detail-icon {
    width: 56px;
    height: 24px;
    display: block;
    cursor: pointer;
  }
}
@keyframes firstrotate {
  0% {
    transform: rotateZ(0deg);
  }
  100% {
    transform: rotateZ(180deg);
  }
}
@keyframes huifuRotate {
  0% {
    transform: rotateZ(180deg);
  }
  100% {
    transform: rotateZ(0deg);
  }
}
</style>
<style lang="scss">
.NPC-zhedie {
  .topTitle {
    width: 100%;
    display: flex;
    justify-content: space-between;
    padding-left: 24px;
    padding-right: 16px;
    height: 48px;
    background: #e35454;
    border: 1px solid rgba(0, 0, 0, 0.1);
    overflow: hidden;
    border-radius: 8px 8px 0 0;

    .NPC-top-left {
      display: flex;
      justify-content: flex-start;
      align-items: center;
      .NPC-topTitle-text {
        font-family: "sourceR";
        font-size: 16px;
        color: #fff;
        font-weight: bold;
        margin-right: 8px;
        white-space: pre;
      }
      .NPC-play-all {
        width: 16px;
        height: 16px;
        background: url("../../../assets/NPC/play-white.png") no-repeat left top;
        background-size: 100% 100%;
        cursor: pointer;
        &.active {
          width: 16px;
          height: 16px;
          background: url("../../../assets/NPC/icon-voice-play-white.png")
            no-repeat left top;
          background-size: 100% 100%;
        }
      }
    }
    .NPC-top-right {
      display: flex;
      justify-content: flex-start;
      align-items: center;
      cursor: pointer;
      &-text {
        font-weight: normal;
        font-size: 14px;
        line-height: 16px;
        color: #ffffff;
      }
      img {
        width: 16px;
        height: 16px;
        margin-left: 4px;
      }
    }
    img {
      width: 24px;
      height: 24px;
    }
    .rotate {
      animation-name: firstrotate;
      animation-direction: 2s;
      animation-fill-mode: both;
      animation-timing-function: linear;
    }
  }
  .topTitleWhite {
    width: 100%;
    display: flex;
    justify-content: space-between;
    padding-left: 24px;
    padding-right: 16px;
    height: 48px;
    background: #fff;
    border: 1px solid rgba(0, 0, 0, 0.1);
    overflow: hidden;
    border-radius: 8px 8px 0 0;

    .NPC-top-left {
      display: flex;
      justify-content: flex-start;
      align-items: center;
      .NPC-topTitle-text {
        font-family: "sourceR";
        font-size: 16px;
        color: #000;
        font-weight: bold;
        margin-right: 8px;
      }
      .NPC-play-all {
        width: 16px;
        height: 16px;
        background: url("../../../assets/NPC/play-red.png") no-repeat left top;
        background-size: 100% 100%;
        cursor: pointer;
        &.active {
          width: 16px;
          height: 16px;
          background: url("../../../assets/NPC/icon-voice-play-red.png")
            no-repeat left top;
          background-size: 100% 100%;
        }
      }
    }
    .NPC-top-right {
      display: flex;
      justify-content: flex-start;
      align-items: center;
      cursor: pointer;
      &-text {
        font-weight: normal;
        font-size: 14px;
        line-height: 16px;
        color: #000;
      }
      img {
        width: 16px;
        height: 16px;
        margin-left: 4px;
      }
    }
    img {
      width: 24px;
      height: 24px;
    }
    .rotate {
      animation-name: firstrotate;
      animation-direction: 2s;
      animation-fill-mode: both;
      animation-timing-function: linear;
    }
  }
  .el-collapse-item__content {
    padding-bottom: 0;
  }
  .el-slider__button {
    width: 8px;
    height: 8px;
  }
  .el-slider__runway {
    margin: 0;
    padding: 0;
  }
  .el-slider {
    position: relative;
    top: -3px;
  }
  .el-collapse {
    background: #f7f7f7;
    box-sizing: border-box;
    border-radius: 8px;
  }

  .el-collapse-item__wrap {
    border: 1px solid rgba(0, 0, 0, 0.1);
    border-top: 0;
    background: #f7f7f7;
    border-radius: 0px 0px 8px 8px;
  }
  .el-collapse-item__arrow {
    display: none;
  }
  .el-table__row {
    padding: 4px 0;
  }
}
.NPC-Big-Book-preview-green {
  .NPC-zhedie {
    .topTitle {
      background: #24b99e !important;
    }
    .tabNum {
      background: #24b99e !important;
    }
    .topTitleWhite {
      .NPC-top-left {
        .NPC-play-all {
          background: url("../../../assets/NPC/play-green.png") no-repeat left
            top;
          background-size: 100% 100%;
          &.active {
            background: url("../../../assets/NPC/play-green.png") no-repeat left
              top;
            background-size: 100% 100%;
          }
        }
      }
    }
  }
}
.NPC-Big-Book-preview-brown {
  .NPC-zhedie {
    .topTitle {
      background: #bd8865 !important;
    }
    .tabNum {
      background: #bd8865 !important;
    }
    .topTitleWhite {
      .NPC-top-left {
        .NPC-play-all {
          background: url("../../../assets/NPC/play-brown.png") no-repeat left
            top;
          background-size: 100% 100%;
          &.active {
            background: url("../../../assets/NPC/play-brown.png") no-repeat left
              top;
            background-size: 100% 100%;
          }
        }
      }
    }
  }
}
</style>