63 lines
2.2 KiB
Vue
63 lines
2.2 KiB
Vue
|
<template>
|
||
|
|
<el-card style="max-width:480px;margin-top:20px">
|
||
|
|
<template #header><b>修改我的密码</b></template>
|
||
|
|
<el-alert type="warning" :closable="false" style="margin-bottom:16px"
|
||
|
|
title="密码修改成功后需重新登录" />
|
||
|
|
<el-form :model="form" label-width="100px" @submit.prevent>
|
||
|
|
<el-form-item label="旧密码">
|
||
|
|
<el-input v-model="form.oldPassword" type="password" show-password
|
||
|
|
placeholder="请输入当前密码" />
|
||
|
|
</el-form-item>
|
||
|
|
<el-form-item label="新密码">
|
||
|
|
<el-input v-model="form.newPassword" type="password" show-password
|
||
|
|
placeholder="至少 6 位" />
|
||
|
|
</el-form-item>
|
||
|
|
<el-form-item label="确认新密码">
|
||
|
|
<el-input v-model="form.confirmPassword" type="password" show-password
|
||
|
|
placeholder="请再次输入新密码" />
|
||
|
|
</el-form-item>
|
||
|
|
<el-form-item>
|
||
|
|
<el-button type="primary" :loading="loading" @click="submit">保存</el-button>
|
||
|
|
<el-button @click="reset">重置</el-button>
|
||
|
|
</el-form-item>
|
||
|
|
</el-form>
|
||
|
|
</el-card>
|
||
|
|
</template>
|
||
|
|
|
||
|
|
<script setup>
|
||
|
|
import { reactive, ref } from 'vue'
|
||
|
|
import { ElMessage } from 'element-plus'
|
||
|
|
import { useRouter } from 'vue-router'
|
||
|
|
import { logout } from '../utils/auth'
|
||
|
|
import request from '../utils/request'
|
||
|
|
|
||
|
|
const router = useRouter()
|
||
|
|
const loading = ref(false)
|
||
|
|
const form = reactive({ oldPassword: '', newPassword: '', confirmPassword: '' })
|
||
|
|
|
||
|
|
async function submit() {
|
||
|
|
if (!form.oldPassword || !form.newPassword) return ElMessage.warning('请填写旧密码和新密码')
|
||
|
|
if (form.newPassword !== form.confirmPassword) return ElMessage.warning('两次输入的新密码不一致')
|
||
|
|
if (form.newPassword.length < 6) return ElMessage.warning('新密码长度至少 6 位')
|
||
|
|
loading.value = true
|
||
|
|
try {
|
||
|
|
await request.post('/user/change-password', {
|
||
|
|
oldPassword: form.oldPassword,
|
||
|
|
newPassword: form.newPassword
|
||
|
|
})
|
||
|
|
ElMessage.success('密码修改成功，请重新登录')
|
||
|
|
logout()
|
||
|
|
router.replace('/login')
|
||
|
|
} catch (e) {
|
||
|
|
/* 错误已由请求拦截器提示 */
|
||
|
|
} finally {
|
||
|
|
loading.value = false
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
function reset() {
|
||
|
|
form.oldPassword = ''
|
||
|
|
form.newPassword = ''
|
||
|
|
form.confirmPassword = ''
|
||
|
|
}
|
||
|
|
</script>
|