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

<template>
  <div class="NPC-zhedie">
    <el-collapse v-model="wordShow" @change="handleChange">
      <el-collapse-item name="1">
        <template #title>
          <div class="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">
              <span class="NPC-top-right-text">{{
                wordShow.indexOf("1") != -1 ? "收起" : "展开"
              }}</span>
              <img
                v-if="wordShow.indexOf('1') != -1"
                src="../../../assets/NPC/down.png"
                alt=""
              />
              <img v-else src="../../../assets/NPC/up.png" alt="" />
            </div>
          </div>
        </template>
        <div
          class="NPC-word-list"
          v-if="curQue.option && curQue.option.length > 0"
        >
          <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"
                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',
                      mp3_index == sItem.sIndex ? 'active' : '',
                    ]"
                    @click="palyAudio(sItem.sIndex)"
                  ></span>
                  <audio
                    :id="'word' + sItem.sIndex"
                    :src="sItem.mp3_list[0].id"
                  ></audio>
                </template>
                <template v-else>
                  <span style="width: 16px; height: 16px"></span>
                </template>
                <span class="tabNum"
                  ><template v-if="sItem.mIndex == 0"
                    >{{ index + 1 }}.</template
                  ></span
                >

                <span class="NPC-word-tab-common NPC-word-tab-pinyin">
                  {{ sItem.pinyin }}
                </span>
                <span class="NPC-word-tab-common NPC-word-tab-word">
                  {{ sItem.new_word }}
                </span>
                <span class="NPC-word-tab-common NPC-word-tab-cixing">
                  {{ sItem.cixing }}
                </span>
                <span
                  class="NPC-word-tab-common NPC-word-tab-def"
                  v-html="sItem.def_str"
                ></span>
                <span>
                  <img
                    src="../../../assets/NPC/detail-icon.png"
                    class="detail-icon"
                    @click="showDetail(sItem)"
                  />
                </span>
              </div>
            </li>
          </ul>
        </div>
      </el-collapse-item>
    </el-collapse>
    <div v-if="detailShow">
      <WordPhraseDetail
        v-if="isSuccess"
        :data="data"
        :curQue="curQue"
        :changeDetailIndex="changeDetailIndex"
        :closeWord="closeWordShow"
        :detailIndex="detailIndex"
        :getWordLiju="getWordLiju"
        :optionRes="optionRes"
        :themeColor="themeColor"
      />
    </div>
  </div>
</template>

