qjkankan_v1.1.1/packages/qjkankan-editor/src/views/base/backgroundMusicSettings.vue

<template>
  <div class="background-music-settings">
    <span class="title">设置背景音乐</span>
    <br>
    <button v-if="!(info && info.backgroundMusic && info.backgroundMusic.name)" @click="onClickMusicSelectionBtn">
      <i class="iconfont icon-editor_add"></i>
      添加音频
    </button>
    <template v-else>
      <div class="music-display" @click.self="onClickCurrentMusic">
        <Audio ref="my-audio" class="audio-control" :backgroundColor="'#1A1B1D'" :myAudioUrl="info.backgroundMusic.ossPath"></Audio>
        <div class="name" v-title="info.backgroundMusic.name" @click="onClickCurrentMusic">{{info.backgroundMusic.name}}</div>
        <i class="iconfont icon-editor_list_delete" @click.stop="onClickDeleteMusicBtn"></i>
      </div>
      <button @click="onClickMusicSelectionBtn">
        <i class="iconfont icon-editor_update"></i>
        更换音频
      </button>
    </template>

    <div class="dialog" style="z-index: 2000" v-if="isShowSelectionWindow">
      <MaterialSelectorForEditor
        title="选择素材"
        @cancle="isShowSelectionWindow = false"
        @submit="handleSubmitFromMaterialSelector"
        :selectableType="['audio']"
        initialMaterialType="audio"
      />
    </div>
  </div>
</template>

<script>
import { mapGetters } from "vuex";
import MaterialSelectorForEditor from "@/components/materialSelectorForEditor.vue";
import Audio from "@/components/audio/audioButton.vue";

export default {
  components: {
    MaterialSelectorForEditor,
    Audio,
  },
  data() {
    return {
      isShowSelectionWindow: false,
    }
  },
  computed: {
    ...mapGetters({
      info:'info'
    }),
  },
  methods: {
    onClickMusicSelectionBtn() {
      this.isShowSelectionWindow = true
    },
    onClickDeleteMusicBtn() {
      this.info.backgroundMusic.id = null
      this.info.backgroundMusic.name = null
      this.info.backgroundMusic.ossPath = null
    },
    handleSubmitFromMaterialSelector(selected) {
      this.isShowSelectionWindow = false
      this.info.backgroundMusic.id = selected[0].id
      this.info.backgroundMusic.name = selected[0].name
      this.info.backgroundMusic.ossPath = selected[0].ossPath
    },
    onClickCurrentMusic() {
      if (this.$refs['my-audio']) {
        this.$refs['my-audio'].switchPlayPause()
      }
    }
  },
  mounted() {
    if (!this.info.backgroundMusic) {
      this.info.backgroundMusic = {
        id: '',
        name: '',
        ossPath: '',
      }
    }
  }
}
</script>

<style lang="less" scoped>
.background-music-settings {
  padding: 24px 30px;
  background: #252526;
  height: 546px;
  > .title {
    font-size: 18px;
    color: #FFFFFF;
  }
  > button {
    margin-top: 16px;
    width: 234px;
    height: 40px;
    background: #1A1B1D;
    border-radius: 2px;
    border: 1px solid #404040;
    display: block;
    color: #0076F6;
    font-size: 14px;
    cursor: pointer;
    &:hover {
      border-color: @color;
    }
    i {
      font-size: 14px;
    }
  }
  > .music-display {
    cursor: pointer;
    margin-top: 16px;
    width: 234px;
    height: 40px;
    background: #1A1B1D;
    border-radius: 2px;
    border: 1px solid #404040;
    color: #fff;
    font-size: 14px;
    position: relative;
    text-align: center;
    &:hover {
      color: #0076F6;
      border-color: @color;
      > .audio-control {
        display: inline-block;
      }
      > i {
        display: inline-block;
      }
    }
    > .audio-control {
      position: absolute;
      top: 50%;
      transform: translateY(-50%);
      left: 18px;
      display: none;
    }
    > .name {
      position: absolute;
      left: 50%;
      top: 50%;
      transform: translate(-50%, -50%);
      width: 65%;
      text-overflow: ellipsis;
      overflow: hidden;
      white-space: nowrap;
      display: inline-block;
    }
    > i {
      display: none;
      position: absolute;
      top: 50%;
      transform: translateY(-50%);
      right: 18px;
      &:hover {
        color: #FA5555;
      }
    }
  }
}
</style>