347 lines
8.0 KiB
Vue
347 lines
8.0 KiB
Vue
<template>
|
||
<view class="container">
|
||
|
||
<!-- 等待视频通话页面 - 老年人友好版 -->
|
||
<view class="waiting-container">
|
||
<view class="waiting-content">
|
||
<!-- 大号医生图标动画 -->
|
||
<view class="waiting-animation">
|
||
<view class="pulse-ring"></view>
|
||
<view class="pulse-ring delay-1"></view>
|
||
<view class="pulse-ring delay-2"></view>
|
||
<view class="doctor-icon">
|
||
<text class="icon-text">👨⚕️</text>
|
||
</view>
|
||
</view>
|
||
|
||
<!-- 超大标题 -->
|
||
<view class="waiting-title">正在等待医生</view>
|
||
<view class="waiting-subtitle">视频通话即将开始</view>
|
||
|
||
<!-- 大字号提示卡片 -->
|
||
<view class="tips-card">
|
||
<view class="tips-header">
|
||
<text class="tips-icon">💡</text>
|
||
<text class="tips-header-text">温馨提示</text>
|
||
</view>
|
||
<view class="tips-list">
|
||
<view class="tips-item">
|
||
<text class="tips-number">1</text>
|
||
<text class="tips-text">请保持手机摄像头清洁</text>
|
||
</view>
|
||
<view class="tips-item">
|
||
<text class="tips-number">2</text>
|
||
<text class="tips-text">选择光线明亮的位置</text>
|
||
</view>
|
||
<view class="tips-item">
|
||
<text class="tips-number">3</text>
|
||
<text class="tips-text">保持环境安静</text>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
|
||
<!-- 大号帮助按钮 -->
|
||
<view class="help-button" @click="url">
|
||
<text class="help-text">需要帮助？点击这里</text>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</template>
|
||
|
||
<script setup>
|
||
import { ref, getCurrentInstance,onMounted } from "vue";
|
||
import { onShow, onShareAppMessage } from '@dcloudio/uni-app'
|
||
import * as GenerateTestUserSig from "@/debug/GenerateTestUserSig-es.js";
|
||
import { CallManager } from "@/TUICallKit/src/TUICallService/serve/callManager";
|
||
const { proxy } = getCurrentInstance()
|
||
let userId = ref("");
|
||
let userSig= ref("");
|
||
let SDKAppID=ref("");
|
||
uni.CallManager = new CallManager();
|
||
const doctorId = ref('')
|
||
const doctorName = ref('')
|
||
onShow(() => {
|
||
uni.login({
|
||
provider: 'weixin',
|
||
success: function (loginRes) {
|
||
console.log('---------进入onShow',loginRes.code)
|
||
wxcode(loginRes.code)
|
||
}
|
||
});
|
||
})
|
||
onMounted(() => {
|
||
const pages = getCurrentPages();
|
||
const currentPage = pages[pages.length - 1];
|
||
// const options = current.options || current.$page?.options || {}
|
||
const options = proxy.$parsePageParams(currentPage.options|| currentPage.$page?.options || {});
|
||
doctorId.value = options.id || options.doctorId || ''
|
||
console.log('---------进入onMounted',options,doctorId.value)
|
||
|
||
})
|
||
onShareAppMessage((res) =>{
|
||
return {
|
||
title: '视频问诊通话邀请',
|
||
path: '/pages/index/video',
|
||
imageUrl: '/static/share-img.png',
|
||
desc: '自定义分享描述',
|
||
success() {
|
||
uni.showToast({ title: '分享成功', icon: 'success' });
|
||
},
|
||
fail(err) {
|
||
console.log('分享失败：', err);
|
||
uni.showToast({ title: '分享失败', icon: 'none' });
|
||
}
|
||
}
|
||
});
|
||
|
||
const wxcode = async (code) => {
|
||
try {
|
||
const res = await proxy.apiUrl({
|
||
url: '/api/login/mnpLogin',
|
||
method: 'POST',
|
||
data: { code: code },
|
||
}, false)
|
||
console.log('---------------',res.data)
|
||
uni.setStorageSync('token', res.data.token)
|
||
uni.setStorageSync('userData', res.data)
|
||
loginHandler(res.data.diagnosis.patient_id)
|
||
} catch (err) {
|
||
uni.showToast({ title: '请求失败', icon: 'none' })
|
||
console.error(err)
|
||
}
|
||
}
|
||
const url=()=>{
|
||
const doctor=doctorId.value?'doctor_'+doctorId.value:'doctor_'+uni.getStorageSync('userData').diagnosis.diagnosis_id
|
||
// 跳转到聊天页面
|
||
uni.navigateTo({
|
||
url: `/TUIKit/pages/chat/chat?userID=${encodeURIComponent(userId)}&userSig=${encodeURIComponent(userSig)}&SDKAppID=${SDKAppID}&targetUserID=${doctor}`
|
||
});
|
||
}
|
||
const loginHandler = async (patient_id) => {
|
||
console.log('获取签名开始:',patient_id);
|
||
const res = await proxy.apiUrl({
|
||
url: '/api/tcm/getPatientSignature',
|
||
method: 'GET',
|
||
data: { patient_id: patient_id },
|
||
}, false)
|
||
|
||
const {userId } = res.data;
|
||
const { userSig, SDKAppID } = GenerateTestUserSig.genTestUserSig({
|
||
userID:userId,
|
||
});
|
||
console.log('获取签名成功:',userSig);
|
||
|
||
getApp().globalData.userID = userId;
|
||
getApp().globalData.userSig = userSig;
|
||
getApp().globalData.SDKAppID = SDKAppID;
|
||
getApp().globalData.isIMInitialized = false; // 标记IM未初始化
|
||
|
||
// 初始化视频通话
|
||
await uni.CallManager.init({
|
||
sdkAppID: SDKAppID,
|
||
userID: userId,
|
||
userSig: userSig,
|
||
globalCallPagePath: "TUICallKit/src/Components/TUICallKit",
|
||
});
|
||
|
||
console.log('初始化完成，跳转到聊天页面');
|
||
|
||
|
||
};
|
||
|
||
</script>
|
||
|
||
<style scoped>
|
||
.container {
|
||
width: 100vw;
|
||
height: 100vh;
|
||
background-color: #f4f5f9;
|
||
position: fixed;
|
||
top: 0;
|
||
right: 0;
|
||
left: 0;
|
||
bottom: 0;
|
||
}
|
||
|
||
/* ========== 老年人友好等待界面样式 ========== */
|
||
.waiting-container {
|
||
width: 100vw;
|
||
min-height: 100vh;
|
||
background: linear-gradient(180deg, #f0f7ff 0%, #ffffff 100%);
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
padding: 40rpx;
|
||
box-sizing: border-box;
|
||
}
|
||
|
||
.waiting-content {
|
||
width: 100%;
|
||
max-width: 700rpx;
|
||
display: flex;
|
||
flex-direction: column;
|
||
align-items: center;
|
||
}
|
||
|
||
/* 动画区域 - 更大更明显 */
|
||
.waiting-animation {
|
||
position: relative;
|
||
width: 280rpx;
|
||
height: 280rpx;
|
||
margin-bottom: 60rpx;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
}
|
||
|
||
.pulse-ring {
|
||
position: absolute;
|
||
width: 100%;
|
||
height: 100%;
|
||
border: 6rpx solid #1890ff;
|
||
border-radius: 50%;
|
||
animation: pulse 2s ease-out infinite;
|
||
opacity: 0;
|
||
}
|
||
|
||
.pulse-ring.delay-1 {
|
||
animation-delay: 0.6s;
|
||
}
|
||
|
||
.pulse-ring.delay-2 {
|
||
animation-delay: 1.2s;
|
||
}
|
||
|
||
@keyframes pulse {
|
||
0% {
|
||
transform: scale(0.5);
|
||
opacity: 1;
|
||
}
|
||
100% {
|
||
transform: scale(1.3);
|
||
opacity: 0;
|
||
}
|
||
}
|
||
|
||
.doctor-icon {
|
||
width: 180rpx;
|
||
height: 180rpx;
|
||
background: linear-gradient(135deg, #1890ff 0%, #096dd9 100%);
|
||
border-radius: 50%;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
box-shadow: 0 8rpx 24rpx rgba(24, 144, 255, 0.3);
|
||
z-index: 1;
|
||
}
|
||
|
||
.icon-text {
|
||
font-size: 100rpx;
|
||
line-height: 1;
|
||
}
|
||
|
||
/* 超大标题 - 老年人易读 */
|
||
.waiting-title {
|
||
font-size: 56rpx;
|
||
font-weight: bold;
|
||
color: #1890ff;
|
||
margin-bottom: 20rpx;
|
||
text-align: center;
|
||
line-height: 1.4;
|
||
}
|
||
|
||
.waiting-subtitle {
|
||
font-size: 40rpx;
|
||
color: #333333;
|
||
margin-bottom: 60rpx;
|
||
text-align: center;
|
||
line-height: 1.5;
|
||
}
|
||
|
||
/* 提示卡片 - 大字号清晰 */
|
||
.tips-card {
|
||
width: 100%;
|
||
background: #fffbe6;
|
||
border-radius: 24rpx;
|
||
padding: 40rpx;
|
||
margin-bottom: 40rpx;
|
||
border: 3rpx solid #fadb14;
|
||
}
|
||
|
||
.tips-header {
|
||
display: flex;
|
||
align-items: center;
|
||
margin-bottom: 30rpx;
|
||
padding-bottom: 20rpx;
|
||
border-bottom: 2rpx solid #ffd666;
|
||
}
|
||
|
||
.tips-icon {
|
||
font-size: 48rpx;
|
||
margin-right: 16rpx;
|
||
}
|
||
|
||
.tips-header-text {
|
||
font-size: 40rpx;
|
||
font-weight: bold;
|
||
color: #d48806;
|
||
}
|
||
|
||
.tips-list {
|
||
display: flex;
|
||
flex-direction: column;
|
||
gap: 30rpx;
|
||
}
|
||
|
||
.tips-item {
|
||
display: flex;
|
||
align-items: center;
|
||
padding: 24rpx;
|
||
background: #ffffff;
|
||
border-radius: 16rpx;
|
||
}
|
||
|
||
.tips-number {
|
||
width: 60rpx;
|
||
height: 60rpx;
|
||
background: #faad14;
|
||
color: #ffffff;
|
||
border-radius: 50%;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
font-size: 36rpx;
|
||
font-weight: bold;
|
||
margin-right: 24rpx;
|
||
flex-shrink: 0;
|
||
}
|
||
|
||
.tips-text {
|
||
font-size: 36rpx;
|
||
color: #333333;
|
||
line-height: 1.6;
|
||
font-weight: 500;
|
||
}
|
||
|
||
/* 帮助按钮 - 大号易点击 */
|
||
.help-button {
|
||
width: 100%;
|
||
height: 100rpx;
|
||
background: #ffffff;
|
||
border: 3rpx solid #1890ff;
|
||
border-radius: 50rpx;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
box-shadow: 0 4rpx 12rpx rgba(24, 144, 255, 0.15);
|
||
margin-top: 20rpx;
|
||
}
|
||
|
||
.help-text {
|
||
font-size: 38rpx;
|
||
color: #1890ff;
|
||
font-weight: bold;
|
||
}
|
||
</style>
|