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

<template>
  <div class="fdkkcon">
    <template v-if="fdkkCurrentVersion == 'V3'">
      <iframe
        webkitallowfullscreen="" 
        mozallowfullscreen="" 
        allowfullscreen=""
        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>

    <iframe
      webkitallowfullscreen="" 
	    mozallowfullscreen="" 
	    allowfullscreen=""
      allow="autoplay"
      :key="currentScene.sceneCode"
      class="V4"
      v-else
      id="fdkkifr"
      :src="V4IframeUrl"
      frameborder="0"
    ></iframe>
  </div>
</template>

<script setup>
import { ref, computed, onUnmounted, onMounted, nextTick, unref } from "vue";
import { useStore } from "vuex";
import browser from "@/utils/browser";

import v3mobile from "./v3fdkkmobile/iframe.vue";
import { getApp } from "@/app";
import config from "@/utils/config";

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

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

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

const somedatainfo = ref({});

const embeM = ref(null);

const otherLink = ref(null);

const rnd = ref(null);

const V4IframeUrl = computed(() => {
  const v4Mi = process.env.VUE_APP_DEBBUG_V4_URL;

  if (process.env.VUE_APP_DEBBUG_V4 == 1) {
    return `${v4Mi}/${unref(isMobile) ? "smg" : "spg"}.html?m=${
      unref(currentScene).sceneCode
    }&lang=${unref(lang)}&rnd=${Math.floor(Math.random() * 100000)}`;
  } else {
    return `${unref(isMobile) ? "smg" : "spg"}.html?m=${
      unref(currentScene).sceneCode
    }&lang=${unref(lang)}&rnd=${Math.floor(Math.random() * 100000)}`;
  }
});

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);
    }

    // V4场景本身的背景音乐 (同时可判断场景已经加载完成)
    if (event == "fdkkBgmLink") {
      const url = params.music || "";
      console.log("fdkkBgmLink", url);
      store.dispatch("audio/setLock", false);
      store.dispatch("audio/initV4BGM", url);

      // 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") {
      console.error("toggleBgmStatus", params);
      if (!params.status) {
        store.dispatch("audio/pauseBGM");
      } else {
        setTimeout(() => {
          if (!isPlayTours.value) {
            console.error("toggleBgmStatus-恢复");
            if (store.getters["audio/isHasV4BGM"]) {
              if (!store.getters["audio/isPauseByControl"]) {
                store.dispatch("audio/playBGM", 2);
              }
            } else {
              if (!store.getters["audio/isPauseByControl"]) {
                store.dispatch("audio/playBGM", 0);
              }
            }
          }
        }, 500);
      }
    }

    if (event == "autoPlayBgm") {
      store.dispatch("audio/playBGM", 2);
    }
  }
};

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

onUnmounted(() => {
  window.removeEventListener("message", handleMessage);
  // store.dispatch("audio/destroy");
});

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>