store移植

src/App.vue

@@ -6,10 +6,12 @@ import LoadingLogo from "/@/components/basic/loading.vue";
 import MiniMap from "/@/components/basic/miniMap.vue";
 import { useSceneStore } from "./store/modules/scene";
 import type { FloorsType } from "./store/modules/scene";
+import { useAppStore } from "./store/modules/app";
 const sceneStore = useSceneStore();
+const appStore = useAppStore();
 
 const scene$ = ref<HTMLElement | null>(null);
-const refMiniMap = ref<HTMLElement | null>(null);
+const refMiniMap = ref<Nullable<string>>(null);
 const show = ref(false);
 onMounted(async () => {
   const app = await createApp({
@@ -17,7 +19,7 @@ onMounted(async () => {
     num: "KK-t-KwmO6julDh",
     mobile: true,
   });
-
+  // SDK初始化
   app.use("MinMap", { theme: { camera_fillStyle: "#ED5D18" } });
   app.use("Tag");
   app.use("TourPlayer");
@@ -36,25 +38,32 @@ onMounted(async () => {
   });
   app.use("TourPlayer");
   app.render();
+  // SDK初始化结束
   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) => {
-    // console.log("metadata", JSON.stringify(metadata));
     sceneStore.load(metadata);
-    // store.commit("scene/load", metadata);
     if (!metadata.controls.showMap) {
       app.MinMap.hide(true);
     }
     // dataLoaded.value = true;
   });
-  app.store.on("floorcad", (floor) => {
-    if (floor?.floors as FloorsType[]) {
-      sceneStore.loadFloorData(floor.floors);
+  app.store.on("floorcad", ({ floors }: { floors: FloorsType[] }) => {
+    if (floors?.length) {
+      sceneStore.loadFloorData(floors);
     }
   });
-
-  // store.commit("scene/loadFloorData", floor)
 });
 </script>
 
@@ -63,7 +72,7 @@ onMounted(async () => {
   <div class="ui-view-layout" :class="{ show: show }">
     <div class="scene" ref="scene$"></div>
     <!-- 小地图 start -->
-    <MiniMap :to="refMiniMap" @change-mode="" />
+    <MiniMap :show="true" :to="refMiniMap" />
     <!-- 小地图 end -->
   </div>
 </template>

src/components/basic/loading.vue

@@ -78,7 +78,7 @@ const show = ref(true);
 const metadata = computed(() => sceneStore.metadata);
 // store.getters["scene/loadingLogoFile"]
 const loadingLogoFile = computed(() => sceneStore.loadingLogoFile);
-console.log("loadingLogoFile", loadingLogoFile);
+// console.log("loadingLogoFile", loadingLogoFile);
 
 onMounted(() => {
   enter.value = true;

src/components/basic/miniMap.vue

@@ -1,31 +1,33 @@
 <template>
   <teleport v-if="show" :to="to">
     <span class="button-switch" @click.stop="toggleMap">
-      <ui-icon type="show_map_collect"></ui-icon>
+      <!-- <ui-icon type="show_map_collect"></ui-icon> -->
     </span>
     <div v-if="showDollhouse" class="change" @click="changeMode">
-      <ui-icon type="show_3d_normal"></ui-icon>
+      <!-- <ui-icon type="show_3d_normal"></ui-icon> -->
       <span> 3D模型</span>
     </div>
   </teleport>
 </template>
 <script lang="ts">
-import { defineComponent } from "vue";
-import type { Ref } from "vue";
+import { defineComponent, watchEffect } from "vue";
 import { propTypes } from "/@/utils/propTypes";
-// Ref<>
+
 export default defineComponent({
   name: "minMap",
   props: {
     show: propTypes.bool.def(false),
     showDollhouse: propTypes.bool.def(false),
-    to: {
-      type: Object as PropType<Ref<HTMLElement> | null>,
-      default: "",
-    },
+    to: propTypes.string.def(""),
   },
   emits: ["changeMode", "toggleMap"],
-  setup(_, { emit }) {
+  setup(props, { emit }) {
+    watchEffect(() => {
+      if (props.to?.length) {
+        debugger;
+      }
+    });
+    // debugger
     const toggleMap = () => {
       emit("toggleMap");
     };

src/hooks/userApp.ts

@@ -1,5 +1,5 @@
 
-import { onMounted, ref, unref } from 'vue'
+// import { onMounted, ref, unref } from 'vue'
 
 import consola from 'consola'
 
@@ -36,6 +36,7 @@ export function createApp(options: appOptions): Promise<KanKanInstance> {
     const _app = new instance(options)
     deferred.resolve(_app);
     (window as any).__sdk = _app
+    document.body.setAttribute('is-mobile', 'true')
     app = _app
     return Promise.resolve(app)
 }

src/store/modules/app.ts

@@ -0,0 +1,100 @@
+import { defineStore } from 'pinia';
+import { getApp, useApp } from '/@/hooks/userApp';
+
+
+interface AppState {
+    panoId: Nullable<string>,
+    mode: string,
+    flying: boolean,
+    floorId: Nullable<string>,
+    player: {
+        lang: string,
+        showVR: boolean,
+        showMore: boolean,
+        showDescription: boolean,
+        showToolbar: boolean,
+        showMap: boolean,
+        showShare: boolean,
+        showUserGuide: boolean,
+        showWidgets: boolean,
+    },
+    router: any,
+    controlsBottom: string,
+    shoppingguide: boolean
+}
+
+export const useAppStore = defineStore({
+    id: 'app',
+    state: (): AppState => ({
+        panoId: null,
+        mode: 'panorama',
+        flying: false,
+        floorId: null,
+        player: {
+            lang: 'zh',
+            showVR: false,
+            showMore: false,
+            showDescription: false,
+            showToolbar: true,
+            showMap: true,
+            showShare: false,
+            showUserGuide: false,
+            showWidgets: true,
+        },
+        router: {},
+        controlsBottom: '20px',
+        shoppingguide: false
+
+    }),
+    getters: {
+
+
+    },
+    actions: {
+        showShoppingguide(payload: boolean): void {
+            this.shoppingguide = payload
+        },
+        setMode(payload: string): void {
+            if (payload == this.mode) {
+                return
+            }
+            this.flying = true
+            useApp().then(sdk => {
+                sdk.Camera[payload]()
+                    .then(() => {
+                        this.flying = false
+                    })
+                    .catch(() => {
+                        this.flying = false
+                    })
+            })
+
+            if (payload == 'dollhouse') {
+                this.setFloor('all');
+            }
+            this.mode = payload
+        },
+        setFloorId(id: string): void {
+            this.floorId = id
+        },
+        setFloor(id: string): void {
+            this.floorId = id
+            getApp().Scene.gotoFloor(id)
+        },
+        showVR(): void {
+            this.player.showVR = !this.player.showVR
+            this.player.showWidgets = !this.player.showWidgets
+            getApp().Camera.vr()
+        },
+        showUserGuide(payload: boolean): void {
+            this.player.showUserGuide = payload
+        },
+        setControlsBottom(payload: string): void {
+            this.controlsBottom = payload
+        },
+        setPanoId(id: string) {
+            this.panoId = id
+        },
+    }
+
+})

src/store/modules/rtc.ts

@@ -34,21 +34,7 @@ export const useRtcStore = defineStore({
 
     }),
     getters: {
-        // tags() {
-        //     return this.tags
-        // },
-        // floors() {
-        //     return this.floors
-        // },
-        // metadata() {
-        //     return this.metadata
-        // },
-        musicURL() {
-            return ''
-        },
-        loadingLogoFile() {
-            return ''
-        }
+      
 
     },