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="`https://test.4dkankan.com/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="`http://192.168.0.186:8081/${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) {
        store.dispatch("audio/initV4BGM", params.music);
      }

      // 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>