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>
|