GCLS_Page_Personal/src/components/common/WordPhraseDetail.vue

<template>
  <div class="wordDetailModule wordDetailChs" v-if="detail" v-loading="loading">
    <div class="module-inner">
      <div class="top">
        <div class="operation">
          <div>
            <!-- <template v-if="optionRes && optionRes.length > 0">
              <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"
              />
            </template> -->
            <img
              style="margin-right: 0px"
              @click="closeWordShow"
              src="../../assets/Cross-16-normal-Black.png"
              alt=""
            />
          </div>
        </div>
        <div class="wordDetail">
          <div
            :class="[
              'bwc-Strockplay',
              themeColor == 'green'
                ? 'green-border'
                : themeColor == 'red'
                ? 'red-border'
                : 'brown-border',
            ]"
          >
            <div
              class="strockplay"
              v-for="(conItem, conindex) in detail.new_word.new_word"
              :key="'new_word_' + conindex"
            >
              <Strockplayredline
                :key="conItem + detailIndex + conindex"
                :Book_text="conItem"
                :playStorkes="true"
                :targetDiv="'wordDetail' + conItem + detailIndex + conindex"
                :wordNum="detail.new_word.new_word.length"
                :themeColor="themeColor"
              />
              <div
                :class="[
                  'bwc-line',
                  themeColor == 'green'
                    ? 'green-bg'
                    : themeColor == 'red'
                    ? 'red-bg'
                    : 'brown-bg',
                ]"
                v-if="conindex < detail.new_word.new_word.length - 1"
              ></div>
            </div>
          </div>
          <div class="wordInfor">
            <div class="yinpin">
              <span class="pinyintext">
                {{ detail.new_word.pinyin.toLowerCase() }}</span
              >
              <template
                v-if="
                  detail.new_word.mp3_list &&
                  detail.new_word.mp3_list[0] &&
                  detail.new_word.mp3_list[0].id
                "
              >
                <Audio
                  :mp3="detail.new_word.mp3_list[0].id"
                  :themeColor="themeColor"
                />
              </template>
              <template v-else-if="detail.new_word.mp3Url">
                <Audio :mp3="detail.new_word.mp3Url" :themeColor="themeColor" />
              </template>
            </div>
            <p
              class="jieshu"
              v-for="(fy, i) in detail.new_word.definition_list"
              :key="i"
              v-html="fy"
            ></p>
          </div>
        </div>
        <div class="zhedie-white">
          <div v-if="list1 && list1.length > 0" v-loading="loading1">
            <div class="topTitle">
              <span>本课例句（{{ list1.length }}）</span>
              <span @click="handleChangeTab('wordShow')"
                >{{ wordShow ? "收起" : "展开" }}
                <img v-if="wordShow" src="../../assets/down-black.png" alt="" />
                <img v-else src="../../assets/up-black.png" alt="" />
              </span>
            </div>
            <el-collapse-transition>
              <div class="liju" v-show="wordShow">
                <div v-for="(item, i) in list1" :key="i">
                  <div>{{ i + 1 }}.</div>
                  <div>
                    <p v-html="item.res"></p>
                    <p class="p2">
                      来源：{{ item.source_courseware_name_path }}
                    </p>
                  </div>
                </div>
              </div>
            </el-collapse-transition>
          </div>
          <div v-if="list2 && list2.length > 0" v-loading="loading2">
            <div class="topTitle">
              <span>本书例句（{{ list2.length }}）</span>
              <span @click="handleChangeTab('wordShow2')"
                >{{ wordShow2 ? "收起" : "展开" }}
                <img
                  v-if="wordShow2"
                  src="../../assets/down-black.png"
                  alt=""
                />
                <img v-else src="../../assets/up-black.png" alt="" />
              </span>
            </div>
            <el-collapse-transition>
              <div class="liju" v-show="wordShow2">
                <div v-for="(item, i) in list2" :key="i">
                  <div>{{ list1.length + i + 1 }}.</div>
                  <div>
                    <p v-html="item.res"></p>
                    <p class="p2">
                      来源：{{ item.source_courseware_name_path }}
                    </p>
                  </div>
                </div>
              </div>
            </el-collapse-transition>
          </div>
          <div v-if="list3 && list3.length > 0" v-loading="loading3">
            <div class="topTitle">
              <span>本套教材例句（{{ list3.length }}）</span>
              <span @click="handleChangeTab('wordShow3')"
                >{{ wordShow3 ? "收起" : "展开" }}
                <img v-if="wordShow3" src="../../assets/down-black.png" />
                <img v-else 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>{{ list1.length + list2.length + i + 1 }}.</div>
                  <div>
                    <p>{{ item.sentence }}</p>
                    <p class="p2">
                      来源：{{ item.source_courseware_name_path }}
                    </p>
                  </div>
                </div>
              </div>
            </el-collapse-transition>
          </div>
        </div>
      </div>
      <Intp
        :dict="detail.new_word.definition_dictionary_json"
        :pinyin="detail.new_word.pinyin"
        :themeColor="themeColor"
      />
    </div>
  </div>
