GCLS_Page_Personal/src/components/common/SentenceEn.vue

<!--  -->
<template>
  <div class="sentence">
    <div class="sent-top">
      <div class="sent-top-left">
        <span class="num">{{ index + 1 }}.</span>
        <template v-if="mp3">
          <AudioLineSentence
            :key="'sent' + index"
            :mp3="mp3"
            :getCurTime="getCurTime"
            ref="audioLineSent"
            :audioId="'artPraAudioId' + index"
            :stopAudio="stopAudio"
            :width="120"
            :hideSlider="true"
            :bg="bg"
            :ed="ed"
          />
        </template>
      </div>
      <div class="cancle-coll" @click="cancleColl">
        <span class="coll-icon"></span>
        <span class="coll-text">取消收藏</span>
      </div>
    </div>
    <div class="vc-main" v-if="item">
      <div class="NNPE-words-box">
        <div
          class="NNPE-words"
          v-for="(pItem, pIndex) in item"
          :key="'wordsList' + pIndex"
          :class="[pItem.wordIndex == 0 ? 'textLeft' : 'textCenter']"
        >
          <template v-if="pItem.isShow">
                <template
                  v-if="
                    item[pIndex + 1] &&
                    item[pIndex + 1].en &&
                    enFhList.indexOf(item[pIndex + 1].en.word_bt) > -1
                  "
                >
                  <span class="NNPE-words-box NNPE-words-box-Both">
                    <span
                      :class="[]"
                    >
                        <span class="NNPE-words-box">
                            <span
                                :class="[pItem.timeList &&
                                        pItem.timeList[pItem.leg - 1] &&
                                        curTime >= pItem.timeList[pItem.leg - 1].wordBg &&
                                        curTime <= ed
                                        ? 'active'
                                        : '',]"
                            >
                                {{pItem.en.word_bt}}
                            </span>
                        </span>
                      <span
                        :class="[pItem.timeList[pItem.leg - 1] &&
                                curTime >= pItem.timeList[pItem.leg - 1].wordBg &&
                                curTime <= ed
                                ? 'active'
                                : '',
                        ]"
                        >{{ item[pIndex + 1].en.word_bt }}</span
                      >
                    </span>
                  </span>
                </template>
                <template v-else>
                    <span class="NNPE-words-box NNPE-words-box-single">
                        <span
                        :class="[
                            pItem.padding? 'padding' : '',
                            pItem.timeList &&
                            pItem.timeList[pItem.leg - 1] &&
                            curTime >= pItem.timeList[pItem.leg - 1].wordBg &&
                            curTime <= ed
                                ? 'active'
                                : '',
                        ]"
                        >
                            {{pItem.en.word_bt}}
                        </span>
                    </span>
                </template>
              </template>
        </div>
      </div>
      <div style="clear: both; overflow: hidden"></div>
      <div v-if="item.enwords" class="enwords">
        {{ item.enwords }}
      </div>
    </div>
    <div class="sent-bottom">
      <span class="create_time">{{ sItem.create_time }}</span>
      <span class="resource" v-if="sItem.resource"
        >来自：{{ sItem.resource }}</span
      >
    </div>
  </div>
</template>

