133 lines
2.9 KiB
Vue
133 lines
2.9 KiB
Vue
<script setup lang="ts">
|
|
import _ from "lodash";
|
|
|
|
definePageMeta({
|
|
layout: 'login',
|
|
})
|
|
import { SmsCode, type ISmsCodeComponentInstance } from 'vue3-auth-code-input';
|
|
import {useToast} from "vue-toastification";
|
|
|
|
const visible= ref(false)
|
|
const email = ref(useRoute().params.email)
|
|
const userId = ref(useRoute().params.id)
|
|
const smsCodeRef = ref<ISmsCodeComponentInstance | null>(null);
|
|
const toast = useToast()
|
|
const handelSubmit=()=>{
|
|
visible.value=true
|
|
}
|
|
const sendCode = (email:string) => {
|
|
$fetch('/Api/Account/VerifyEmail', {
|
|
method:'GET',
|
|
params:{
|
|
UserId:userId.value,
|
|
Email:email
|
|
},
|
|
headers: {
|
|
'Content-Type': 'application/json',
|
|
},
|
|
baseURL: useRuntimeConfig().public.baseUrl
|
|
}).then(res=>{
|
|
toast.success(res)
|
|
}).catch(err=>{
|
|
toast.error(err.response._data)
|
|
})
|
|
};
|
|
//节流
|
|
const verifyCode=_.debounce((code:string)=>{
|
|
if(code.length!==6){
|
|
return
|
|
}
|
|
$fetch('/Api/Account/VerifyEmail', {
|
|
method:'GET',
|
|
params:{
|
|
UserId:userId.value,
|
|
Email:email.value,
|
|
Code:code
|
|
},
|
|
headers: {
|
|
'Content-Type': 'application/json',
|
|
},
|
|
baseURL: useRuntimeConfig().public.baseUrl
|
|
}).then(res=>{
|
|
toast.success(res)
|
|
toast.info("你的账号信息已被更新")
|
|
toast.info("重新登录...")
|
|
setTimeout(()=>{
|
|
navigateTo("/SignIn")
|
|
},2000)
|
|
}).catch(err=>{
|
|
toast.error(err.response._data)
|
|
})
|
|
},1000)
|
|
</script>
|
|
|
|
<template>
|
|
<div class="verify-email-layout">
|
|
<Dialog v-model:visible="visible"
|
|
:pt="{
|
|
root: {
|
|
style:'border:unset;background-color:unset;'
|
|
},
|
|
mask: {
|
|
style: 'backdrop-filter: blur(20px)'
|
|
}
|
|
}"
|
|
modal>
|
|
<template #container="{ closeCallback }">
|
|
<sms-code ref="smsCodeRef" title="验证你的邮箱" card width="400px" codeHeight="50px" font-size="20" content-text="请获取验证码后填写邮箱验证码。" type="text" :mobile="email as string" @send="sendCode" @update:code="verifyCode" />
|
|
</template>
|
|
</Dialog>
|
|
<div class="info">
|
|
<h1>验证邮箱</h1>
|
|
<h2>验证你的邮箱以继续登录</h2>
|
|
</div>
|
|
<form @submit.prevent="handelSubmit">
|
|
<input type="email" v-model="email" placeholder="请输入你的邮箱" required />
|
|
<button type="submit">提交</button>
|
|
</form>
|
|
</div>
|
|
</template>
|
|
|
|
<style scoped lang="scss">
|
|
@import "../../base";
|
|
.verify-email-layout{
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 24px;
|
|
*{
|
|
@include SC_Font
|
|
}
|
|
}
|
|
.info{
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: $gap;
|
|
h1{
|
|
font-weight: 700;
|
|
text-align: center;
|
|
}
|
|
h2{
|
|
font-weight: 400;
|
|
}
|
|
}
|
|
form{
|
|
display: flex;
|
|
gap: $gap;
|
|
input{
|
|
padding: 16px;
|
|
border-radius: 12px;
|
|
border: 1px solid #D4D7E3;
|
|
background: #eaeaea;
|
|
|
|
}
|
|
button{
|
|
border: $border;
|
|
padding: $padding;
|
|
border-radius: $radius;
|
|
background: $primary-color;
|
|
color: #fff;
|
|
font-weight: 800;
|
|
font-size: 20px;
|
|
}
|
|
}
|
|
</style> |