<template>
|
<!-- 医疗风全屏加载 -->
|
<div v-if="isLoading" class="loading-screen">
|
<div class="loading-content">
|
<!-- 自定义Logo容器 -->
|
<div class="logo-container">
|
<img :src="logo" alt="Logo" class="custom-logo">
|
<!-- 可选：添加脉冲光环 -->
|
<div class="pulse-ring primary"></div>
|
<div class="pulse-ring secondary"></div>
|
</div>
|
|
<!-- 标题文字 -->
|
<p class="loading-text">守护健康 · 加载中</p>
|
</div>
|
</div>
|
</template>
|
|
<script setup lang="ts">
|
import { ref, onMounted } from 'vue'
|
import {useRoute,useRouter} from 'vue-router'
|
import { ajaxGet ,ajaxPost} from '@/utils/axios'
|
import { Session } from '@/utils/storage'
|
import { Toast } from 'vant'
|
import logo from 'assets/logo.png'
|
import { userInfoStore } from '@/stores/userInfo'
|
const userInfo = userInfoStore()
|
const route = useRoute()
|
const router=useRouter()
|
const isLoading = ref(true)
|
const getUserinfo=()=>{
|
ajaxPost('/patient/info/getPatientInfo','').then((re)=>{
|
console.log(re,'得到患者的信息getUserinfo')
|
userInfo.setPatient(re)
|
router.push('/')
|
})
|
}
|
onMounted(() => {
|
alert('请在微信中打开本小程序')
|
const token=Session.get('token')
|
alert('token='+token)
|
if (token && userInfo.info.openid!==''){
|
console.log('已经登录了')
|
getUserinfo()
|
return
|
}
|
console.log('初始化',route)
|
const queryInfo=route.query
|
const {code}=queryInfo
|
console.log(code)
|
alert('code='+code)
|
if (code){// 得到code换取openid
|
ajaxGet('wechat/code',{code}).then((re)=>{
|
console.log(re,'获取openid')
|
userInfo.setInfo({openid:re.openid,nickname:re.nickname,headimgurl:re.headimgurl})
|
const openId = re.openid
|
if (openId) { // 检查登录
|
ajaxPost('patient/info/wechatLogin','openId='+openId,config).then((re:any)=>{
|
console.log('openid换的accesstoken=',re)
|
if (re===''){
|
console.log('需要登录')
|
router.push('login')
|
} else {
|
Session.set('token', re)
|
Toast('登录成功')
|
getUserinfo()
|
}
|
})
|
}
|
})
|
}
|
else { // 没有code 就重新进入微信url获取code
|
alert('没有code，重新进入微信授权')
|
const appid = 'wx790bd67db6206070' // 微信APPid
|
const local = window.location.href
|
window.location.href =
|
'https://open.weixin.qq.com/connect/oauth2/authorize?appid=' +
|
appid +
|
'&redirect_uri=' +
|
encodeURIComponent(local) +
|
'&response_type=code&scope=snsapi_userinfo&state=STATE#wechat_redirect'
|
}
|
|
})
|
</script>
|
|
<style scoped>
|
/* 医疗风背景 */
|
.loading-screen {
|
position: fixed;
|
top: 0;
|
left: 0;
|
width: 100vw;
|
height: 100vh;
|
background: linear-gradient(140deg, #e6f7ff, #f0fcff, #e0f9f1);
|
display: flex;
|
justify-content: center;
|
align-items: center;
|
z-index: 9999;
|
font-family: "Helvetica Neue", Arial, sans-serif;
|
}
|
|
.loading-content {
|
text-align: center;
|
}
|
|
/* Logo容器 */
|
.logo-container {
|
position: relative;
|
display: inline-block;
|
}
|
|
/* 自定义Logo样式 */
|
.custom-logo {
|
width: 50px; /* 根据实际Logo大小调整 */
|
animation: fadeIn 1s ease-in-out;
|
}
|
|
/* 脉冲光环（衬托科技感） */
|
.pulse-ring {
|
position: absolute;
|
top: 50%;
|
left: 50%;
|
width: 80px;
|
height: 80px;
|
margin-left: -40px;
|
margin-top: -40px;
|
border-radius: 50%;
|
border: 1px solid #00a0e9;
|
opacity: 0;
|
animation: pulse 2s ease-out infinite;
|
}
|
|
.pulse-ring.primary {
|
animation-delay: 0s;
|
}
|
|
.pulse-ring.secondary {
|
animation-delay: 0.6s;
|
border-color: #06c;
|
}
|
|
@keyframes pulse {
|
0% {
|
transform: scale(0.8);
|
opacity: 0.6;
|
}
|
|
50% {
|
opacity: 0.2;
|
}
|
|
100% {
|
transform: scale(1.4);
|
opacity: 0;
|
}
|
}
|
|
/* 加载文字 */
|
.loading-text {
|
color: #06c;
|
font-size: 15px;
|
font-weight: 500;
|
letter-spacing: 1px;
|
line-height: 1.5;
|
opacity: 0.9;
|
animation: fadeInUp 0.8s ease-out;
|
text-shadow: 0 1px 3px rgba(0, 102, 204, 0.1);
|
margin-top: 40px;
|
}
|
|
@keyframes fadeInUp {
|
from {
|
opacity: 0;
|
transform: translateY(30px);
|
}
|
|
to {
|
opacity: 1;
|
transform: translateY(0);
|
}
|
}
|
|
/* 主内容区 */
|
.main-content {
|
min-height: 100vh;
|
display: flex;
|
flex-direction: column;
|
justify-content: center;
|
align-items: center;
|
padding: 20px;
|
text-align: center;
|
background-color: #f8f9fa;
|
color: #333;
|
font-family: "PingFang SC", "Helvetica Neue", Arial, sans-serif;
|
}
|
|
.main-content h1 {
|
font-size: 22px;
|
color: #06c;
|
margin-bottom: 12px;
|
font-weight: 600;
|
}
|
|
.main-content p {
|
color: #666;
|
font-size: 15px;
|
line-height: 1.6;
|
max-width: 300px;
|
}
|
</style>
|
