新增通用性

src/components/chatRoom/controls/join.ts

@@ -1,5 +1,5 @@
 import consolaGlobalInstance from 'consola';
-import Dialog from '/@/components/basic/dialog';
+// import Dialog from '/@/components/basic/dialog';
 // import { getApp } from '/@/hooks/userApp';
 import { useRoom } from '/@/hooks/useRoom';
 import { useSocket } from '/@/hooks/userSocket';
@@ -46,15 +46,35 @@ export function handleJoin(data: any) {
 
   console.log('gem', rtcStore.memberList.length, userExsit);
 
-  if (rtcStore.memberList.length > 30) {
+  if (rtcStore.memberList.length > 10) {
     if (rtcStore.role === 'customer') {
-      Dialog.toast({ content: `房间已满员` });
-      setTimeout(() => {
-        closeSocket();
-      }, 1500);
-      return;
+      rtcStore.showBaseDialog(
+        {
+          title: '温馨提示',
+          desc: '当前房间已满员',
+          okTxt: '自由观看',
+          closeTxt: '取消',
+        },
+        () => {
+          setTimeout(() => {
+            closeSocket();
+          }, 1500);
+        },
+      );
+      // Dialog.toast({ content: `房间已满员` });
+      // setTimeout(() => {
+      //   closeSocket();
+      // }, 1500);
+      // return;
     }
   }
+  const { currentScene } = useRoom();
+  if (rtcStore.isLeader) {
+    socket.emit('action', {
+      type: 'changeScene',
+      data: currentScene.value,
+    });
+  }
 
   if (!rtcStore.isLeader) {
     setTimeout(() => {

src/components/chatRoom/dialog/base.vue

@@ -0,0 +1,190 @@
+<template>
+  <div id="dialog_index" v-if="ifBaseDialog">
+    <div class="created_dialog">
+      <div class="blurBox"></div>
+      <div class="content">
+        <div class="dialog_title">{{ title }}</div>
+        <p class="dialog_desc">{{ desc }}</p>
+        <div class="created_btn">
+          <div class="end_cancel" @click="endLiveCancel">{{ closeTxt }}</div>
+          <div class="end_confirm" @click="endLiveConfirm">{{ okTxt }}</div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup>
+  // import browser from '/@/utils/browser';
+  import {
+    onMounted,
+    watch,
+    defineProps,
+    defineEmits,
+    ref,
+    computed,
+    watchEffect,
+    unref,
+  } from 'vue';
+  import { useRtcStore } from '/@/store/modules/rtc';
+  const emit = defineEmits(['closeDialog', 'confirmDialog']);
+  const rtcStore = useRtcStore();
+
+  const baseDialog = computed(() => rtcStore.baseDialog);
+  const ifBaseDialog = computed(() => rtcStore.ifBaseDialog);
+  const title = ref('');
+  const desc = ref('');
+  const okTxt = ref('');
+  const closeTxt = ref('');
+
+  watch(
+    () => [baseDialog, ifBaseDialog],
+    (val) => {
+      console.log('hey', val);
+      title.value = unref(val[0]).title;
+      desc.value = unref(val[0]).desc;
+      okTxt.value = unref(val[0]).okTxt;
+      closeTxt.value = unref(val[0]).closeTxt;
+    },
+    { deep: true },
+  );
+
+  watch(
+    () => props,
+    (val) => {
+      console.log('hey', val);
+      title.value = props.title;
+      desc.value = props.desc;
+      okTxt.value = props.okTxt;
+      closeTxt.value = props.closeTxt;
+    },
+    { deep: true },
+  );
+
+  const props = defineProps({
+    title: {
+      type: String,
+      default: '温馨提示',
+    },
+    desc: {
+      type: String,
+      default: '',
+    },
+    okTxt: {
+      type: String,
+      default: '确定',
+    },
+    closeTxt: {
+      type: String,
+      default: '取消',
+    },
+  });
+
+  const endLiveCancel = () => {
+    emit('closeDialog');
+
+    rtcStore.hideBaseDialog();
+  };
+
+  const endLiveConfirm = () => {
+    // socket.value.emit("disconnect");
+    rtcStore.baseDiaLogCallback();
+    emit('confirmDialog');
+    rtcStore.hideBaseDialog();
+  };
+</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 {
+      pointer-events: auto;
+      width: 8.64rem;
+      // min-height: 5rem;
+      // background: #ffffff;
+      border-radius: 8px;
+      position: absolute;
+      left: 50%;
+      top: 50%;
+      transform: translate(-50%, -50%);
+      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_desc {
+        font-size: 0.42rem;
+        color: #fff;
+        padding: 0.56rem 0;
+        text-align: center;
+      }
+
+      .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;
+        font-size: 0.39rem;
+        > div {
+          width: 50%;
+          height: 1.36rem;
+          text-align: center;
+          line-height: 1.36rem;
+          font-size: 0.39rem;
+          box-sizing: border-box;
+          &.end_cancel {
+            color: #fff;
+            border-right-style: solid;
+            border-right-width: 1px;
+            border-right-color: rgba(255, 255, 255, 0.1);
+          }
+          &.end_confirm {
+            color: #ed5d18;
+          }
+        }
+      }
+    }
+  }
+</style>

src/components/chatRoom/index.vue

@@ -92,7 +92,7 @@
     </div>
   </teleport> -->
   <!-- 场景列表 start -->
-  <SceneList v-if="showScenes" @close="showScenes = false" @change-scene="changeScene" />
+  <SceneList v-if="showScenes" @close="showScenes = false" @change-scene="handleChangeScene" />
   <!-- 场景列表 end -->
   <!-- trtc相关 start -->
   <div class="local" id="local" v-if="isJoined"></div>
@@ -107,7 +107,8 @@
     @close-dialog="showCloseDialog = false"
     @confirm-dialog="handleCloseRoom"
   />
-  <CreatedName :show="showCreateNameDialog" @confirmDialog="handleNameConfirm" />
+  <CreatedName :show="showCreateNameDialog" @confirm-dialog="handleNameConfirm" />
+  <BaseDialog @confirm-dialog="handleFullRoom" />
 </template>
 
 <script lang="ts" setup>
@@ -136,12 +137,10 @@
   import SceneList from './sceneList.vue';
   import { useRoom, SceneItemType } from '/@/hooks/useRoom';
   import consola from 'consola';
-  // import Dialog from '../basic/dialog';
   import CloseDialog from './dialog/close.vue';
-  // import { storeToRefs } from 'pinia';
   import ShareContainer from './share.vue';
   import CreatedName from './dialog/createdName.vue';
-
+  import BaseDialog from './dialog/base.vue';
   // hook
   const { isDrawing, setDraw, setCloseDraw } = useDraw();
   const { initialRoom } = useRoom();
@@ -381,12 +380,17 @@
     shareLink.value = url.toString();
   };
 
-  const changeScene = (scene: Ref<SceneItemType>) => {
+  const handleChangeScene = (scene: Ref<SceneItemType>) => {
     const { changeScene } = useRoom();
+    const { socket } = useSocket();
     console.log('changeScene');
-
+    socket.emit('action', {
+      type: 'changeScene',
+      data: scene,
+    });
     changeScene(unref(scene));
   };
+  const handleFullRoom = () => {};
 </script>
 
 <style scoped lang="scss">

src/store/modules/rtc.ts

@@ -32,6 +32,9 @@ interface RtcState {
   audioMuted: boolean;
   inputStatus: boolean;
   currentSession: Nullable<UserInfoType>;
+  baseDialog: BaseDialog;
+  ifBaseDialog: boolean;
+  baseDiaLogCallback?: () => void;
 }
 
 interface DeviceListParams {
@@ -72,6 +75,19 @@ export interface SocketParams {
   mode: string;
 }
 
+interface BaseDialog {
+  title: string;
+  desc: string;
+  okTxt: string;
+  closeTxt: string;
+}
+const defaultBaseDialog: BaseDialog = {
+  title: '温馨提示',
+  desc: '',
+  okTxt: '确定',
+  closeTxt: '取消',
+};
+
 export const useRtcStore = defineStore({
   id: 'rtc',
   state: (): RtcState => ({
@@ -103,6 +119,8 @@ export const useRtcStore = defineStore({
     audioMuted: true,
     inputStatus: true,
     currentSession: null,
+    baseDialog: defaultBaseDialog,
+    ifBaseDialog: false,
   }),
   persist: {
     storage: localStorage,
@@ -133,6 +151,15 @@ export const useRtcStore = defineStore({
     },
   },
   actions: {
+    showBaseDialog(dialog: BaseDialog, callback?: () => void): void {
+      this.ifBaseDialog = true;
+      this.baseDialog = dialog;
+      this.baseDiaLogCallback = callback;
+    },
+    hideBaseDialog() {
+      this.ifBaseDialog = false;
+      this.baseDialog = defaultBaseDialog;
+    },
     setSocketParams(params: SocketParams): void {
       this.avatar = params.avatar;
       this.roomId = params.roomId;