新增功能

2026-03-09 09:55:04 +08:00
parent 7b76671988
commit 02ae537b4c
12 changed files with 2019 additions and 22 deletions
@@ -0,0 +1,185 @@
+<template>
+  <el-dialog
+    v-model="visible"
+    :title="`与 ${patientName} 聊天`"
+    width="1200px"
+    top="5vh"
+    :close-on-click-modal="false"
+    @close="handleClose"
+    :destroy-on-close="true"
+    class="chat-dialog"
+  >
+    <div class="chat-container">
+      <div v-if="!isReady" class="loading-container">
+        <el-icon class="is-loading"><Loading /></el-icon>
+        <span>{{ loadingText }}</span>
+      </div>
+      <div v-else-if="error" class="error-container">
+        <el-alert :title="error" type="error" :closable="false" />
+      </div>
+      <div v-else class="chat-content">
+        <UIKitProvider>
+          <div class="chat-layout">
+            <ConversationList class="conversation-list" />
+            <Chat class="chat-area">
+              <MessageList />
+              <MessageInput />
+            </Chat>
+          </div>
+        </UIKitProvider>
+      </div>
+    </div>
+  </el-dialog>
+</template>
+
+<script setup lang="ts">
+import { ref } from 'vue'
+import { Loading } from '@element-plus/icons-vue'
+import { getCallSignature } from '@/api/tcm'
+import feedback from '@/utils/feedback'
+import {
+  ConversationList,
+  Chat,
+  MessageList,
+  MessageInput,
+  UIKitProvider,
+  useLoginState
+} from '@tencentcloud/chat-uikit-vue3'
+import '@/assets/chat-uikit.css'
+
+const visible = ref(false)
+const isReady = ref(false)
+const error = ref('')
+const patientName = ref('')
+const patientId = ref<number | null>(null)
+const diagnosisId = ref<number | null>(null)
+const loadingText = ref('正在初始化...')
+const patientUserId = ref('')
+
+const { login, logout } = useLoginState()
+
+const open = async (data: { patientId: number; patientName: string; diagnosisId?: number }) => {
+  visible.value = true
+  patientName.value = data.patientName
+  patientId.value = data.patientId
+  diagnosisId.value = data.diagnosisId || null
+  error.value = ''
+  isReady.value = false
+  loadingText.value = '正在获取签名...'
+  
+  try {
+    // 获取医生的签名信息
+    const res = await getCallSignature({ 
+      patient_id: data.patientId,
+      diagnosis_id: data.diagnosisId || 0
+    })
+    
+    console.log('后端返回的签名数据:', res)
+    
+    if (!res || !res.userSig) {
+      throw new Error('获取签名失败')
+    }
+    
+    patientUserId.value = res.patientUserId || `patient_${data.patientId}`
+    
+    loadingText.value = '正在登录聊天系统...'
+    
+    // 登录 IM
+    await login({
+      sdkAppId: Number(res.sdkAppId),
+      userId: res.userId,
+      userSig: res.userSig,
+      useUploadPlugin: true
+    })
+    
+    console.log('IM 登录成功')
+    
+    loadingText.value = '加载聊天界面...'
+    
+    // 等待一下让组件完全初始化
+    setTimeout(() => {
+      isReady.value = true
+    }, 500)
+    
+  } catch (err: any) {
+    console.error('初始化聊天失败:', err)
+    error.value = err.message || '初始化聊天失败'
+    feedback.msgError(error.value)
+  }
+}
+
+const handleClose = () => {
+  // 登出
+  logout()
+  visible.value = false
+  isReady.value = false
+  error.value = ''
+  patientId.value = null
+  diagnosisId.value = null
+  patientUserId.value = ''
+}
+
+defineExpose({ open })
+</script>
+
+<style scoped lang="scss">
+.chat-dialog {
+  :deep(.el-dialog__body) {
+    padding: 0;
+    height: 75vh;
+  }
+  
+  :deep(.el-dialog__header) {
+    padding: 16px 20px;
+    border-bottom: 1px solid #e4e7ed;
+  }
+}
+
+.chat-container {
+  height: 75vh;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.loading-container {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 12px;
+  color: #909399;
+  
+  .el-icon {
+    font-size: 32px;
+  }
+}
+
+.error-container {
+  width: 100%;
+  padding: 20px;
+}
+
+.chat-content {
+  width: 100%;
+  height: 100%;
+  overflow: hidden;
+}
+
+.chat-layout {
+  display: flex;
+  height: 100%;
+  width: 100%;
+  
+  .conversation-list {
+    width: 285px;
+    flex-shrink: 0;
+  }
+  
+  .chat-area {
+    flex: 1;
+    display: flex;
+    flex-direction: column;
+  }
+}
+
+</style>