ZhongMianAdmin/packages/app-cdfg/src/components/Controls/RightButtons.vue

<template>
    <div class="controls-right-buttons" v-if="mode == 'panorama'" :class="{ 'is-edit': isEdit, disabled: flying || isPlay }">
        <div :class="{ hiding: !controls.showVR }" @click="onHandler('vr')" v-show="router.name == 'settings' || isMobile">
            <ui-icon type="vr" :tip="$t('mode.vr')" tipV="top"></ui-icon>
            <p class="mobile-text">VR</p>
            <!-- <i class="iconfont icon-vr"></i> -->
            <span @click="onSetControls('showVR')" :class="{ hide: !controls.showVR }">
                <i class="iconfont icon-eye-s"></i>
            </span>
        </div>
        <!-- 
        <div>
            <i class="iconfont icon-rule"></i>
            <span @click="onSetControls('showRule')" :class="{ disable: !controls.showRule }">
                <i class="iconfont icon-eye-s"></i>
            </span>
        </div> -->

        <div class="music-icon" v-if="showMusic && !isEdit" @click="onHandler('music')" v-show="router.name == 'info' || isMobile">
            <!-- <i class="iconfont icon-music"></i> -->
            <ui-icon type="music" :class="{ playing: showMusicPlaying }" :tip="showMusicPlaying ? '' : $t('mode.music')" tipV="top"></ui-icon>
            <p class="mobile-text">{{ $t('mode.music') }}</p>
        </div>
    </div>
</template>
<script setup>
import { computed, ref, defineProps } from 'vue'
import { useStore } from 'vuex'
import { useMusicPlayer } from '@/utils/sound'
import { getApp, getNum } from '@/app'
import { useI18n } from '@/i18n'
const { t } = useI18n({ useScope: 'global' })
const isMobile = computed(() => store.getters['mobile'])
const mode = computed(() => store.getters['mode'])
const musicPlayer = useMusicPlayer()

import { Dialog } from '@kankan/components'

const props = defineProps({
    isEdit: Boolean,
})
const store = useStore()
const router = computed(() => store.getters.router)
const controls = computed(() => store.getters['settings/controls'])
const showMusic = computed(() => store.getters['info/musicURL'])
const isPlay = computed(() => store.getters['tour/isPlay'])
const flying = computed(() => store.getters['flying'])
const showMusicPlaying = ref(false)

const onSetControls = name => {
    let msg = ''
    if (name == 'showVR') {
        msg = t('mode.vr')
    }

    if (controls.value[name]) {
        Dialog.toast(msg + t('common.isClose'))
    } else {
        Dialog.toast(msg + t('common.isOpen'))
    }
    store.commit('settings/controls', name)
}

const onHandler = name => {
    if (props.isEdit) {
        return
    }
    if (name == 'vr') {
        Dialog.toast(t('limit.viewInVr'))
    } else if (name == 'music') {
        showMusicPlaying.value ? musicPlayer.pause() : musicPlayer.play()
    }
}

musicPlayer.on('play', () => (showMusicPlaying.value = true))
musicPlayer.on('pause', () => (showMusicPlaying.value = false))
</script>
<style lang="scss" scoped>
.controls-right-buttons {
    pointer-events: all;
    display: flex;
    margin-right: 20px;
    margin-bottom: 20px;
    &.is-edit {
        > div {
            cursor: default;
            span {
                display: flex;
            }
        }
        .hiding {
            display: flex;
        }
    }
    > div {
        position: relative;
        cursor: pointer;
        margin-left: 10px;
        display: flex;
        align-items: center;
        justify-content: center;
        width: 34px;
        height: 34px;
        background-color: rgba(0, 0, 0, 0.3);
        border-radius: 50%;
        pointer-events: all;
        &.music-icon {
        }
        .mobile-text {
            display: none;
        }
        > i {
            font-size: 18px;
            display: block;
        }
        span {
            cursor: pointer;
            display: none;
            position: absolute;
            top: -14px;
            right: -8px;
            width: 24px;
            height: 24px;
            background-color: rgba(0, 0, 0, 0.5);
            border-radius: 50%;
            align-items: center;
            justify-content: center;
            color: var(--editor-main-color);
            transition: all 0.1s;

            &:hover {
                transform: scale(1.2);
            }
            &.disable {
                i {
                    opacity: 0.5;
                }
            }
        }
    }
    .hide {
        color: #999;
    }
    .hiding {
        display: none;
    }
}
.playing {
    animation: spinner 4s linear infinite;
}
@keyframes spinner {
    0% {
        transform: rotate(0);
        transform-origin: center center;
    }

    to {
        transform: rotate(1turn);
        transform-origin: center center;
    }
}

[is-mobile] {
    .controls-right-buttons {
        flex-direction: column;
        bottom: 2.96rem;
        left: 0.28rem;
        margin-right: 0px;
        margin-bottom: 0px;
        position: absolute;
        padding: 0.2667rem 0.2667rem 0;
        > div {
            background: transparent;
            width: auto;
            height: auto;
            display: block;
            // margin: 0 0 0.4667rem;
            margin: 0 0 1rem;
            &.music-icon {
                // display: none;
            }
            > .iconfont {
                font-size: 0.64rem;
                display: inline-block;
            }
            .mobile-text {
                display: block;
                text-align: center;
                margin-top: 0.2667rem;
                font-size: 0.32rem;
                font-weight: 500;
                color: #fff;
                position: absolute;
                left: 50%;
                transform: translateX(-50%);
                bottom: -90%;
                white-space: nowrap;
            }
        }
    }
}
</style>