update

src/components/chatRoom/dialog/index.vue

@@ -15,15 +15,12 @@
 </template>
 
 <script setup>
-  import browser from '@/utils/browser';
+  import browser from '/@/utils/browser';
   import { onMounted, watch, defineProps, defineEmits, ref, computed } from 'vue';
-  import { useStore } from 'vuex';
-  const store = useStore();
 
   const emit = defineEmits(['closeDialog', 'confirmDialog']);
 
   const role = ref(browser.urlHashValue('role'));
-  const socket = computed(() => store.getters['rtc/socket']);
 
   const props = defineProps({
     title: {

src/components/chatRoom/dialog/createdRoom.vue

@@ -39,7 +39,6 @@
 <script lang="ts">
   import Dialog from '/@/components/basic/dialog';
   import browser from '/@/utils/browser';
-  import { useStore } from 'vuex';
   import Cropper from '@/components/cropper/cropper.vue';
   export default {
     components: { Cropper },

src/components/chatRoom/dialog/share.vue

@@ -1,174 +0,0 @@
-<template>
-  <div id="dialog_index">
-    <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>
-  import { onMounted, defineProps, defineEmits, ref, nextTick } from 'vue';
-  import ClipboardJS from 'clipboard';
-  import { Dialog } from '@/global_components/';
-
-  const emit = defineEmits(['closeDialog']);
-
-  const props = defineProps({
-    title: {
-      type: String,
-      default: '邀请好友',
-    },
-    shareLink: {
-      type: String,
-      default: '',
-    },
-  });
-  const copylink$ = ref(null);
-
-  const closeCreated = () => {
-    emit('closeDialog');
-  };
-
-  const createdConfirm = () => {
-    emit('closeDialog');
-  };
-
-  onMounted(() => {
-    nextTick(() => {
-      new ClipboardJS(copylink$.value).on('success', function (e) {
-        e.clearSelection();
-        Dialog.toast({ content: '链接复制成功', type: 'success' });
-      });
-    });
-  });
-</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/chatRoom/index.vue

@@ -48,7 +48,7 @@
         <div style="font-size: 0.65rem" v-if="isNativeLeader">
           <ImageIcon type="scene" @click="showScenes = !showScenes" />
         </div>
-        <div class="exit" @click="handleCloseRoom"></div>
+        <div class="exit" @click="showCloseDialog = true"></div>
       </div>
     </div>
     <!-- 控制条 start -->
@@ -102,6 +102,11 @@
   <!-- trtc相关  end -->
 
   <ShareContainer :share-link="shareLink" @close="shareLink = ''" />
+  <CloseDialog
+    v-if="showCloseDialog"
+    @close-dialog="showCloseDialog = false"
+    @confirm-dialog="handleCloseRoom"
+  />
 </template>
 
 <script lang="ts" setup>
@@ -120,7 +125,8 @@
   import SceneList from './sceneList.vue';
   import { useRoom } from '/@/hooks/useRoom';
   import consola from 'consola';
-  import Dialog from '../basic/dialog';
+  // import Dialog from '../basic/dialog';
+  import CloseDialog from './dialog/close.vue';
   // import { storeToRefs } from 'pinia';
   import ShareContainer from './share.vue';
   // hook
@@ -151,6 +157,7 @@
   const currentSession = computed(() => rtcStore.currentSession);
 
   const shareLink = ref<string>('');
+  const showCloseDialog = ref(false);
 
   // watchEffect(() => {
 
@@ -303,28 +310,28 @@
     console.log('localStream', localStream);
     rtcStore.unmute();
     localStream.unmuteAudio();
+    socket.emit('action', {
+      type: 'users-muted',
+      muted: false,
+      userId: rtcStore.userId,
+    });
   };
   const handleMute = () => {
     const { localStream } = useRtcSdk();
     console.log('localStream', localStream);
     rtcStore.mute();
     localStream.muteVideo();
+    socket.emit('action', {
+      type: 'users-muted',
+      muted: true,
+      userId: rtcStore.userId,
+    });
   };
 
   const handleCloseRoom = () => {
-    Dialog.confirm({
-      showCloseIcon: false,
-      okText: '立即結束',
-      content: "<span style='font-size: 16px; line-height: 1.5;'>是否結束帶看。<span/>",
-      title: '溫馨提示',
-      single: false,
-      func: (state: string) => {
-        if (state == 'ok') {
-          const { closeSocket } = useSocket();
-          closeSocket();
-        }
-      },
-    });
+    showCloseDialog.value = false;
+    const { closeSocket } = useSocket();
+    closeSocket();
   };
 
   const handleCreateShare = () => {