qjkankan_shibadongcun/packages/qjkankan-kankan-view/src/components/Controls/RightButtons.vue

<template>
    <div class="controls-right-buttons" :class="{ disabled: isPlay }">
        <div @click="onVRClick" v-if="controls.showVR">
            <ui-icon type="vr" :tip="$t('mode.vr')" tipV="top"></ui-icon>
        </div>
        <div :class="{ playing: showMusicPlaying }" v-if="showMusic" @click="onMusicClick">
            <ui-icon type="music" :tip="showMusicPlaying ? '' : $t('mode.music')" tipV="top"></ui-icon>
        </div>
        <div v-if="controls.showRule" class="rule" @click="onRuleClick">
            <ui-icon :tip="$t('mode.rule')" tipV="top" type="show_more_ruler"></ui-icon>
        </div>
        <div @click="onFullScreen">
            <ui-icon :type="isFullscreen ? 'scene_window' : 'full'" :tip="isFullscreen ? $t('mode.exitFullScene') : $t('mode.fullScene')" tipV="top"></ui-icon>
            <!-- <i class="iconfont" :class="isFullscreen ? 'icon-scene_window' : 'icon-full'"></i> -->
        </div>
    </div>
    <teleport to="body">
        <Rules v-if="showRules" @close="closeRules" />
    </teleport>
</template>
<script setup>
import { computed, ref, onMounted } from 'vue'
import { useStore } from 'vuex'
import { useMusicPlayer } from '@/utils/sound'
import { Dialog } from '@/global_components'
import { useApp, getApp, getNum } from '@/app'
import Rules from './rules'
import { useI18n } from '@/i18n'
const { t } = useI18n({ useScope: 'global' })
const store = useStore()
const controls = computed(() => store.getters['scene/metadata'].controls || {})
const showMusic = computed(() => store.getters['scene/metadata'].music)
const showMusicPlaying = ref(false)
const musicPlayer = useMusicPlayer()
const isFullscreen = ref(false)
const showRules = ref(false)
const onVRClick = () => {
    Dialog.toast(t('limit.viewInVr'))
}
const isPlay = computed(() => {
    return store.getters['tour/isPlay']
})
const closeRules = () => {
    showRules.value = false
    getApp().TagManager.cancelMeasure()
    store.commit('SetOptions', { sceneUI: true })
}
const onRuleClick = () => {
    showRules.value = true
    getApp().MinMap.hide()
    getApp().TagManager.startMeasure()
    store.commit('SetOptions', { sceneUI: false })
}
const onMusicClick = () => {
    showMusicPlaying.value ? musicPlayer.pause() : musicPlayer.play()
}
const onFullScreen = () => {
    let element = document.documentElement
    if (isFullscreen.value) {
        if (document.exitFullscreen) {
            document.exitFullscreen()
        } else if (document.webkitCancelFullScreen) {
            document.webkitCancelFullScreen()
        } else if (document.mozCancelFullScreen) {
            document.mozCancelFullScreen()
        } else if (document.msExitFullscreen) {
            document.msExitFullscreen()
        }
    } else {
        if (element.requestFullscreen) {
            element.requestFullscreen()
        } else if (element.webkitRequestFullScreen) {
            element.webkitRequestFullScreen()
        } else if (element.mozRequestFullScreen) {
            element.mozRequestFullScreen()
        } else if (element.msRequestFullscreen) {
            element.msRequestFullscreen()
        }
    }
    // 改变当前全屏状态
    //this.isFullscreen = !this.isFullscreen;
}
onMounted(() => {
    let events = ['fullscreenchange', 'webkitfullscreenchange', 'mozfullscreenchange', 'MSFullscreenChange']
    events.forEach((item, index) => {
        window.addEventListener(item, () => {
            isFullscreen.value = !isFullscreen.value
        })
    })

    useApp().then(app => {
        app.TagManager.on('tagManager.firstMarkTagPosB', () => {
            Dialog.toast(t('toast.clickLeft'))
        })
    })
})
musicPlayer.on('play', () => (showMusicPlaying.value = true))
musicPlayer.on('pause', () => (showMusicPlaying.value = false))
</script>
<style lang="scss" scoped>
.controls-right-buttons {
    display: flex;
    margin-right: 20px;
    margin-bottom: 20px;
    > div {
        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;
        font-size: 18px;
    }
    .playing {
        animation: spinner 4s linear infinite;
    }
}

@keyframes spinner {
    0% {
        transform: rotate(0);
    }

    to {
        transform: rotate(1turn);
    }
}
</style>