ZhongMianAdmin/packages/app-cdfg/src/views/info/Toolbox.Content.vue

<template>
    <ui-editor-toolbox>
        <ul class="edit-list">
            <li>
                <div class="title">
                    <span>{{ $t('info.toolbox.music') }}</span>
                    <label @click="onUpload">
                        <ui-icon :tip="$t('info.toolbox.uploadMusic')" tipH="right" type="uploading" />
                    </label>
                </div>
                <div>
                    <ui-input type="select" :options="musics" width="100%" :placeholder="$t('common.none')" v-model="music" stop-el="i">
                        <template v-slot:option="{ raw }">
                            <div :class="{ 'music-user': raw.user }">
                                <div>{{ raw.label }}</div>
                                <!-- <div>{{ raw.user ? raw.value : $t(`info.musics.${raw.value}`) }}</div> -->
                                <span v-show="raw.user" @click.stop="onDeleteUpload(raw)"><i class="iconfont icon-del"></i></span>
                            </div>
                        </template>
                    </ui-input>
                </div>
            </li>
            <li>
                <div class="title">
                    <span>{{ $t('info.toolbox.share') }}</span>
                </div>
                <div class="between">
                    <ui-button width="47.5%" ref="copy" :data-clipboard-text="copyLink">{{ $t('info.toolbox.copyLink') }}</ui-button>
                    <ui-button width="47.5%" @click="onDownloadQrCode">{{ $t('info.toolbox.downLoadCode') }}</ui-button>
                </div>
            </li>
            <li>
                <div class="between">
                    <span>{{ $t('info.toolbox.uploadTime') }}</span>
                    <label>{{ metadata.createTime }}</label>
                </div>
                <div class="between">
                    <span>{{ $t('info.toolbox.shootPoint') }}</span>
                    <label>{{ metadata.panoCount || 0 }}</label>
                </div>
                <div class="between">
                    <span>{{ $t('info.toolbox.boxVideo') }}</span>
                    <label>{{ metadata.videoCount || 0 }}</label>
                </div>
            </li>
        </ul>
        <ui-window v-if="showUpload" :title="$t('info.toolbox.addBackgroundMusic')" :canSubmit="file" @no="onCancel" @ok="onConfirm" :noText="$t('common.cancel')" :okText="$t('common.confirm')">
            <template v-slot:content>
                <div class="upload-music-box">
                    <label for="file" :class="{ active: file }">
                        <span v-if="!file">+ {{ $t('info.toolbox.uploadMusic') }}</span>
                        <span v-else>{{ file.name }}</span>
                    </label>
                    <input type="file" accept=".mp3,.wav" id="file" @change="changeFile" />
                    <!-- <p class="tips">{{ $t('info.toolbox.uploadTips') }}</p> -->
                    <p class="tips">{{ $t('limit.formSize', { size: '5MB', form: 'MP3 / WAV' }) }}</p>
                </div>
            </template>
        </ui-window>
    </ui-editor-toolbox>
</template>
<script setup>
import ClipboardJS from 'clipboard'
import { ref, computed, onMounted, nextTick } from 'vue'
import { useStore } from 'vuex'
import { Dialog } from '@kankan/components'
import { downloadFile } from '@/utils/download'
import { getApp, getNum } from '@/app'
import { useMusicPlayer } from '@/utils/sound'
import { useI18n } from '@/i18n'
import * as apis from '@/apis/scene-edit.js'
import browser from '@/utils/browser'

const musicPlayer = useMusicPlayer()
const { t } = useI18n({ useScope: 'global' })
const store = useStore()
const metadata = computed(() => store.getters['info/metadata'])
const music = computed({
    get() {
        if (metadata.value.music) {
            // let item = /^0\d$/.test(metadata.value.music) ? metadata.value.music : metadata.value.music == 'none' || metadata.value.music == '' ? 'none' : metadata.value.musicFile
            let item = /^0\d$/.test(metadata.value.music) ? metadata.value.music : metadata.value.music == 'none' ? 'none' : metadata.value.musicFile
            // let item = /^0\d$/.test(metadata.value.music) ? metadata.value.music : metadata.value.musicFile
            return item
        } else {
            return 'none'
        }
    },
    set(music) {
        store.commit('info/update', { music })
        musicPlayer.play()
    },
})
const musics = computed(() => {
    let list = store.getters['info/music']
    list.map(i => {
        if (i.value == '') {
            i.value = 'none'
        }
        let item = /^0\d$/.test(i.value) ? t(`info.musics.${i.value}`) : i.value == 'none' ? t(`info.musics.${i.value}`) : i.value
        i.label = item
    })
    return list
})
const copy = ref(null)
const file = ref(null)
const showUpload = ref(false)
const copyLink = computed(() => {
    let domain = store.getters['scene/whichDept'] == 'HK' ? process.env.VUE_APP_SHOW_HK_URL : process.env.VUE_APP_SHOW_URL
    return domain + `index.html?m=${browser.getURLParam('m')}`
})

