<script lang="ts" setup>
|
import { ref,onMounted } from 'vue'
|
import {useRoute,useRouter} from 'vue-router'
|
import { ajaxGet ,ajaxPost} from '@/utils/axios'
|
import { Session } from '@/utils/storage'
|
import { Dialog ,Toast } from 'vant'
|
import { userInfoStore } from '@/stores/userInfo'
|
import logo from 'assets/logo.png'
|
import shoujiLogin from 'assets/yijianLogin.png'
|
import pswdLogin from 'assets/pswdLogin.png'
|
const config={
|
headers: {
|
'Content-Type': 'application/x-www-form-urlencoded'
|
}
|
}
|
const userInfo = userInfoStore()
|
const route = useRoute()
|
const router=useRouter()
|
const username = ref('')
|
const password = ref('')
|
const visible=ref(3)
|
const seconds=ref(60)
|
const loadingBUt=ref(false)
|
const isLoading = ref(true)
|
const ruleForm2=ref({
|
newPassword:'',
|
pass:'',
|
validateCode:'',
|
userPhone:''
|
})
|
const ruleForm3=ref({
|
validateCode:'',
|
userPhone:''
|
})
|
const asyncValidator = (val:any) =>{
|
return val===ruleForm2.value.pass
|
}
|
const getUserinfo=()=>{
|
ajaxPost('/patient/info/getPatientInfo','').then((re:any)=>{
|
console.log(re,'得到患者的信息getUserinfo')
|
userInfo.setPatient(re)
|
router.push('/')
|
})
|
}
|
const onSubmit = (values:any) => {
|
console.log('submit', values)
|
loadingBUt.value=true
|
const openid='odFja56xfwSZDHhAEMn-JotSzlRc'
|
ajaxPost('/patient/info/wechatLogin2',`mobile=${username.value}&password=${password.value}&openId=${openid}`,config).then((re:any)=>{
|
console.log(re)
|
if (re===''){
|
Toast('登录失败，请重新登录')
|
} else {
|
console.log('得到tokeng')
|
Session.set('token', re)
|
Toast('登录成功')
|
getUserinfo()
|
}
|
}).finally(()=>{
|
loadingBUt.value=false
|
})
|
}
|
const onSubmit2=(values:any)=>{
|
console.log('提交表单',ruleForm2.value)
|
console.log(values)
|
visible.value=1
|
Dialog.alert({
|
title: '提示',
|
message: '密码重置成功请重新登录',
|
}).then(() => {
|
// on close
|
})
|
}
|
const onSubmit3=(values:any)=>{
|
userInfo.info.openid='odFja56xfwSZDHhAEMn-JotSzlRc'
|
if (userInfo.info.openid===''){
|
Toast('没有获取到openid33')
|
return
|
}
|
console.log('提交表单',ruleForm3.value,values)
|
ajaxPost('patient/info/isValidCodeOK',`phoneNo=${ruleForm3.value.userPhone}&validCode=${ruleForm3.value.validateCode}&openId=${userInfo.info.openid}`,config).then((re:any)=>{
|
console.log(re)
|
if (re===false){
|
Toast('登录失败，请重新登录')
|
} else {
|
Session.set('token', re)
|
Toast('登录成功')
|
getUserinfo()
|
}
|
})
|
}
|
const sendCode=()=>{
|
if (ruleForm3.value.userPhone===''){
|
Toast('手机号码不能为空')
|
return
|
}
|
ajaxPost('patient/info/sendValidCode','phoneNo='+ruleForm3.value.userPhone,config).then((re:any)=>{
|
console.log(re)
|
if (re.code===200){
|
return
|
}
|
const timer= setInterval(() => {
|
if (seconds.value > 0) {
|
seconds.value--
|
} else {
|
seconds.value = 60
|
clearInterval(timer)
|
}
|
}, 1000)
|
})
|
}
|
const wjmm=()=>{
|
visible.value=2
|
ruleForm2.value.newPassword=''
|
ruleForm2.value.pass=''
|
ruleForm2.value.userPhone=''
|
ruleForm2.value.validateCode=''
|
}
|
const shoujiLoginfun=()=>{
|
visible.value=3
|
ruleForm3.value.userPhone=''
|
ruleForm3.value.validateCode=''
|
}
|
const isWechat = () => {
|
return String(navigator.userAgent.toLowerCase().match(/MicroMessenger/i)) === 'micromessenger'
|
}
|
onMounted(()=>{
|
// userInfo.setInfo({openid:'odFja56xfwSZDHhAEMn-JotSzlRc',nickname:'大橙子',headimgurl:'https://thirdwx.qlogo.cn/mmopen/vi_32/Q0j4TwGTfTJB…ibLYic7qC9cm0Yjia3VkHRPVa12N0OK6dgdz984biceWg/132'})
|
// Session.set('token', 'eyJhbGciOiJIUzI1NiJ9.eyJzdWIiOiJQQVRfU0ZfUEFUOTE0MzE2NDAyMTk1N0pOcUMiLCJhdXRoIjpbeyJhdXRob3JpdHkiOiJhZG1pbiJ9XSwiaWF0IjoxNzUyMDU5ODk0LCJleHAiOjE3NTI0MTk4OTR9.a-Zw910bXendD9Oq7jxjDYfaWLf693maoh7MgAfqK9Y')
|
// getUserinfo()
|
// Session.remove('token')
|
// 判断是否有token 和userinfo
|
const token=Session.get('token')
|
if (token && userInfo.info.openid!==''){
|
console.log('已经登录了')
|
getUserinfo()
|
return
|
}
|
if (isWechat()){
|
console.log('初始化',route)
|
const queryInfo=route.query
|
const {code}=queryInfo
|
console.log(code)
|
if (code){ // 得到code换取openid
|
ajaxGet('wechat/code',{code}).then((re:any)=>{
|
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===''){
|
isLoading.value=false
|
Toast('请填写表单登录')
|
} else {
|
Session.set('token', re)
|
isLoading.value=false
|
Toast('登录成功')
|
getUserinfo()
|
}
|
})
|
}
|
|
})
|
}
|
else { // 没有code 就重新进入微信url获取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'
|
|
}
|
} else {
|
isLoading.value=false
|
console.log('不是微信浏览器')
|
Dialog.alert({
|
title: '提示',
|
message: '请在微信中打开浏览',
|
}).then(() => {
|
})
|
}
|
})
|
</script>
|
|
<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>
|
<div v-else class="login">
|
<div class="titlebiaoti">
|
<van-image
|
fit="cover"
|
width="95px"
|
height="84px"
|
:src="logo"
|
/>
|
</div>
|
<div>
|
<van-form ref="form1" v-show="visible === 1" @submit="onSubmit" label-width="4em">
|
<van-cell-group inset>
|
<van-field
|
v-model="username"
|
name="登录名"
|
label="登录名"
|
placeholder="请输入登录名"
|
:rules="[{ required: true, message: '请输入登录名' }]"
|
/>
|
<!-- :rules="[{ required: true, message: '请填写密码' }]" -->
|
<van-field
|
v-model="password"
|
type="password"
|
name="密 码"
|
label="密  码"
|
placeholder="6-16位数字或者字母组合"
|
|
>
|
<template #button>
|
<van-button size="small" type="default" @click="wjmm">忘记密码</van-button>
|
</template>
|
</van-field>
|
</van-cell-group>
|
<div style="margin: 16px;text-align: center;">
|
<div class="tss"><van-icon name="circle" /> 登录即视为已经阅读并同意<b style="color: #769aff;">网站服务条款、法律声明及隐私权政策</b></div>
|
<van-button :loading="loadingBUt" round block type="primary" native-type="submit">
|
登 录
|
</van-button>
|
</div>
|
</van-form>
|
<van-form ref="form2" v-show="visible === 3" @submit="onSubmit3" label-width="80px">
|
<van-cell-group inset>
|
<van-field
|
v-model="ruleForm3.userPhone"
|
label="手机号码"
|
placeholder="请输入手机号码"
|
:rules="[{ required: true, message: '请输入手机号码' }]"
|
/>
|
<van-field
|
v-model="ruleForm3.validateCode"
|
center
|
clearable
|
label="短信验证码"
|
placeholder="请输入短信验证码"
|
:rules="[{ required: true, message: '请输入短信验证码' }]"
|
>
|
<template #button>
|
<van-button size="small" :disabled="seconds < 60" @click="sendCode" type="primary">{{seconds}}发送验证码</van-button>
|
</template>
|
</van-field>
|
</van-cell-group>
|
<div style="margin: 16px;text-align: center;">
|
<div class="tss"><van-icon name="circle" /> 登录即视为已经阅读并同意<b style="color: #769aff;">网站服务条款、法律声明及隐私权政策</b></div>
|
<van-button :loading="loadingBUt" round block type="primary" native-type="submit">
|
登 录
|
</van-button>
|
</div>
|
</van-form>
|
<van-row class="logintype">
|
<div class="toptype">
|
<van-divider
|
:style="{ color: '#1989fa', borderColor: '#1989fa', padding: '0 16px' }"
|
>
|
登录方式
|
</van-divider>
|
</div>
|
</van-row>
|
<van-row>
|
<van-col span="12" @click="shoujiLoginfun" class="logintt">
|
<van-image
|
fit="cover"
|
width="42px"
|
height="42px"
|
:src="shoujiLogin"
|
/>
|
<div class="loginwenz">
|
手机登录
|
</div>
|
</van-col>
|
<van-col span="12" @click="visible = 1" class="logintt">
|
<van-image
|
fit="cover"
|
width="42px"
|
height="42px"
|
:src="pswdLogin"
|
/>
|
<div class="loginwenz">密码登录</div>
|
</van-col>
|
</van-row>
|
</div>
|
<transition name="van-slide-up">
|
<div v-show="visible === 2">
|
<van-form @submit="onSubmit2" label-width="80px">
|
<van-cell-group inset>
|
<van-field
|
v-model="ruleForm2.userPhone"
|
label="手机号码"
|
placeholder="请输入手机号码"
|
:rules="[{ required: true, message: '请输入手机号码' }]"
|
/>
|
<van-field
|
v-model="ruleForm2.validateCode"
|
center
|
clearable
|
label="短信验证码"
|
placeholder="请输入短信验证码"
|
:rules="[{ required: true, message: '请输入短信验证码' }]"
|
>
|
<template #button>
|
<van-button size="small" :disabled="seconds < 60" @click="sendCode" type="primary">{{seconds}}发送验证码</van-button>
|
</template>
|
</van-field>
|
<van-field
|
v-model="ruleForm2.pass"
|
type="password"
|
label="密  码"
|
placeholder="6-16位数字或者字母组合"
|
:rules="[{ required: true, message: '请填写密码' }]"
|
/>
|
<van-field
|
v-model="ruleForm2.newPassword"
|
type="password"
|
label="确认密码"
|
placeholder="6-16位数字或者字母组合"
|
:rules="[{ validator: asyncValidator, message: '密码输入不一致' }]"
|
/>
|
</van-cell-group>
|
<div style="margin: 16px;">
|
<van-button :loading="loadingBUt" round block type="primary" native-type="submit">
|
确认
|
</van-button>
|
</div>
|
<div style="text-align: right; padding-right: 20px;">
|
<span type="primary" @click="visible = 1" native-type="submit">
|
返回到登录
|
</span>
|
</div>
|
</van-form>
|
</div>
|
</transition>
|
|
</div>
|
</template>
|
<style lang="scss">
|
.login {
|
width: 100%;
|
min-height: 900px;
|
}
|
|
.logintt {
|
text-align: center;
|
}
|
|
.loginwenz {
|
font-size: 12px;
|
font-weight: 400;
|
color: #aaa;
|
}
|
|
.logintype {
|
width: 100%;
|
margin-top: 120px;
|
text-align: center;
|
font-size: 11px;
|
font-weight: 400;
|
color: #aaa;
|
|
.toptype {
|
width: 100%;
|
}
|
}
|
|
.titlebiaoti {
|
padding-top: 70px;
|
text-align: center;
|
padding-left: 30px;
|
font-size: 15px;
|
padding-bottom: 70px;
|
}
|
|
.tss {
|
font-size: 10px;
|
font-weight: 400;
|
color: #aaa;
|
height: 50px;
|
}
|
</style>
|
<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);
|
}
|
}
|
</style>
|
