GCLS_Page_Personal/src/components/common/Hanzi.vue

<!--  -->
<template>
  <div class="hanzi" dir="ltr" v-if="item">
    <div class="left-part">
      <div class="strockplay-list">
        <div
          :class="[
            'strockplay',
            conindex < item.new_word.new_word.length - 1 ? 'borderRight' : '',
          ]"
          v-for="(conItem, conindex) in item.new_word.new_word"
          :key="'new_word_' + index + conindex"
        >
          <Strockplayredline
            :key="conItem + index + conindex"
            :Book_text="conItem"
            :playStorkes="true"
            :targetDiv="'bwcHanziIntp' + conItem + index + conindex"
            :wordNum="item.new_word.new_word.length"
            :themeColor="themeColor"
          />
          <div
            :class="[
              'bwc-line',
              themeColor == 'green'
                ? 'green-bg'
                : themeColor == 'red'
                ? 'red-bg'
                : 'brown-bg',
            ]"
            v-if="conindex < item.new_word.new_word.length - 1"
          ></div>
        </div>
      </div>
    </div>
    <div class="main">
      <div class="first-part">
        <div class="left">
          <span class="pinyin" v-if="item.new_word.pinyin">{{
            item.new_word.pinyin
          }}</span>
          <template v-if="mp3Url">
            <Audio :mp3="mp3Url" :themeColor="themeColor" />
          </template>
          <template v-else-if="item.new_word.audio_file_url">
            <AudioLineSentence
              :key="'Hanzi' + index"
              :mp3="item.new_word.audio_file_url"
              :getCurTime="getCurTime"
              ref="audioLineSent"
              :audioId="'HanziAudioId' + index"
              :stopAudio="stopAudio"
              :width="120"
              :hideSlider="true"
              :bg="item.new_word.audio_begin_time"
              :ed="item.new_word.audio_end_time"
            />
          </template>
        </div>
      </div>
      <template
        v-if="
          item.new_word.definition_list &&
          item.new_word.definition_list.length > 0
        "
      >
        <div
          class="def-chs"
          v-for="(defItem, defIndex) in item.new_word.definition_list"
          :key="'defIndex' + defIndex"
          v-html="defItem"
        ></div>
      </template>
      <template v-else-if="def_result">
        <div class="def-chs">{{ def_result }}</div>
      </template>
      <div class="resource" v-if="item.new_word.source_courseware_name_path">
        {{ item.new_word.source_courseware_name_path }}
      </div>
      <div class="create_time" v-if="item.create_time">
        {{ item.create_time }}
      </div>
    </div>
    <div class="right">
      <div class="cancle-coll" @click="cancleColl">
        <span class="coll-icon"></span>
        <span class="coll-text">{{ $t("Key662") }}</span>
        <!-- 取消收藏 -->
      </div>
      <!-- 查看更多 -->
      <span class="look-more" @click="lookMore">{{ $t("Key47") }}</span>
    </div>
    <div class="practiceBox" v-if="isIntpShow">
      <WordPhraseDetail
        :collId="item.id"
        :closeWord="changeIntpShow"
        :themeColor="themeColor"
        :currentTreeID="item.goods_id"
        :word="item.new_word.new_word"
        :detailIndex="index"
      />
    </div>
  </div>
</template>