const onUpload = () => {
    if (metadata.value.musicFile) {
        Dialog.confirm({
            content: `${t('info.toolbox.addTips')}`,
            title: t('common.tips'),
            okText: t('common.confirm'),
            noText: t('common.cancel'),
            func: state => {
                if (state == 'ok') {
                    showUpload.value = true
                }
            },
        })
    } else {
        showUpload.value = true
    }
}
const onDeleteUpload = item => {
    // store.commit('info/update', { music: '', musicFile: '', files: { music: null } })
    console.log(item)
    let params = {
        musicFile: '',
        files: { music: null },
    }
    if (metadata.value.music == item.value) {
        params.music = ''
    }
    store.commit('info/update', params)
}
const changeFile = e => {
    console.log(e.target.files[0])
    let fileType = e.target.files[0].name.split('.').pop().toLowerCase()
    console.log(fileType)
    if (['mp3', 'wav'].indexOf(fileType) == -1) {
        Dialog.toast({
            content: `${t('limit.formFile', { form: 'MP3 / WAV' })}`, //'仅支持 MP3/WAV 格式的音频',
            type: 'error',
        })
        return
    }

    if (e.target.files[0].size / 1024 / 1024 > 5) {
        Dialog.toast({
            // content: e.target.files[0].name + '的大小超过了5MB',
            content: `${t('limit.formSize', { form: 'MP3 / WAV', size: '5MB' })}`, //'请上传5MB以内的MP3/WAV文件',
            type: 'error',
        })
        return
    }
    if (e.target && e.target.files[0]) {
        file.value = e.target.files[0]
    }
}
const onCancel = e => {
    showUpload.value = false
    file.value = null
}
const onConfirm = () => {
    store.commit('info/update', { music: file.value.name, musicFile: file.value.name, files: { music: file.value } })
    nextTick(() => {
        musicPlayer.play()
    })
    onCancel()
}
const onDownloadQrCode = () => {
    let a = document.createElement('a')
    let link = `/service/scene/edit/down/qrCode?num=${browser.getURLParam('m')}`
    a.href = link
    a.download = `4DKanKan_share.png`
    a.target = '_blank'
    a.click()
    a.remove()
    // downloadFile(getApp().resource.getResourceURL(`downloads/scene/{num}/QRcode/{num}.png`), `4DKanKan_share.png`)
}

onMounted(() => {
    var clipboard = new ClipboardJS(copy.value.$el)
    clipboard.on('success', function (e) {
        e.clearSelection()
        Dialog.toast({ content: `${t('info.toolbox.copySuccess')}`, type: 'success' })
    })
})
</script>
<style lang="scss" scoped>
.upload-music-box {
    width: 400px;

    input {
        display: none;
    }
    label {
        display: flex;
        align-items: center;
        justify-content: center;
        width: 100%;
        height: 34px;
        border-radius: 4px;
        border: 1px solid rgba(255, 255, 255, 0.2);
        color: rgba(255, 255, 255, 0.6);
        cursor: pointer;
        margin-bottom: 10px;
        &.active {
            background: rgba(255, 255, 255, 0.1);
            color: var(--editor-main-color);
        }
        &:hover {
            border: 1px solid var(--editor-main-color);
            color: var(--editor-main-color);
        }
        span {
            width: 80%;
            text-align: center;
            overflow: hidden;
            white-space: nowrap;
            text-overflow: ellipsis;
        }
    }
    p {
        font-size: 12px;
        font-family: MicrosoftYaHei;
        color: rgba(255, 255, 255, 0.3);
        line-height: 22px;
        text-align: center;
    }
}
.music-user {
    position: relative;
    display: flex;
    align-items: center;
    > div {
        width: 100%;
        padding-right: 35px;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }
    span {
        position: absolute;
        display: block;
        top: 50%;
        right: 0px;
        transform: translateY(-50%);
        cursor: pointer;
    }
}
</style>