LoongPanel-Asp/web/pages/resetPassword.vue

91 lines
1.8 KiB
Vue

<script setup lang="ts">
definePageMeta({
layout: 'login',
})
//接受导航参数
import {useToast} from "vue-toastification";
const route = useRoute();
const email = route.query.email;
const token = route.query.token;
const toast = useToast();
const resetPassword = async () => {
$fetch('/Api/Account/ResetPassword', {
method: 'GET',
params: {
Email: email,
Token: token
},
headers: {
'Content-Type': 'application/json',
},
baseURL: useRuntimeConfig().public.baseUrl
}).then(res => {
toast.success(res)
setTimeout(() => {
navigateTo("/SignIn")
}, 2000)
}).catch(err => {
toast.error(err.response._data)
})
}
</script>
<template>
<div class="resetPassword-layout">
<div class="intro">
<h1>重置密码</h1>
<h2>点击下方的确认按钮将为你发送一个新的密码到你的邮箱</h2>
</div>
<button @click="resetPassword">重置</button>
</div>
</template>
<style scoped lang="scss">
@import "base";
.resetPassword-layout{
display: flex;
flex-direction: column;
gap: 48px;
*{
@include SC_Font;
}
}
.intro{
display: flex;
flex-direction: column;
gap: 28px;
h1{
color: #0C1421;
text-align: center;
font-size: 36px;
font-style: normal;
font-weight: 800;
line-height: 100%; /* 36px */
letter-spacing: 0.36px;
}
h2{
color: #313957;
font-size: 20px;
font-style: normal;
font-weight: 400;
line-height: 160%; /* 32px */
letter-spacing: 0.2px;
}
}
button{
display: flex;
padding: 16px 16px;
align-items: center;
justify-content: center;
border-radius: 12px;
background: #162D3A;
color: #FFF;
text-align: center;
font-size: 20px;
font-weight: 400;
line-height: 100%; /* 20px */
letter-spacing: 2px;
margin: auto;
}
</style>