添加语音界面

src/views/im/chat/index.vue

@@ -41,7 +41,7 @@
 
               <!-- 图片消息 -->
               <div
-                class="content"
+                class="img-message"
                 v-else-if="item.contentType === MSG_TYPE.IMAGE"
               >
                 <van-image
@@ -166,6 +166,12 @@
         </div>
       </div>
     </div>
+    <!-- 语音 -->
+    <VoiceCallModal
+      v-if="showVoiceCall"
+      :user="currentUser"
+      @hangup="handleHangup"
+    />
   </div>
 </template>
 
@@ -181,6 +187,7 @@ import  messageAudio from "@/views/im/components/messageAudio/index.vue";
 import { showToast,showImagePreview } from 'vant';
 import {useWebRTCStore} from "@/stores/modules/webrtcStore"; 
 import * as Constant from "@/common/constant/Constant";
+import VoiceCallModal from '@/views/im/components/VoiceCallModal/index.vue';
 
 const IM_PATH = import.meta.env.VITE_IM_PATH_FIlE;
 // 路由 & store
@@ -201,6 +208,13 @@ const appBoxHeight = ref(210);
 const chatListRef = ref(null);
 const emojiRef = ref(null);
 const toolsRef = ref(null);
+const showVoiceCall = ref(false);
+
+// 示例用户
+const currentUser = ref({
+  avatar: 'https://example.com/avatar.jpg',
+  nickname: '张三'
+});
 
 const isSender = (toUsername) => {
   return walletStore.account === toUsername;
@@ -403,6 +417,7 @@ const beforeRead = (file) => {
 
 // 开启语音电话
 const startAudioOnline = async () => {
+  showVoiceCall.value = true;
   // 初始化webrtc连接
   rtcStore.initConnection(MESSAGE_TYPE_USER, {
     fromUsername: walletStore.username,
@@ -438,6 +453,10 @@ const startAudioOnline = async () => {
   // const   webRTCStore.createOffer()
 };
 
+const handleHangup = () => {
+  showVoiceCall.value = false;
+};
+
 // 时间格式化
 const formatTime = (timestamp) => {
   const date = new Date(timestamp);

src/views/im/components/VoiceCallModal/index.vue

@@ -0,0 +1,106 @@
+<template>
+    <div class="voice-call-overlay">
+      <div class="call-container">
+        <img class="avatar" :src="user.avatar" />
+        <div class="nickname">{{ user.nickname }}</div>
+        <div class="call-status">{{ callStatus }}</div>
+        <div class="call-duration" v-if="callStatus === '通话中'">{{ callDuration }}</div>
+        <button class="hangup-button" @click="hangup">挂断</button>
+      </div>
+    </div>
+  </template>
+  
+  <script setup>
+  import { ref, onMounted, onBeforeUnmount } from 'vue';
+  const props = defineProps({
+    user: {
+      type: Object,
+      required: true
+    }
+  });
+  const emit = defineEmits(['hangup']);
+  
+  const callStatus = ref('正在呼叫...');
+  const callDuration = ref('00:00');
+  let timer = null;
+  
+  const startCallTimer = () => {
+    let seconds = 0;
+    timer = setInterval(() => {
+      seconds++;
+      const m = String(Math.floor(seconds / 60)).padStart(2, '0');
+      const s = String(seconds % 60).padStart(2, '0');
+      callDuration.value = `${m}:${s}`;
+    }, 1000);
+  };
+  
+  const hangup = () => {
+    emit('hangup');
+  };
+  
+  onMounted(() => {
+    // 模拟3秒后进入通话状态
+    setTimeout(() => {
+      callStatus.value = '通话中';
+      startCallTimer();
+    }, 3000);
+  });
+  
+  onBeforeUnmount(() => {
+    clearInterval(timer);
+  });
+  </script>
+  
+  <style scoped>
+  .voice-call-overlay {
+    position: fixed;
+    top: 0;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    background: #000;
+    color: #fff;
+    z-index: 9999;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+  }
+  
+  .call-container {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+  }
+  
+  .avatar {
+    width: 100px;
+    height: 100px;
+    border-radius: 50%;
+    margin-bottom: 20px;
+  }
+  
+  .nickname {
+    font-size: 20px;
+    margin-bottom: 10px;
+  }
+  
+  .call-status {
+    font-size: 16px;
+    margin-bottom: 5px;
+  }
+  
+  .call-duration {
+    font-size: 16px;
+    margin-bottom: 20px;
+  }
+  
+  .hangup-button {
+    background-color: red;
+    border: none;
+    padding: 12px 30px;
+    color: white;
+    border-radius: 24px;
+    font-size: 16px;
+  }
+  </style>
+