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

<template>
  <div class="explanation-settings"  app-border dir-left>
    <template v-if="currentScene.type !== '4dkk'">
      <div class="title">
        {{$i18n.t("explanation.explanation_settings")}}
        <i class="iconfont icon-help_i tool-tip-for-editor" v-tooltip="$i18n.t('explanation.explanation_tips')"/>
      </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>
        {{$i18n.t("explanation.add_audio")}}
      </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>
          {{$i18n.t("explanation.change_audio")}}
        </button>
      </template>

      <div class="switch-wrapper">
        <span class="label">{{$i18n.t("explanation.default_open")}}</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">{{$i18n.t("explanation.loop")}}</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">
        <MaterialSelector
          :title="$i18n.t('gather.select_material')"
          @cancle="isShowSelectionWindow = false"
          @submit="handleSubmitFromMaterialSelector"
          :selectableType="['audio']"
          initialMaterialType="audio"
        />
      </div>
    </template>
    <!-- <div class="disabled-tip" v-if="currentScene.type === '4dkk'">
      {{$i18n.t('explanation.disabled_tip')}}
    </div> -->
  </div>
</template>

<script>
import { mapGetters } from "vuex";
import Switcher from "@/components/shared/Switcher";
import MaterialSelector from "@/components/materialSelector.vue";
import Audio from "@/components/audio/audioButton.vue";

export default {
  components: {
    Switcher,
    MaterialSelector,
    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;
    }
  }

  .disabled-tip {
    text-align: center;
    color: rgba(255, 255, 255, 0.6);
    font-size: 14px;
  }
}
</style>