<script>
import AudioLineSentence from "./AudioLineSentence.vue";
import Strockplayredline from "./Strockplayredline.vue";
import Audio from "./AudioRed.vue";
import { getLearnWebContent } from "@/api/ajax";
import WordPhraseDetail from "./WordPhraseDetail.vue";
export default {
  name: "Hanzi",
  components: { Strockplayredline, Audio, WordPhraseDetail, AudioLineSentence },
  props: ["item", "index"],
  data() {
    return {
      themeColor: "red",
      isIntpShow: false,
      stopAudio: false,
      curTime: 0,
      mp3Url: "",
      paraphrase: [],
      isHasValue2: "",
      dataDetail: null,
      def_result: "",
    };
  },
  computed: {},
  watch: {
    item(newVal, oldVal) {
      this.initFn();
    },
  },
  //方法集合
  methods: {
    cancleColl() {
      let data = {
        id_list: [this.item.id],
      };
      let MethodName = "order-collection_manager-DeleteMyCollection";
      getLearnWebContent(MethodName, data).then((res) => {
        // this.$message.success("取消成功！");
        this.$message.success(this.$t("Key661"));

        this.$emit("getMyCollectionList");
      });
    },
    lookMore() {
      this.isIntpShow = true;
    },
    changeIntpShow() {
      this.isIntpShow = false;
    },
    getCurTime(curTime) {
      let _this = this;
      _this.curTime = curTime * 1000;
    },
    // 处理数据
    handleChineseDetail() {
      let _this = this;
      _this.paraphrase = [];
      _this.isHasValue2 = "";
      _this.def_result = "";
      _this.mp3Url = "";
      _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;
                console.log(_this.paraphrase);
                for (let i = 0; i < _this.paraphrase.length; i++) {
                  if (_this.paraphrase[i]["@definitionWithSpell"]) {
                    _this.isHasValue2 = "definitionWithSpell";
                    //遍历一个对象
                    for (let key in _this.paraphrase[i][
                      "@definitionWithSpell"
                    ]) {
                      //遍历key
                      let def_arr =
                        _this.paraphrase[i]["@definitionWithSpell"][key];
                      for (let j = 0; j < def_arr.length; j++) {
                        if (def_arr[j]) {
                          _this.def_result = def_arr[j];
                          return false;
                        }
                      }
                    }
                  } else if (_this.paraphrase[i]["@definitions"]) {
                    _this.isHasValue2 = "definitions";
                    for (
                      let m = 0;
                      m < _this.paraphrase[i]["@definitions"].length;
                      m++
                    ) {
                      if (_this.paraphrase[i]["@definitions"][m]) {
                        _this.def_result =
                          _this.paraphrase[i]["@definitions"][m];
                        return false;
                      }
                    }
                  } else {
                    _this.def_result = _this.paraphrase[i]["@value"];
                  }
                }
              }
            });
          });
        }
      });
      console.log(_this.item.new_word.new_word);
      console.log(_this.def_result);
    },
    initFn() {
      let _this = this;
      _this.paraphrase = [];
      _this.isHasValue2 = "";
      _this.def_result = "";
      _this.mp3Url = "";
      if (_this.item) {
        let dict = _this.item.new_word.definition_dictionary_json
          ? JSON.parse(_this.item.new_word.definition_dictionary_json)
          : null;
        _this.dataDetail = dict.data.result;
        if (_this.dataDetail) {
          _this.handleChineseDetail();
        }
      }
    },
  },
  //生命周期 - 创建完成（可以访问当前this实例）
  created() {},
  //生命周期 - 挂载完成（可以访问DOM元素）
  mounted() {
    this.initFn();
  },
  beforeCreate() {}, //生命周期 - 创建之前
  beforeMount() {}, //生命周期 - 挂载之前
  beforeUpdate() {}, //生命周期 - 更新之前
  updated() {}, //生命周期 - 更新之后
  beforeDestroy() {}, //生命周期 - 销毁之前
  destroyed() {}, //生命周期 - 销毁完成
  activated() {}, //如果页面有keep-alive缓存功能，这个函数会触发
};
</script>
<style lang='scss' scoped>
//@import url(); 引入公共css类
.hanzi {
  width: 100%;
  display: flex;
  justify-content: flex-start;
  align-items: stretch;
  .practiceBox {
    position: fixed;
    width: 100%;
    height: 100vh;
    left: 0;
    top: 0px;
    z-index: 9999;
    background: rgba(0, 0, 0, 0.19);
    box-sizing: border-box;
    overflow-y: auto;
    padding-bottom: 50px;
    &.practiceBoxStrock {
      display: flex;
      justify-content: center;
      align-items: center;
      padding-top: 0px;
    }
  }
  .left-part {
    min-height: 92px;
    max-height: 152px;
    background: #f0f0f0;
    border-radius: 8px;
    display: flex;
    justify-content: center;
    align-items: center;
    margin-right: 16px;
    padding: 0 8px;
  }
  .strockplay-list {
    display: flex;
    justify-content: flex-start;
    align-items: flex-start;
    border: 2px solid #de4444;
    box-sizing: border-box;
    border-radius: 8px;
    overflow: hidden;
  }
  .strockplay {
    width: 64px;
    height: 64px;
    box-sizing: border-box;
    &.borderRight {
      border-right: 2px #de4444 solid;
    }
  }
  .main {
    flex: 1;
    .first-part {
      clear: both;
      overflow: hidden;
      display: flex;
      justify-content: flex-start;
      align-items: center;
      margin-bottom: 8px;
      .left {
        float: left;
        display: flex;
        justify-content: flex-start;
        align-items: center;
        .pinyin {
          font-size: 24px;
          line-height: 32px;
          color: rgba(0, 0, 0, 0.85);
          margin-right: 4px;
        }
      }
    }
    .def-chs {
      font-size: 14px;
      line-height: 22px;
      color: rgba(0, 0, 0, 0.85);
      margin-bottom: 8px;
      opacity: 0.5;
      max-width: 560px;
    }
    .def-en {
      font-size: 14px;
      line-height: 22px;
      color: rgba(0, 0, 0, 0.85);
      margin-bottom: 8px;
      opacity: 0.5;
    }
    .resource {
      font-size: 14px;
      line-height: 22px;
      color: #2c2c2c;
      opacity: 0.5;
      margin-bottom: 8px;
    }
    .create_time {
      font-size: 14px;
      line-height: 22px;
      color: #2c2c2c;
      opacity: 0.5;
    }
  }
  .right {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: center;
    height: 100%;
    .cancle-coll {
      float: right;
      padding: 0 12px;
      height: 32px;
      display: flex;
      justify-content: flex-start;
      align-items: center;
      cursor: pointer;
      border: 1px solid rgba(0, 0, 0, 0.1);
      box-sizing: border-box;
      border-radius: 4px;
      > .coll-icon {
        width: 16px;
        height: 16px;
        background: url("../../assets/starfill-16-normal-red.png") no-repeat
          left top;
        background-size: 100% 100%;
        margin-right: 4px;
      }
      > .coll-text {
        font-size: 14px;
        line-height: 22px;
        color: #000000;
      }
    }
    .look-more {
      font-size: 14px;
      line-height: 22px;
      color: rgba(0, 0, 0, 0.85);
      opacity: 0.5;
      cursor: pointer;
    }
  }
}
</style>