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
                class="rotate"
                src="../../../assets/NPC/down.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.length > 0 && sItem.mp3_list[0].url"
                >
                  <span
                    :class="[
                      'NPC-play-btn',
                      mp3_index == index ? 'active' : '',
                    ]"
                    @click="palyAudio(item.new_word, index)"
                  ></span>
                  <audio
                    :id="sItem.new_word"
                    :src="sItem.mp3_list[0].url"
                  ></audio>
                </template>
                <template v-else>
                  <span style="width: 24px; height: 24px"></span>
                </template>
                <span class="tabNum"
                  ><template v-if="sIndex == 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
        :data="data"
        :curQue="curQue"
        :changeDetailIndex="changeDetailIndex"
        :closeWord="closeWordShow"
        :detailIndex="detailIndex"
      />
    </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"],
  data() {
    //这里存放数据
    return {
      wordShow: ["1"],
      data: null,
      detailShow: false,
      detailIndex: 0,
      audio: new Audio(),
      playClass: "",
      mp3_index: -1,
      playWord: null,
    };
  },
  //计算属性 类似于data概念
  computed: {},
  //监控data中数据变化
  watch: {},
  //方法集合
  methods: {
    handleChange(val) {},
    palyAudio(new_word, index) {
      let _this = this;
      let node = document.getElementById(new_word);
      _this.playWord = node;
      if (node) {
        this.mp3_index = index;
        node.play();
      }
      this.handleListenPlay();
    },
    handleListenPlay() {
      let _this = this;
      if (_this.playWord) {
        debugger;
        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, index) {
      this.data = null;
      this.data = item;
      console.log(this.data);
      this.detailShow = true;
      this.detailIndex = index;
      this.getWordLiju(item.new_word);
    },
    // 获取生词的例句
    getWordLiju(val) {
      this.data.list1 = [];
      this.data.list2 = [];
      this.data.list3 = [];
      this.data.list1 = [
        {
          word: "国",
          sentence: "我是一个中国人，我爱我的国家", // 例句,
          begin_position: 12,
          end_position: 13,
          source_scope: 1,
          source_courseware_id_path: "BOOK1/C0001/CW001", // 来源课件 ID 路径 "source_courseware_name_path":"教材1/章节1/课件1", //来源课件名称路径
        },
        {
          word: "国",
          sentence: "我是一个中国人，我爱我的国家", // 例句,
          begin_position: 5,
          end_position: 6,
          source_scope: 1,
          source_courseware_id_path: "BOOK1/C0001/CW001", // 来源课件 ID 路径 "source_courseware_name_path":"教材1/章节1/课件1", //来源课件名称路径
        },
      ];
      this.data.list2 = [
        {
          word: "国",
          sentence: "我是一个中国人，我爱我的国家", // 例句,
          begin_position: 12,
          end_position: 13,
          source_scope: 1,
          source_courseware_id_path: "BOOK1/C0001/CW001", // 来源课件 ID 路径 "source_courseware_name_path":"教材1/章节1/课件1", //来源课件名称路径
        },
        {
          word: "国",
          sentence: "我是一个中国人，我爱我的国家", // 例句,
          begin_position: 5,
          end_position: 6,
          source_scope: 1,
          source_courseware_id_path: "BOOK1/C0001/CW001", // 来源课件 ID 路径 "source_courseware_name_path":"教材1/章节1/课件1", //来源课件名称路径
        },
      ];
      // 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.data.list1 = res.sentence_list;
      //     });
      //   });
      // });
    },
    // 关闭单词详情
    closeWordShow(val) {
      this.detailShow = val;
    },
    // 上一个单词详情
    lasspanetail(val) {
      this.detailIndex = val;
      this.data = null;
      this.data = this.curQue.option[this.detailIndex];
      this.getWordLiju(this.data.new_word);
    },
    // 下一个单词详情
    nexspanetail(val) {
      this.detailIndex = val;
      this.data = null;
      this.data = this.curQue.option[this.detailIndex];
      this.getWordLiju(this.data.new_word);
    },
    changeDetailIndex(val) {
      if (val == "last") {
        this.detailIndex--;
      } else {
        this.detailIndex++;
      }
      this.data = null;
      this.data = this.curQue.option[this.detailIndex];
    },
    playNewwords() {
      let _this = this;
      let mp3_index = 0;
      _this.mp3_index = mp3_index;
      let leg = this.curQue.option.length;
      let mp3 = this.curQue.option[mp3_index].mp3_list[0].url;
      _this.handlePlayVoice(mp3);
      _this.audio.addEventListener("ended", function () {
        if (mp3_index < leg - 1) {
          mp3_index = mp3_index + 1;
          _this.mp3_index = mp3_index;
          mp3 =
            _this.curQue.option[mp3_index].mp3_list.length > 0 &&
            _this.curQue.option[mp3_index].mp3_list[0].url;
          if (mp3) {
            _this.handlePlayVoice(mp3);
          }
        }
      });
    },
    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();
      }
    },
  },
  //生命周期 - 创建完成（可以访问当前this实例）
  created() {
    console.log(this.curQue);
    if (this.curQue.type == "NewWord_chs") {
      this.curQue.option.forEach((item, index) => {
        item.index = index + 1;
        item.forEach((sItem, sIndex) => {
          sItem.def_str =
            sItem.definition_list.length > 0
              ? sItem.definition_list.join("；")
              : "";
        });
      });
    }
    console.log(this.curQue);
  },
  //生命周期 - 挂载完成（可以访问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-top: 16px;
  .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: 24px;
        height: 24px;
        background: url("../../../assets/NPC/play-white.png") no-repeat left top;
        background-size: 100% 100%;
        cursor: pointer;
        &.active {
          background: url("../../../assets/NPC/play-white-gif.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: 24px;
      height: 24px;
    }
    .rotate {
      animation-name: firstrotate;
      animation-direction: 2s;
      animation-fill-mode: both;
      animation-timing-function: linear;
    }
  }
  .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: 112px;
      }
      .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: 40px;
      }
      .NPC-word-tab-def {
        width: 284px;
        font-family: "robot";
        word-break: break-word;
      }
    }
  }
  .NPC-play-btn {
    width: 24px;
    height: 24px;
    display: block;
    background: url("../../../assets/newImage/common/icon-voice-red.png")
      no-repeat left top;
    background-size: 100% 100%;
    &.active {
      background: url("../../../assets/newImage/common/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 {
  .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;
  }
}
</style>