shuangchuangzhou_2022/src/pages/mobilescene/index.vue

<template>
  <div :class="`theme${theme}`" class="scene-body">
    <div class="logo" v-if="!showViewMode">
      <img @click="$router.push({ path: '/' })" :src="require(`@/assets/images/proj2022/pc/logo.png`)" alt="" />
    </div>
    <div class="scene-con">
      <scene :tourStatus="tourStatus" />

      <div v-if="showViewMode">
        <div :class="{ disabled: flying }" class="tab-layer">
          <div class="tabs">
            <div :class="{ active: mode === 'floorplan' }" @click="changeMode('floorplan', $event)">
              <img :src="require('@/assets/images/proj2022/mobile/floor@2x.png')" alt="" />
              <span>平面</span>
            </div>
            <div :class="{ active: mode === 'dollhouse' }" @click="changeMode('dollhouse', $event)">
              <img :src="require('@/assets/images/proj2022/mobile/dollhouse@2x.png')" alt="" />
              <span>三维</span>
            </div>
            <div :class="{ active: mode === 'birdview' }" @click="changeMode('birdview', $event)">
              <img :src="require('@/assets/images/proj2022/mobile/bird view@2x.png')" alt="" />
              <span>鸟瞰</span>
            </div>
          </div>
        </div>
      </div>

      <template v-else>
        <vside :isShow="!tourStatus && showAside" @close="showAside = false" />
        <zhanxiang @showSearch="showSearch = true" v-if="isShowZL" @close="isShowZL = false" :tourStatus="tourStatus" />
        <rmenu :currentPanoid="currentPanoid" :isShowfunc="isShowfunc" :menuType="menuType" :tourStatus="tourStatus" @opencp="handlecp" />
        <vmenu :tourStatus="tourStatus" @opencp="handlecp" />
        <vsearch :currentPanoid="currentPanoid" @closeSearch="closeSearch" v-if="showSearch" />
      </template>
    </div>

    <birdview :hideClose="true" @close="mode='',showViewMode=false" v-if="mode=='birdview'"/>

    <vhotspot v-if="hotspot" @close="hotspot = ''" :hotspot="hotspot" />
    <vpopup v-if="showpopup && cp" v-clickoutside="handleoutside">
      <div slot="vcon" class="popcon">
        <component :is="cp" :currentPano="currentPano" :currentItem="currentItem"> </component>
        <img @click="(showpopup = false), (cp = '')" class="close" :src="require('@/assets/images/project/icon/close.png')" alt="" />
      </div>
    </vpopup>

    <div class="logincon" v-if="loginUrl">
      <img class="close" @click="loginUrl = ''" :src="require('@/assets/images/mobile/icon/close_b.png')" alt="" />
      <iframe :src="loginUrl" frameborder="0"></iframe>
    </div>
  </div>
</template>

<script>
import aside from "./aside.vue";
import vbar from "./bar.vue";
import menu from "./menu.vue";
import rmenu from "./raside/menu.vue";
import zhanxiang from "./zhanxiang/index.vue";

import birdview from "./birdview/index.vue";


import popup from "./popup.vue";
import vsearch from "./search";
import vmap from "./map";

import daka from "./components/daka.vue";
import content from "./components/content.vue";
import qrcode from "./components/qrcode.vue";

import scene from "./scene.vue";
import vhotspot from "@/components/hotspot/index.vue";

import { region, Booth } from "@/data/raw.js";

