91 lines
1.8 KiB
Vue
91 lines
1.8 KiB
Vue
<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> |