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

<!--  -->
<template>
  <div class="wordIntp" v-if="word">
    <el-menu
      :default-active="activeIndex"
      class="el-menu-demo"
      mode="horizontal"
      @select="handleSelect"
    >
      <el-menu-item index="1">释义</el-menu-item>
      <el-menu-item index="2">近/反义词</el-menu-item>
      <el-menu-item index="3">组词</el-menu-item>
    </el-menu>
    <template v-if="activeIndex == '1'">
      <div class="bwc-intp">
        <!-- 基本释义 -->
        <h1>基本释义</h1>
        <span v-if="word.pinyin" class="pinyin">{{ word.pinyin }}</span>
        <p
          v-for="(itemss, indexss) in paraphrase"
          :key="indexss"
          class="paraphrase"
        >
          {{ itemss["@value"] }}
        </p>
        <hr />
      </div>
    </template>
    <template v-if="activeIndex == '2'">
      <div class="bwc-intp">
        <h1 v-if="synonymList.length > 0">近义词</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">反义词</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";
import { getHZChineseInfo } from "@/api/ajax";

export default {
  name: "WordIntp",
  components: {
    Strockplayredline,
    Audio,
  },
  props: ["word", "changeIntpShow", "themeColor", "show"],
  data() {
    return {
      isPraShow: false,
      curData: null,
      activeIndex: "1",
      mp3Url: "", // 音频
      paraphrase: [], // 释义
      synonymList: [], // 近义词
      antonymList: [], // 反义词
      termsList: [], // 组词
      dataDetail: [
        {
          request: {
            query: "生",
            queryType: "entity",
          },
          response: {
            voice:
              "这个字读: shēng，一(yi1)声，诗(shi1)鞥(eng1)，生(sheng1)，意思是：1、生育；出生。 2、生长。 ",
            sourceUrl:
              "https://hanyu.baidu.com/zici/s?wd=%E7%94%9F&query=%E7%94%9F&srcid=28532&from=kg2",
            answer: ["生"],
            sourceName: "百度汉语",
            title: "生",
            entity: [
              {
                "@type": ["word"],
                name: "生",
                attrs: [
                  {
                    objects: [
                      {
                        "@value":
                          "http://t10.baidu.com/it/u=1615089267,1656681114&fm=58&s=6BAC3062C6E167A91D9015D70300A0A0",
                      },
                    ],
                    label: "图片",
                    type: "simple",
                    key: "image",
                  },
                  {
                    objects: [
                      {
                        "@value":
                          "https://hanyu.baidu.com/zici/s?wd=%E7%94%9F&query=%E7%94%9F&srcid=28532&from=kg2",
                      },
                    ],
                    label: "详情页",
                    type: "simple",
                    key: "url",
                  },
                  {
                    objects: [
                      {
                        "@value": "熟",
                      },
                      {
                        "@value": "死",
                      },
                      {
                        "@value": "师",
                      },
                      {
                        "@value": "卒",
                      },
                    ],
                    label: "反义词",
                    type: "simple",
                    key: "antonym",
                  },
                  {
                    objects: [
                      {
                        "@value":
                          "1.生育；出生。 2.生长。 3.生存；活（跟“死”相对）。 4.生计。 5.生命。 6.生平。 7.具有生命力的；活的。 8.产生；发生。 9.使柴、煤等燃烧。 10.姓。11.果实没有成熟（跟“熟”相对，下12.—13.同）。 14.（食物）没有煮过或煮得不够的。 15.没有进一步加工或炼过的。 16.生疏。 17.生硬；勉强。 18.很（用在少数表示感情、感觉的词的前面）。 19.某些指人的名词后缀。 20.某些副词的后缀，如“好生、怎生”等。",
                      },
                    ],
                    label: "释义",
                    type: "simple",
                    key: "definition",
                  },
                  {
                    objects: [
                      {
                        "@value":
                          "https://hanyu-word-pinyin-short.cdn.bcebos.com/sheng1.mp3",
                      },
                    ],
                    label: "读音",
                    type: "simple",
                    key: "pronunciation",
                  },
                  {
                    objects: [
                      {
                        "@value": "生",
                      },
                    ],
                    label: "部首",
                    type: "simple",
                    key: "radicals",
                  },
                  {
                    objects: [
                      {
                        "@value": "[shēng]",
                      },
                    ],
                    label: "拼音",
                    type: "simple",
                    key: "spell",
                  },
                  {
                    objects: [
                      {
                        "@value": "5",
                      },
                    ],
                    label: "笔画",
                    type: "simple",
                    key: "stroke_count",
                  },
                  {
                    objects: [
                      {
                        "@value": "撇、横、横、竖、横",
                      },
                    ],
                    label: "笔顺",
                    type: "simple",
                    key: "stroke_order",
                  },
                  {
                    objects: [
                      {
                        "@value":
                          "http://appcdn.fanyi.baidu.com/zhdict/gif/b78128322d51c43cbaf2701d467822446.gif",
                      },
                    ],
                    label: "笔顺动画",
                    type: "simple",
                    key: "stroke_order_gif",
                  },
                  {
                    objects: [
                      {
                        "@value": "单一结构",
                      },
                    ],
                    label: "字形结构",
                    type: "simple",
                    key: "struct_type",
                  },
                  {
                    objects: [
                      {
                        "@value": "生命",
                      },
                      {
                        "@value": "五行相生",
                      },
                      {
                        "@value": "生活",
                      },
                      {
                        "@value": "大学生",
                      },
                      {
                        "@value": "诞生",
                      },
                      {
                        "@value": "生肖",
                      },
                      {
                        "@value": "油然而生",
                      },
                      {
                        "@value": "舍生取义",
                      },
                      {
                        "@value": "栩栩如生",
                      },
                      {
                        "@value": "芸芸众生",
                      },
                      {
                        "@value": "生意",
                      },
                      {
                        "@value": "生机盎然",
                      },
                      {
                        "@value": "生气",
                      },
                      {
                        "@value": "妙笔生花",
                      },
                      {
                        "@value": "浮生",
                      },
                      {
                        "@value": "陌生",
                      },
                      {
                        "@value": "衍生",
                      },
                      {
                        "@value": "生机勃勃",
                      },
                      {
                        "@value": "生意盎然",
                      },
                      {
                        "@value": "终生",
                      },
                    ],
                    label: "组词",
                    type: "simple",
                    key: "terms",
                  },
                  {
                    objects: [
                      {
                        "@value": "TGD",
                      },
                    ],
                    label: "五笔",
                    type: "simple",
                    key: "wubi",
                  },
                ],
              },
            ],
          },
        },
      ],
    };
  },
  computed: {},
  watch: {
    word: {
      handler: function (val, oldVal) {
        let _this = this;
      },
      // 深度观察监听
      deep: true,
    },
  },
  //方法集合
  methods: {
    writeWord() {
      this.isPraShow = true;
    },
    changePraShow() {
      this.isPraShow = false;
    },
    handleSelect(val) {
      this.activeIndex = val;
    },
    getChineseInfo() {
      let _this = this;
      let data = {
        query: this.word.new_word,
        //  query: "开心",
      };
      getHZChineseInfo(data).then((res) => {
        _this.dataDetail = res.data.result;
        _this.handleChineseDetail();
      });
    },
    // 处理数据
    handleChineseDetail() {
      let _this = this;
      _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;
              } 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;
    // this.getChineseInfo();
    _this.handleChineseDetail();
  },
  beforeCreate() {}, //生命周期 - 创建之前
  beforeMount() {}, //生命周期 - 挂载之前
  beforeUpdate() {}, //生命周期 - 更新之前
  updated() {}, //生命周期 - 更新之后
  beforeDestroy() {}, //生命周期 - 销毁之前
  destroyed() {}, //生命周期 - 销毁完成
  activated() {}, //如果页面有keep-alive缓存功能，这个函数会触发
};
</script>
<style lang='scss' scoped>
//@import url(); 引入公共css类
.wordIntp {
  width: 100%;
  //   height: 100vh;
  overflow: hidden;
  overflow-y: auto;
  margin: 0 auto;
  position: relative;
  .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;
      color: #000000;
      font-size: 16px;
      line-height: 150%;
    }
    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;
      }
    }
  }
  .practiceBox {
    position: fixed;
    left: 0;
    top: 0;
    z-index: 999;
    width: 100%;
    height: 100vh;
    background: rgba(0, 0, 0, 0.19);
    padding-top: 32px;
    box-sizing: border-box;
    overflow: hidden;
    overflow-y: auto;
  }
  .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;
      }
    }
  }
}
.NNPE-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;
      }
    }
  }
}
.NNPE-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">
.wordIntp {
  .el-menu--horizontal > .el-menu-item {
    width: 33.33%;
    text-align: center;
    color: #000000;
    font-size: 18px;
  }
  .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;
  }
}
.NNPE-Big-Book-preview-green {
  .wordIntp {
    .el-menu--horizontal > .el-menu-item.is-active {
      color: #24b99e;
      border-bottom: 2px solid #24b99e;
    }
  }
}
.NNPE-Big-Book-preview-brown {
  .wordIntp {
    .el-menu--horizontal > .el-menu-item.is-active {
      color: #bd8865;
      border-bottom: 2px solid #bd8865;
    }
  }
}
</style>