update

src/App.vue

@@ -15,6 +15,9 @@ 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";
+import { useTourPlayer } from "./hooks/userTourPlayer";
+
+const { createTourPlayer } = useTourPlayer();
 
 const sceneStore = useSceneStore();
 const appStore = useAppStore();
@@ -48,13 +51,14 @@ watchEffect(() => {
 onMounted(async () => {
   const app = await createApp({
     dom: scene$.value as HTMLElement,
-    num: browser.getURLParam("m") || "KK-t-gpAaKxXhE9",
+    num: browser.getURLParam("m"),
     mobile: true,
   });
   // SDK初始化
   app.use("MinMap", { theme: { camera_fillStyle: "#ED5D18" } });
   app.use("Tag");
-  app.use("TourPlayer");
+
+  createTourPlayer();
 
   app.use("TagView", {
     render(data) {
@@ -69,10 +73,16 @@ onMounted(async () => {
       return `<span class="tag-icon animate" style="display:none"></span>`;
     },
   });
-  app.use("TourPlayer");
   app.render();
   // SDK初始化结束
+  // 暂时isTours url frag 做为 1自由观看模式与带看模式0
 
+  if (Number(browser.getURLParam("isTour")) === 1) {
+    debugger;
+    appStore.setIsTourMode(true);
+  } else {
+    appStore.setIsTourMode(false);
+  }
   // SDK global Event start
   app.Scene.on("ready", () => {
     show.value = true;

src/components/custom/panel.vue

@@ -1,13 +1,13 @@
 <template>
   <div class="panel" :class="{ show }">
-    <span class="icon" @click="playing ? pause() : play()" v-if="existsGuide">
+    <span class="icon" @click="handlePlayTours" v-if="hasTours">
       <Icon type="play" />
     </span>
     <span class="icon" @click="showScenes = !showScenes">
       <Icon type="scene" />
     </span>
     <span class="ctrl" :class="{ show }" @click="show = !show">
-      <Icon type="arrows@2x" />
+      <Icon type="arrows" />
     </span>
   </div>
   <SceneList
@@ -22,48 +22,23 @@ import SceneList from "/@/components/chatRoom/sceneList.vue";
 //import { useMusicPlayer } from "@/utils/sound";
 // import { changeScene } from "@/store/room";
 import Icon from "/@/components/basic/icon/index.vue";
-import { ref, onUnmounted, onMounted } from "vue";
-import { useApp } from "/@/hooks/userApp";
+import { ref, unref } from "vue";
 
-const show = ref(false);
-// const app = getApp();
-const playing = ref(false);
-const existsGuide = ref(false);
-const showScenes = ref(false);
+import { useTourPlayer } from "/@/hooks/userTourPlayer";
 
-onMounted(async () => {
-  const app = await useApp();
-  app.use("TourPlayer").then((player) => {
-    console.log("===>", player);
-    player.on("play", ({ partId, frameId }) => (playing.value = true));
-    player.on("pause", ({ partId, frameId }) => (playing.value = false));
-    player.on("end", () => {
-      playing.value = false;
-    });
-  });
+const show = ref(false);
 
-  // 需要双向绑定时，重新设置数据
-  app.TourManager.on("loaded", (tours) => {
-    existsGuide.value = !!tours.length;
-  });
+const showScenes = ref(false);
+const { hasTours } = useTourPlayer();
 
-  const play = async () => {
-    const player = await app.TourManager.player;
+function handlePlayTours() {
+  const { player, playing } = useTourPlayer();
+  if (!unref(playing)) {
     player.play();
-  };
-
-  const pause = async () => {
-    const player = await app.TourManager.player;
+  } else {
     player.pause();
-  };
-});
-
-// const timeout = setTimeout(() => {
-//   const a = useMusicPlayer()
-
-// }, 2000)
-
-// onUnmounted(() => clearTimeout(timeout))
+  }
+}
 
 const changeScene = () => {};
 </script>

src/hooks/userTourPlayer.ts

@@ -0,0 +1,56 @@
+
+import consola from 'consola'
+import { ref } from 'vue';
+import { useTourStore } from '../store/modules/tour'
+import { useApp } from './userApp'
+
+const playing = ref(false);
+const hasTours = ref(false);
+let player
+
+async function createTourPlayer() {
+    const app = await useApp()
+    player = await app.use('TourPlayer')
+    const tourStore = useTourStore()
+    app.TourManager.on('loaded', tours => {
+        // existsGuide.value = !!tours.length
+        if (tours?.length)
+            hasTours.value = true
+        tourStore.setData(tours)
+    })
+    // { partId, frameId }
+    console.log('player', player)
+    player.on('play', () => {
+        playing.value = true
+    })
+    player.on('pause', () => {
+        playing.value = false
+    })
+    player.on('progress', ({ partId, frameId, progress }) => {
+        // 画面进度
+        // this.partId = partId
+        // this.frameId = frameId
+        // this.progress = Number(progress * 100).toFixed(5)
+
+        // // 片段进度
+        // if (this.tours.length == 1) {
+        //     this.progressPart = this.progress
+        // } else {
+        //     if (currPartId != partId) {
+        //         currPartId = partId
+        //         currFrames = this.tours[partId].list.length
+        //         this.progressPart = 0
+        //     }
+        //     this.progressPart += progress / currFrames
+        // }
+    })
+}
+
+export function useTourPlayer() {
+    return {
+        createTourPlayer,
+        playing,
+        hasTours,
+        player
+    }
+}

src/store/modules/app.ts

@@ -54,8 +54,8 @@ export const useAppStore = defineStore({
 
     },
     actions: {
-        showShoppingguide(payload: boolean): void {
-            this.shoppingguide = payload
+        setIsTourMode(payload: boolean): void {
+            this.isTourMode = payload
         },
         setMode(payload: string): void {
             console.log('setMode', payload)

src/store/modules/tour.ts

@@ -38,8 +38,8 @@ export const useTourStore = defineStore({
         async delFile(): Promise<void> {
 
         },
-        setData(): void {
-
+        setData(toursList): void {
+            this.toursList = toursList
         }
     }
 

types/sdk.d.ts

@@ -1,19 +1,20 @@
+import EventEmitter from "events"
 
 
-declare interface CadCadManagerType {
+declare interface CadCadManagerType extends EventEmitter {
   edit: {
     enter: Fn
     exit: Fn
   }
 }
-declare interface TourManagerType {
+declare interface TourManagerType extends EventEmitter {
   load: Fn<any[]>
 }
-declare interface RemoteEditorType {
+declare interface RemoteEditorType  extends EventEmitter {
   tour_delete: ({ num: string }) => Promise<void>
 }
 
-declare interface KanKanInstance {
+declare interface KanKanInstance  extends EventEmitter {
   [x: string]: any
   CadCadManager: CadCadManagerType
   TourManager: TourManagerType