qjkankan_v1.1.1/packages/qjkankan-editor/src/views/explanation/explanationSettings.vue

<template>
  <div class="explanation-settings"  app-border dir-left>
    <div class="title">
      语音讲解
      <i class="iconfont icon-material_prompt tool-tip-for-editor" v-tooltip="'您可以为当前全景图添加语音讲解音频。'"/>
    </div>
    <button
      v-if="!currentScene.explanation.audioId"
      class="ui-button submit"
      :class="{
        disable: !currentScene || currentScene.type ==='4dkk',
      }"
      @click="isShowSelectionWindow = true"
    >
      <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="currentScene.explanation.audioUrl"></Audio>
        <div class="name" :key="currentScene.explanation.audioName" v-title="currentScene.explanation.audioName" @click="onClickCurrentMusic">{{currentScene.explanation.audioName}}</div>
        <i class="iconfont icon-editor_list_delete" @click.stop="onClickDeleteMusicBtn"></i>
      </div>
      <button class="ui-button" @click="isShowSelectionWindow = true">
        <i class="iconfont icon-editor_update"></i>
        更换音频
      </button>
    </template>

    <div class="switch-wrapper">
      <span class="label">默认开启</span>
      <Switcher
        :disable="!currentScene || currentScene.type ==='4dkk'"
        :value="currentScene.explanation.openByDefault" @change="currentScene.explanation.openByDefault = !currentScene.explanation.openByDefault"
      />
    </div>
    <div class="switch-wrapper">
      <span class="label">循环播放</span>
      <Switcher
        :disable="!currentScene || currentScene.type ==='4dkk'"
        :value="currentScene.explanation.repeat" @change="currentScene.explanation.repeat = !currentScene.explanation.repeat"
      />
    </div>

    <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 Switcher from "@/components/shared/Switcher";
import MaterialSelectorForEditor from "@/components/materialSelectorForEditor.vue";
import Audio from "@/components/audio/audioButton.vue";

export default {
  components: {
    Switcher,
    MaterialSelectorForEditor,
    Audio,
  },
  computed: {
    ...mapGetters({
        info: "info",
        currentScene: "scene/currentScene",
    }),
  },
  data() {
    return {
      isShowSelectionWindow: false,
    }
  },
  methods: {
    onClickCurrentMusic() {
      if (this.$refs['my-audio']) {
        this.$refs['my-audio'].switchPlayPause()
      }
    },
    onClickDeleteMusicBtn() {
      this.currentScene.explanation.audioId = ''
      this.currentScene.explanation.audioUrl = ''
      this.currentScene.explanation.audioName = ''
    },
    handleSubmitFromMaterialSelector(selected) {
      this.currentScene.explanation.audioId = selected[0].id
      this.currentScene.explanation.audioName = selected[0].name
      this.currentScene.explanation.audioUrl = selected[0].ossPath
      this.isShowSelectionWindow = false

    },
  },
  watch: {
    currentScene: {
      immediate: true,
      handler: function (newVal) {
        if (!newVal.explanation) {
          this.$set(newVal, 'explanation', {
            audioId: '',
            audioName: '',
            audioUrl: '',
            openByDefault: true,
            repeat: true,
          })
        }
      },
    },
  },
}
</script>

<style lang="less" scoped>
.explanation-settings {
  padding: 20px;
  > .title {
    font-size: 18px;
    color: #fff;
    > i {
      font-size: 12px;
      position: relative;
      top: -2px;
    }
  }
  > button {
    width: 100%;
    margin-top: 16px;
    &:hover {
      border-color: @color;
    }
    i {
      font-size: 14px;
    }
  }
  > .music-display {
    cursor: pointer;
    margin-top: 16px;
    width: 234px;
    height: 36px;
    background: #1A1B1D;
    border-radius: 2px;
    border: 1px solid #404040;
    color: #fff;
    font-size: 14px;
    text-align: center;
    position: relative;
    &: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;
      }
    }
  }

  .switch-wrapper {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-top: 18px;
    .label {
      color: rgba(255, 255, 255, 0.6);
      font-size: 14px;
    }
  }
}
</style>