LoongPanel-Asp/web/pages/forgotPassword/[[email]].vue

91 lines
1.8 KiB
Vue
Raw Blame History

This file contains ambiguous Unicode characters

This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.

<script setup lang="ts">
definePageMeta({
layout: 'login',
})
import {useToast} from "vue-toastification";
const email=ref(useRoute().params.email)
const toast=useToast()
const sendEmail=()=>{
$fetch('/Api/Account/ForgotPassword', {
method:'GET',
params:{
Email:email.value
},
headers: {
'Content-Type': 'application/json',
},
baseURL: useRuntimeConfig().public.baseUrl
}).then(res=>{
toast.success(res)
}).catch(err=>{
toast.error(err.response._data)
})
}
</script>
<template>
<div class="forgotPassword-layout">
<a href="/signIn">< 返回</a>
<div class="info">
<h1>忘记密码</h1>
<h2>请输入您的邮箱地址我们将向您发送重置密码的链接</h2>
<h3>请检查你的垃圾箱</h3>
</div>
<div class="form">
<div>
<input v-model="email" type="email" placeholder="请输入您的邮箱地址" required minlength="8" />
<button @click="sendEmail">发送</button>
</div>
</div>
</div>
</template>
<style scoped lang="scss">
@import "../../base";
.forgotPassword-layout{
display: flex;
flex-direction: column;
gap:48px;
*{
@include SC_Font
}
.info{
display: flex;
flex-direction: column;
font-weight: 800;
gap: $gap;
}
input{
padding: 16px;
border-radius: 12px;
border: 1px solid #D4D7E3;
background: #F7FBFF;
}
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;
}
.form{
display: flex;
flex-direction: column;
gap: $gap*2;
>div{
display: flex;
gap: $gap;
input{
flex: 1;
}
}
}
}
</style>