<script>
//这里可以导入其它文件（比如：组件，工具js，第三方插件js，json文件，图片文件等等）
//例如：import 《组件名称》from ‘《组件路径》';
import WordPhraseDetail from "./components/WordPhraseDetail.vue";
import { getContent } from "@/api/ajax";
export default {
  //import引入的组件需要注入到对象中才能使用
  components: {
    WordPhraseDetail,
  },
  props: ["curQue", "themeColor", "currentTreeID"],
  data() {
    //这里存放数据
    return {
      wordShow: ["1"],
      data: null,
      detailShow: false,
      detailIndex: 0,
      audio: new Audio(),
      playClass: "",
      mp3_index: -1,
      playWord: null,
      optionRes: [],
      mp3List: [],
      isSuccess: false,
    };
  },
  //计算属性 类似于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" + sIndex);
      _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.playWord.addEventListener("pause", function () {
          _this.mp3_index = -1;
        });
        _this.playWord.addEventListener("ended", function () {
          _this.mp3_index = -1;
        });
      }
    },
    // 打开单词详情
    showDetail(item) {
      this.data = null;
      this.data = item;
      console.log(this.data);
      this.detailShow = true;
      this.detailIndex = item.sIndex;
      this.getWordLiju(item.new_word);
    },
    // 获取生词的例句
    getWordLiju(val) {
      this.isSuccess = false;
      console.log(this.data);
      this.data.list1 = [];
      this.data.list2 = [];
      this.data.list3 = [];
      let Mname =
        "book-courseware_manager-GetCoursewareWordExampleSentenceList";
      // 获取本课的 本教材的 本套的 的例句
      getContent(Mname, {
        courseware_id: this.currentTreeID, // 课件id
        word: val, //生词
        search_scope: 2, //检索范围0 本课件  1本教材 2本套
        is_contain_word_variants: false,
      }).then((res) => {
        this.data.list3 = res.sentence_list;
        getContent(Mname, {
          courseware_id: this.currentTreeID, // 课件id
          word: val, //生词
          search_scope: 1, //检索范围0 本课件  1本教材 2本套
          is_contain_word_variants: false,
        }).then((res) => {
          this.data.list2 = res.sentence_list;
          getContent(Mname, {
            courseware_id: this.currentTreeID, // 课件id
            word: val, //生词
            search_scope: 0, //检索范围0 本课件  1本教材 2本套
            is_contain_word_variants: false,
          }).then((res) => {
            this.$set(this.data, "list1", res.sentence_list);
            this.isSuccess = true;
          });
        });
      });
    },
    // 关闭单词详情
    closeWordShow(val) {
      this.detailShow = val;
    },
    // 上一个单词详情
    lasspanetail(val) {
      this.detailIndex = val;
      this.data = null;
      this.data = this.optionRes[this.detailIndex];
      this.getWordLiju(this.data.new_word);
    },
    // 下一个单词详情
    nexspanetail(val) {
      this.detailIndex = val;
      this.data = null;
      this.data = this.optionRes[this.detailIndex];
      this.getWordLiju(this.data.new_word);
    },
    changeDetailIndex(val) {
      if (val == "last") {
        this.detailIndex--;
      } else {
        this.detailIndex++;
      }
      this.data = null;
      this.data = this.optionRes[this.detailIndex];
    },
    playNewwords() {
      let _this = this;
      if (_this.playWord) {
        _this.playWord.pause();
      }
      let mp3_index = 0;
      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.audio.addEventListener("ended", function () {
        if (mp3_index < leg - 1) {
          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;
        }
      });
    },
    handlePlayVoice(mp3) {
      let _this = this;
      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();
      }
    },
    stopAudio() {
      if (this.audio) {
        this.audio.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;
      }
    },
  },
  //生命周期 - 创建完成（可以访问当前this实例）
  created() {
    this.initData();
  },
  //生命周期 - 挂载完成（可以访问DOM元素）
  mounted() {
    let _this = this;
    _this.audio.addEventListener("play", function () {
      _this.playClass = "active";
    });
    _this.audio.addEventListener("pause", function () {
      _this.playClass = "";
    });
    _this.audio.addEventListener("ended", 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: 16px;
  .NPC-word-table {
    width: 100%;
    > .NPC-word-tr {
      background: #fff;
      border-radius: 8px;
      padding: 8px 16px 0px 16px;
      margin-bottom: 8px;
      .NPC-word-row {
        cursor: pointer;
        display: flex;
        justify-content: flex-start;
        padding-bottom: 8px;
        > span {
          font-size: 16px;
          line-height: 150%;
          color: #000000;
        }
      }
      .tabNum {
        width: 28px;
        text-align: right;
        margin-left: 4px;
      }
      .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;
      }
      .NPC-word-tab-word {
        font-family: "sourceR";
        white-space: nowrap;
      }
      .NPC-word-tab-cixing {
        font-family: "robot";
        width: 48px;
        box-sizing: border-box;
      }
      .NPC-word-tab-def {
        width: 296px;
        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;
  }
  .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;
    .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;
      }
      .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;
      &-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;
    }
  }
  .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__header {
    height: 48px;
    background: #e35454;
    border: 1px solid rgba(0, 0, 0, 0.1);
    box-sizing: border-box;
    border-radius: 8px 8px 0px 0px;
  }

  .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 {
    .el-collapse-item__header {
      background: #24b99e !important;
    }
  }
}
.NPC-Big-Book-preview-brown {
  .NPC-zhedie {
    .el-collapse-item__header {
      background: #bd8865 !important;
    }
  }
}
</style>