更新
This commit is contained in:
Your Name
@@ -0,0 +1,153 @@
|
||||
<template>
|
||||
<view class="container">
|
||||
<view class='guide-box'>
|
||||
<!-- <button @click="setCallingBell">setCallingBell</button> -->
|
||||
<!-- <button @click="enableMuteMode">enableMuteMode</button> -->
|
||||
<view class="single-box" v-for="(item, index) in entryInfos" :key="index" :id="index" @click='handleEntry'>
|
||||
<image class="icon" mode="aspectFit" :src="item.icon" role="img"></image>
|
||||
<view class="single-content">
|
||||
<view class="label">{{ item.title }}</view>
|
||||
<view class="desc">{{ item.desc }}</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
// import { TUICallKitAPI } from "../../TUICallKit/src/index";
|
||||
// import { ref } from "vue";
|
||||
const template = '1v1';
|
||||
const entryInfos = [
|
||||
{
|
||||
icon: 'https://web.sdk.qcloud.com/component/miniApp/resources/audio-card.png',
|
||||
title: '语音通话',
|
||||
desc: '丢包率70%仍可正常语音通话',
|
||||
navigateTo: '../calling/call?type=1',
|
||||
},
|
||||
{
|
||||
icon: 'https://web.sdk.qcloud.com/component/miniApp/resources/video-card.png',
|
||||
title: '视频通话',
|
||||
desc: '丢包率50%仍可正常视频通话',
|
||||
navigateTo: '../calling/call?type=2',
|
||||
},
|
||||
{
|
||||
icon: 'https://web.sdk.qcloud.com/component/miniApp/resources/audio-card.png',
|
||||
title: '多人语音通话',
|
||||
desc: '丢包率70%仍可正常语音通话',
|
||||
navigateTo: '../calling/groupCall?type=1',
|
||||
},
|
||||
{
|
||||
icon: 'https://web.sdk.qcloud.com/component/miniApp/resources/video-card.png',
|
||||
title: '多人视频通话',
|
||||
desc: '丢包率50%仍可正常视频通话',
|
||||
navigateTo: '../calling/groupCall?type=2',
|
||||
},
|
||||
];
|
||||
// --------铃声相关接口测试-----------------
|
||||
// let isMute = ref(false);
|
||||
// const enableMuteMode = async () => {
|
||||
// isMute.value = !isMute.value;
|
||||
// await TUICallKitAPI.enableMuteMode(isMute.value);
|
||||
// }
|
||||
// const setCallingBell = async () => {
|
||||
// await TUICallKitAPI.setCallingBell('mp2.mp3');
|
||||
// }
|
||||
const handleEntry = (e) => {
|
||||
const url = entryInfos[e.currentTarget.id].navigateTo;
|
||||
uni.navigateTo({
|
||||
url,
|
||||
});
|
||||
}
|
||||
</script>
|
||||
|
||||
<style>
|
||||
.container {
|
||||
/* background-image: url(https://mc.qcloudimg.com/static/img/7da57e0050d308e2e1b1e31afbc42929/bg.png); */
|
||||
background: #F4F5F9;
|
||||
background-repeat: no-repeat;
|
||||
background-size: cover;
|
||||
width: 100vw;
|
||||
height: 100vh;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
.container .title {
|
||||
position: relative;
|
||||
width: 100vw;
|
||||
font-size: 18px;
|
||||
color: #000000;
|
||||
letter-spacing: 0;
|
||||
text-align: center;
|
||||
line-height: 28px;
|
||||
font-weight: 600;
|
||||
background: #FFFFFF;
|
||||
margin-top: 3.8vh;
|
||||
padding: 1.2vh 0;
|
||||
}
|
||||
|
||||
.tips {
|
||||
color: #ffffff;
|
||||
font-size: 12px;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.guide-box {
|
||||
width: 100vw;
|
||||
box-sizing: border-box;
|
||||
padding: 16px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.single-box {
|
||||
flex: 1;
|
||||
border-radius: 10px;
|
||||
background-color: #ffffff;
|
||||
margin-bottom: 16px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.icon {
|
||||
display: block;
|
||||
width: 180px;
|
||||
height: 144px;
|
||||
}
|
||||
|
||||
.single-content {
|
||||
padding: 36px 30px 36px 20px;
|
||||
color: #333333;
|
||||
}
|
||||
|
||||
.label {
|
||||
display: block;
|
||||
font-size: 18px;
|
||||
color: #333333;
|
||||
letter-spacing: 0;
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
.desc {
|
||||
display: block;
|
||||
font-size: 14px;
|
||||
color: #333333;
|
||||
letter-spacing: 0;
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
.logo-box {
|
||||
position: absolute;
|
||||
width: 100vw;
|
||||
bottom: 36rpx;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.logo {
|
||||
width: 160rpx;
|
||||
height: 44rpx;
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,578 @@
|
||||
<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="status-card">
|
||||
<view class="status-icon">✓</view>
|
||||
<view class="status-main-text">系统已准备好</view>
|
||||
<view class="status-sub-text">请耐心等待医生接入</view>
|
||||
</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">
|
||||
<text class="help-text">需要帮助？点击这里</text>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { ref,onMounted,getCurrentInstance} from "vue";
|
||||
// 2. 获取组件实例，通过 proxy 访问全局属性
|
||||
const { proxy } = getCurrentInstance()
|
||||
import * as GenerateTestUserSig from "@/debug/GenerateTestUserSig-es.js";
|
||||
import { CallManager } from "@/TUICallKit/src/TUICallService/serve/callManager";
|
||||
let userID = ref("4");
|
||||
let avatarUrl = ref(""); // 声明为响应式变量
|
||||
uni.CallManager = new CallManager();
|
||||
|
||||
onMounted(() => {
|
||||
uni.login({
|
||||
provider: 'weixin',
|
||||
success: function (loginRes) {
|
||||
|
||||
wxcode(loginRes.code)
|
||||
// 获取用户信息
|
||||
|
||||
}
|
||||
});
|
||||
|
||||
console.log('---------进入onMounted')
|
||||
})
|
||||
|
||||
onShareAppMessage((res) =>{
|
||||
// res.from 可判断分享触发方式：button（按钮触发）、menu（右上角菜单触发）
|
||||
const shareSource = res.from;
|
||||
|
||||
// 自定义分享内容
|
||||
return {
|
||||
title: '视频问诊通话邀请', // 分享标题（必填）
|
||||
path: '/pages/index/video', // 分享路径（必填，以 / 开头，可带参数）
|
||||
imageUrl: '/static/share-img.png', // 分享图片（可选，建议尺寸 5:4，支持本地/网络图片）
|
||||
desc: '自定义分享描述', // 小程序分享描述（仅在某些场景显示）
|
||||
success() {
|
||||
// 分享成功回调
|
||||
uni.showToast({ title: '分享成功', icon: 'success' });
|
||||
},
|
||||
fail(err) {
|
||||
// 分享失败回调
|
||||
console.log('分享失败：', err);
|
||||
uni.showToast({ title: '分享失败', icon: 'none' });
|
||||
}
|
||||
}
|
||||
});
|
||||
|
||||
const wxcode = async (code) => {
|
||||
|
||||
try {
|
||||
// 通过 proxy 调用全局的 apiUrl
|
||||
const res = await proxy.apiUrl({
|
||||
url: '/api/login/mnpLogin',
|
||||
method: 'POST',
|
||||
data: {
|
||||
code: code
|
||||
},
|
||||
}, false) // 不显示加载中
|
||||
|
||||
loginHandler(res.data.diagnosis.patient_id)
|
||||
} catch (err) {
|
||||
uni.showToast({ title: '请求失败', icon: 'none' })
|
||||
|
||||
console.error(err)
|
||||
}
|
||||
|
||||
}
|
||||
const loginHandler = async (patient_id) => {
|
||||
// 从后端获取签名
|
||||
//const signatureData = await getSignatureFromServer(patient_id);
|
||||
const res = await proxy.apiUrl({
|
||||
url: '/api/tcm/getPatientSignature',
|
||||
method: 'GET',
|
||||
data: {
|
||||
patient_id: patient_id ||patient
|
||||
},
|
||||
}, false)
|
||||
|
||||
|
||||
|
||||
const {userId } = res.data;
|
||||
|
||||
const { userSig, SDKAppID } = GenerateTestUserSig.genTestUserSig({
|
||||
userID:userId,
|
||||
});
|
||||
console.log('获取签名成功:',userSig);
|
||||
getApp().globalData.userID = userId.value;
|
||||
getApp().globalData.userSig = userSig;
|
||||
getApp().globalData.SDKAppID = SDKAppID;
|
||||
|
||||
await uni.CallManager.init({
|
||||
sdkAppID: SDKAppID, // 替换为用户自己的 sdkAppID
|
||||
userID: userId, // 替换为用户自己的 userID
|
||||
userSig: userSig, // 替换为用户自己的 userSig
|
||||
globalCallPagePath: "TUICallKit/src/Components/TUICallKit", // 替换为步骤一里注册的全局监听页面
|
||||
});
|
||||
// uni.navigateTo({
|
||||
// url: "./index",
|
||||
// });
|
||||
};
|
||||
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.container {
|
||||
width: 100vw;
|
||||
height: 100vh;
|
||||
background-color: #f4f5f9;
|
||||
position: fixed;
|
||||
top: 0;
|
||||
right: 0;
|
||||
left: 0;
|
||||
bottom: 0;
|
||||
}
|
||||
|
||||
.counter-warp {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
right: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.background-image {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.header-content {
|
||||
display: flex;
|
||||
width: 100vw;
|
||||
padding: 50px 20px 10px;
|
||||
box-sizing: border-box;
|
||||
top: 100rpx;
|
||||
background-color: #000;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.icon-box {
|
||||
width: 56px;
|
||||
height: 56px;
|
||||
}
|
||||
|
||||
.text-header {
|
||||
height: 72rpx;
|
||||
font-size: 48rpx;
|
||||
line-height: 72rpx;
|
||||
color: #ffffff;
|
||||
margin: 40px auto;
|
||||
}
|
||||
|
||||
.text-content {
|
||||
height: 36rpx;
|
||||
font-size: 24rpx;
|
||||
line-height: 36rpx;
|
||||
color: #ffffff;
|
||||
}
|
||||
|
||||
.box {
|
||||
width: 80%;
|
||||
height: 50vh;
|
||||
position: relative;
|
||||
background: #ffffff;
|
||||
border-radius: 4px;
|
||||
border-radius: 4px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: left;
|
||||
padding: 30px 20px;
|
||||
}
|
||||
|
||||
.input-box {
|
||||
flex: 1;
|
||||
display: flex;
|
||||
font-family: PingFangSC-Regular;
|
||||
font-size: 14px;
|
||||
color: rgba(0, 0, 0, 0.8);
|
||||
letter-spacing: 0;
|
||||
}
|
||||
|
||||
.login {
|
||||
display: flex;
|
||||
box-sizing: border-box;
|
||||
margin-top: 15px;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.login button {
|
||||
background: rgba(0, 110, 255, 1);
|
||||
border-radius: 30px;
|
||||
font-size: 16px;
|
||||
color: #ffffff;
|
||||
letter-spacing: 0;
|
||||
/* text-align: center; */
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
.loginBtn {
|
||||
margin-top: 64px;
|
||||
background-color: white;
|
||||
border-radius: 24px;
|
||||
border-radius: 24px;
|
||||
/* display: flex;
|
||||
justify-content: center; */
|
||||
width: 100% !important;
|
||||
font-family: PingFangSC-Regular;
|
||||
font-size: 16px;
|
||||
color: #ffffff;
|
||||
letter-spacing: 0;
|
||||
}
|
||||
|
||||
.list-item {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
font-family: PingFangSC-Medium;
|
||||
font-size: 14px;
|
||||
color: #333333;
|
||||
border-bottom: 1px solid #eef0f3;
|
||||
}
|
||||
|
||||
.input-container {
|
||||
width: 90%;
|
||||
margin: 50px auto 0;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
font-family: PingFangSC-Medium;
|
||||
font-size: 14px;
|
||||
color: #333333;
|
||||
border-bottom: 1px solid #eef0f3;
|
||||
}
|
||||
|
||||
/* .input-box {
|
||||
height: 20px;
|
||||
padding: 5px;
|
||||
width: 100%;
|
||||
border: 1px solid #999999;;
|
||||
} */
|
||||
.list-item .list-item-label {
|
||||
font-weight: 500;
|
||||
padding: 10px 0;
|
||||
}
|
||||
|
||||
.guide-box {
|
||||
width: 100vw;
|
||||
box-sizing: border-box;
|
||||
padding: 16px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.single-box {
|
||||
flex: 1;
|
||||
border-radius: 10px;
|
||||
background-color: #ffffff;
|
||||
margin-bottom: 16px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.icon {
|
||||
display: block;
|
||||
width: 180px;
|
||||
height: 144px;
|
||||
}
|
||||
|
||||
.single-content {
|
||||
padding: 36px 30px 36px 20px;
|
||||
color: #333333;
|
||||
}
|
||||
|
||||
.label {
|
||||
display: block;
|
||||
font-size: 18px;
|
||||
color: #333333;
|
||||
letter-spacing: 0;
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
.desc {
|
||||
display: block;
|
||||
font-size: 14px;
|
||||
color: #333333;
|
||||
letter-spacing: 0;
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
.logo-box {
|
||||
position: absolute;
|
||||
width: 100vw;
|
||||
bottom: 36rpx;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
/* ========== 老年人友好等待界面样式 ========== */
|
||||
.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;
|
||||
}
|
||||
|
||||
/* 状态卡片 - 简洁明了 */
|
||||
.status-card {
|
||||
width: 100%;
|
||||
background: #ffffff;
|
||||
border-radius: 24rpx;
|
||||
padding: 50rpx 40rpx;
|
||||
margin-bottom: 40rpx;
|
||||
box-shadow: 0 4rpx 20rpx rgba(0, 0, 0, 0.08);
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
border: 3rpx solid #52c41a;
|
||||
}
|
||||
|
||||
.status-icon {
|
||||
width: 80rpx;
|
||||
height: 80rpx;
|
||||
background: #52c41a;
|
||||
border-radius: 50%;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
font-size: 50rpx;
|
||||
color: #ffffff;
|
||||
margin-bottom: 30rpx;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.status-main-text {
|
||||
font-size: 44rpx;
|
||||
font-weight: bold;
|
||||
color: #52c41a;
|
||||
margin-bottom: 20rpx;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.status-sub-text {
|
||||
font-size: 36rpx;
|
||||
color: #666666;
|
||||
text-align: center;
|
||||
line-height: 1.6;
|
||||
}
|
||||
|
||||
/* 提示卡片 - 大字号清晰 */
|
||||
.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>
|
||||
Reference in New Issue
Block a user