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

<!--  -->
<template>
  <div class="Big-Book-prev-Textdes SelectTone" v-if="curQue">
    <div
      class="aduioLine-box"
      v-if="
        curQue.mp3_list && curQue.mp3_list.length > 0 && curQue.mp3_list[0].url
      "
    >
      <AudioLine
        audioId="sentenceListenAudio"
        :mp3="curQue.mp3_list[0].url"
        :getCurTime="getCurTime"
        :themeColor="themeColor"
        :ed="ed"
        type="audioLine"
        ref="audioLine"
        @handleListenRead="handleListenRead"
      />
    </div>
    <ul>
      <li v-for="(item, index) in curQue.option" :key="index">
        <a
          :class="[
            'play-btn',
            curTime >= curQue.wordTime[index].bg &&
            curTime < curQue.wordTime[index].ed &&
            stopAudio
              ? 'active'
              : '',
          ]"
          @click="handleChangeTime(curQue.wordTime[index].bg,curQue.wordTime[index].ed)"
        ></a>
        <!-- <Audio
          :mp3="item.mp3_list.length > 0 ? item.mp3_list[0].url : ''"
          :themeColor="themeColor"
          class="audio-play"
        /> -->
        <div v-html="item.con" class="con"></div>
        <a
          v-for="(itmes, indexs) in toneList"
          :key="indexs"
          :class="['tone-item', userSelect[index] === indexs ? 'active' : '']"
          @click="handleClick(index, indexs)"
        >
          <img :src="itmes" />
        </a>
      </li>
    </ul>
  </div>
</template>

<script>
import Audio from "../preview/components/AudioRed.vue"; // 音频播放
import AudioLine from "../preview/AudioLine.vue";

export default {
  components: { Audio, AudioLine },
  props: ["curQue", "themeColor"],
  data() {
    return {
      toneList: [
        require("../../../assets/NPC/tone1.png"),
        require("../../../assets/NPC/tone2.png"),
        require("../../../assets/NPC/tone3.png"),
        require("../../../assets/NPC/tone4.png"),
        require("../../../assets/NPC/tone0.png"),
      ],
      userSelect: [],
      curTime: "",
      stopAudio: false,
      timer: null,
      ed: null,
    };
  },
  computed: {},
  watch: {},
  //方法集合
  methods: {
    // 处理数据
    handleData() {
      let _this = this;
      _this.userSelect = [];
      _this.curQue.option.forEach((item) => {
        _this.userSelect.push("");
      });
    },
    handleClick(index, indexs) {
      this.$set(this.userSelect, index, indexs);
    },
    handleChangeTime(time,edTime) {
      let _this = this;
    //   if(!_this.stopAudio){
    //       _this.timer = setInterval(() => {
    //         if(_this.curTime >= edTime){
    //             _this.stopAudio = false
    //             _this.$refs.audioLine.onTimeupdateTime(_this.curTime / 1000, false);
    //             clearInterval(_this.timer);
    //         }
    //     }, 200);
    //   }
      _this.curTime = time;
      _this.stopAudio = true
      _this.$refs.audioLine.onTimeupdateTime(time / 1000, true);
      _this.ed = edTime
    },
    getCurTime(curTime) {
      this.curTime = curTime * 1000;
    },
    handleListenRead(playFlag) {
      this.stopAudio = playFlag;
      if(this.timer){
          clearInterval(this.timer);
      }
    },
    emptyEd(){
        this.ed = null;
    }
  },
  //生命周期 - 创建完成（可以访问当前this实例）
  created() {
      if(this.timer){
          clearInterval(this.timer);
      }
  },
  //生命周期 - 挂载完成（可以访问DOM元素）
  mounted() {},
  beforeCreate() {}, //生命周期 - 创建之前
  beforeMount() {}, //生命周期 - 挂载之前
  beforeUpdate() {}, //生命周期 - 更新之前
  updated() {}, //生命周期 - 更新之后
  beforeDestroy() {
      if(this.timer){
          clearInterval(this.timer);
      }
  }, //生命周期 - 销毁之前
  destroyed() {
      if(this.timer){
          clearInterval(this.timer);
      }
  }, //生命周期 - 销毁完成
  activated() {}, //如果页面有keep-alive缓存功能，这个函数会触发
};
</script>
<style lang='scss' scoped>
//@import url(); 引入公共css类
.Big-Book-prev-Textdes {
  width: 100%;
  background: #f7f7f7;
  border: 1px solid rgba(0, 0, 0, 0.1);
  box-sizing: border-box;
  border-radius: 8px;
  overflow: hidden;
  ul {
    display: flex;
    flex-flow: wrap;
    justify-content: space-between;
    align-items: flex-start;
    padding: 24px 12px;

    li {
      width: 363px;
      background: #ffffff;
      border: 1px solid rgba(0, 0, 0, 0.1);
      box-sizing: border-box;
      border-radius: 8px;
      display: flex;
      align-items: center;
      padding: 8px 12px 8px 16px;
      margin: 8px 0;
      .play-btn {
        width: 16px;
        height: 16px;
        background: url("../../../assets/NPC/play-red.png") center no-repeat;
        background-size: cover;
        margin-right: 8px;

        &.active {
          background-image: url("../../../assets/NPC/icon-voice-play-red.png");
          background-size: cover;
        }
      }
      .audio-play {
        width: 16px;
        margin-right: 12px;
      }
      > div.con {
        font-size: 16px;
        line-height: 1.5;
        flex: 1;
        margin: 0;
      }
      a {
        margin-left: 8px;
        font-size: 0;
        &.active {
          background: #98d1eb;
          border-radius: 4px;
        }
        img {
          width: 24px;
        }
      }
    }
  }
}
.NPC-Big-Book-preview-green {
  .Big-Book-prev-Textdes {
    li {
      b {
        background: #24b99e;
      }
      .play-btn {
        background: url("../../../assets/NPC/play-green.png") center no-repeat;
        background-size: cover;
        &.active {
          background-image: url("../../../assets/NPC/icon-voice-play-green.png");
          background-size: cover;
        }
      }
    }
  }
}
.NPC-Big-Book-preview-brown {
  .Big-Book-prev-Textdes {
    li {
      b {
        background: #bd8865;
      }
      .play-btn {
        background: url("../../../assets/NPC/play-brown.png") center no-repeat;
        background-size: cover;
        &.active {
          background-image: url("../../../assets/NPC/icon-voice-play-brown.png");
          background-size: cover;
        }
      }
    }
  }
}
</style>
<style lang="scss">
.SelectTone.Big-Book-prev-Textdes {
  ul {
    li {
      div.con {
        margin: 0;
        > p {
          margin: 0;
        }
      }
    }
  }
}
</style>