新增功能
This commit is contained in:
Your Name
@@ -0,0 +1,84 @@
|
||||
# 腾讯云 Chat UIKit 集成说明
|
||||
|
||||
## 功能概述
|
||||
|
||||
已成功将腾讯云 Chat UIKit Vue3 组件集成到预约管理系统的"聊天"按钮中，使用官方推荐的组件化方式。
|
||||
|
||||
## 实现内容
|
||||
|
||||
### 1. 创建聊天对话框组件
|
||||
- 文件位置: `admin/src/components/chat-dialog/index.vue`
|
||||
- 功能特性:
|
||||
- 使用 Element Plus Dialog 作为容器
|
||||
- 集成腾讯云 Chat UIKit 的官方组件：
|
||||
- UIKitProvider: 提供 IM SDK 上下文
|
||||
- ConversationList: 会话列表组件
|
||||
- Chat: 聊天消息组件
|
||||
- 自动获取医生签名并初始化聊天
|
||||
- 加载状态和错误处理
|
||||
- 响应式布局：左侧会话列表（300px）+ 右侧聊天区域
|
||||
- 动态加载样式文件
|
||||
|
||||
### 2. 集成到预约列表页面
|
||||
- 文件位置: `admin/src/views/tcm/appointment/list.vue`
|
||||
- 修改内容:
|
||||
- 导入 ChatDialog 组件
|
||||
- 添加 chatDialogRef 引用
|
||||
- 修改 handleCreatePrescription 方法，传递患者信息和诊单ID
|
||||
- 在模板中添加 chat-dialog 组件
|
||||
|
||||
### 3. 使用的 API
|
||||
- 复用现有的 `getCallSignature` API (`/tcm.diagnosis/getCallSignature`)
|
||||
- 该接口返回腾讯云 IM 所需的:
|
||||
- sdkAppId: 应用 ID
|
||||
- userId: 当前用户 ID (医生)
|
||||
- userSig: 用户签名
|
||||
- patientUserId: 患者的 IM 用户 ID
|
||||
|
||||
### 4. 使用的组件
|
||||
根据腾讯云官方文档 (https://cloud.tencent.com/document/product/269/123108)：
|
||||
- `UIKitProvider`: 提供 SDK 配置和上下文
|
||||
- `ConversationList`: 显示会话列表
|
||||
- `Chat`: 显示聊天消息和输入框
|
||||
|
||||
## 使用方式
|
||||
|
||||
1. 在预约列表中找到状态为"已预约"的记录
|
||||
2. 点击操作列中的"聊天"按钮
|
||||
3. 系统会自动:
|
||||
- 获取医生的腾讯云 IM 签名
|
||||
- 初始化聊天组件
|
||||
- 打开聊天对话框
|
||||
4. 在对话框中可以:
|
||||
- 查看左侧的会话列表
|
||||
- 在右侧与患者进行实时聊天
|
||||
- 发送文本、表情、图片等消息
|
||||
|
||||
## 技术栈
|
||||
|
||||
- @tencentcloud/chat-uikit-vue3: ^4.5.4
|
||||
- @tencentcloud/chat: IM SDK
|
||||
- Element Plus: 对话框和 UI 组件
|
||||
- Vue 3 Composition API
|
||||
|
||||
## 样式处理
|
||||
|
||||
由于 Vite 对 node_modules 中 CSS 文件的导入限制，样式文件采用动态导入方式：
|
||||
- 在组件 onMounted 时动态导入样式
|
||||
- 如果样式加载失败，功能仍可正常使用，只是缺少部分美化
|
||||
|
||||
## 注意事项
|
||||
|
||||
1. 需要确保后端 `/tcm.diagnosis/getCallSignature` 接口正常工作
|
||||
2. 需要配置腾讯云 IM 的 SDKAppID 和密钥
|
||||
3. 聊天功能需要患者端也集成相应的 IM 功能
|
||||
4. 确保网络环境支持 WebSocket 连接
|
||||
5. 会话ID格式为 `C2C{patientUserId}`，表示单聊（C2C = Client to Client）
|
||||
|
||||
## 后续优化建议
|
||||
|
||||
1. 可以自定义聊天界面的主题和样式
|
||||
2. 可以添加消息提醒功能
|
||||
3. 可以添加聊天记录的持久化存储
|
||||
4. 可以添加更多富媒体消息类型（语音、视频等）
|
||||
5. 可以优化样式加载方式，确保样式稳定加载
|
||||
@@ -0,0 +1,140 @@
|
||||
# 腾讯云 Chat UIKit 完整集成说明
|
||||
|
||||
## ✅ 已完成功能
|
||||
|
||||
### 1. 聊天界面组件
|
||||
- **文件位置**: `admin/src/components/chat-dialog/index.vue`
|
||||
- **使用官方组件**:
|
||||
- `UIKitProvider`: IM SDK 上下文提供者
|
||||
- `ConversationList`: 会话列表（左侧）
|
||||
- `Chat`: 聊天容器
|
||||
- `ChatHeader`: 聊天头部
|
||||
- `MessageList`: 消息列表
|
||||
- `MessageInput`: 消息输入框
|
||||
|
||||
### 2. 已支持的功能
|
||||
- ✅ **会话管理**: 显示所有聊天会话，支持切换
|
||||
- ✅ **文本消息**: 发送和接收文本消息
|
||||
- ✅ **表情选择**: 内置表情选择器，点击表情图标使用
|
||||
- ✅ **图片上传**: 点击图片图标上传图片
|
||||
- ✅ **文件上传**: 点击文件图标上传文件
|
||||
- ✅ **视频上传**: 点击视频图标上传视频
|
||||
- ✅ **消息状态**: 显示已读/未读状态
|
||||
- ✅ **实时通信**: WebSocket 实时消息推送
|
||||
|
||||
### 3. 登录流程
|
||||
```typescript
|
||||
await login({
|
||||
sdkAppId: Number(res.sdkAppId),
|
||||
userId: res.userId,
|
||||
userSig: res.userSig,
|
||||
useUploadPlugin: true // 启用文件上传功能
|
||||
})
|
||||
```
|
||||
|
||||
## 📝 使用说明
|
||||
|
||||
### 基本使用
|
||||
1. 在预约列表中找到"已预约"状态的记录
|
||||
2. 点击"聊天"按钮
|
||||
3. 等待初始化完成（约1-2秒）
|
||||
4. 开始聊天
|
||||
|
||||
### 功能使用
|
||||
- **发送文本**: 在输入框输入文字，点击"发送"按钮
|
||||
- **发送表情**: 点击输入框左侧的表情图标 😊
|
||||
- **发送图片**: 点击图片图标 🖼️，选择图片文件
|
||||
- **发送文件**: 点击文件图标 📁，选择任意文件
|
||||
- **发送视频**: 点击视频图标 🎬，选择视频文件
|
||||
|
||||
## 🔧 技术实现
|
||||
|
||||
### 依赖包
|
||||
- `@tencentcloud/chat-uikit-vue3`: ^4.5.4
|
||||
- `@tencentcloud/chat`: IM SDK（自动依赖）
|
||||
|
||||
### 样式文件
|
||||
- 复制到: `admin/src/assets/chat-uikit.css`
|
||||
- 导入方式: `import '@/assets/chat-uikit.css'`
|
||||
|
||||
### API 接口
|
||||
- **接口**: `/tcm.diagnosis/getCallSignature`
|
||||
- **参数**:
|
||||
- `patient_id`: 患者ID
|
||||
- `diagnosis_id`: 诊单ID
|
||||
- **返回**:
|
||||
- `sdkAppId`: 腾讯云应用ID
|
||||
- `userId`: 医生IM账号
|
||||
- `userSig`: 登录签名
|
||||
- `patientUserId`: 患者IM账号
|
||||
|
||||
## ⚙️ 配置说明
|
||||
|
||||
### 后端配置
|
||||
需要在 `server/.env` 中配置:
|
||||
```env
|
||||
[TRTC]
|
||||
SDK_APP_ID = "1600127710"
|
||||
SECRET_KEY = "your_secret_key"
|
||||
ENABLE = "true"
|
||||
```
|
||||
|
||||
### 文件上传配置
|
||||
- 已启用 `useUploadPlugin: true`
|
||||
- 支持图片、文件、视频上传
|
||||
- 需要确保服务器支持 CORS
|
||||
|
||||
## 📱 视频通话功能
|
||||
|
||||
当前聊天界面已包含基础的消息功能。如需集成音视频通话，需要：
|
||||
|
||||
1. 安装 TUICallKit 插件
|
||||
2. 在 MessageInput 中配置通话按钮
|
||||
3. 参考文档: https://cloud.tencent.com/document/product/647/115714
|
||||
|
||||
## 🎨 界面说明
|
||||
|
||||
### 布局结构
|
||||
```
|
||||
┌─────────────────────────────────────┐
|
||||
│ 与 患者名 聊天 │
|
||||
├──────────┬──────────────────────────┤
|
||||
│ │ ChatHeader │
|
||||
│ Conver- ├──────────────────────────┤
|
||||
│ sation │ │
|
||||
│ List │ MessageList │
|
||||
│ │ │
|
||||
│ (285px) ├──────────────────────────┤
|
||||
│ │ MessageInput │
|
||||
│ │ [😊][🖼️][📁][🎬] │
|
||||
└──────────┴──────────────────────────┘
|
||||
```
|
||||
|
||||
### 组件说明
|
||||
- **ConversationList**: 左侧会话列表，宽度285px
|
||||
- **ChatHeader**: 显示当前聊天对象信息
|
||||
- **MessageList**: 消息展示区域，支持滚动
|
||||
- **MessageInput**: 输入框和功能按钮
|
||||
|
||||
## ⚠️ 注意事项
|
||||
|
||||
1. **网络要求**: 需要支持 WebSocket 连接
|
||||
2. **HTTPS**: 生产环境建议使用 HTTPS
|
||||
3. **文件大小**: 注意文件上传大小限制
|
||||
4. **患者端**: 患者端也需要集成相应的 IM 功能
|
||||
5. **登出**: 关闭对话框时会自动登出 IM
|
||||
|
||||
## 🚀 后续优化
|
||||
|
||||
1. 集成 TUICallKit 实现音视频通话
|
||||
2. 添加消息提醒和未读数提示
|
||||
3. 自定义主题和样式
|
||||
4. 添加消息撤回功能
|
||||
5. 支持消息引用和转发
|
||||
6. 添加聊天记录导出功能
|
||||
|
||||
## 📚 参考文档
|
||||
|
||||
- [Chat UIKit Vue3 官方文档](https://cloud.tencent.com/document/product/269/123108)
|
||||
- [IM SDK API 文档](https://cloud.tencent.com/document/product/269/37411)
|
||||
- [TUICallKit 集成文档](https://cloud.tencent.com/document/product/647/115714)
|
||||
@@ -0,0 +1,117 @@
|
||||
# 表情功能故障排查指南
|
||||
|
||||
## 问题描述
|
||||
表情按钮显示但点击无反应
|
||||
|
||||
## 可能的原因
|
||||
|
||||
### 1. 表情包资源未加载
|
||||
腾讯云 Chat UIKit 的表情包需要从 CDN 加载资源。
|
||||
|
||||
**检查方法**：
|
||||
1. 打开浏览器开发者工具（F12）
|
||||
2. 切换到 Console 标签
|
||||
3. 查看是否有表情相关的错误信息
|
||||
4. 切换到 Network 标签
|
||||
5. 点击表情按钮，查看是否有请求失败
|
||||
|
||||
### 2. 表情包版权限制
|
||||
根据腾讯云文档说明：
|
||||
> 为尊重表情设计版权，chat-uikit-vue3 工程中不包含大表情元素切图，正式上线商用前请您替换为自己设计或拥有版权的其他表情包。默认的小黄脸表情包版权归腾讯云所有，仅供授权使用。
|
||||
|
||||
**解决方案**：
|
||||
- 使用腾讯云提供的默认表情包（需要授权）
|
||||
- 或者配置自己的表情包
|
||||
|
||||
### 3. 样式文件加载问题
|
||||
表情选择器的样式可能没有正确加载。
|
||||
|
||||
**检查方法**：
|
||||
1. 打开开发者工具
|
||||
2. 点击表情按钮
|
||||
3. 检查 Elements 标签，看是否有表情选择器的 DOM 元素生成
|
||||
4. 检查该元素的样式是否正确应用
|
||||
|
||||
## 解决方案
|
||||
|
||||
### 方案 1：检查网络请求
|
||||
```javascript
|
||||
// 在浏览器控制台执行
|
||||
console.log('检查表情资源加载情况')
|
||||
```
|
||||
|
||||
### 方案 2：使用自定义表情包
|
||||
如果默认表情包无法使用，可以配置自定义表情包。
|
||||
|
||||
需要修改 `MessageInput` 组件的配置：
|
||||
|
||||
```vue
|
||||
<MessageInput :emojiConfig="customEmojiConfig" />
|
||||
```
|
||||
|
||||
```typescript
|
||||
const customEmojiConfig = {
|
||||
emojiList: [
|
||||
{ name: '微笑', url: '/emoji/smile.png', code: '[微笑]' },
|
||||
{ name: '大笑', url: '/emoji/laugh.png', code: '[大笑]' },
|
||||
// ... 更多表情
|
||||
]
|
||||
}
|
||||
```
|
||||
|
||||
### 方案 3：暂时禁用表情功能
|
||||
如果表情功能不是必需的，可以暂时禁用：
|
||||
|
||||
```vue
|
||||
<MessageInput :showEmoji="false" />
|
||||
```
|
||||
|
||||
### 方案 4：联系腾讯云获取授权
|
||||
如果需要使用腾讯云的默认表情包，需要：
|
||||
1. 访问 [腾讯云工单系统](https://console.cloud.tencent.com/workorder/category)
|
||||
2. 提交工单申请表情包使用授权
|
||||
|
||||
## 临时解决方案
|
||||
|
||||
目前其他功能（文本、图片、文件、视频）都可以正常使用。表情功能可以：
|
||||
1. 先跳过，使用文本消息
|
||||
2. 或者使用 Unicode 表情符号（😊😂❤️等）直接在文本中输入
|
||||
|
||||
## 调试步骤
|
||||
|
||||
### 步骤 1：检查控制台错误
|
||||
打开浏览器控制台，点击表情按钮，查看是否有错误信息：
|
||||
- 404 错误：表情资源文件未找到
|
||||
- CORS 错误：跨域问题
|
||||
- 其他 JavaScript 错误
|
||||
|
||||
### 步骤 2：检查 DOM 元素
|
||||
点击表情按钮后，检查是否生成了表情选择器的 DOM：
|
||||
```
|
||||
<div class="emoji-picker">
|
||||
<!-- 应该有表情列表 -->
|
||||
</div>
|
||||
```
|
||||
|
||||
### 步骤 3：检查样式
|
||||
如果 DOM 存在但不可见，可能是样式问题：
|
||||
```css
|
||||
/* 检查这些样式是否正确加载 */
|
||||
.emoji-picker {
|
||||
display: block;
|
||||
position: absolute;
|
||||
/* ... */
|
||||
}
|
||||
```
|
||||
|
||||
## 建议
|
||||
|
||||
1. **短期方案**：使用文本消息和其他功能（图片、文件等）
|
||||
2. **中期方案**：配置自定义表情包
|
||||
3. **长期方案**：申请腾讯云表情包授权或购买商业表情包
|
||||
|
||||
## 参考文档
|
||||
|
||||
- [Chat UIKit Vue3 官方文档](https://cloud.tencent.com/document/product/269/123108)
|
||||
- [表情包配置说明](https://cloud.tencent.com/document/product/269/37411)
|
||||
- [工单提交](https://console.cloud.tencent.com/workorder/category)
|
||||
@@ -51,6 +51,15 @@
|
||||
}
|
||||
}
|
||||
</style>
|
||||
<script>
|
||||
// 动态加载 Chat UIKit 样式
|
||||
(function() {
|
||||
var link = document.createElement('link');
|
||||
link.rel = 'stylesheet';
|
||||
link.href = 'https://web.sdk.qcloud.com/im/assets/latest/index.css';
|
||||
document.head.appendChild(link);
|
||||
})();
|
||||
</script>
|
||||
</head>
|
||||
<body>
|
||||
<div id="app">
|
||||
|
||||
Generated
+1376
-12
File diff suppressed because it is too large
Load Diff
+2
-1
@@ -12,7 +12,8 @@
|
||||
"dependencies": {
|
||||
"@element-plus/icons-vue": "^2.3.1",
|
||||
"@highlightjs/vue-plugin": "^2.1.0",
|
||||
"@trtc/calls-uikit-vue": "^4.2.2",
|
||||
"@tencentcloud/chat-uikit-vue3": "^4.5.4",
|
||||
"@trtc/calls-uikit-vue": "^4.4.6",
|
||||
"@vue/shared": "^3.5.13",
|
||||
"@vueuse/core": "^12.7.0",
|
||||
"@wangeditor/editor": "^5.1.23",
|
||||
|
||||
@@ -0,0 +1 @@
|
||||
/*! normalize.css v8.0.1 | MIT License | github.com/necolas/normalize.css */html{line-height:1.15;-webkit-text-size-adjust:100%}body{margin:0}main{display:block}h1{font-size:2em;margin:.67em 0}hr{box-sizing:content-box;height:0;overflow:visible}pre{font-family:monospace,monospace;font-size:1em}a{background-color:transparent}abbr[title]{border-bottom:none;text-decoration:underline;text-decoration:underline dotted}b,strong{font-weight:bolder}code,kbd,samp{font-family:monospace,monospace;font-size:1em}small{font-size:80%}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}sub{bottom:-.25em}sup{top:-.5em}img{border-style:none}button,input,optgroup,select,textarea{font-family:inherit;font-size:100%;line-height:1.15;margin:0}button,input{overflow:visible}button,select{text-transform:none}button,[type=button],[type=reset],[type=submit]{-webkit-appearance:button}button::-moz-focus-inner,[type=button]::-moz-focus-inner,[type=reset]::-moz-focus-inner,[type=submit]::-moz-focus-inner{border-style:none;padding:0}button:-moz-focusring,[type=button]:-moz-focusring,[type=reset]:-moz-focusring,[type=submit]:-moz-focusring{outline:1px dotted ButtonText}fieldset{padding:.35em .75em .625em}legend{box-sizing:border-box;color:inherit;display:table;max-width:100%;padding:0;white-space:normal}progress{vertical-align:baseline}textarea{overflow:auto}[type=checkbox],[type=radio]{box-sizing:border-box;padding:0}[type=number]::-webkit-inner-spin-button,[type=number]::-webkit-outer-spin-button{height:auto}[type=search]{-webkit-appearance:textfield;outline-offset:-2px}[type=search]::-webkit-search-decoration{-webkit-appearance:none}::-webkit-file-upload-button{-webkit-appearance:button;font:inherit}details{display:block}summary{display:list-item}template{display:none}[hidden]{display:none}:root{-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}*,*:after,*:before{box-sizing:border-box}ul,li{list-style:none;padding:0;margin:0}picture,img,video,canvas,svg{display:block;max-width:100%}img{max-width:100%;height:auto;vertical-align:middle;image-rendering:-webkit-optimize-contrast;aspect-ratio:attr(width)/attr(height);display:inline-block;-webkit-user-drag:none;-webkit-user-select:none;user-select:none}img:not([src],[srcset]){visibility:hidden}
|
||||
@@ -0,0 +1,63 @@
|
||||
<template>
|
||||
<div class="side-tab" :class="{ dark: isDark }">
|
||||
<!-- 用户头像 -->
|
||||
<div class="avatar-wrapper">
|
||||
<Avatar class="avatar" :src="loginUserInfo?.avatarUrl" />
|
||||
<div class="tooltip">
|
||||
<div class="tooltip-name">{{ loginUserInfo?.userName || '未命名' }}</div>
|
||||
<div class="tooltip-id">ID: {{ loginUserInfo?.userId }}</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- Tab 切换 -->
|
||||
<div class="tabs">
|
||||
<div
|
||||
class="tab-item"
|
||||
:class="{ active: props.activeTab === 'conversations' }"
|
||||
@click="handleTabChange('conversations')"
|
||||
title="会话"
|
||||
>
|
||||
<IconChatNew size="24" />
|
||||
</div>
|
||||
<div
|
||||
class="tab-item"
|
||||
:class="{ active: props.activeTab === 'contacts' }"
|
||||
@click="handleTabChange('contacts')"
|
||||
title="联系人"
|
||||
>
|
||||
<IconContacts size="24" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
|
||||
<script lang="ts" setup>
|
||||
import { computed } from 'vue';
|
||||
import { useLoginState, useUIKit, Avatar } from '@tencentcloud/chat-uikit-vue3';
|
||||
import { IconChatNew, IconContacts } from '@tencentcloud/uikit-base-component-vue3';
|
||||
|
||||
const { theme } = useUIKit();
|
||||
const { loginUserInfo } = useLoginState();
|
||||
|
||||
const isDark = computed(() => theme.value === 'dark' || theme.value === 'serious');
|
||||
|
||||
interface Props {
|
||||
activeTab?: 'conversations' | 'contacts';
|
||||
}
|
||||
|
||||
const props = withDefaults(defineProps<Props>(), {
|
||||
activeTab: 'conversations'
|
||||
});
|
||||
|
||||
const emit = defineEmits<{
|
||||
tabChange: [tab: 'conversations' | 'contacts'];
|
||||
}>();
|
||||
|
||||
const handleTabChange = (tab: 'conversations' | 'contacts') => {
|
||||
emit('tabChange', tab);
|
||||
};
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.side-tab{width:72px;height:100vh;background:var(--bg-color-function);display:flex;flex-direction:column;align-items:center;padding:20px 0;transition:background 0.3s;}.avatar-wrapper{position:relative;margin-bottom:24px;cursor:pointer;}.avatar-wrapper:hover:deep(.avatar){transform:scale(1.05);box-shadow:0 4px 12px rgba(0,0,0,0.15);}.tooltip{position:absolute;left:60px;top:50%;transform:translateY(-50%);padding:8px 12px;background:rgba(0,0,0,0.85);color:#fff;border-radius:6px;white-space:nowrap;opacity:0;visibility:hidden;pointer-events:none;transition:all 0.3s;z-index:1000;}.tooltip::before{content:'';position:absolute;left:-6px;top:50%;transform:translateY(-50%);border:6px solid transparent;border-right-color:rgba(0,0,0,0.85);}.avatar-wrapper:hover .tooltip{opacity:1;visibility:visible;}.tooltip-name{font-size:14px;font-weight:500;margin-bottom:4px;}.tooltip-id{font-size:12px;opacity:0.8;}.tabs{display:flex;flex-direction:column;gap:16px;}.tab-item{width:48px;height:48px;display:flex;align-items:center;justify-content:center;border-radius:12px;cursor:pointer;transition:all 0.3s;color:var(--text-color-primary);}.tab-item:hover{background:rgba(0,0,0,0.05);}.tab-item.active{background:var(--button-color-primary-default);color:var(--text-color-button);}.side-tab.dark{background:#1a1a1a;}.side-tab.dark .avatar-wrapper:hover:deep(.avatar){box-shadow:0 4px 12px rgba(255,255,255,0.2);}.side-tab.dark .tooltip{background:rgba(255,255,255,0.95);color:#1a1a1a;}.side-tab.dark .tooltip::before{border-right-color:rgba(255,255,255,0.95);}.side-tab.dark .tab-item:hover{background:rgba(255,255,255,0.1);}.side-tab.dark .tab-item.active{background:#1890ff;color:#fff;}
|
||||
</style>
|
||||
@@ -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>
|
||||
@@ -188,15 +188,15 @@
|
||||
>
|
||||
完成视频面诊
|
||||
</el-button>
|
||||
<!-- <el-button
|
||||
<el-button
|
||||
v-if="row.status === 1"
|
||||
v-perms="['doctor.appointment/prescription']"
|
||||
type="success"
|
||||
link
|
||||
@click="handleCreatePrescription(row)"
|
||||
>
|
||||
创建处方单
|
||||
</el-button> -->
|
||||
聊天
|
||||
</el-button>
|
||||
</template>
|
||||
</el-table-column>
|
||||
</el-table>
|
||||
@@ -262,6 +262,9 @@
|
||||
|
||||
<!-- 处方单抽屉 -->
|
||||
<prescription-drawer ref="prescriptionDrawerRef" @success="loadData" />
|
||||
|
||||
<!-- 聊天对话框 -->
|
||||
<chat-dialog ref="chatDialogRef" />
|
||||
</div>
|
||||
</template>
|
||||
|
||||
@@ -272,6 +275,7 @@ import feedback from '@/utils/feedback'
|
||||
import EditPopup from '../diagnosis/edit.vue'
|
||||
import VideoCall from '@/components/video-call/index.vue'
|
||||
import PrescriptionDrawer from './components/prescription-drawer.vue'
|
||||
import ChatDialog from '@/components/chat-dialog/index.vue'
|
||||
import useUserStore from '@/stores/modules/user'
|
||||
|
||||
const userStore = useUserStore()
|
||||
@@ -364,6 +368,7 @@ const detailData = ref<any>(null)
|
||||
const editRef = ref()
|
||||
const videoCallRef = ref()
|
||||
const prescriptionDrawerRef = ref()
|
||||
const chatDialogRef = ref()
|
||||
|
||||
// 查看详情
|
||||
const handleDetail = async (row: any) => {
|
||||
@@ -456,13 +461,22 @@ const handleGroupVideoCall = (row: any) => {
|
||||
|
||||
// 创建处方单
|
||||
const handleCreatePrescription = async (row: any) => {
|
||||
try {
|
||||
// 获取详细信息
|
||||
const detail = await appointmentDetail({ id: row.id })
|
||||
prescriptionDrawerRef.value?.open(detail)
|
||||
} catch (error) {
|
||||
feedback.msgError('获取患者信息失败')
|
||||
if (!row.patient_id) {
|
||||
feedback.msgWarning('患者信息不完整')
|
||||
return
|
||||
}
|
||||
|
||||
// 检查是否有诊单ID
|
||||
if (!row.diagnosis_id && !row.id) {
|
||||
feedback.msgWarning('预约信息不完整，无法发起聊天')
|
||||
return
|
||||
}
|
||||
|
||||
chatDialogRef.value?.open({
|
||||
patientId: row.patient_id,
|
||||
patientName: row.patient_name,
|
||||
diagnosisId: row.diagnosis_id || row.id // 使用诊单ID，如果没有则使用预约ID
|
||||
})
|
||||
}
|
||||
|
||||
loadData()
|
||||
|
||||
@@ -11,6 +11,12 @@
|
||||
"style": {
|
||||
"navigationBarTitleText": "uni-app"
|
||||
}
|
||||
},
|
||||
{
|
||||
"path": "static/cs",
|
||||
"style": {
|
||||
"navigationBarTitleText": ""
|
||||
}
|
||||
}
|
||||
],
|
||||
"subPackages": [
|
||||
|
||||
@@ -0,0 +1,13 @@
|
||||
<template>
|
||||
<view>
|
||||
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
|
||||
</script>
|
||||
|
||||
<style>
|
||||
|
||||
</style>
|
||||
Reference in New Issue
Block a user