GCLS_Page_Personal/src/components/common/Intp.vue

<!--  -->
<template>
  <div class="wordIntp" v-if="flag">
    <!-- Key678  数据来自百度汉语-->
    <p class="from">{{ $t("Key678") }}</p>
    <el-menu
      :default-active="activeIndex"
      class="el-menu-demo"
      mode="horizontal"
      @select="handleSelect"
    >
      <!--词典释义   近/反义词 组词 -->
      <el-menu-item index="1">{{ $t("Key679") }}</el-menu-item>
      <el-menu-item index="2">{{ $t("Key680") }}</el-menu-item>
      <el-menu-item index="3">{{ $t("Key681") }}</el-menu-item>
    </el-menu>
    <template v-if="activeIndex == '1'">
      <div class="bwc-intp">
        <!-- 基本释义 -->
        <h1>{{ $t("Key681") }}</h1>
        <span v-if="pinyin" class="pinyin">{{ pinyin }}</span>
        <template v-if="isHasValue2 == 'definitionWithSpell'">
          <div
            v-for="(itemss, indexss) in paraphrase"
            :key="indexss"
            class="paraphrase"
          >
            <div
              v-for="(vItems, key, vIndexs) in itemss['@definitionWithSpell']"
              :key="vIndexs"
              class="para"
            >
              <span class="para-key">{{
                key.replace("[", "").replace("]", "")
              }}</span>
              <ul
                v-for="(pItems, pIndexs) in vItems"
                :key="pIndexs"
                class="para-value"
              >
                <li>{{ pItems }}</li>
              </ul>
            </div>
          </div>
        </template>
        <template v-else-if="isHasValue2 == 'definitions'">
          <div
            v-for="(itemss, indexss) in paraphrase"
            :key="indexss"
            class="paraphrase"
          >
            <ul
              v-for="(vItems, key, vIndexs) in itemss['@definitions']"
              :key="vIndexs"
              class="para"
            >
              <li>{{ vItems }}</li>
            </ul>
          </div>
        </template>
        <template v-else>
          <ul
            v-for="(itemss, indexss) in paraphrase"
            :key="indexss"
            class="paraphrase"
          >
            <li>{{ itemss["@value"] }}</li>
          </ul>
        </template>
        <hr />
      </div>
    </template>
    <template v-if="activeIndex == '2'">
      <div class="bwc-intp">
        <!-- 近义词 -->
        <h1 v-if="synonymList.length > 0">{{$t("Key683")}}</h1>
        <ul class="synonym">
          <li
            v-for="(itemss, indexss) in synonymList"
            :key="indexss"
            class="paraphrase"
          >
            {{ itemss["@value"] }}
          </li>
        </ul>
        <!-- 反义词 -->
        <h1 v-if="antonymList.length > 0">{{$t("Key684")}}</h1>
        <ul class="synonym">
          <li
            v-for="(itemss, indexss) in antonymList"
            :key="indexss"
            class="paraphrase"
          >
            {{ itemss["@value"] }}
          </li>
        </ul>
      </div>
    </template>
    <template v-if="activeIndex == '3'">
      <div class="bwc-intp">
        <ul class="synonym">
          <li
            v-for="(itemss, indexss) in termsList"
            :key="indexss"
            class="paraphrase"
          >
            {{ itemss["@value"] }}
          </li>
        </ul>
      </div>
    </template>
  </div>
</template>

<script>
import Audio from "./AudioRed.vue";
import Strockplayredline from "./Strockplayredline.vue";