</template>

<script>
import Strockplayredline from "./Strockplayredline.vue";
import Audio from "./AudioRed.vue";
import Intp from "./Intp.vue";
import { getBookWebContent, getLearnWebContent } from "@/api/ajax";

export default {
  //import引入的组件需要注入到对象中才能使用
  components: {
    Strockplayredline,
    Audio,
    Intp,
  },
  props: [
    "closeWord",
    "collId",
    "themeColor",
    "currentTreeID",
    "word",
    "detailIndex",
  ],
  data() {
    //这里存放数据
    return {
      height: "",
      margintop: "",
      wordShow: true,
      wordShow2: true,
      wordShow3: true,
      list1: [],
      list2: [],
      list3: [],
      isShow: false,
      old_word: "",
      loading: false,
      loading1: false,
      loading2: false,
      loading3: false,
      detail: null,
    };
  },
  //计算属性 类似于data概念
  computed: {},
  //监控data中数据变化
  watch: {
    collId: {
      handler: function (val, oldVal) {
        const _this = this;
        if (val) {
          _this.initData();
        }
      },
      // 深度观察监听
      deep: true,
    },
  },
  //方法集合
  methods: {
    playAudio() {},
    // 关闭单词详情
    closeWordShow() {
      this.closeWord(false);
    },
    // 上一个单词详情
    lastDetail() {
      if (this.detailIndex == 0) {
        this.$message.warning("当前已经是第一个");
        return;
      }
      this.changeDetailIndex("last");
    },
    // 下一个单词详情
    nextDetail() {
      let _this = this;
      if (_this.detailIndex == _this.optionRes.length - 1) {
        this.$message.warning("当前已经是最后一个了 ");
        return;
      }
      _this.changeDetailIndex("next");
    },
    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.word, //生词
        search_scope: 0, //检索范围0 本课件  1本教材 2本套
        is_contain_word_variants: false,
      })
        .then((res) => {
          this.loading1 = false;
          this.list1 = this.handleExample(res.sentence_list);
          console.log(this.list1);
          getBookWebContent(Mname, {
            courseware_id: this.currentTreeID, // 课件id
            word: this.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.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) {
      list = list.map((item, index) => {
        let wordIndex = null;
        for (let i = 0; i < item.sentence.length; i++) {
          if (item.sentence[i] == item.word) {
            wordIndex = i;
          }
        }
        // let b = item.begin_position;
        // let e = item.end_position;
        // let sent = item.sentence;
        // let part1 = sent.substring(0, b);
        // let part2 = sent.substring(b, e);
        // let part3 = sent.substring(e);
        let sent = item.sentence;
        let part1 = "";
        let part2 = "";
        let part3 = "";
        if (wordIndex === 0) {
          part1 = "";
          part2 = sent.substring(0, 1);
          part3 = sent.substring(1);
        } else if (wordIndex === item.sentence.length - 1) {
          part1 = sent.substring(0, wordIndex);
          part2 = sent.substring(wordIndex);
          part3 = "";
        } else {
          part1 = sent.substring(0, wordIndex);
          part2 = sent.substring(wordIndex, wordIndex + 1);
          part3 = sent.substring(wordIndex + 1);
        }
        // let reg = new RegExp(`${item.word}`, "g");
        // let result = sent.replace(
        //   reg,
        //   `<span style="color:#DE4444;">${item.word}</span>`
        // );
        let 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;
        this.viewIntp();
      });
    },
    initData() {
      this.getMyCollection();
    },
    handleChangeTab(flag) {
      this[flag] = !this[flag];
    },
  },
  //生命周期 - 创建完成（可以访问当前this实例）
  created() {},
  //生命周期 - 挂载完成（可以访问DOM元素）
  mounted() {
    this.initData();
  },
  //生命周期-创建之前
  beforeCreated() {},
  //生命周期-挂载之前
  beforeMount() {},
  //生命周期-更新之前
  beforUpdate() {},
  //生命周期-更新之后
  updated() {},
  //生命周期-销毁之前
  beforeDestory() {},
  //生命周期-销毁完成
  destoryed() {},
  //如果页面有keep-alive缓存功能，这个函数会触发
  activated() {},
};
</script>
<style lang="scss" scoped>
/* @import url(); 引入css类 */
.wordDetailModule {
  width: 100%;
  z-index: 999;
  overflow-y: scroll;

  .module-inner {
    padding: 30px 0;
    > div {
      width: 788px;
      margin: 0 auto;
      background: #ffffff;
      box-shadow: 0px 2px 8px rgba(0, 0, 0, 0.15);
      border-radius: 8px;
      padding: 16px 32px 40px 32px;
      .operation {
        height: 16px;
        margin-bottom: 8px;
        div {
          display: flex;
          justify-content: flex-end;
          align-items: center;
          > :nth-child(1) {
            margin-right: 24px;
          }
          > :nth-child(2) {
            margin-right: 8px;
          }
          > :nth-child(3) {
            margin-right: 24px;
          }
        }

        img {
          width: 16px;
          height: 16px;
          cursor: pointer;
        }
      }
    }
  }
  .module-bottom {
    width: 788px;
    margin-top: 16px;
  }
  .top {
    padding-top: 16px;
    .wordDetail {
      width: 100%;
      margin-bottom: 16px;
      display: flex;
      justify-content: flex-start;
      align-items: flex-start;
      .bwc-Strockplay {
        display: flex;
        justify-content: center;
        align-items: center;
        min-width: 130px;
        height: 130px;
        margin-bottom: 16px;
        border-radius: 8px;
        box-sizing: border-box;
        overflow: hidden;
        margin-right: 37px;
        .strockplay {
          display: flex;
          justify-content: center;
          align-items: center;
          position: relative;
          width: 130px;
          height: 130px;
          box-sizing: border-box;
          .collect-icon {
            width: 16px;
            position: absolute;
            right: 4px;
            bottom: 4px;
            cursor: pointer;
          }
        }
        .bwc-line {
          width: 2px;
          height: 128px;
        }
        .red-bg {
          background: #ff5757;
        }
        .green-bg {
          background: #24b99e;
        }
        .brown-bg {
          background: #bd8865;
        }
      }
      .red-border {
        border: 2px solid #ff5757;
      }
      .green-border {
        border: 2px solid #24b99e;
      }
      .brown-border {
        border: 2px solid #bd8865;
      }
      .wordInfor {
        .yinpin {
          display: flex;
          justify-content: flex-start;
          align-items: center;
          margin-bottom: 16px;
          .pinyintext {
            font-size: 20px;
            line-height: 30px;
            color: #2c2c2c;
            display: flex;
            align-items: center;
            margin-right: 8px;
            word-break: normal;
            font-family: "GB-PINYINOK-B";
          }
          .content-voices {
            width: 16px;
          }
        }
      }

      p {
        margin: 0;
      }
      .word {
        font-weight: bold;
        font-size: 24px;
        line-height: 28px;
        color: #000000;
      }

      .jieshu {
        margin-top: 16px;
        font-size: 16px;
        line-height: 19px;
        color: #000000;
      }
    }
    .zhedie-white {
      width: 100%;
      margin: 0 auto;
      > div {
        margin-bottom: 24px;
      }
      .topTitle {
        width: 100%;
        display: flex;
        justify-content: space-between;
        padding: 0 12px;
        align-items: center;
        background: #fff !important;
        > :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) {
            text-align: right;
            margin-right: 6px;
            line-height: 24px;
            font-family: "FZJCGFKTK";
          }
          p {
            margin: 0;
            line-height: 24px;
            font-size: 16px;
            color: rgba(0, 0, 0, 0.85);
            font-family: "FZJCGFKTK";
          }
          .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: 24px;
        margin-left: 24px;
      }
    }
    .wordDetail {
      width: 538px;
      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: #000000;
      }
      .yinpin {
        font-size: 16px;
        line-height: 150%;
        color: #000000;
        margin-top: 16px;
        display: flex;
        > 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: 24px;
          height: 24px;
          cursor: pointer;
        }
      }
      .jieshu {
        margin-top: 16px;
        font-size: 16px;
        line-height: 150%;
        color: #000000;
        display: flex;
        > :nth-child(1) {
          width: 30px;
        }
        :nth-child(2) {
          width: 524px;
        }
      }
    }
  }
  .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;
  }
}
</style>
<style lang="scss">
.NPC-Big-Book-preview-red {
  .wordDetailChs {
    .zhedie-white {
      .topTitle {
        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;
      }
    }
  }
}
.NPC-Big-Book-preview-green {
  .wordDetailChs {
    .zhedie-white {
      .topTitle {
        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;
      }
    }
  }
}
.NPC-Big-Book-preview-brown {
  .wordDetailChs {
    .zhedie-white {
      .topTitle {
        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;
      }
    }
  }
}
</style>