|
|
@@ -0,0 +1,410 @@
|
|
|
+<template>
|
|
|
+ <div class="image-text-effect-setting">
|
|
|
+
|
|
|
+ <div class="image-list-wrap">
|
|
|
+ <button
|
|
|
+ class="add-btn"
|
|
|
+ v-if="hotspot.imageTextInfo.imageList.length === 0"
|
|
|
+ @click="isShowImageSelect = true"
|
|
|
+ >
|
|
|
+ <img src="@/assets/images/default/hotspot_scene_add.png" alt="">
|
|
|
+ <div class="name">{{$i18n.t('hotspot.add_image')}}</div>
|
|
|
+ <div class="tip">{{$i18n.t('hotspot.10MB_limit')}}</div>
|
|
|
+ </button>
|
|
|
+ <ul class="image-list" v-else>
|
|
|
+ <button class="add-btn" @click="isShowImageSelect = true">
|
|
|
+ <div class="inner-wrap">
|
|
|
+ <img src="@/assets/images/default/hotspot_scene_add.png" alt="">
|
|
|
+ <div>{{$i18n.t('hotspot.add_tooltips')}}</div>
|
|
|
+ </div>
|
|
|
+ </button>
|
|
|
+ <li v-for="(item,i) in hotspot.imageTextInfo.imageList" :key="i">
|
|
|
+ <img class="thumb" :src="item.icon || $thumb" alt="">
|
|
|
+ <button class="delete-btn" @click="del(item)">
|
|
|
+ <img class="normal" src="@/assets/images/icons/close01_normal@2x.png" alt="">
|
|
|
+ <img class="hover" src="@/assets/images/icons/close01_hover@2x.png" alt="">
|
|
|
+ </button>
|
|
|
+ </li>
|
|
|
+ </ul>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <div class="remark">{{$i18n.t('hotspot.text_content')}}</div>
|
|
|
+ <div class="textarea-wrapper">
|
|
|
+ <!-- <textarea
|
|
|
+ v-model.trim="text"
|
|
|
+ maxlength="200"
|
|
|
+ placeholder="请输入文字内容，限200字"
|
|
|
+ type="text"
|
|
|
+ /> -->
|
|
|
+ <editor
|
|
|
+ ref="editor"
|
|
|
+ :html="hotspot.imageTextInfo.text"
|
|
|
+ :placeholder="$i18n.t('hotspot.text_placeholder')"
|
|
|
+ :maxlength="200"
|
|
|
+ @change="onEditorChange"
|
|
|
+ />
|
|
|
+ <span class="count">{{textLength}}/200</span>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <div class="switcher-wrap">
|
|
|
+ <span class="remark">{{$i18n.t('hotspot.apply_to_all')}}</span>
|
|
|
+ <Switcher
|
|
|
+ :value="hotspot.imageTextInfo.isApplyToAll"
|
|
|
+ @change="onSwitcherChange"
|
|
|
+ />
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <div class="remark">{{$i18n.t('hotspot.add_audio')}}</div>
|
|
|
+ <button class="add-btn" v-if="!hotspot.imageTextInfo.audio.id" @click="isShowAudioSelect = true">
|
|
|
+ <i class="iconfont icon-editor_add"></i>
|
|
|
+ {{$i18n.t('hotspot.add_audio')}}
|
|
|
+ </button>
|
|
|
+ <template v-else>
|
|
|
+ <div class="music-display" @click.self="onClickCurrentMusic">
|
|
|
+ <Audio ref="my-audio" class="audio-control" :backgroundColor="'#1A1B1D'" :myAudioUrl="hotspot.imageTextInfo.audio.ossPath"></Audio>
|
|
|
+ <div class="name" v-title="hotspot.imageTextInfo.audio.name" @click="onClickCurrentMusic">{{hotspot.imageTextInfo.audio.name}}</div>
|
|
|
+ <i class="iconfont icon-editor_list_delete" @click.stop="hotspot.imageTextInfo.audio = {}"></i>
|
|
|
+ </div>
|
|
|
+ <button class="change-btn" @click="isShowImageSelect = true">
|
|
|
+ <i class="iconfont icon-editor_update"></i>
|
|
|
+ {{$i18n.t('hotspot.change_audio')}}
|
|
|
+
|
|
|
+ </button>
|
|
|
+ </template>
|
|
|
+
|
|
|
+ <div class="dialog" style="z-index: 2000" v-if="isShowImageSelect">
|
|
|
+ <MaterialSelector
|
|
|
+ :title="$i18n.t('hotspot.select_image')"
|
|
|
+ @cancle="isShowImageSelect = false"
|
|
|
+ @submit="onImageSelected"
|
|
|
+ :selectableType="['image']"
|
|
|
+ :isMultiSelection="true"
|
|
|
+ />
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <div class="dialog" style="z-index: 2000" v-if="isShowAudioSelect">
|
|
|
+ <MaterialSelector
|
|
|
+ :title="$i18n.t('hotspot.select_audio')"
|
|
|
+ @cancle="isShowAudioSelect = false"
|
|
|
+ @submit="onAudioSelected"
|
|
|
+ :selectableType="['audio']"
|
|
|
+ initialMaterialType="audio"
|
|
|
+ />
|
|
|
+ </div>
|
|
|
+
|
|
|
+ </div>
|
|
|
+</template>
|
|
|
+
|
|
|
+<script>
|
|
|
+import { mapGetters } from "vuex";
|
|
|
+
|
|
|
+import MaterialSelector from "@/components/materialSelector.vue";
|
|
|
+import Editor from "@/components/shared/Editor"
|
|
|
+import Switcher from "@/components/shared/Switcher.vue";
|
|
|
+import Audio from "@/components/audio/audioButton.vue";
|
|
|
+
|
|
|
+export default {
|
|
|
+ components:{
|
|
|
+ MaterialSelector,
|
|
|
+ Editor,
|
|
|
+ Switcher,
|
|
|
+ Audio,
|
|
|
+ },
|
|
|
+ data(){
|
|
|
+ return {
|
|
|
+ isShowImageSelect: false,
|
|
|
+ textLength: 0,
|
|
|
+ isShowAudioSelect: false,
|
|
|
+ }
|
|
|
+ },
|
|
|
+ computed: {
|
|
|
+ ...mapGetters({
|
|
|
+ hotspot: 'hotspot',
|
|
|
+ }),
|
|
|
+ },
|
|
|
+ methods:{
|
|
|
+ del(item){
|
|
|
+ let index = this.hotspot.imageTextInfo.imageList.findIndex(i => i.id === item.id)
|
|
|
+ ~index && this.hotspot.imageTextInfo.imageList.splice(index, 1)
|
|
|
+ },
|
|
|
+ onImageSelected(data) {
|
|
|
+ this.hotspot.imageTextInfo.imageList = this.hotspot.imageTextInfo.imageList.concat(data)
|
|
|
+ this.isShowImageSelect = false
|
|
|
+ },
|
|
|
+ onEditorChange(content) {
|
|
|
+ this.textLength = content.textLength
|
|
|
+ },
|
|
|
+ onSwitcherChange(v) {
|
|
|
+ this.hotspot.imageTextInfo.isApplyToAll = v
|
|
|
+ },
|
|
|
+ onClickCurrentMusic() {
|
|
|
+ if (this.$refs['my-audio']) {
|
|
|
+ this.$refs['my-audio'].switchPlayPause()
|
|
|
+ }
|
|
|
+ },
|
|
|
+ onAudioSelected(data){
|
|
|
+ console.log('sadf', data);
|
|
|
+ this.hotspot.imageTextInfo.audio = {...data[0]}
|
|
|
+ this.isShowAudioSelect = false
|
|
|
+ },
|
|
|
+ },
|
|
|
+ watch: {
|
|
|
+ 'hotspot.imageTextInfo.imageList': {
|
|
|
+ handler(newVal) {
|
|
|
+ if (newVal.length > 20) {
|
|
|
+ return this.$alert({ content: this.$i18n.t('hotspot.img_size') });
|
|
|
+ }
|
|
|
+ }
|
|
|
+ },
|
|
|
+ }
|
|
|
+}
|
|
|
+</script>
|
|
|
+
|
|
|
+<style lang="less" scoped>
|
|
|
+.image-text-effect-setting {
|
|
|
+ .remark {
|
|
|
+ margin-top: 16px;
|
|
|
+ font-size: 14px;
|
|
|
+ color: #ababab;
|
|
|
+ }
|
|
|
+
|
|
|
+ > .image-list-wrap {
|
|
|
+ min-height: 242px;
|
|
|
+ background: #1A1B1D;
|
|
|
+ border-radius: 2px;
|
|
|
+ border: 1px solid #404040;
|
|
|
+ position: relative;
|
|
|
+ padding: 8px;
|
|
|
+ > .add-btn {
|
|
|
+ top: 50%;
|
|
|
+ left: 50%;
|
|
|
+ transform: translate(-50%, -50%);
|
|
|
+ position: absolute;
|
|
|
+ background: none;
|
|
|
+ border: none;
|
|
|
+ color: @color;
|
|
|
+ cursor: pointer;
|
|
|
+ > img {
|
|
|
+ width: 30px;
|
|
|
+ }
|
|
|
+ > .name {
|
|
|
+ margin-top: 6px;
|
|
|
+ font-size: 14px;
|
|
|
+ }
|
|
|
+ > .tip {
|
|
|
+ margin-top: 4px;
|
|
|
+ font-size: 12px;
|
|
|
+ color: #FFFFFF;
|
|
|
+ opacity: 0.2;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ > .image-list {
|
|
|
+ margin-right: -4px;
|
|
|
+ margin-bottom: -8px;
|
|
|
+ > .add-btn {
|
|
|
+ background: none;
|
|
|
+ border-radius: 2px;
|
|
|
+ border: 2px solid #0076F6;
|
|
|
+ color: @color;
|
|
|
+ cursor: pointer;
|
|
|
+ display: inline-block;
|
|
|
+ width: 67px;
|
|
|
+ height: 67px;
|
|
|
+ margin-right: 4px;
|
|
|
+ margin-bottom: 8px;
|
|
|
+ position: relative;
|
|
|
+ vertical-align: bottom;
|
|
|
+ > .inner-wrap {
|
|
|
+ position: absolute;
|
|
|
+ top: 50%;
|
|
|
+ left: 50%;
|
|
|
+ transform: translate(-50%, -50%);
|
|
|
+ > img {
|
|
|
+ width: 18px;
|
|
|
+ }
|
|
|
+ > div {
|
|
|
+ margin-top: 4px;
|
|
|
+ font-size: 12px;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ > li {
|
|
|
+ display: inline-block;
|
|
|
+ width: 67px;
|
|
|
+ height: 67px;
|
|
|
+ margin-right: 4px;
|
|
|
+ margin-bottom: 8px;
|
|
|
+ position: relative;
|
|
|
+ > .thumb {
|
|
|
+ width: 100%;
|
|
|
+ height: 100%;
|
|
|
+ object-fit: cover;
|
|
|
+ border-radius: 2px;
|
|
|
+ }
|
|
|
+ > .delete-btn {
|
|
|
+ position: absolute;
|
|
|
+ top: 0;
|
|
|
+ right: 0;
|
|
|
+ width: 20px;
|
|
|
+ height: 20px;
|
|
|
+ background: none;
|
|
|
+ border: none;
|
|
|
+ padding: 0;
|
|
|
+ cursor: pointer;
|
|
|
+ &:hover {
|
|
|
+ .normal {
|
|
|
+ display: none;
|
|
|
+ }
|
|
|
+ .hover {
|
|
|
+ display: initial;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ > .normal {
|
|
|
+ display: initial;
|
|
|
+ width: 100%;
|
|
|
+ height: 100%;
|
|
|
+ }
|
|
|
+ > .hover {
|
|
|
+ display: none;
|
|
|
+ width: 100%;
|
|
|
+ height: 100%;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .textarea-wrapper {
|
|
|
+ margin-top: 16px;
|
|
|
+ position: relative;
|
|
|
+ border: 1px solid rgba(151, 151, 151, 0.2);
|
|
|
+ background: #1A1B1D;
|
|
|
+ border-radius: 2px;
|
|
|
+ height: 200px;
|
|
|
+ width: 100%;
|
|
|
+
|
|
|
+ &:focus-within {
|
|
|
+ border-color: #0076F6;
|
|
|
+ }
|
|
|
+
|
|
|
+ > textarea {
|
|
|
+ padding: 9px 16px 30px 16px;
|
|
|
+ resize: none;
|
|
|
+ border: none;
|
|
|
+ background: transparent;
|
|
|
+ outline: none;
|
|
|
+ width: 100%;
|
|
|
+ height: calc(100% - 30px);
|
|
|
+ color: #fff;
|
|
|
+ letter-spacing: 1px;
|
|
|
+ font-size: 14px;
|
|
|
+ }
|
|
|
+
|
|
|
+ > .count {
|
|
|
+ position: absolute;
|
|
|
+ right: 16px;
|
|
|
+ bottom: 9px;
|
|
|
+ font-size: 14px;
|
|
|
+ color: rgba(255, 255, 255, 0.2);
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ > .switcher-wrap {
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ justify-content: space-between;
|
|
|
+ margin-top: 16px;
|
|
|
+ .remark {
|
|
|
+ margin-top: initial;
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ > .add-btn {
|
|
|
+ margin-top: 16px;
|
|
|
+ width: 100%;
|
|
|
+ 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: 100%;
|
|
|
+ height: 40px;
|
|
|
+ background: #1A1B1D;
|
|
|
+ border-radius: 2px;
|
|
|
+ border: 1px solid #404040;
|
|
|
+ color: #fff;
|
|
|
+ text-align: center;
|
|
|
+ font-size: 14px;
|
|
|
+ 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;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ > .change-btn {
|
|
|
+ margin-top: 16px;
|
|
|
+ width: 100%;
|
|
|
+ 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;
|
|
|
+ }
|
|
|
+ }
|
|
|
+}
|
|
|
+</style>
|
任一存