GCLS_Page_Personal/src/components/common/WordPhraseDetailEn.vue

<template>
  <div class="Module">
    <div class="module-inner">
      <div class="top" v-if="detail">
        <div class="operation">
          <div>
            <!-- <img
              style="margin-right: 8px"
              src="../../assets/Left-16-normal-Black.png"
              alt=""
              @click="lastDetail"
              v-if="!notshowNext"
            />
            <img
              src="../../assets/Right-16-normal-Black.png"
              alt=""
              @click="nextDetail"
              v-if="!notshowNext"
            /> -->
            <img
              @click="closeWordShow"
              src="../../assets/Cross-16-normal-Black.png"
              alt=""
            />
          </div>
        </div>
        <div class="wordDetail">
          <p class="word">{{ detail.new_word.new_word }}</p>
          <div class="yinpin" v-if="detail.new_word.pinyin">
            <span> /{{ detail.new_word.pinyin }}/</span>
            <img
              @click="palyAudio('deafult')"
              :src="playBtn == 'deafult' ? voicePlaySrc : voicePauseSrc"
              alt=""
              v-if="
                detail.new_word.mp3_list &&
                detail.new_word.mp3_list.length > 0 &&
                playWord == 'deafult' &&
                voiceSrc
              "
            />
            <img
              @click="palyAudio('deafult')"
              :src="voicePauseSrc"
              alt=""
              v-else-if="
                detail.new_word.mp3_list && detail.new_word.mp3_list.length > 0
              "
            />
            <audio
              v-if="
                detail.new_word.mp3_list && detail.new_word.mp3_list.length > 0
              "
              id="deafult"
              :src="detail.new_word.mp3_list[0].id"
            ></audio>
          </div>
          <p
            class="jieshu"
            v-for="(fy, i) in detail.new_word.definition_list"
            :key="i"
          >
            <template v-if="fy.indexOf('. ') > -1">
              <i>{{ fy.substring(0, fy.indexOf(". ") + 2) }}</i>
              <span
                >{{ fy.substring(fy.indexOf(". ") + 2, fy.length)
                }}{{
                  i == detail.new_word.definition_list.length - 1 ? "" : "；"
                }}</span
              >
            </template>
            <template v-else>
              <span>{{
                i == detail.new_word.definition_list.length - 1 ? fy : fy + "；"
              }}</span>
            </template>
          </p>
        </div>
        <div class="zhedie">
          <div v-if="list1 && list1.length > 0">
            <div class="topTitle">
              <!-- 本课例句 -->
              <span>{{ $t("Key668") }}（{{ list1.length }}）</span>
              <span @click="handleChangeTab('wordShow')"
                >{{ wordShow ? $t("Key531") : $t("Key530") }}
                <img v-if="wordShow" src="../../assets/down-black.png" alt="" />
                <img
                  v-else
                  class="rotate"
                  src="../../assets/up-black.png"
                  alt=""
                />
              </span>
            </div>
            <el-collapse-transition>
              <div class="liju" v-if="wordShow">
                <div v-for="(item, i) in list1" :key="i">
                  <div>{{ i + 1 }}.</div>
                  <div style="flex: 1">
                    <p v-html="item.res"></p>
                    <p class="p2">
                      {{ $t("Key666") }}：{{ item.source_courseware_name_path }}
                    </p>
                  </div>
                </div>
              </div>
            </el-collapse-transition>
          </div>
          <div v-if="list2 && list2.length > 0">
            <div class="topTitle">
              <!-- 本书例句 -->
              <span>{{ $t("Key669") }}（{{ list2.length }}）</span>
              <span @click="handleChangeTab('wordShow2')"
                >{{ wordShow2 ? $t("Key531") : $t("Key530") }}
                <img
                  v-if="wordShow2"
                  src="../../assets/down-black.png"
                  alt=""
                />
                <img
                  v-else
                  class="rotate"
                  src="../../assets/up-black.png"
                  alt=""
                />
              </span>
            </div>
            <el-collapse-transition>
              <div class="liju" v-if="wordShow2">
                <div v-for="(item, i) in list2" :key="i">
                  <div>{{ i + 1 }}.</div>
                  <div style="flex: 1">
                    <p v-html="item.res"></p>
                    <p class="p2">
                      {{ $t("Key666") }}：{{ item.source_courseware_name_path }}
                    </p>
                  </div>
                </div>
              </div>
            </el-collapse-transition>
          </div>
          <div v-if="list3 && list3.length > 0">
            <div class="topTitle">
              <!-- Key667 本套教材例句 -->
              <span>{{ $t("Key667") }}（{{ list3.length }}）</span>
              <span @click="handleChangeTab('wordShow3')"
                >{{ wordShow3 ? $t("Key531") : $t("Key530") }}
                <img
                  v-if="wordShow3"
                  src="../../assets/down-black.png"
                  alt=""
                />
                <img
                  v-else
                  class="rotate"
                  src="../../assets/up-black.png"
                  alt=""
                />
              </span>
            </div>
            <el-collapse-transition>
              <div class="liju" v-if="wordShow3">
                <div v-for="(item, i) in list3" :key="i">
                  <div>{{ list3.length + i + 1 }}.</div>
                  <div style="flex: 1">
                    <p v-html="item.res"></p>
                    <p class="p2">
                      {{ $t("Key666") }}：{{ item.source_courseware_name_path }}
                    </p>
                  </div>
                </div>
              </div>
            </el-collapse-transition>
          </div>
        </div>
      </div>
      <div class="bottom" v-if="dictDetail">
        <div class="from">
          <!-- Key670  来自网易有道-->
          {{ $t("Key670")
          }}<img
            @click="closeWordShow"
            src="../../assets/Cross-16-normal-Black.png"
            alt=""
            v-if="!dictDetail"
          />
        </div>
        <div class="wordDetail">
          <p class="word">
            {{ dictDetail["query"] }}
          </p>
          <div class="yinpin">
            <div class="yinpin-box">
              <!-- 英 -->
              <span>{{ $t("Key671") }}</span>
              <span v-if="dictDetail['uk-phonetic']">
                /{{ dictDetail["uk-phonetic"] }}/</span
              >
              <img
                @click="palyAudio('Y')"
                :src="playBtn == 'Y' ? voicePlaySrc : voicePauseSrc"
                alt=""
                v-if="
                  dictDetail &&
                  dictDetail['uk-sound'] &&
                  playWord == 'Y' &&
                  voiceSrc
                "
              />
              <img
                @click="palyAudio('Y')"
                :src="voicePauseSrc"
                alt=""
                v-else-if="dictDetail"
              />
              <audio id="Y" :src="dictDetail['uk-sound']"></audio>
            </div>
            <div>
              <!-- 美 -->
              <span>{{ $t("Key672") }}</span>
              <span v-if="dictDetail['us-phonetic']">
                /{{ dictDetail["us-phonetic"] }}/</span
              >
              <img
                @click="palyAudio('M')"
                :src="playBtn == 'M' ? voicePlaySrc : voicePauseSrc"
                alt=""
                v-if="
                  dictDetail &&
                  dictDetail['us-sound'] &&
                  playWord == 'M' &&
                  voiceSrc
                "
              />
              <img
                @click="palyAudio('M')"
                :src="voicePauseSrc"
                alt=""
                v-else-if="dictDetail && dictDetail['us-sound']"
              />
              <audio id="M" :src="dictDetail['us-sound']"></audio>
            </div>
          </div>
          <div class="jieshu" v-for="(fy, i) in dictDetail.part" :key="i">
            <i>
              {{ fy.part }}
            </i>
            <div>
              {{ fy.exp }}
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
//这里可以导入其它文件（比如：组件，工具js，第三方插件js，json文件，图片文件等等）
//例如：import 《组件名称》from ‘《组件路径》';
import { getBookWebContent, getLearnWebContent } from "@/api/ajax";
export default {
  //import引入的组件需要注入到对象中才能使用
  components: {},
  props: ["closeWord", "collId", "currentTreeID"],
  data() {
    //这里存放数据
    return {
      height: "",
      margintop: "",
      wordShow: true,
      wordShow2: false,
      wordShow3: false,
      list1: [],
      list2: [],
      list3: [],
      playWord: "",
      playBtn: "",
      voiceSrc: require("../../assets/play-red.png"),
      voicePauseSrc: require("../../assets/play-red.png"),
      voicePlaySrc: require("../../assets/icon-voice-play-red.png"),
      collFlag: false,
      loading: false,
      detail: null,
      dictDetail: null,
    };
  },
  // 计算属性 类似于data概念
  computed: {},
  // 监控data中数据变化
  watch: {},
  // 方法集合
  methods: {
    palyAudio(new_word) {
      let node = document.getElementById(new_word);
      this.playWord = new_word;
      if (node) {
        node.play();
        this.voiceSrc = this.voicePlaySrc;
        this.playBtn = new_word;
      }
      this.handleListenPlay();
    },
    handleListenPlay() {
      let _this = this;

      if (_this.playWord) {
        let node = document.getElementById(_this.playWord);
        node.addEventListener("play", function () {});
        node.addEventListener("pause", function () {
          _this.playBtn = "";
        });
        node.addEventListener("ended", function () {
          _this.playBtn = "";
        });
      }
    },
    // 关闭单词详情
    closeWordShow() {
      this.closeWord(false);
    },
    // 上一个单词详情
    lastDetail() {
      if (this.detailIndex == 0) {
        // this.$message.warning("当前已经是第一个");
        this.$message.warning(this.$t("Key665"));

        return;
      }
      this.changeDetailIndex("last");
    },
    // 下一个单词详情
    nextDetail() {
      if (this.detailIndex == this.curQue.option.length - 1) {
        // this.$message.warning("当前已经是最后一个了 ");
        this.$message.warning(this.$t("Key664"));

        return;
      }
      this.changeDetailIndex("next");
    },
    handleChangeTab(flag) {
      this[flag] = !this[flag];
    },
    viewIntp() {
      this.loading1 = true;
      this.loading2 = true;
      this.loading3 = true;
      let Mname =
        "book-courseware_manager-GetCoursewareWordExampleSentenceList";
      // 获取本课的 本教材的 本套的 的例句
      getBookWebContent(Mname, {
        courseware_id: this.currentTreeID, // 课件id
        word: this.detail.new_word.new_word, //生词
        search_scope: 0, //检索范围0 本课件  1本教材 2本套
        is_contain_word_variants: false,
      })
        .then((res) => {
          this.loading1 = false;
          this.list1 = this.handleExample(res.sentence_list);
          getBookWebContent(Mname, {
            courseware_id: this.currentTreeID, // 课件id
            word: this.detail.new_word.new_word, //生词
            search_scope: 1, //检索范围0 本课件  1本教材 2本套
            is_contain_word_variants: false,
          })
            .then((res) => {
              this.loading2 = false;
              this.list2 = this.handleExample(res.sentence_list);
              getBookWebContent(Mname, {
                courseware_id: this.currentTreeID, // 课件id
                word: this.detail.new_word.new_word, //生词
                search_scope: 2, //检索范围0 本课件  1本教材 2本套
                is_contain_word_variants: false,
              })
                .then((res) => {
                  this.loading3 = false;
                  this.list3 = this.handleExample(res.sentence_list);
                })
                .catch((err) => {
                  this.loading3 = false;
                });
            })
            .catch((err) => {
              this.loading2 = false;
            });
        })
        .catch((err) => {
          this.loading1 = false;
        });
    },
    // 处理例句高亮数据
    handleExample(list) {
      let _this = this;
      // let list1Ora = JSON.parse(JSON.stringify(_this.data.list1))
      list = list.map((item, index) => {
        let position_str = [];
        let sentence = JSON.parse(JSON.stringify(item.sentence));
        let res = "";
        for (let i = 0; i < item.position_list.length; i++) {
          let part1 = "";
          let part2 = "";
          let part3 = "";
          if (item.position_list.length > 1) {
            if (i == 0) {
              part1 = sentence.substring(0, item.position_list[i].begin);
              part2 = sentence.substring(
                item.position_list[i].begin,
                item.position_list[i].end
              );
              part3 = sentence.substring(
                item.position_list[i].end,
                item.position_list[i + 1].begin
              );
            } else if (i == item.position_list.length - 1) {
              part1 = "";
              part2 = sentence.substring(
                item.position_list[i].begin,
                item.position_list[i].end
              );
              part3 = sentence.substring(item.position_list[i].end);
            } else {
              part1 = "";
              part2 = sentence.substring(
                item.position_list[i].begin,
                item.position_list[i].end
              );
              part3 = sentence.substring(
                item.position_list[i].end,
                item.position_list[i + 1].begin
              );
            }
          } else {
            part1 = sentence.substring(0, item.position_list[i].begin);
            part2 = sentence.substring(
              item.position_list[i].begin,
              item.position_list[i].end
            );
            part3 = sentence.substring(item.position_list[i].end);
          }
          res +=
            part1 + '<span style="color:#DE4444;">' + part2 + "</span>" + part3;
        }
        item.res = res;
        return item;
      });
      return list;
    },
    getMyCollection() {
      this.loading = true;
      let Mname = "order-collection_manager-GetMyCollection";
      let data = {
        id: this.collId,
      };
      getLearnWebContent(Mname, data).then((res) => {
        this.loading = false;
        this.detail = res;
        if (res.new_word.definition_dictionary_json) {
          let dictDetail = JSON.parse(res.new_word.definition_dictionary_json);
          this.dictDetail = dictDetail.data;
          console.log(this.dictDetail);
        }
        this.viewIntp();
      });
    },
  },
  //生命周期 - 创建完成（可以访问当前this实例）
  created() {
    this.getMyCollection();
  },
  //生命周期 - 挂载完成（可以访问DOM元素）
  mounted() {
    let Fathernode = document.getElementsByClassName(
      "NNPE-Big-Book-preview"
    )[0];
    if (Fathernode) {
      //   this.height = Fathernode.clientHeight + "px";
      this.height = Fathernode.clientHeight + "px";
      // this.margintop = "-" + window.innerHeight / 2 + "px";
    }
  },
  //生命周期-创建之前
  beforeCreated() {},
  //生命周期-挂载之前
  beforeMount() {},
  //生命周期-更新之前
  beforUpdate() {},
  //生命周期-更新之后
  updated() {},
  //生命周期-销毁之前
  beforeDestory() {},
  //生命周期-销毁完成
  destoryed() {},
  //如果页面有keep-alive缓存功能，这个函数会触发
  activated() {},
};
</script>
<style lang="scss" scoped>
/* @import url(); 引入css类 */
.Module {
  .module-inner {
    // position: fixed;
    // top: 0%;
    // left: 50%;
    // margin-left: -394px;
    width: 788px;
    margin: 0 auto;
    > div {
      width: 788px;
      margin-left: 36px;
      background: #ffffff;
      box-shadow: 0px 4px 24px rgba(0, 0, 0, 0.25);
      border-radius: 8px;
      padding-top: 16px;
      .operation {
        height: 24px;
        div {
          float: right;
          margin-right: 16px;
          > :nth-child(1) {
            margin-right: 16px;
          }
          > :nth-child(2) {
            margin-right: 8px;
          }
          > :nth-child(3) {
            margin-right: 16px;
          }
          > :last-child {
            margin-right: 0;
          }
        }

        img {
          width: 16px;
          height: 16px;
          cursor: pointer;
        }
      }
    }
  }
  .top {
    margin-top: 33px;
    padding-bottom: 42px;
    .wordDetail {
      width: 538px;
      margin-left: 40px;
      padding-bottom: 23px;
      p {
        margin: 0;
      }
      .word {
        font-weight: bold;
        font-size: 24px;
        line-height: 28px;
        color: #7b61ff;
      }
      .yinpin {
        font-size: 16px;
        line-height: 150%;
        color: #000000;
        margin-top: 16px;
        display: flex;
        align-items: center;
        justify-content: flex-start;
        > div {
          height: 16px;
          display: flex;
          align-items: center;
        }
      }
      img {
        margin-left: 10px;
        width: 16px;
        height: 16px;
        cursor: pointer;
      }
      .jieshu {
        margin-top: 16px;
        font-size: 16px;
        line-height: 150%;
        color: #000000;
      }
    }
    .zhedie {
      width: 708px;
      margin: 0 auto;
      > div {
        margin-bottom: 16px;
      }
      .topTitle {
        width: 100%;
        display: flex;
        justify-content: space-between;
        padding: 0 12px;
        align-items: center;
        background: #fff !important;
        height: 40px;
        background: #fff !important;
        border: 1px solid rgba(0, 0, 0, 0.1);
        -webkit-box-sizing: border-box;
        box-sizing: border-box;
        border-radius: 8px 8px 0px 0px;
        > :nth-child(1) {
          font-weight: 500;
          font-size: 16px;
          line-height: 150%;
          color: rgba(0, 0, 0, 0.85);
        }
        > :nth-child(2) {
          display: flex;
          align-items: center;
          font-weight: normal;
          font-size: 14px;
          line-height: 22px;
          color: rgba(0, 0, 0, 0.85);
          cursor: pointer;
        }
        img {
          width: 16px;
          height: 16px;
          margin-left: 4px;
        }
        .rotate {
          animation-name: firstrotate;
          animation-direction: 2s;
          animation-fill-mode: both;
          animation-timing-function: linear;
        }
      }
      .liju {
        padding-bottom: 16px;
        padding-right: 24px;
        background: #f7f7f7;
        border: 1px solid rgba(0, 0, 0, 0.1);
        border-top: none;
        border-radius: 0 0 4px 4px;
        > div {
          padding-top: 16px;
          margin-left: 8px;
          display: flex;

          > :nth-child(1) {
            margin-right: 6px;
            line-height: 24px;
          }
          p {
            margin: 0;
            line-height: 24px;
            font-size: 16px;
            color: rgba(0, 0, 0, 0.85);
            word-break: break-word;
          }
          .p2 {
            font-size: 12px;
            line-height: 20px;
            color: rgba(0, 0, 0, 0.85);
            opacity: 0.3;
          }
        }
      }
    }
  }
  .bottom {
    margin-top: 16px;
    padding-bottom: 23px;
    .from {
      //   text-align: right;
      margin-right: 16px;
      font-size: 14px;
      line-height: 16px;
      color: #000000;
      opacity: 0.2;
      display: flex;
      justify-content: flex-end;
      align-items: center;
      img {
        width: 16px;
        margin-left: 16px;
        cursor: pointer;
      }
    }
    .wordDetail {
      width: 708px;
      margin-left: 40px;
      padding-bottom: 23px;
      border-bottom: 1px solid rgba(0, 0, 0, 0.1);
      p {
        margin: 0;
      }
      .word {
        font-weight: bold;
        font-size: 24px;
        line-height: 28px;
        color: #7b61ff;
      }
      .yinpin {
        font-size: 16px;
        line-height: 150%;
        color: #000000;
        margin-top: 16px;
        display: flex;
        justify-content: flex-start;
        align-items: center;
        > div {
          height: 24px;
          display: flex;
          align-items: center;
          > :nth-child(1) {
            margin-right: 5px;
          }
        }
        > :nth-child(2) {
          margin-left: 27px;
        }
        img {
          margin-left: 10px;
          width: 16px;
          height: 16px;
          cursor: pointer;
        }
      }
      .jieshu {
        margin-top: 16px;
        font-size: 16px;
        line-height: 150%;
        color: #000000;
        display: flex;
        > :nth-child(1) {
          //   width: 30px;
          //   text-align: right;
          margin-right: 5px;
        }
        :nth-child(2) {
          max-width: 524px;
        }
      }
    }
  }
}
</style>