qjkankan_v1.1.1/packages/qjkankan-view/src/components/Fdkk/index.vue

<template>
  <div class="fdkkcon">
    <template v-if="fdkkCurrentVersion == 'v3'">
      <iframe allowfullscreen="true" allow="autoplay" :key="currentScene.sceneCode" v-if="!isMobile" id="fdkkifr"
        :src="`/spc.html?m=${currentScene.sceneCode}&lang=${lang}`" frameborder="0"></iframe>
      <!-- <iframe :key="currentScene.sceneCode" v-if="!isMobile" id="fdkkifr" :src="`https://test.4dkankan.com/spc.html?m=${currentScene.sceneCode}`" -->

      <!-- v3场景移动端，用embed.html定制开发 -->
      <v3mobile v-else @changeUrl="handleChange" @otherUrl="handleOther" :somedatainfo="somedatainfo"
        :key="embeM || currentScene.sceneCode"
        :url="otherLink ? otherLink : `/embed.html?from=mingyuan&m=${embeM || currentScene.sceneCode}&lang=${lang}&scene-link=1&rnd=${rnd}`" />
    </template>
    <!-- :url="otherLink ? otherLink : `https://test.4dkankan.com/embed.html?from=mingyuan&m=${embeM || currentScene.sceneCode}&lang=zh&scene-link=1&rnd=${rnd}`" /> -->


    <iframe allowfullscreen="true" allow="autoplay" :key="currentScene.sceneCode" v-else id="fdkkifr"
      :src="`${isMobile ? 'smg' : 'spg'}.html?m=${currentScene.sceneCode}&lang=${lang}`"
      frameborder="0"></iframe>
    <!-- :src="`http://192.168.20.66:8080/${isMobile ? 'smg' : 'spg'}.html?m=${currentScene.sceneCode}`" -->


    <!-- <iframe id="fdkkifr" :src="`${isMobile?'smg':'spg'}.html?m=${currentScene.sceneCode}`" frameborder="0"></iframe> -->
  </div>
</template>

<script setup>
import { ref, watch, computed, onUnmounted, onMounted, nextTick } from "vue";
import { useStore } from "vuex";
import browser from "@/utils/browser";
import { useMusicPlayer } from '@/utils/sound'
import v3mobile from "./v3fdkkmobile/iframe.vue";
import { getApp } from '@/app'
import config from "@/utils/config";


const musicPlayer = useMusicPlayer()

const store = useStore();
const isMobile = computed(() => browser.isMobile());

const lang = computed(() => config.lang);

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

const somedatainfo = ref({})

const embeM = ref(null)

const otherLink = ref(null)

const rnd = ref(null)


const handleMessage = (res) => {
  if (Object.prototype.toString.call(res.data) == '[object Object]') {
    if (res.data.source !== 'qjkankan') {
      return
    }

    let { event, params } = res.data

    //导览片段
    if (event == "toursList") {
      store.commit('fdkk/setToursList', params.tours)
    }

    //是否导览中
    if (event == "isPlayTours") {
      store.commit('fdkk/setIsPlayTours', params.isPlay)
    }

    // 是否flying
    if (event == "isFlying") {
      store.commit('fdkk/setIsFlying', params.isFlying)
    }

    if (event == "setMode") {
      store.commit('fdkk/setMode', params.mode)
    }


    if (event == "setVR") {
      store.commit("functions/setVrStatus", params.status);
    }

    //场景本身的背景音乐 (同时可判断场景已经加载完成)
    if (event == "fdkkBgmLink") {
      store.commit('fdkk/setFdkkBGM', params.music)
      if (params.music) {
        // console.log(useMusicPlayer.player,'useMusicPlayer.player');
        if (isMobile.value) {
          useMusicPlayer.player.watchPlay()
          if (useMusicPlayer.player.isPlay) {
            setTimeout(() => {
              musicPlayer.play()
            }, 50);
          }
        } else {
          useMusicPlayer.player.watchPlay(true)
        }
      }
      //如果无场景音乐，则重置为作品本身音乐
      else {
        if (store.getters['scene/musicURL']) {
          if (isMobile.value) {
            useMusicPlayer.player.watchPlay()
            if (useMusicPlayer.player.isPlay) {
              setTimeout(() => {
                musicPlayer.play()
              }, 50);
            }
          } else {
            useMusicPlayer.player.watchPlay(true)
          }
        }
      }

      // loading完毕
      getApp().Scene.emit("ready")

    }

    if (event == "fdkkMetadata") {
      store.commit('fdkk/setMetadata', params.metadata)
    }


    if (event == "toggleFdkkHotspot") {
      if (params.status == 'open') {
        store.commit("functions/setShowScenesList", false);
        store.commit('fdkk/setShowToursList', false)
      }
    }

    if (event == "toggleBgmStatus") {
      if (params.status) {
        musicPlayer.resume()
      } else {
        musicPlayer.pause(true)
      }
    }

    if (event == "autoPlayBgm") {
      // useMusicPlayer.player.watchPlay(true)
      if (!useMusicPlayer.player.isPlay && !musicPlayer.pauseFromOther) {
        musicPlayer.pauseFromOther = true
        setTimeout(() => {
          musicPlayer.play()
        }, 50);
      }
    }


  }
}

onMounted(() => {
  nextTick(() => {
    window.removeEventListener('message', handleMessage)
    window.addEventListener('message', handleMessage)
  })

})

onUnmounted(() => {
  window.removeEventListener('message', handleMessage)
})

const handleOther = (data) => {
  otherLink.value = data;
  rnd.value = Math.random();
}
const handleChange = (data) => {
  embeM.value = data;
  rnd.value = Math.random();
}


</script>

<style lang="scss" scoped>
.fdkkcon {
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;

  >iframe {
    width: 100%;
    height: 100%;
  }
}
</style>