update

src/App.vue

@@ -12,6 +12,7 @@ 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";
 
@@ -38,6 +39,7 @@ const floorplanViewShow = computed(() => {
   );
 });
 const show = ref(false);
+const isTourMode = computed(() => appStore.isTourMode);
 
 watchEffect(() => {
   console.warn("mode", mode);
@@ -155,11 +157,14 @@ const changeMode = (name: string) => {
       />
       <!-- 平面图 end -->
       <!-- 聊天 start-->
-      <ChatRoom />
+      <ChatRoom v-if="!isTourMode" />
       <!-- 聊天 end -->
       <!-- 多楼层 start-->
       <FloorSwitch />
       <!-- 多楼层 end -->
+      <!-- panel start-->
+      <GuidePanel v-if="isTourMode" />
+      <!-- panel end -->
     </template>
   </div>
 </template>

src/components/chatRoom/index.vue

@@ -45,7 +45,7 @@
           @click="onDraw(!isBrushes)"
         ></div>
 
-        <div class="invitation"></div>
+        <div class="invitation" @click="handleCreateShare"></div>
         <!-- @click="openMember" -->
         <div class="members" @click="openMember"></div>
         <template v-if="isNativeLeader">
@@ -111,6 +111,11 @@
     <div class="remote" :id="item.getId()"></div>
   </template>
   <!-- trtc相关  end -->
+
+  <ShareContainer
+    :share-link="shareLink"
+    @close="shareLink = ''"
+  ></ShareContainer>
 </template>
 
 <script lang="ts" setup>
@@ -140,7 +145,7 @@ import { useRoom } from "/@/hooks/useRoom";
 import consola from "consola";
 import Dialog from "../basic/dialog";
 import { storeToRefs } from "pinia";
-
+import ShareContainer from "./share.vue";
 // hook
 const { isDrawing, setDraw, setCloseDraw } = useDraw();
 const { initialRoom } = useRoom();
@@ -168,6 +173,8 @@ const audioMuted = computed(() => rtcStore.audioMuted);
 const remoteStreams = computed(() => rtcStore.remoteStreams);
 const currentSession = computed(() => rtcStore.currentSession);
 
+const shareLink = ref<string>("");
+
 // watchEffect(() => {
 
 // });
@@ -347,6 +354,10 @@ const handleCloseRoom = () => {
     },
   });
 };
+
+const handleCreateShare = () => {
+  shareLink.value = location.href;
+};
 </script>
 
 <style scoped lang="scss">

src/components/chatRoom/share.vue

