316 lines
7.7 KiB
Vue
316 lines
7.7 KiB
Vue
<template>
|
||
<view class="page-container">
|
||
<!-- TUICallKit 组件 - 确保在最上层 -->
|
||
<view class="call-kit-wrapper" v-if="isLogin">
|
||
<TUICallKit></TUICallKit>
|
||
</view>
|
||
|
||
<!-- 登录界面 -->
|
||
<view class="loginBox">
|
||
<input
|
||
class="input-box"
|
||
v-model="patientId"
|
||
:placeholder="!isLogin ? '请输入患者ID（数字）' : '输入医生ID或完整userId（如：doctor_1）'"
|
||
placeholder-style="color:#BBBBBB;"
|
||
/>
|
||
<view class="login">
|
||
<button
|
||
class="loginBtn"
|
||
@click="!isLogin ? loginHandler() : callHandler()"
|
||
:disabled="loading"
|
||
>
|
||
{{ loading ? '加载中...' : (!isLogin ? "登录" : "呼叫") }}
|
||
</button>
|
||
</view>
|
||
<view v-if="isLogin" class="status-info">
|
||
<text>当前登录: {{ currentUserId }}</text>
|
||
<text>通话状态: {{ callStatus }}</text>
|
||
<text class="tip">提示：呼叫医生请输入医生ID（如：1）或完整ID（如：doctor_1）</text>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</template>
|
||
|
||
<script setup>
|
||
import { ref, computed, onMounted, onUnmounted, nextTick } from "vue";
|
||
import { TUICallKitAPI, TUIStore, StoreName, NAME } from "../src/index";
|
||
import TUICallKit from "../src/Components/TUICallKit";
|
||
|
||
let patientId = ref("2"); // 患者ID（数字）
|
||
let currentUserId = ref(""); // 当前登录的userId
|
||
let isLogin = ref(false);
|
||
let loading = ref(false);
|
||
|
||
// 计算属性 - 通话状态
|
||
const callStatus = computed(() => {
|
||
const status = TUIStore.getData(StoreName.CALL, NAME.CALL_STATUS);
|
||
return status || 'IDLE';
|
||
});
|
||
|
||
// 监听通话状态
|
||
onMounted(() => {
|
||
console.log('=== 页面已挂载 ===');
|
||
|
||
// 设置详细日志级别
|
||
try {
|
||
TUICallKitAPI.setLogLevel(1); // 0: 普通, 1: 详细
|
||
console.log('=== 已设置详细日志级别 ===');
|
||
} catch (error) {
|
||
console.log('设置日志级别失败:', error);
|
||
}
|
||
|
||
TUIStore.watch(StoreName.CALL, {
|
||
[NAME.CALL_STATUS]: (newStatus) => {
|
||
console.log('=== 通话状态变化 ===', newStatus);
|
||
console.log('可能的状态值: idle, calling, connected');
|
||
},
|
||
[NAME.IS_GROUP]: (isGroup) => {
|
||
console.log('=== 是否群组通话 ===', isGroup);
|
||
},
|
||
[NAME.CALL_ROLE]: (role) => {
|
||
console.log('=== 通话角色 ===', role);
|
||
},
|
||
[NAME.CALL_MEDIA_TYPE]: (type) => {
|
||
console.log('=== 通话类型 ===', type);
|
||
}
|
||
});
|
||
});
|
||
|
||
onUnmounted(() => {
|
||
TUIStore.unwatch(StoreName.CALL, {
|
||
[NAME.CALL_STATUS]: () => {},
|
||
[NAME.IS_GROUP]: () => {},
|
||
[NAME.CALL_ROLE]: () => {},
|
||
[NAME.CALL_MEDIA_TYPE]: () => {}
|
||
});
|
||
});
|
||
|
||
// 从后端获取签名
|
||
const getSignatureFromServer = async (patientId) => {
|
||
return new Promise((resolve, reject) => {
|
||
uni.request({
|
||
url: 'https://api.zzzhengyangtang.cn/api/tcm/getPatientSignature', // 后端接口地址 // 替换为你的后端地址
|
||
method: 'GET',
|
||
data: {
|
||
patient_id: patientId
|
||
},
|
||
success: (res) => {
|
||
if (res.data && res.data.code === 1) {
|
||
resolve(res.data.data);
|
||
} else {
|
||
reject(new Error(res.data.msg || '获取签名失败'));
|
||
}
|
||
},
|
||
fail: (err) => {
|
||
reject(err);
|
||
}
|
||
});
|
||
});
|
||
};
|
||
|
||
const loginHandler = async () => {
|
||
if (!patientId.value) {
|
||
uni.showToast({
|
||
title: '请输入患者ID',
|
||
icon: 'none'
|
||
});
|
||
return;
|
||
}
|
||
|
||
try {
|
||
loading.value = true;
|
||
|
||
uni.showLoading({
|
||
title: '正在获取签名...'
|
||
});
|
||
|
||
// 从后端获取签名
|
||
const signatureData = await getSignatureFromServer(patientId.value);
|
||
|
||
console.log('获取签名成功:', signatureData);
|
||
|
||
const { sdkAppId, userId, userSig } = signatureData;
|
||
currentUserId.value = userId;
|
||
|
||
console.log('=== 小程序端登录信息 ===');
|
||
console.log('sdkAppId:', sdkAppId);
|
||
console.log('userId:', userId);
|
||
console.log('userSig 长度:', userSig?.length);
|
||
|
||
uni.showLoading({
|
||
title: '正在初始化...'
|
||
});
|
||
|
||
// 初始化 TUICallKit
|
||
await TUICallKitAPI.init({
|
||
sdkAppID: Number(sdkAppId), // 确保是数字类型
|
||
userID: userId, // 应该是 patient_2 格式
|
||
userSig: userSig,
|
||
});
|
||
|
||
console.log('TUICallKit 初始化成功, userId:', userId);
|
||
|
||
// 等待一下确保初始化完成
|
||
await new Promise(resolve => setTimeout(resolve, 1000));
|
||
|
||
// 小程序端使用 TUIStore 监听状态变化，而不是 .on() 方法
|
||
// TUICallKit 组件会自动处理来电显示
|
||
console.log('=== TUICallKit 初始化完成，等待来电 ===');
|
||
|
||
isLogin.value = true;
|
||
|
||
// 等待组件挂载
|
||
await nextTick();
|
||
|
||
console.log('=== TUICallKit 组件已挂载 ===');
|
||
console.log('当前通话状态:', callStatus.value);
|
||
console.log('完整状态信息:', {
|
||
callStatus: TUIStore.getData(StoreName.CALL, NAME.CALL_STATUS),
|
||
isGroup: TUIStore.getData(StoreName.CALL, NAME.IS_GROUP),
|
||
callRole: TUIStore.getData(StoreName.CALL, NAME.CALL_ROLE),
|
||
callMediaType: TUIStore.getData(StoreName.CALL, NAME.CALL_MEDIA_TYPE),
|
||
localUserInfo: TUIStore.getData(StoreName.CALL, NAME.LOCAL_USER_INFO)
|
||
});
|
||
|
||
uni.hideLoading();
|
||
uni.showToast({
|
||
title: '登录成功',
|
||
icon: 'success'
|
||
});
|
||
|
||
// 清空输入框，准备输入呼叫目标
|
||
patientId.value = "";
|
||
|
||
} catch (error) {
|
||
console.error('登录失败:', error);
|
||
uni.hideLoading();
|
||
uni.showToast({
|
||
title: '登录失败: ' + (error.message || '未知错误'),
|
||
icon: 'none',
|
||
duration: 3000
|
||
});
|
||
} finally {
|
||
loading.value = false;
|
||
}
|
||
};
|
||
|
||
const callHandler = async () => {
|
||
if (!patientId.value) {
|
||
uni.showToast({
|
||
title: '请输入要呼叫的用户ID',
|
||
icon: 'none'
|
||
});
|
||
return;
|
||
}
|
||
|
||
try {
|
||
loading.value = true;
|
||
|
||
// 构建目标用户ID - 确保格式一致
|
||
// 如果输入的是纯数字，转换为 doctor_X 格式（假设呼叫医生）
|
||
// 如果已经包含前缀，直接使用
|
||
let targetUserId = patientId.value;
|
||
if (/^\d+$/.test(patientId.value)) {
|
||
// 纯数字，添加 doctor_ 前缀（患者呼叫医生）
|
||
targetUserId = `doctor_${patientId.value}`;
|
||
}
|
||
|
||
console.log('准备呼叫用户:', targetUserId);
|
||
|
||
// 发起通话
|
||
await TUICallKitAPI.calls({
|
||
userIDList: [targetUserId],
|
||
type: 2, // 2 表示视频通话
|
||
});
|
||
|
||
console.log('发起通话成功, 目标用户:', targetUserId);
|
||
|
||
uni.showToast({
|
||
title: '正在呼叫...',
|
||
icon: 'none'
|
||
});
|
||
|
||
} catch (error) {
|
||
console.error('发起通话失败:', error);
|
||
uni.showToast({
|
||
title: '发起通话失败: ' + (error.message || '未知错误'),
|
||
icon: 'none',
|
||
duration: 3000
|
||
});
|
||
} finally {
|
||
loading.value = false;
|
||
}
|
||
};
|
||
</script>
|
||
|
||
<style>
|
||
.page-container {
|
||
width: 100vw;
|
||
height: 100vh;
|
||
position: relative;
|
||
}
|
||
|
||
.call-kit-wrapper {
|
||
position: fixed;
|
||
top: 0;
|
||
left: 0;
|
||
width: 100vw;
|
||
height: 100vh;
|
||
z-index: 9999;
|
||
}
|
||
|
||
.loginBox {
|
||
margin-top: 200px;
|
||
display: flex;
|
||
flex-direction: column;
|
||
align-items: center;
|
||
justify-content: center;
|
||
position: relative;
|
||
z-index: 1;
|
||
}
|
||
|
||
input {
|
||
display: flex;
|
||
font-size: 20px;
|
||
}
|
||
|
||
.login {
|
||
width: 100vw;
|
||
bottom: 5vh;
|
||
margin: 70rpx;
|
||
}
|
||
|
||
.login button {
|
||
width: 80%;
|
||
background-color: #006eff;
|
||
border-radius: 50px;
|
||
color: white;
|
||
}
|
||
|
||
.login button:disabled {
|
||
background-color: #cccccc;
|
||
}
|
||
|
||
.status-info {
|
||
margin-top: 20px;
|
||
padding: 10px;
|
||
background-color: #f0f0f0;
|
||
border-radius: 5px;
|
||
display: flex;
|
||
flex-direction: column;
|
||
align-items: center;
|
||
gap: 8px;
|
||
}
|
||
|
||
.status-info text {
|
||
font-size: 14px;
|
||
color: #666;
|
||
}
|
||
|
||
.status-info .tip {
|
||
font-size: 12px;
|
||
color: #999;
|
||
text-align: center;
|
||
line-height: 1.5;
|
||
}
|
||
</style> |