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

<template>
  <div class="ifrcon">
    <vvheader
      :somedatainfo="somedatainfo"
      :bgmstatus="bgmstatus"
      :params="params"
      class="hhh"
    />
    <iframe
      allow="autoplay"
      allowfullscreen="true"
      ref="iframe"
      id="showifr"
      :src="url"
      frameborder="0"
      @load="onIframLoad"
    ></iframe>
  </div>
</template>

<script>
import browser from "@/utils/browser";
import vvheader from "./vheader.vue";
import { useStore } from "vuex";
import { getApp } from "@/app";

export default {
  props: ["url", "bgmUrl", "somedatainfo"],
  components: { vvheader },
  data() {
    return {
      store: useStore(),
      params: "",
      bgmstatus: false,
    };
  },
  computed: {
    tempBgm() {
      return this.bgmUrl;
    },
  },
  methods: {
    onIframLoad() {
      window.onmessage = (e) => {
        if (e.data.source != "4dage") {
          return;
        }
        console.log(e.data, "e.data.params");

        getApp().Scene.emit("ready");

        if (e.data.event == "guide-stop") {
          this.store.commit("fdkk/setV3ToursStatus", false);
        }

        if (e.data.event == "guide-rooms") {
          this.store.commit("fdkk/setToursList", e.data.params);
        }

        if (e.data.event == "link-click") {
          if (
            e.data.params.url.indexOf(
              `https://${window.location.hostname}/spc.html?`
            ) > -1 ||
            e.data.params.url.indexOf(
              `https://${window.location.hostname}/smobile.html?`
            ) > -1
          ) {
            let m = browser.urlHasValueFromUrl("m", e.data.params.url);
            this.$emit("changeUrl", m);
          } else {
            this.$emit("otherUrl", e.data.params.url);
          }
        }

        if (e.data.event == "action") {
          // this.$bus.emit("currentMode", e.data.params);

          if (e.data.params.type == "playMusic") {
            this.bgmstatus = e.data.params.data.status;
            // this.store.dispatch('audio/initV3BGM',this.bgmstatus);
            console.log("V3-BGM-status", this.bgmstatus);
            this.store.dispatch(
              "audio/updateV3BGMStatus",
              e.data.params.data.status
            );
            // this.store.commit('fdkk/setV3BGMStatus', e.data.params.data.status)
          }

          if (e.data.params.type == "mode") {
            if (e.data.params.data.mode != "pano") {
              this.store.commit("functions/setShowScenesList", false);
            }
          }
          // store.commit('fdkk/setIsPlayTours', params.isPlay)
        }

        // if (e.data.event == "settings") {
        //   this.store.commit('fdkk/setV3BGMStatus', e.data.params.status)
        // }

        if (e.data.event == "loaded") {
          console.log(e.data.params, "e.data.params");
          this.params = e.data.params;
          this.$refs.iframe.contentWindow.postMessage(
            {
              source: "mingyuan",
              event: "guide-rooms",
            },
            "*"
          );

          this.$refs.iframe.contentWindow.postMessage(
            {
              source: "mingyuan",
              event: "settings",
              params: {
                playMusic: true,
              },
            },
            "*"
          );
        }
      };
    },
    handleBGM(status) {
      this.$refs.iframe.contentWindow.postMessage(
        {
          source: "mingyuan",
          event: "settings",
          params: {
            playMusic: status,
          },
        },
        "*"
      );
    },
  },
};
</script>

<style lang="scss" scoped>
.ifrcon {
  width: 100%;
  height: 100%;
  position: relative;

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

  .hhh {
    position: absolute;
    left: 50%;
    transform: translate(-50%);
    z-index: 999;
    top: 10px;
  }
}
</style>