update

src/components/basic/dialog/index.ts

@@ -107,7 +107,7 @@ Dialog.use = function use(app) {
     return promise || this.confirm;
   };
 };
-console.log('Dialog', Dialog)
+// console.log('Dialog', Dialog)
 
 export { Window, Toast, Alert, Confirm, DialogContent };
 

src/components/chatRoom/controls/actions.ts

@@ -4,6 +4,8 @@ import Dialog from '/@/components/basic/dialog'
 import { getApp, useApp } from "/@/hooks/userApp";
 import consola from 'consola'
 import { useSocket } from "/@/hooks/userSocket";
+import { useRoom } from "/@/hooks/useRoom";
+
 
 interface ActionDataType {
     type: string;
@@ -23,6 +25,7 @@ export function handleActions({ data, type, members, open, user }: ActionDataTyp
             break;
 
         case "changeScene":
+            handleChangeScene(data)
             break;
 
         case 'user-join':
@@ -149,4 +152,11 @@ async function handleUserPaint(open: boolean | undefined) {
         }
     }
 
+}
+
+const handleChangeScene = (data) => {
+    const { changeScene } = useRoom()
+    // debugger
+    changeScene(data)
+
 }

src/components/chatRoom/controls/join.ts

@@ -1,12 +1,14 @@
 import { getApp } from "/@/hooks/userApp";
+import { useRoom } from "/@/hooks/useRoom";
 import { useSocket } from "/@/hooks/userSocket";
 import { useRtcStore } from "/@/store/modules/rtc";
+const { enterRoom } = useRoom()
 
 // 自已join的方法
 export function handleJoin(data: any) {
     const app = getApp();
     const socket = useSocket()
-    console.log("memberList-1", data);
+    enterRoom();
     const rtcStore = useRtcStore();
     rtcStore.setIsJoined(true)
     // 

src/components/chatRoom/index.vue

@@ -43,8 +43,8 @@
           <div class="mic_no" v-if="!unref(disableMic)"></div>
         </template>
 
-        <div style="font-size: 0.65rem">
-          <ImageIcon type="scene" />
+        <div style="font-size: 0.65rem" v-if="isNativeLeader" >
+          <ImageIcon type="scene" @click="showScenes = !showScenes" />
         </div>
         <div class="exit"></div>
       </div>
@@ -80,6 +80,10 @@
       @close-member="closeMember"
     />
     <!-- 用户列表 end -->
+
+    <!-- 场景列表 start -->
+    <SceneList v-if="showScenes" @close="" @changeScene=""/>
+    <!-- 场景列表 end -->
   </div>
 </template>
 
@@ -104,6 +108,7 @@ import { useRtcStore } from "/@/store/modules/rtc";
 import type { SocketParams, RoleType } from "/@/store/modules/rtc";
 import chat from "./chat.vue";
 import memberList from "./memberList.vue";
+import SceneList from "./sceneList.vue";
 
 import consola from "consola";
 
@@ -124,6 +129,7 @@ const text = ref<string>("");
 const chatList = computed(() => rtcStore.chatList);
 const currentUser = computed(() => rtcStore.userId);
 const members = computed(() => rtcStore.memberList);
+const showScenes = ref(false);
 
 //设置socket 参数
 const initParams: SocketParams = {

src/components/chatRoom/memberList.vue

@@ -11,6 +11,7 @@
           <i class="iconfont"></i>
         </div>
         <div class="memberList">
+
           <div class="memberItem">
             <div class="userMsg">
               <div class="avatar">

src/components/chatRoom/sceneList.vue

@@ -7,9 +7,15 @@
       </span>
     </div>
     <div class="content">
-      <div class="sign" v-for="scene in sceneList" :key="scene.id" @click="emit('changeScene', scene)" :class="{active: currentScene === scene}">
+      <div
+        class="sign"
+        v-for="scene in sceneList"
+        :key="scene.id"
+        @click="emit('changeScene', scene)"
+        :class="{ active: currentScene === scene }"
+      >
         <div class="info">
-          <img :src="scene.thumb">
+          <img :src="scene.thumb" />
           <p>{{ scene.sceneName }}</p>
         </div>
         <span class="icon">
@@ -20,18 +26,21 @@
   </div>
 </template>
 
-<script setup>
-import { sceneList } from '@/store/room'
-import Icon from '@/components/icon/index.vue'
-import { currentScene } from '@/store/room'
+<script lang="ts" setup>
+import { unref } from "vue";
+import Icon from "/@/components/basic/icon/index.vue";
+import { useRoom } from "/@/hooks/useRoom";
+// import { currentScene } from "@/store/room";
+const { currentScene, sceneList } = useRoom();
+console.log("sceneList", unref(sceneList));
 
-const emit = defineEmits(['close', 'changeScene']);
+const emit = defineEmits(["close", "changeScene"]);
 </script>
 
 <style scoped lang="scss">
 .scene-list {
   max-height: 80%;
-  background: rgba(0,0,0,0.8);
+  background: rgba(0, 0, 0, 0.8);
   border-radius: 10px 10px 0px 0px;
   bottom: 0;
   left: 0;
@@ -47,12 +56,12 @@ const emit = defineEmits(['close', 'changeScene']);
   text-align: center;
   height: 46px;
   line-height: 46px;
-  border-bottom: 1px solid rgba(255,255,255,.1);
+  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
 
   p {
     font-size: 16px;
     font-weight: 500;
-    color: #FFFFFF;
+    color: #ffffff;
   }
 
   .icon {
@@ -91,7 +100,7 @@ const emit = defineEmits(['close', 'changeScene']);
       p {
         font-size: 14px;
         font-weight: 400;
-        color: #FFFFFF;
+        color: #ffffff;
         line-height: 20px;
         margin-left: 10px;
       }
@@ -108,4 +117,4 @@ const emit = defineEmits(['close', 'changeScene']);
     }
   }
 }
-</style>
+</style>

src/hooks/useRoom.ts

@@ -16,6 +16,7 @@ export const isLeader = browser.getURLParam("role") === 'leader'
 
 export function useRoom() {
     return {
+        sceneList,
         currentScene,
         changeScene,
         initialRoom,