qjkankan_v1.1.1/packages/qjkankan-view/src/components/UIGather/control.vue

<template>
  <ul class="control"  v-show="fdkkCurrentVersion == 'v4'">

    <!-- 自定义链接 -->
    <li @click="onLink" v-if="customLink && customLink.isShow">
      <img :src="require(`@/assets/images/icon/link@2x.png`)" alt="" />
    </li>

    <!-- 联系电话 -->
    <li @click="onTelephone" v-if="customTelephone && customTelephone.isShow">
      <img :src="require(`@/assets/images/icon/telephone@2x.png`)" alt="" />
    </li>

    <!-- 简介 -->
    <li @click="onIntroduce" v-if="metadata.description">
      <img :src="require(`@/assets/images/icon/text@2x.png`)" alt="" />
    </li>

    <!-- 背景音乐 -->
    <li @click="onIsBGM" v-if="metadata.backgroundMusic && metadata.backgroundMusic.id">
      <img :src="require(`@/assets/images/icon/${showMusicPlaying ? 'music@2x.png' : 'music_disabled@2x.png'}`)" alt="" />
    </li>

    <!-- 解说音频 -->
    <li @click="onIsCommentary" v-if="currentScene.explanation && currentScene.explanation.audioUrl">
      <img
        :src="require(`@/assets/images/icon/${showCommentaryPlaying ? 'commentary@2x.png' : 'commentary_disabled@2x.png'}`)"
        alt="" />
    </li>

    <li @click="onIsAutoRotate" v-if="currentScene.type != '4dkk'">
      <img :src="require(`@/assets/images/icon/${isAutoRotate ? 'rotation@2x.png' : 'rotation_disabled@2x.png'}`)"
        alt="" />
    </li>

    <li @click="onVR" v-if="currentScene.type != '4dkk'">
      <img :src="require(`@/assets/images/icon/vr@2x.png`)" alt="" />
    </li>

    <li @click="onShare">
      <img :src="require(`@/assets/images/icon/share@2x.png`)" alt="" />
    </li>

    <li @click="onFullScreen">
      <img :src="require(`@/assets/images/icon/${'fullscreen@2x.png'}`)" alt="" />
    </li>

  </ul>

  <teleport to='body'>
    <introduce v-if="showIntroduce" />
    <telephone v-if="showTelephone" />
    <clink v-if="showLink" />
  </teleport>
</template>

<script setup>
import { ref, watch, computed, onMounted, watchEffect, nextTick } from "vue";
import { useStore } from "vuex";
import { useApp } from "@/app";

import introduce from "./control/text";
import telephone from "./control/telephone";
import clink from "./control/link";
import { useMusicPlayer, useSoundPlayer } from '@/utils/sound'


//背景音乐
const musicPlayer = useMusicPlayer()

//解说音乐
const soundPlayer = useSoundPlayer()

const store = useStore();

const metadata = computed(() => store.getters["scene/metadata"]);
const fdkkCurrentVersion = computed(() => store.getters["scene/fdkkCurrentVersion"]);


const isAutoRotate = computed(() => store.getters["functions/isAutoRotate"]);

const showMusicPlaying = ref(false)
const showCommentaryPlaying = ref(false)

// const isCommentary = computed(() => store.getters["functions/isCommentary"]);

const currentScene = computed(() => store.getters["scene/currentScene"]);

const customTelephone = computed(() => store.getters["scene/customTelephone"]);

const customLink = computed(() => store.getters["scene/customLink"]);

const fdkkmetadata = computed(() => store.getters["fdkk/metadata"]);


watchEffect(() => {
  if (currentScene.value.explanation) {
    let { audioUrl, openByDefault, repeat } = currentScene.value.explanation
    if (audioUrl) {
      store.commit("functions/setCommentaryUrl", {
        src: audioUrl,
        loop: repeat,
        openByDefault: openByDefault
      });


      useSoundPlayer.player.isLock = false
      useSoundPlayer.player.watchPlay()
    } else {
      store.commit("functions/setCommentaryUrl", '');
      useSoundPlayer.player.isLock = true
      soundPlayer.pause()
    }
  } else {
    store.commit("functions/setCommentaryUrl", '');
    useSoundPlayer.player.isLock = true
    soundPlayer.pause()
  }


})


const showIntroduce = computed(() => store.getters["functions/showIntroduce"]);
const showTelephone = computed(() => store.getters["functions/showTelephone"]);
const showLink = computed(() => store.getters["functions/showLink"]);

const isFullscreen = ref(false)

const onIntroduce = () => {
  store.commit("functions/setShowIntroduce", true);
}


const onTelephone = () => {
  store.commit("functions/setShowTelephone", true);
}


const onLink = () => {
  store.commit("functions/setShowLink", true);
}

const onIsBGM = () => {
  showMusicPlaying.value ? musicPlayer.pause() : musicPlayer.play()
}

const onIsAutoRotate = (data) => {
  store.commit("functions/setAutoRotate", !isAutoRotate.value);
};


const onIsCommentary = (data) => {
  showCommentaryPlaying.value ? soundPlayer.pause() : soundPlayer.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;
}

const onVR = (data) => {
  useApp().then((app) => {
    app.krpanoDom.call("webvr.enterVR()")
  });
};

const onShare = () => {
  store.commit("functions/setShareUrl", true);
};

const staticList = ref([
  {
    id: "cruise",
    name: "巡游开关",
    icon: "rotation@2x.png",
    icondisabled: "rotation_disabled@2x.png",
  },
  {
    id: "vr",
    name: "VR",
    icon: "vr@2x.png",
  },
  {
    id: "share",
    name: "分享",
    icon: "share@2x.png",
  },
  {
    id: "full",
    name: "全屏",
    icon: "fullscreen@2x.png",
    icondisabled: "rotation_disabled@2x.png",
  },
]);


onMounted(() => {
  let events = ['fullscreenchange', 'webkitfullscreenchange', 'mozfullscreenchange', 'MSFullscreenChange']
  events.forEach((item, index) => {
    window.addEventListener(item, () => {
      isFullscreen.value = !isFullscreen.value
    })
  })
})

watch(() => [showCommentaryPlaying.value, showMusicPlaying.value], () => {
  if (!showCommentaryPlaying.value && !showMusicPlaying.value) {
    store.commit("functions/setCurrentPlaying", '');
  } else {
    if (showCommentaryPlaying.value) {
      store.commit("functions/setCurrentPlaying", 'commentary');
    } else if (showMusicPlaying.value) {
      store.commit("functions/setCurrentPlaying", 'bgm');
    }
  }
})

musicPlayer.on('play', () => {
  soundPlayer.pause()
  showMusicPlaying.value = true
})
musicPlayer.on('pause', () => {
  showMusicPlaying.value = false
})

soundPlayer.on('play', () => {
  musicPlayer.pause()
  showCommentaryPlaying.value = true
  //设置当前播放中音乐来源
  if (!musicPlayer.pauseFromOther) {
    musicPlayer.pauseFromOther = true
  }

})
soundPlayer.on('pause', () => {
  showCommentaryPlaying.value = false
})

</script>

<style lang="scss" scoped>
.control {
  position: absolute;
  right: 20px;
  bottom: 8px;
  display: flex;
  z-index: 9;

  >li {
    width: 26px;
    height: 26px;
    margin: 0 10px;
    cursor: pointer;

    >img {
      width: 100%;
      height: 100%;
    }

  }
}
</style>