export default {
  name: "WordIntp",
  components: {
    Strockplayredline,
    Audio,
  },
  props: ["dict", "themeColor", "show", "pinyin"],
  data() {
    return {
      isPraShow: false,
      curData: null,
      activeIndex: "1",
      mp3Url: "", // 音频
      paraphrase: [], // 释义
      synonymList: [], // 近义词
      antonymList: [], // 反义词
      termsList: [], // 组词
      dataDetail: [],
      isHasValue2: "", // 释义里是否含有value2
    };
  },
  computed: {
    flag() {
      let _this = this;
      let flag = false;

      if (_this.paraphrase && _this.paraphrase.length > 0) {
        flag = true;
      } else if (_this.synonymList && _this.synonymList.length > 0) {
        flag = true;
      } else if (_this.antonymList && _this.antonymList.length > 0) {
        flag = true;
      } else if (_this.termsList && _this.termsList.length > 0) {
        flag = true;
      }

      return flag;
    },
  },
  watch: {},
  //方法集合
  methods: {
    writeWord() {
      this.isPraShow = true;
    },
    changePraShow() {
      this.isPraShow = false;
    },
    handleSelect(val) {
      this.activeIndex = val;
    },
    // 处理数据
    handleChineseDetail() {
      let _this = this;
      _this.paraphrase = [];
      _this.synonymList = [];
      _this.antonymList = [];
      _this.termsList = [];
      _this.isHasValue2 = "";
      _this.dataDetail.forEach((item) => {
        if (item.request.queryType == "entity") {
          // 读音
          item.response.entity.forEach((items) => {
            items.attrs.forEach((itemss) => {
              if (itemss.key == "pronunciation") {
                // 音频

                _this.mp3Url = itemss.objects[0]["@value"]
                  ? itemss.objects[0]["@value"]
                  : "";
              } else if (itemss.key == "definition") {
                // 释义
                _this.paraphrase = itemss.objects;
                for (let i = 0; i < _this.paraphrase.length; i++) {
                  if (_this.paraphrase[i]["@definitionWithSpell"]) {
                    _this.isHasValue2 = "definitionWithSpell";
                    return false;
                  } else if (_this.paraphrase[i]["@definitions"]) {
                    _this.isHasValue2 = "definitions";
                  }
                }
              } else if (itemss.key == "synonym") {
                // 近义词
                _this.synonymList = itemss.objects;
              } else if (itemss.key == "antonym") {
                // 反义词
                _this.antonymList = itemss.objects;
              } else if (itemss.key == "terms") {
                // 组词
                _this.termsList = itemss.objects;
              }
            });
          });
        }
      });
    },
  },
  //生命周期 - 创建完成（可以访问当前this实例）
  created() {},
  //生命周期 - 挂载完成（可以访问DOM元素）
  mounted() {
    let _this = this;
    if (_this.dict) {
      let dict = JSON.parse(_this.dict);
      _this.dataDetail = dict.data.result;
      _this.handleChineseDetail();
    }
  },
  beforeCreate() {}, //生命周期 - 创建之前
  beforeMount() {}, //生命周期 - 挂载之前
  beforeUpdate() {}, //生命周期 - 更新之前
  updated() {}, //生命周期 - 更新之后
  beforeDestroy() {}, //生命周期 - 销毁之前
  destroyed() {}, //生命周期 - 销毁完成
  activated() {}, //如果页面有keep-alive缓存功能，这个函数会触发
};
</script>
<style lang='scss' scoped>
//@import url(); 引入公共css类
.wordIntp {
  width: 100%;
  height: 600px;
  overflow: hidden;
  overflow-y: auto;
  margin: 0 auto;
  position: relative;
  margin-top: 12px !important;
  .from {
    color: rgba(0, 0, 0, 0.85);
    opacity: 0.2;
    margin: 0;
    font-size: 12px;
    line-height: 20px;
  }
  .bwc-intp {
    padding: 16px 0;
    h1 {
      color: #000000;
      font-size: 20px;
      line-height: 150%;
      font-weight: normal;
      margin: 8px 0 8px 0;
    }
    .pinyin {
      color: #de4444;
      font-size: 24px;
      line-height: 36px;
      margin-bottom: 8px;
      font-family: "GB-PINYINOK-B";
      display: block;
    }
    .paraphrase {
      margin-bottom: 8px;
      margin-top: 0;
      > .para {
        font-weight: normal;
        font-size: 14px;
        line-height: 22px;
        color: #000000;
        margin-bottom: 8px;
        .para-key {
          font-family: "GB-PINYINOK-B";
        }
      }
    }
    hr {
      margin: 16px 0 0 0;
      background: rgba($color: #000000, $alpha: 0.15);
      height: 1px;
      border: none;
    }
    ul.synonym {
      display: flex;
      flex-flow: wrap;
      margin-left: -4px;
      padding: 4px 0;
      li {
        padding: 4px 8px;
        background: #ffffff;
        border: 1px solid rgba(0, 0, 0, 0.15);
        border-radius: 4px;
        margin: 4px;
        font-size: 16px;
        line-height: 150%;
        color: #000000;
        text-align: center;
        min-width: 127px;
      }
    }
  }
  .closeBox {
    width: 100%;
    display: flex;
    justify-content: space-between;
    position: absolute;
    left: 0;
    top: 0;
    padding: 12px;
    > i {
      font-size: 16px;
      color: #000000;
      cursor: pointer;
    }
    span {
      color: #000000;
      opacity: 0.2;
      font-size: 14px;
      line-height: 130%;
    }
  }
  min-width: 312px;
  min-height: 360px;
  // background: #ffffff;
  // box-shadow: 0px 2px 8px rgba(0, 0, 0, 0.15);
  border-radius: 8px;
  // padding: 52px 32px 32px;
  box-sizing: border-box;
  .bwc-top {
    margin-bottom: 16px;
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    .content-voices {
      width: 24px;
    }
    > span {
      font-family: "GB-PINYINOK-B";
      color: #2c2c2c;
      font-size: 20px;
      line-height: 24px;
      margin-right: 4px;
    }
  }
  .bwc-Strockplay {
    display: flex;
    justify-content: center;
    align-items: center;
    min-width: 130px;
    height: 130px;
    margin: 0 auto;
    margin-bottom: 6px;
    border: 2px solid #de4444;
    border-radius: 8px;
    box-sizing: border-box;
    overflow: hidden;
    .strockplay {
      display: flex;
      justify-content: center;
      align-items: center;
      position: relative;
      .collect-icon {
        width: 16px;
        position: absolute;
        right: 4px;
        bottom: 4px;
        cursor: pointer;
      }
    }
    .bwc-line {
      width: 2px;
      height: 126px;
      background: #de4444;
    }
  }
  .bwc-tolength {
    color: #404040;
    font-size: 30px;
    line-height: 1.5;
    font-family: FZJCGFKTK;
    text-align: center;
    border: 2px solid #de4444;
    border-radius: 8px;
    padding: 40px 0;
    margin: 0 0 16px 0;
  }
  .bwc-word-en {
    font-style: normal;
    font-weight: 600;
    font-size: 20px;
    line-height: 150%;
    text-align: center;
    color: #2c2c2c;
    margin-bottom: 8px;
  }
  .bwc-more-intp {
    font-weight: normal;
    font-size: 14px;
    line-height: 20px;
    color: #2c2c2c;
    opacity: 0.5;
    text-align: center;
    margin-bottom: 24px;
    cursor: pointer;
  }
  .bwc-footer {
    width: 100%;
    display: flex;
    justify-content: space-between;
    align-items: center;
    > button {
      width: 128px;
      height: 40px;
      display: flex;
      justify-content: center;
      align-items: center;
      color: #ff5757;
      background: rgba(255, 87, 87, 0.1);
      border-radius: 4px;
      outline: 0;
      border: 0;
      cursor: pointer;
      > img {
        width: 24px;
        height: 24px;
        margin-right: 8px;
      }
    }
  }
}
.NPC-Big-Book-preview-green {
  .wordIntp {
    .bwc-intp {
      .pinyin {
        color: #24b99e;
      }
    }
    .bwc-Strockplay {
      border: 2px solid #24b99e;
      .bwc-line {
        background: #24b99e;
      }
    }
    .bwc-tolength {
      border: 2px solid #24b99e;
    }
    .bwc-footer {
      > button {
        color: #24b99e;
      }
    }
  }
}
.NPC-Big-Book-preview-brown {
  .wordIntp {
    .bwc-intp {
      .pinyin {
        color: #bd8865;
      }
    }
    .bwc-Strockplay {
      border: 2px solid #bd8865;
      .bwc-line {
        background: #bd8865;
      }
    }
    .bwc-tolength {
      border: 2px solid #bd8865;
    }
    .bwc-footer {
      > button {
        color: #bd8865;
      }
    }
  }
}
</style>
<style lang="scss">
.OrderManage {
  .wordIntp {
    .el-menu--horizontal > .el-menu-item {
      width: 33.33%;
      text-align: center;
      color: #000000;
      font-size: 18px;
      margin: 0;
    }
    .el-menu.el-menu--horizontal {
      border-bottom: 1px solid rgba(0, 0, 0, 0.1);
    }
    .el-menu--horizontal > .el-menu-item.is-active {
      color: #de4444;
      font-weight: bold;
      border-bottom: 2px solid #de4444;
    }
  }
  .NPC-Big-Book-preview-green {
    .wordIntp {
      .el-menu--horizontal > .el-menu-item.is-active {
        color: #24b99e;
        border-bottom: 2px solid #24b99e;
      }
    }
  }
  .NPC-Big-Book-preview-brown {
    .wordIntp {
      .el-menu--horizontal > .el-menu-item.is-active {
        color: #bd8865;
        border-bottom: 2px solid #bd8865;
      }
    }
  }
}
</style>