321 lines
6.4 KiB
Vue
321 lines
6.4 KiB
Vue
<template>
|
|
<view class="container">
|
|
|
|
<view class="counter-warp">
|
|
<view class="header-content">
|
|
<image :src="avatarUrl" class="icon-box" v-if="avatarUrl"/>
|
|
<view class="text-header">用户登录</view>
|
|
</view>
|
|
<view class="box">
|
|
<view class="list-item">
|
|
<label class="list-item-label">用户ID</label>
|
|
<input
|
|
class="input-box"
|
|
type="text"
|
|
v-model="userID"
|
|
placeholder="请输入用户ID"
|
|
placeholder-style="color:#BBBBBB;"
|
|
/>
|
|
</view>
|
|
<view class="login"
|
|
><button class="loginBtn" @click="loginHandler">登录</button></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) {
|
|
console.log('xx');
|
|
console.log(loginRes.code);
|
|
wxcode(loginRes.code)
|
|
// 获取用户信息
|
|
uni.getUserInfo({
|
|
provider: 'weixin',
|
|
withCredentials:true,
|
|
success: function (infoRes) {
|
|
avatarUrl.value = infoRes.userInfo.avatarUrl; // 使用 .value 赋值
|
|
console.log('头像URL:', avatarUrl.value);
|
|
console.log(infoRes.userInfo);
|
|
}
|
|
});
|
|
}
|
|
});
|
|
|
|
console.log('---------进入onMounted')
|
|
})
|
|
const wxcode = async (code) => {
|
|
|
|
try {
|
|
// 通过 proxy 调用全局的 apiUrl
|
|
const res = await proxy.apiUrl({
|
|
url: '/api/login/mnpLogin',
|
|
method: 'POST',
|
|
data: {
|
|
code: code
|
|
},
|
|
}, false) // 不显示加载中
|
|
} catch (err) {
|
|
uni.showToast({ title: '请求失败', icon: 'none' })
|
|
console.error(err)
|
|
}
|
|
|
|
}
|
|
const loginHandler = async () => {
|
|
// 从后端获取签名
|
|
const signatureData = await getSignatureFromServer(patientId.value);
|
|
|
|
console.log('获取签名成功:', signatureData);
|
|
|
|
const {userId } = signatureData;
|
|
|
|
const { userSig, SDKAppID } = GenerateTestUserSig.genTestUserSig({
|
|
userID: userId.value,
|
|
});
|
|
console.warn('--- ', SDKAppID);
|
|
|
|
getApp().globalData.userID = userId.value;
|
|
getApp().globalData.userSig = userSig;
|
|
getApp().globalData.SDKAppID = SDKAppID;
|
|
|
|
await uni.CallManager.init({
|
|
sdkAppID: SDKAppID, // 替换为用户自己的 sdkAppID
|
|
userID: userId.value, // 替换为用户自己的 userID
|
|
userSig: userSig, // 替换为用户自己的 userSig
|
|
globalCallPagePath: "TUICallKit/src/Components/TUICallKit", // 替换为步骤一里注册的全局监听页面
|
|
});
|
|
uni.navigateTo({
|
|
url: "./index",
|
|
});
|
|
};
|
|
// 从后端获取签名
|
|
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);
|
|
}
|
|
});
|
|
});
|
|
};
|
|
</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;
|
|
}
|
|
</style>
|