Amadeus
/
springboot-vue-template-jwt-frontend
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

密码重置页面

This commit is contained in:
Amadeus 2024-05-25 20:17:05 +08:00
parent b7b03a7ca0
commit afeb357d39
3 changed files with 106 additions and 1 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

5
my-project-frontend/src/router/index.js
View File

@ -18,6 +18,11 @@ const router = createRouter( {
path: 'register',
name: 'welcome-register',
component: () => import('@/views/welcome/RegisterPage.vue')
},{
path: 'reset',
name: 'welcome-reset',
component: () => import('@/views/welcome/ResetPage.vue')
}
]
}, {

2
my-project-frontend/src/views/welcome/LoginPage.vue
View File

@ -66,7 +66,7 @@ function userLogin(){
</el-form-item>
</el-col>
<el-col :span="12" style="text-align: right">
<el-link>忘记密码?</el-link>
<el-link @click="router.push('/reset')" >忘记密码?</el-link>
</el-col>
</el-row>
</el-form>

100
my-project-frontend/src/views/welcome/ResetPage.vue Normal file
View File

@ -0,0 +1,100 @@
<script setup>
import {reactive, ref} from "vue";
import {EditPen, Lock, Message} from "@element-plus/icons-vue";
const active = ref(0)
const form = reactive({
email:'',
code:'',
password:'',
password_repeat:''
})
</script>
<template>
<div style="text-align: center">
<div style="margin-top: 30px">
<el-steps :active="active" finish-status="success" align-center>
<el-step title="验证电子邮件"/>
<el-step title="重新设定密码"/>
</el-steps>
</div>
<div>
<div style="margin: 0 20px" v-if="active === 0">
<div style="margin-top: 80px">
<div style="font-size: 25px;font-weight: bold">重置密码</div>
<div style="font-size: 15px;color: grey">请输入需要重置密码的电子邮件地址</div>
</div>
<div style="margin-top: 50px">
<el-form :model="form">
<el-form-item prop="email">
<el-input v-model="form.email" type="email" placeholder="电子邮件地址">
<template #prefix>
<el-icon><Message /></el-icon>
</template>
</el-input>
</el-form-item>
<el-form-item prop="code">
<el-row :gutter="10" style="width: 100%">
<el-col :span="17">
<el-input v-model="form.code" :maxlength="6" type="text" placeholder="请输入验证码">
<template #prefix>
<el-icon><EditPen /></el-icon>
</template>
</el-input>
</el-col>
<el-col :span="5">
<el-button type="success" >
获取验证码
</el-button>
</el-col>
</el-row>
</el-form-item>
</el-form>
<div style="margin-top: 80px">
<el-button style="width: 270px" type="warning" @click="active++" plain>开始重置密码</el-button>
</div>
</div>
</div>
<div style="margin: 0 20px" v-if="active ===1">
<div style="margin-top: 80px">
<div style="font-size: 25px;font-weight: bold">重置密码</div>
<div style="font-size: 15px;color: grey">请填写你的新密码</div>
</div>
<div style="margin-top: 50px">
<el-form :model="form">
<el-form-item prop="password">
<el-input v-model="form.password" :maxlength="16" type="password" placeholder="密码">
<template #prefix>
<el-icon><Lock /></el-icon>
</template>
</el-input>
</el-form-item>
<el-form-item prop="password_repeat">
<el-input v-model="form.password_repeat" :maxlength="16" type="password" placeholder="重复密码">
<template #prefix>
<el-icon><Lock /></el-icon>
</template>
</el-input>
</el-form-item>
</el-form>
<div style="margin-top: 80px">
<el-button style="width: 270px" type="default" @click="active++" plain>立即重置密码</el-button>
</div>
</div>
</div>
</div>
</div>
</template>
<style scoped>
</style>