<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 ruleForm2=ref({
|
newPassword:'',
|
pass:'',
|
validateCode:'',
|
userPhone:''
|
})
|
const ruleForm3=ref({
|
validateCode:'',
|
userPhone:''
|
})
|
const asyncValidator = (val:any) =>{
|
return val===ruleForm2.value.pass
|
}
|
const onSubmit = (values:any) => {
|
console.log('submit', values)
|
loadingBUt.value=true
|
ajaxPost('/patient/info/wechatLogin2',`mobile=${username.value}&password=${password.value}`,config).then((re:any)=>{
|
console.log(re)
|
if (re===''){
|
Toast('登录失败，请重新登录')
|
} else {
|
console.log('得到tokeng')
|
Session.set('token', re)
|
Toast('登录成功。。。。。')
|
router.push('/')
|
}
|
}).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)=>{
|
console.log('提交表单',ruleForm3.value,values)
|
ajaxPost('patient/info/isValidCodeOK',`phoneNo=${ruleForm3.value.userPhone}&validCode=${ruleForm3.value.validateCode}`,config).then((re:any)=>{
|
console.log(re)
|
if (re===false){
|
Toast('登录失败，请重新登录')
|
} else {
|
console.log(re)
|
}
|
})
|
}
|
const sendCode=()=>{
|
if (ruleForm3.value.userPhone===''){
|
Toast('手机号码不能为空')
|
return
|
}
|
ajaxPost('patient/info/sendValidCode','phoneNo='+ruleForm3.value.userPhone,config).then(re=>{
|
console.log(re)
|
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(()=>{
|
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)
|
userInfo.setUserInfo({openid:re.openid,nickname:re.nickname,headimgurl:re.headimgurl})
|
const openid = re.openid
|
if (openid) { // 检查登录
|
ajaxPost('patient/info/wechatLogin',{openid},config).then((re:any)=>{
|
console.log('openid换的accesstoken=',re)
|
if (re===''){
|
Toast('请填写表单登录。。')
|
} else {
|
console.log()
|
Session.set('token', re)
|
Toast('登录成功。。。。。')
|
router.push('/')
|
}
|
})
|
}
|
|
})
|
}
|
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 {
|
console.log('不是微信浏览器')
|
Dialog.alert({
|
title: '提示',
|
message: '请在微信中打开浏览',
|
}).then(() => {
|
// on close
|
})
|
}
|
})
|
</script>
|
|
<template>
|
<div 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: '请输入登录名' }]"
|
/>
|
<van-field
|
v-model="password"
|
type="password"
|
name="密 码"
|
label="密  码"
|
placeholder="6-16位数字或者字母组合"
|
:rules="[{ required: true, message: '请填写密码' }]"
|
>
|
<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: #AAAAAA;
|
}
|
.loginType{
|
width: 100%;
|
margin-top: 120px;
|
text-align: center;
|
font-size: 11px;
|
font-weight: 400;
|
color: #AAAAAA;
|
// background: black;
|
.toptype{
|
width: 100%;
|
}
|
}
|
.titlebiaoti{
|
padding-top: 70px;
|
text-align:center;
|
padding-left: 30px;
|
// border: 1px solid black;
|
font-size: 15px;
|
padding-bottom: 70px;
|
}
|
.tss{
|
font-size: 10px;
|
font-weight: 400;
|
color: #AAAAAA;
|
height: 50px;
|
// line-height: 50px;
|
}
|
</style>
|
