ggbwy_onlineTour/scene/src/pages/Home.vue

<template>
  <div class="parent-body">
    <!-- 热点 -->
    <!-- <hot/> -->
    <!-- 热点弹出框 -->
    <popup />
    <!-- 加载初始页面 -->
    <div id="gui-thumb"></div>

    <!-- 场景canvs主容器 -->
    <div id="player"></div>

    <!-- 底部菜单 -->
    <div id="gui-parent">
      <!-- 进度条加载 -->
      <gui-loading />
      <div id="hot"></div>

      <!-- 三维 标签 -->
      <div class="widgets-doll-labels"></div>

      <div id="gui" v-show="!loading">
        <!-- 退出VR模式按钮 -->
        <div id="vrOff">
          <img id="vrOffImg" src="images/vrOffImg.png" alt="" />
        </div>

        <!-- 热点列表 -->
        <hotspot-list />

        <!-- 标题 -->
        <v-title />

        <!-- 底部菜单 -->
        <v-menu  :hideTools="hideTools" @toHome="showWelcome = true" />

        <!-- 导览 -->
        <v-guide />

        <!-- logo -->
        <div
          id="myCompany"
          style="
            width: 100%;
            position: absolute;
            bottom: 0px;
            text-align: center;
            font-size: 14px;
            font-family: '微软雅黑';
            font-weight: 580;
            color: rgba(255, 255, 255, 0.8);
          "
        >
          <!-- 四维时代提供技术支持 -->
        </div>
      </div>

      <!-- vr -->
      <web-vr />

      <!-- loading -->
      <div id="gui-spinner">
        <div class="gui-spinner-icon"></div>
      </div>

      <!-- guimsg -->
      <guimsg />

      <!-- 错误提示 -->
      <v-error />

      <vr-con />

      <v-other />

      <welcome @close="hideWelcome" v-if="showWelcome" />

      <div class="loading" v-if="0">
        <span>加载中...</span>
      </div>
    </div>

    <!-- 左上方logo -->
    <!-- <div class="leftTopLogo" v-show="!isMobile">
      <img src="../assets/img/home/logo.png" alt="" />
    </div> -->
  </div>
</template>

<script>
import popup from "@/views/popup";
import guiLoading from "@/views/gui/loading";
import hotspotList from "@/views/gui/hotspotlist";
import vTitle from "@/views/gui/title";
import vMenu from "@/views/gui/menu";
import vGuide from "@/views/gui/guide";
import webVr from "@/views/gui/webvr";
import guimsg from "@/views/gui/guimsg";
import vError from "@/views/gui/error";
import vrCon from "@/views/gui/vrcon";
import vOther from "@/views/gui/other";
import welcome from "@/components/welcome";

import { addVisitAPI } from "../utils/api";

export default {
  name: "Home",
  components: {
    popup,
    guiLoading,
    hotspotList,
    vTitle,
    vMenu,
    vGuide,
    webVr,
    guimsg,
    vError,
    vrCon,
    vOther,
    welcome,
  },

  data() {
    return {
      showWelcome: false,
      hotspots: "",
      loading: true,
      /** 隐藏热点和右侧工具栏 */
      hideTools: false,
    };
  },

  methods: {
    hideWelcome() {
      this.showWelcome = false;
      window.manage.switchBgmState(true);
    },
    getHotSpotList() {
      $.ajax({
        url:
          g_Prefix +
          "data/" +
          window.number +
          "/hot/js/data.js" +
          "?" +
          Math.random(),
        type: "get",
        dataType: "json",
        contentType: "application/json",
        success: (result) => {
          this.hotspots = result;
        },
      });
    },
  },
  mounted() {
    this.$nextTick(() => {
      window.evt = document.createEvent("HTMLEvents");
      window.evt.initEvent("loadfinish", false, false);
      window.addEventListener("loadfinish", () => {
        console.error('loadfinish')
        this.loading = false;
        // document.title = "珠海高新区中共党史学习教育园地线上展厅";
        this.getHotSpotList();
        window.player.on("openTips", () => {
          this.$showTips();
       
        });

        window.player.on("openHotspot", (data) => {
          this.$showHotspot({
            hotspot: this.hotspots[data],
          });
        });
      });
    });
  },
  async created() {
    // 雷锋故居场景需求，会携带 hideCover=1
    this.hideTools = Boolean(Number(this.$route.query.hideCover));
    this.showWelcome = !this.hideTools;

    // 发送访问量
    try {
      await addVisitAPI();
    } catch (e) {
      console.log(e);
    }
  },
};
</script>

<style lang="less" scoped>
.parent-body {
  width: 100%;
  height: 100%;
}

.loading {
  position: fixed;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  z-index: 10000;
  background: #000;
  > span {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    color: #fff;
    font-size: 16px;
    display: inline-block;
  }
}
.leftTopLogo {
  pointer-events: none;
  position: fixed;
  z-index: 11000;
  top: 30px;
  left: 30px;
}

</style>