|
@@ -167,8 +167,19 @@
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
- <!-- 语音通话 -->
|
|
|
- <CallController></CallController>
|
|
|
+
|
|
|
+ <!-- 来电弹窗 -->
|
|
|
+ <div v-if="rtcStore.imSate.videoCallModal && !inCall" class="call-modal">
|
|
|
+ <p>{{ rtcStore.imSate.callName }} 正在呼叫你</p>
|
|
|
+ <button @click="acceptCall">接听</button>
|
|
|
+ <button @click="rejectCall">拒接</button>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <!-- 通话中显示挂断按钮 -->
|
|
|
+ <div v-if="inCall" class="call-modal">
|
|
|
+ <p>与 {{ rtcStore.imSate.callName }} 通话中...</p>
|
|
|
+ <button @click="hangupCall">挂断</button>
|
|
|
+ </div>
|
|
|
</div>
|
|
|
</template>
|
|
|
|
|
@@ -205,7 +216,6 @@ const appBoxHeight = ref(210);
|
|
|
const chatListRef = ref(null);
|
|
|
const emojiRef = ref(null);
|
|
|
const toolsRef = ref(null);
|
|
|
-const imState = reactive(rtcStore.imSate); // 来电弹窗显示,callName,fromUserUuid
|
|
|
const inCall = ref(false); // 是否处于通话中
|
|
|
|
|
|
// 示例用户
|
|
@@ -423,12 +433,35 @@ const beforeRead = (file) => {
|
|
|
};
|
|
|
|
|
|
// 创建呼叫:开启语音电话: 调试用,正式逻辑读src/views/im/hook/messagesHook.js
|
|
|
-const startVoiceCall = () => {
|
|
|
- rtcStore.startCall({
|
|
|
- type: "audio",
|
|
|
- toUserUuid: route.query.uuid, // 当前聊天对象的 uuid
|
|
|
+// ==== 1. 发起语音通话 ====
|
|
|
+const startAudioOnline = async () => {
|
|
|
+ inCall.value = true
|
|
|
+ wsStore.sendMessage({
|
|
|
+ messageType: MESSAGE_TYPE_USER, // 单聊消息
|
|
|
+ contentType: Constant.DIAL_AUDIO_ONLINE,
|
|
|
+ type: Constant.MESSAGE_TRANS_TYPE,
|
|
|
});
|
|
|
};
|
|
|
+// ==== 2. 接听来电 ====
|
|
|
+async function acceptCall() {}
|
|
|
+
|
|
|
+// ==== 3. 拒接来电 ====
|
|
|
+function rejectCall() {
|
|
|
+ wsStore.sendMessage({
|
|
|
+ messageType: MESSAGE_TYPE_USER, // 单聊消息
|
|
|
+ contentType: Constant.REJECT_AUDIO_ONLINE,
|
|
|
+ type: Constant.MESSAGE_TRANS_TYPE,
|
|
|
+ });
|
|
|
+}
|
|
|
+
|
|
|
+// ==== 4. 挂断通话 ====
|
|
|
+function hangupCall() {
|
|
|
+ rtcStore.cleanup();
|
|
|
+}
|
|
|
+
|
|
|
+// ==== 5. 监听信令消息 ====
|
|
|
+// 建议你在 useWebSocketStore 里实现 onMessage 订阅信令消息
|
|
|
+// 这里模拟简易监听,示范关键流程
|
|
|
|
|
|
// 时间格式化
|
|
|
const formatTime = (timestamp) => {
|