<script>
import AudioLineSentence from "./AudioLineSentence.vue";
import { getLearnWebContent } from "@/api/ajax";
export default {
  name: "sentence",
  components: {
    AudioLineSentence,
  },
  props: ["sItem", "index"],
  data() {
    return {
      item: null,
      bg: 0,
      ed: 0,
      mp3: "",
      stopAudio: false,
      chsFhList: ["，", "。", "“", "：", "》", "《", "？", "！", "；"],
      enFhList: [",", ".", ";", "?", "!", ":", ">", "<"],
      noFont: ["~", "!", "@", "#", "$", "%", "^", "&", "*", "(", ")", "/"],
      NumberList: [
        "①",
        "②",
        "③",
        "④",
        "⑤",
        "⑥",
        "⑦",
        "⑧",
        "⑨",
        "⑩",
        "⑪",
        "⑫",
        "⑬",
        "⑭",
        "⑮",
        "⑯",
        "⑰",
        "⑱",
        "⑲",
        "⑳",
      ],
      pyPosition: "top",
      curTime: 0,
    };
  },
  computed: {},
  watch: {},
  //方法集合
  methods: {
    handleData() {
      let sentence_json = JSON.parse(this.sItem.sentence.sentence_json);
      if (sentence_json) {
        this.item = JSON.parse(sentence_json.item);
        this.bg = sentence_json.bg;
        this.ed = sentence_json.ed;
        this.pyPosition = sentence_json.pyPosition;
        this.mp3 = sentence_json.mp3;
      }
    },
    getCurTime(curTime) {
      let _this = this;
      _this.curTime = curTime * 1000;
    },
    pauseAudio() {
      let audio = document.getElementsByTagName("audio");
      audio.forEach((item) => {
        item.pause();
      });
    },
    cancleColl() {
      let data = {
        id_list: [this.sItem.id],
      };
      let MethodName = "order-collection_manager-DeleteMyCollection";
      getLearnWebContent(MethodName, data).then((res) => {
        this.$message.success("取消成功！");
        this.$emit("getMyCollectionList");
      });
    },
  },
  //生命周期 - 创建完成（可以访问当前this实例）
  created() {},
  //生命周期 - 挂载完成（可以访问DOM元素）
  mounted() {
    this.handleData();
  },
  beforeCreate() {}, //生命周期 - 创建之前
  beforeMount() {}, //生命周期 - 挂载之前
  beforeUpdate() {}, //生命周期 - 更新之前
  updated() {}, //生命周期 - 更新之后
  beforeDestroy() {}, //生命周期 - 销毁之前
  destroyed() {}, //生命周期 - 销毁完成
  activated() {}, //如果页面有keep-alive缓存功能，这个函数会触发
};
</script>
<style lang='scss' scoped>
//@import url(); 引入公共css类
.sentence {
  width: 100%;
  .sent-top {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
    margin-bottom: 8px;
    &-left {
      display: flex;
      justify-content: flex-start;
      align-items: center;
      .num {
        font-size: 14px;
        line-height: 22px;
        color: #000000;
        min-width: 22px;
        margin-right: 8px;
      }
    }
    .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;
      }
    }
  }
  .sent-bottom {
    > span {
      font-size: 14px;
      line-height: 22px;
      color: #2c2c2c;
      opacity: 0.5;
      margin-right: 8px;
    }
  }
}
.vc-main {
  width: 100%;
  margin-bottom: 8px;
  .enwords {
    font-size: 12px;
    line-height: 20px;
    color: rgba(0, 0, 0, 0.85);
    font-family: "robot";
  }
}
.NNPE-words {
  float: left;
  user-select: none;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  &-box {
    float: left;
    > span {
      display: block;
      &.NNPE-pinyin {
        font-family: "GB-PINYINOK-B";
        font-weight: normal;
        font-size: 14px;
        line-height: 22px;
        box-sizing: border-box;
        color: rgba(0, 0, 0, 0.85);

        &.noFont {
          font-family: initial;
        }
        &.textLeft {
          text-align: left;
        }
        &.font-white {
          color: #fff;
        }
        &.wordBlank {
          color: rgba(0, 0, 0, 0.85);
        }
      }
      &.NNPE-chs {
        font-family: "FZJCGFKTK";
        font-size: 20px;
        line-height: 24px;
        color: rgba(0, 0, 0, 0.85);

        .font-white {
          color: #fff;
        }
        .active {
          color: #de4444;
          &-yellow {
            color: #ffc600;
          }
        }

        .wordActive {
          color: #de4444;
        }
        .wordActive-blue {
          color: #ffc600;
        }
      }
      // &.padding {
      //   padding-right: 6px;
      // }
    }
  }
  &.textLeft {
    text-align: left;
  }
  &.textCenter {
    text-align: center;
  }
  .active {
    color: #de4444;
  }
  > span {
    display: block;
    margin-right: 6px;
    font-size: 18px;
    color: rgba(0, 0, 0, 0.85);
  }
}
</style>