export default {
  components: {
    vside: aside,
    vmenu: menu,
    rmenu: rmenu,
    zhanxiang,
    vpopup: popup,
    daka,
    qrcode,
    vcontent: content,
    scene,
    vsearch,
    vhotspot,
    vbar,
    vmap,
    birdview
  },
  computed: {
    currentItem() {
      return this.themes.find((item) => item.id == this.theme);
    },
    currentPano() {
      return Booth.find((item) => item.panoId == this.currentPanoid) || {};
    },
  },
  data() {
    return {
      menuType: "func",
      isShowfunc: false,
      showpopup: false,
      showAside: false,
      showSearch: false,
      isShowZL: false,
      cp: "",
      tourStatus: false,
      showAll: false,
      currentPanoid: "",
      isFull: false,
      hotspots: [],
      hotspot: "",
      loginUrl: "",
      currentTheme: "",
      booth: Booth,
      showViewMode: false,
      flying:false,
      mode:'floorplan'
    };
  },

  watch: {
    currentTheme(newVal) {
      if (newVal) {
        let tt = this.currentPanoid;
        this.currentPanoid = "";
        this.$router.push({ params: { type: newVal.id, isjump: "none" } });
        setTimeout(() => {
          this.currentPanoid = tt;
        });
      }
    },
  },

  mounted() {
    this.$showLoading();
    this.$nextTick(() => {
      this.$bus.$on("mblogin", (data) => {
        this.loginUrl = data;
      });

      this.$bus.$on("emitShowZX", (data) => {
        this.isShowZL = data;
      });

      this.$bus.$on("changeMenu", (data) => {
        this.menuType = data;
      });

      this.$bus.$on("changeShowfunc", (data) => {
        this.isShowfunc = data;
      });

      this.$bus.$on("opencp", (data) => {
        this.handlecp(data);
        this.isShowZL = false;
      });
      window.addEventListener("message", (res) => {
        if (Object.prototype.toString.call(res.data) == "[object Object]") {
          let data = res.data.data;
          if (res.data.source === "showAll") {
            setTimeout(() => {
              this.$hideLoading();
            });
          }

          if (res.data.source === "onplayStatus") {
            console.log("onplayStatus");
            this.tourStatus = data.tourIsPlaying;
          }

          if (res.data.source === "pano.chosen") {
            console.log("pano.chosen");
            window.g_lock = true;
          }

          if (res.data.source === "tour.end") {
            window.g_lock = false;
          }

          if (res.data.source === "warp.interrupted") {
            console.log("warp.interrupted");
            window.g_lock = false;
          }

          if (res.data.source === "mode.changed") {
            console.log("mode.changed", data);
            if (data == "floorplan" || data == "dollhouse") {
              this.showViewMode = true;
              this.flying = false;
              this.mode = data
              document.querySelector("#ifr").contentWindow.postMessage(
                {
                  source: "toggleClear",
                  data: this.showViewMode,
                },
                "*"
              );
            } else if (data == "panorama") {
              this.showViewMode = false;
              this.flying = false;
              document.querySelector("#ifr").contentWindow.postMessage(
                {
                  source: "toggleClear",
                  data: this.showViewMode,
                },
                "*"
              );
            } else if (data == "transitioning") {
              this.flying = true;
            }
          }

          if (res.data.source === "flying.ended") {
            console.log("flying.ended");
            this.currentPanoid = data;
            this.currentTheme = region.find((item) => {
              if (item.spread.indexOf(Number(this.currentPanoid)) > -1) {
                return item;
              }
            });
            setTimeout(() => {
              window.g_lock = false;
            });
          }

          if (res.data.source === "openHotspot") {
            this.hotspot = data;
            this.$bus.$emit("isShowAside", false);
          }
        }
      });
    });
  },

  methods: {
    changeMode(data) {
      this.mode = data
      document.querySelector('#ifr').contentWindow.player.director.changeMode(data);
    },
    closeSearch(data) {
      if (data == "closeAll") {
        this.isShowZL = false;
      }
      this.showSearch = false;
    },
    handlecp(data) {
      this.cp = data;
      this.showpopup = true;
    },
    handleoutside() {
      this.cp = "";
      this.showpopup = false;
    },
  },
};
</script>

<style lang="less" scoped>
.scene-body {
  background-repeat: no-repeat;

  .tab-layer {
    width: 100%;
    text-align: center;
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 10;
    position: fixed;
    left: 50%;
    transform: translateX(-50%);
    top: 30px;
    pointer-events: none;
    .tabs {
      pointer-events: auto;
      position: relative;
      display: flex;
      background: rgba(0, 0, 0, 0.5);
      padding: 2px;
      justify-content: center;
      align-items: center;
      border: 1px solid rgba(255, 255, 255, 0.1);
      border-radius: 6px;
      padding: 0px 2px;
      backdrop-filter: blur(20px);
      >div {
        color: #fff;
        border-radius: 6px;
        font-size: 16px;
        transition: all 0.3s ease;
        display: flex;
        align-items: center;
        z-index: 1;
        margin: 4px;
        padding: 2px 6px 2px 0;
        img {
          width: 30px;
        }
        >span{
          font-size: 14px;
        }

        &.active {
          background: rgba(127, 127, 127, 0.57);
          border-radius: 4px;
        }
      }

    }
  }

  .disabled{
    opacity: 0.5;
    pointer-events: none;
  }

  .scene-con {
    width: 100%;
    height: 100%;
  }
  .logo {
    position: absolute;
    left: 10px;
    top: 8px;
    z-index: 999;
    display: flex;
    align-items: center;
    > img {
      width: 48px;
    }
  }
  .popcon {
    z-index: 9999;
    width: 100%;
    height: 100%;
    .close {
      position: absolute;
      top: 40px;
      right: 20px;
      width: 16px;
      cursor: pointer;
      z-index: 1000;
    }
  }
  .logincon {
    position: fixed;
    z-index: 999999;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    > iframe {
      width: 100%;
      height: 100%;
    }
    .close {
      display: inline-block;
      position: absolute;
      right: 16px;
      top: 16px;
      width: 16px;
    }
  }
}
</style>