new_era/src/pages/mobilescene/index.vue

<template>
  <div :class="`theme${theme}`" id="scenebody" class="scene-body">
    <div class="scene-con">
      <scene :tourStatus="tourStatus" />

      <template v-if="!g_isLandscape">
        <div v-if="showViewMode && !tourStatus">
          <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/icon/floor_active.png')" alt="" />
                <span>平面</span>
              </div>
              <div :class="{ active: mode === 'dollhouse' }" @click="changeMode('dollhouse', $event)">
                <img :src="require('@/assets/images/proj2022/icon/dollhouse.png')" alt="" />
                <span>三维</span>
              </div>
            </div>
          </div>
        </div>

        <div v-show="!showViewMode && !tourStatus">
          <!-- <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" @play="startTour" /> -->
          <vsearch :currentPanoid="currentPanoid" @closeSearch="closeSearch" v-if="showSearch" />

          <div v-if="isClear" @click.stop="clicktoClear" class="isClear">
            <img :src="require('@/assets/images/proj2022/icon/clear_active.png')" alt="" />
            <span>恢复</span>
          </div>
        </div>
        <roundMenu
          @resetCurrentTheme="currentTheme = ''"
          @toggleBirdView="(data) => (showBirdview = data)"
          :currentZhanqu="currentZhanqu"
          :currentTheme="currentTheme"
          :class="!showViewMode && !tourStatus && !isClear ? 'ronundShow' : 'ronundHide'"
          @showSearch="showSearch = true"
          @play="startTour"
        />
      </template>
    </div>

    <birdview @close="showBirdview = false" v-if="showBirdview" />

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

    <vhotspot v-if="hotspot" @close="hotspot = ''" :hotspot="hotspot" />
  </div>
</template>

<script>
import birdview from "./birdview/index.vue";

import vsearch from "./search";

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

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

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

let all_booth = [];
Booth.forEach((item) => {
  all_booth = all_booth.concat(item.company);
});

export default {
  components: {
    scene,
    vsearch,
    vhotspot,
    birdview,
    qrcode,
    vpopup: popup,
    vcontent: content,
    roundMenu,
  },
  computed: {
    currentItem() {
      return this.themes.find((item) => item.id == this.theme);
    },
    currentPano() {
      return all_booth.find((item) => item.panoId == this.currentPanoid) || {};
    },
  },
  data() {
    return {
      currentZhanqu: "",
      showBirdview: true,
      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",
      isClear: false,
    };
  },

  watch: {
    showBirdview: {
      deep: true,
      immediate: true,
      handler: function(newVal) {
        this.$bus.$emit("noMode", newVal);
      },
    },
    g_isLandscape: {
      immediate: true,
      handler: function(newVal) {
        newVal ? this.$showOrientationtip({ isLandscape: false, isTip: true }) : this.$hideOrientationtip();
      },
    },
    currentTheme(newVal) {
      if (newVal) {
        let tt = this.currentPanoid;
        this.currentPanoid = "";
        this.$router.push({ params: { type: newVal.id, isjump: "none" } });
        setTimeout(() => {
          this.currentPanoid = tt;
        });
      }
    },
    isClear(newVal) {
      document.querySelector("#ifr").contentWindow.postMessage(
        {
          source: "toggleClear",
          data: newVal,
        },
        "*"
      );
    },
  },

  mounted() {
    this.$showLoading();
    this.$nextTick(() => {
      this.$bus.$on("resetCurrentTheme", () => {
        this.currentTheme = "";
      });
      $("#scenebody")
        .off("touchstart")
        .on("touchstart", () => {
          window.goldlog.record("/spec.1.1", "", "snsScene=m_page3&product=mobh5&pagename=中国网络文明建设成果展云展示", "");
        });
      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;
      });

      this.$bus.$on("toggleClear", (data) => {
        this.isClear = data;
      });

      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;
              }
            });
            this.currentZhanqu = "";
            this.currentZhanqu = all_booth.find((item) => {
              if (item.containPanos.indexOf(this.currentPanoid) > -1) {
                return item;
              }
            });

            this.currentZhanqu &&
              window.goldlog.record(
                `/m_area${this.currentZhanqu.id}`,
                "",
                `snsScene=m_area${this.currentZhanqu.id}&product=mobh5&pagename=中国网络文明建设成果展云展示`,
                ""
              );
          }

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

  methods: {
    clicktoClear() {
      this.isClear = false;
    },
    startTour() {
      this.$bus.$emit("ifrMessage", {
        events: "toggleTour",
        data: "startAndPlay",
      });
    },
    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;
      console.log(data,'opencp')
      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%;
    .isClear {
      position: absolute;
      left: 20px;
      bottom: 20px;
      z-index: 99;
      width: 50px;
      cursor: pointer;
      display: flex;
      flex-direction: column;
      justify-content: center;
      text-align: center;
      > img {
        width: 50px;
        height: 50px;
      }
    }
  }
  .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: 20px;
      right: 20px;
      width: 16px;
      cursor: pointer;
      z-index: 1000;
    }
  }
  .logincon {
    position: fixed;
    z-index: 99999;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    > iframe {
      width: 100%;
      height: 100%;
      position: relative;
      z-index: 999900;
    }
    .close {
      display: inline-block;
      position: absolute;
      right: 16px;
      top: 16px;
      z-index: 999999;
      width: 16px;
    }
  }
  .btn-tips {
    position: fixed;
    z-index: 999999;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    background-color: rgba(0, 0, 0, 0.5);
    > img {
      position: absolute;
      width: 34%;
      bottom: 175px;
      right: 40px;
      max-width: 120px;
    }
  }
}

.ronundShow {
  opacity: 1;
  pointer-events: auto;
  transition: ease all 0.5s;
}

.ronundHide {
  transition: ease all 0.5s;
  opacity: 0;
  pointer-events: none !important;
}
</style>