@@ -0,0 +1,192 @@
+<template>
+  <div id="dialog_index" v-show="show">
+    <div class="created_dialog">
+      <div class="blurBox"></div>
+      <div class="content">
+        <div class="dialog_title">{{ title }}</div>
+        <div class="dialog_link">
+          <p>
+            {{ shareLink }}
+          </p>
+        </div>
+
+        <div class="created_btn">
+          <div class="created_cancel" @click="closeCreated">取消</div>
+          <div
+            class="created_confirm"
+            ref="copylink$"
+            :data-clipboard-text="shareLink"
+            @click="createdConfirm"
+          >
+            复制分享
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import {
+  onMounted,
+  defineProps,
+  defineEmits,
+  ref,
+  unref,
+  watchEffect,
+} from "vue";
+import ClipboardJS from "clipboard";
+import Dialog from "/@/components/basic/dialog";
+
+const emit = defineEmits(["close"]);
+
+const props = defineProps({
+  title: {
+    type: String,
+    default: "邀请好友",
+  },
+  shareLink: {
+    type: String,
+    default: "",
+  },
+});
+const copylink$ = ref<Nullable<HTMLElement>>(null);
+const show = ref(false);
+const closeCreated = () => {
+  show.value = false;
+  emit("close");
+};
+
+const createdConfirm = () => {
+  if (unref(copylink$)) {
+    const ele = unref(copylink$) as any as HTMLElement;
+    new ClipboardJS(ele).on("success", function (e) {
+      e.clearSelection();
+      Dialog.toast({ content: "链接复制成功", type: "success" });
+      setTimeout(() => {
+        show.value = false;
+        emit("close");
+      }, 300);
+    });
+  }
+};
+
+onMounted(() => {
+  watchEffect(() => {
+    if (props.shareLink?.length) {
+      show.value = true;
+    }
+  });
+});
+</script>
+
+<style scoped lang="scss">
+#dialog_index {
+  width: 100vw;
+  height: 100%;
+  // background: rgba(0, 0, 0, 0.5);
+  position: fixed;
+  left: 0;
+  top: 0;
+  z-index: 100000;
+  pointer-events: none;
+  .created_dialog {
+    width: 8.64rem;
+    // min-height: 5rem;
+    // background: #ffffff;
+    border-radius: 8px;
+    position: absolute;
+    left: 50%;
+    top: 50%;
+    transform: translate(-50%, -50%);
+    pointer-events: auto;
+    border: 1px solid rgba(255, 255, 255, 0.1);
+    border-radius: 4px;
+    .blurBox {
+      position: absolute;
+      z-index: 1;
+      top: 0;
+      left: 0;
+      width: 100%;
+      height: 100%;
+      background: rgba(0, 0, 0, 0.7);
+      filter: blur(1px);
+    }
+    .content {
+      position: relative;
+      z-index: 2;
+      top: 0;
+      left: 0;
+      width: 100%;
+      height: 100%;
+    }
+    .dialog_title {
+      width: 100%;
+      height: 1.39rem;
+      padding: 0 0.56rem;
+      box-sizing: border-box;
+      font-size: 0.39rem;
+      color: #fff;
+      line-height: 1.39rem;
+      overflow: hidden;
+      text-overflow: ellipsis;
+      white-space: nowrap;
+      border-bottom-style: solid;
+      border-bottom-width: 1px;
+      border-bottom-color: rgba(255, 255, 255, 0.1);
+    }
+    .dialog_link {
+      width: 100%;
+      font-size: 0.39rem;
+      color: rgba(255, 255, 255, 0.5);
+      padding: 0.53rem 0.56rem;
+      box-sizing: border-box;
+      text-align: justify;
+      text-align: left;
+      > p {
+        background: rgba(0, 0, 0, 0.5);
+        padding: 0.15rem 0.28rem;
+        word-break: break-all;
+        word-wrap: break-word;
+        text-overflow: -o-ellipsis-lastline;
+        overflow: hidden;
+        text-overflow: ellipsis;
+        display: -webkit-box;
+        -webkit-line-clamp: 2;
+        line-clamp: 2;
+        -webkit-box-orient: vertical;
+        line-height: 0.72rem;
+      }
+    }
+
+    .created_btn {
+      width: 100%;
+      height: 1.36rem;
+      border-top-style: solid;
+      border-top-width: 1px;
+      border-top-color: rgba(255, 255, 255, 0.1);
+      box-sizing: border-box;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      > div {
+        width: 50%;
+        height: 1.36rem;
+        text-align: center;
+        line-height: 1.36rem;
+        font-size: 0.39rem;
+        box-sizing: border-box;
+        &.created_cancel {
+          color: #fff;
+          border-right-style: solid;
+          border-right-width: 1px;
+          border-right-color: rgba(0, 0, 0, 0.05);
+        }
+        &.created_confirm {
+          color: #ed5d18;
+        }
+      }
+    }
+  }
+}
+</style>

src/components/custom/main-shop.vue

@@ -18,42 +18,45 @@
 </template>
 
 <script setup lang="ts">
-import SceneList from "./scene-list.vue";
+import SceneList from "/@/components/chatRoom/sceneList.vue";
 //import { useMusicPlayer } from "@/utils/sound";
-import { changeScene } from "@/store/room";
-import Icon from "@/components/icon/index.vue";
-import { ref, onUnmounted } from "vue";
-import { getApp } from "@/app";
+// import { changeScene } from "@/store/room";
+import Icon from "/@/components/basic/icon/index.vue";
+import { ref, onUnmounted, onMounted } from "vue";
+import { useApp } from "/@/hooks/userApp";
 
 const show = ref(false);
-const app = getApp();
+// const app = getApp();
 const playing = ref(false);
 const existsGuide = ref(false);
 const showScenes = ref(false);
 
-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;
+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;
+    });
   });
-});
 
-// 需要双向绑定时，重新设置数据
-app.TourManager.on("loaded", (tours) => {
-  existsGuide.value = !!tours.length;
-});
+  // 需要双向绑定时，重新设置数据
+  app.TourManager.on("loaded", (tours) => {
+    existsGuide.value = !!tours.length;
+  });
 
-const play = async () => {
-  const player = await app.TourManager.player;
-  player.play();
-};
+  const play = async () => {
+    const player = await app.TourManager.player;
+    player.play();
+  };
 
-const pause = async () => {
-  const player = await app.TourManager.player;
-  player.pause();
-};
+  const pause = async () => {
+    const player = await app.TourManager.player;
+    player.pause();
+  };
+});
 
 // const timeout = setTimeout(() => {
 //   const a = useMusicPlayer()
@@ -61,6 +64,8 @@ const pause = async () => {
 // }, 2000)
 
 // onUnmounted(() => clearTimeout(timeout))
+
+const changeScene = () => {};
 </script>
 
 <style lang="scss" scoped>

src/store/modules/app.ts

@@ -22,7 +22,7 @@ interface AppState {
     },
     router: any,
     controlsBottom: string,
-    shoppingguide: boolean
+    isTourMode: boolean // 自由观看模式
 }
 
 export const useAppStore = defineStore({
@@ -46,7 +46,7 @@ export const useAppStore = defineStore({
         },
         router: {},
         controlsBottom: '20px',
-        shoppingguide: false
+        isTourMode: true
 
     }),
     getters: {