daikan-international/src/App.vue

<script setup lang="ts">
import { onMounted, ref, h, computed, unref, watchEffect } from "vue";
import { createApp } from "/@/hooks/userApp";
import tagView from "/@/components/custom/tagView.vue";
import LoadingLogo from "/@/components/basic/loading.vue";
import MiniMap from "/@/components/basic/miniMap.vue";
import FloorplanView from "/@/components/basic/floorplan.vue";
import { useSceneStore } from "/@/store/modules/scene";
import type { FloorsType } from "/@/store/modules/scene";
import { useAppStore } from "./store/modules/app";
import Guideline from "/@/components/basic/guide.vue";
import ChatRoom from "/@/components/chatRoom/index.vue";
import Title from "/@/components/basic/title.vue";
import FloorSwitch from "/@/components/basic/FloorSwitch.vue";
import GuidePanel from "/@/components/custom/panel.vue";
import browser from "/@/utils/browser";
import { useRtcStore } from "./store/modules/rtc";

const sceneStore = useSceneStore();
const appStore = useAppStore();
const rtcStore = useRtcStore();
const dataLoaded = ref(false);
const scene$ = ref<Nullable<HTMLElement>>(null);
const refMiniMap = ref<Nullable<string>>(null);
const flying = computed(() => appStore.flying);
const player = computed(() => appStore.player);
const metadata = computed(() => sceneStore.metadata);
const mode = computed(() => appStore.mode);
const isJoined = computed(() => rtcStore.isJoined);
const isLoaded = computed(() => appStore.isLoaded);
const controls = computed(() => {
  return metadata.value.controls;
});
const floorplanViewShow = computed(() => {
  return (
    Boolean(controls.value.showDollhouse) &&
    Boolean(controls.value.showFloorplan) &&
    mode.value !== "panorama"
  );
});
const show = ref(false);
const isTourMode = computed(() => appStore.isTourMode);

watchEffect(() => {
  console.warn("mode", mode);
});

onMounted(async () => {
  const app = await createApp({
    dom: scene$.value as HTMLElement,
    num: browser.getURLParam("m") || "KK-t-gpAaKxXhE9",
    mobile: true,
  });
  // SDK初始化
  app.use("MinMap", { theme: { camera_fillStyle: "#ED5D18" } });
  app.use("Tag");
  app.use("TourPlayer");

  app.use("TagView", {
    render(data) {
      if (data.media["image"] && data.media["image"].length) {
        return h(tagView, {
          sid: data.sid,
          url: app.resource.getUserResourceURL(data.media["image"][0].src),
          content: data.content,
          title: data.title,
        });
      }
      return `<span class="tag-icon animate" style="display:none"></span>`;
    },
  });
  app.use("TourPlayer");
  app.render();
  // SDK初始化结束

  // SDK global Event start
  app.Scene.on("ready", () => {
    show.value = true;
  });
  app.Scene.on("loaded", (pano) => {
    refMiniMap.value = "[xui_min_map]";
    appStore.setFloorId(pano.floorIndex);

    // store.commit("setFloorId", pano.floorIndex);
    // store.commit("rtc/setShowdaogou", true);

    // if (browser.getURLParam("roomId") && browser.getURLParam("vruserId") && browser.getURLParam("name")) {
    //   store.commit("showShoppingguide", true);
    // }
  });
  app.store.on("metadata", (metadata: KankanMetaDataType) => {
    sceneStore.load(metadata);
    if (!metadata.controls.showMap) {
      app.MinMap.hide(true);
    }
    dataLoaded.value = true;
    appStore.isLoad();
  });
  app.store.on("floorcad", ({ floors }: { floors: FloorsType[] }) => {
    if (floors?.length) {
      sceneStore.loadFloorData(floors);
    }
  });
  app.Camera.on("mode.beforeChange", ({ toMode, floorIndex, fromMode }) => {
    appStore.setMode(toMode);
    if (toMode != "dollhouse") {
      appStore.setFloorId(floorIndex);
    }
    if (fromMode) {
      appStore.setFlying(true);
    }
  });
  app.Camera.on("mode.afterChange", () => {
    appStore.setFlying(false);
  });
  app.Camera.on("flying.started", () => {
    appStore.setFlying(true);
  });
  app.Camera.on("flying.ended", ({ targetPano }) => {
    appStore.setFlying(false);
    appStore.setFloorId(targetPano.id);
  });
});
// SDK global Event end

// method
const changeMode = (name: string) => {
  if (!flying.value) {
    appStore.setMode(name);
  } else {
    appStore.setMode(name);
  }
};
</script>

<template>
  <LoadingLogo :thumb="true" />
  <!-- 引导页 -->
  <Title v-if="!isJoined && isLoaded" />
  <Guideline />
  <div class="ui-view-layout" :class="{ show: show }">
    <div class="scene" ref="scene$"></div>
    <template v-if="dataLoaded">
      <!-- 小地图 start -->
      <MiniMap
        :show="!!unref(refMiniMap) && player.showWidgets"
        :show-dollhouse="Boolean(controls.showDollhouse)"
        :to="refMiniMap"
        @change-mode="changeMode"
      />
      <!-- 小地图 end -->
      <!-- 平面图 start -->
      <FloorplanView
        :show="floorplanViewShow"
        :mode="mode"
        @change-mode="changeMode"
      />
      <!-- 平面图 end -->
      <!-- 聊天 start-->
      <ChatRoom v-if="!isTourMode" />
      <!-- 聊天 end -->
      <!-- 多楼层 start-->
      <FloorSwitch />
      <!-- 多楼层 end -->
      <!-- panel start-->
      <GuidePanel v-if="isTourMode" />
      <!-- panel end -->
    </template>
  </div>
</template>

<style lang="scss">
@import "./app.scss";
</style>