136 lines
3.7 KiB
Vue
136 lines
3.7 KiB
Vue
|
<script setup lang="ts">
|
||
|
|
import { ref, reactive } from 'vue'
|
||
|
|
import type { FormInstance, FormRules } from 'element-plus'
|
||
|
|
|
||
|
|
const formRef = ref<FormInstance>()
|
||
|
|
|
||
|
|
// 表单数据
|
||
|
|
const form = reactive({
|
||
|
|
oldPassword: '',
|
||
|
|
newPassword: '',
|
||
|
|
confirmPassword: ''
|
||
|
|
})
|
||
|
|
|
||
|
|
// 校验规则
|
||
|
|
const rules: FormRules = {
|
||
|
|
oldPassword: [
|
||
|
|
{ required: true, message: '请输入原密码', trigger: 'blur' }
|
||
|
|
],
|
||
|
|
newPassword: [
|
||
|
|
{ required: true, message: '请输入新密码', trigger: 'blur' },
|
||
|
|
{ min: 6, max: 20, message: '密码长度需在 6~20 位之间', trigger: 'blur' }
|
||
|
|
],
|
||
|
|
confirmPassword: [
|
||
|
|
{ required: true, message: '请再次输入新密码', trigger: 'blur' },
|
||
|
|
{
|
||
|
|
validator: (rule, value, callback) => {
|
||
|
|
if (value !== form.newPassword) {
|
||
|
|
callback(new Error('两次输入的密码不一致'))
|
||
|
|
} else {
|
||
|
|
callback()
|
||
|
|
}
|
||
|
|
},
|
||
|
|
trigger: 'blur'
|
||
|
|
}
|
||
|
|
]
|
||
|
|
}
|
||
|
|
|
||
|
|
// 提交保存
|
||
|
|
const handleSubmit = async () => {
|
||
|
|
if (!formRef.value) return
|
||
|
|
await formRef.value.validate((valid) => {
|
||
|
|
if (valid) {
|
||
|
|
console.log('表单数据:', form)
|
||
|
|
// 这里写接口提交逻辑
|
||
|
|
alert('密码修改成功！')
|
||
|
|
}
|
||
|
|
})
|
||
|
|
}
|
||
|
|
</script>
|
||
|
|
|
||
|
|
<template>
|
||
|
|
<div class="password-container">
|
||
|
|
<!-- 标题 -->
|
||
|
|
<div class="password-container-content">
|
||
|
|
<div class="title">
|
||
|
|
<span class="title-line"></span>
|
||
|
|
密码设置
|
||
|
|
</div>
|
||
|
|
<!-- 表单 -->
|
||
|
|
<el-form ref="formRef" :model="form" :rules="rules" label-width="90px" class="password-form">
|
||
|
|
<el-form-item label="原密码">
|
||
|
|
<el-input v-model="form.oldPassword" type="password" placeholder="请输入原密码" show-password />
|
||
|
|
</el-form-item>
|
||
|
|
|
||
|
|
<el-form-item label="新密码">
|
||
|
|
<el-input v-model="form.newPassword" type="password" placeholder="请输入新密码" show-password />
|
||
|
|
</el-form-item>
|
||
|
|
|
||
|
|
<el-form-item label="确认新密码">
|
||
|
|
<el-input v-model="form.confirmPassword" type="password" placeholder="请再次输入新密码" show-password />
|
||
|
|
</el-form-item>
|
||
|
|
</el-form>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
|
||
|
|
<!-- 保存按钮 -->
|
||
|
|
<el-button type="primary" style="background-color: #0099ff;width: 150px;height: 40px;" class="save-btn" @click="handleSubmit">
|
||
|
|
保存
|
||
|
|
</el-button>
|
||
|
|
</div>
|
||
|
|
</template>
|
||
|
|
|
||
|
|
<style scoped lang="scss">
|
||
|
|
.password-container {
|
||
|
|
width: 100%;
|
||
|
|
height: 100%;
|
||
|
|
padding: 20px;
|
||
|
|
|
||
|
|
.password-container-content {
|
||
|
|
width: 100%;
|
||
|
|
height: calc(100vh - 230px);
|
||
|
|
background-color: #ffffff;
|
||
|
|
padding: 20px 50px;
|
||
|
|
border-radius: 4px;
|
||
|
|
box-shadow: 0px 0px 10px rgba(219, 225, 236, 1);
|
||
|
|
}
|
||
|
|
.title {
|
||
|
|
font-size: 18px;
|
||
|
|
font-weight: 700;
|
||
|
|
color: #303133;
|
||
|
|
margin-bottom: 24px;
|
||
|
|
display: flex;
|
||
|
|
align-items: center;
|
||
|
|
|
||
|
|
.title-line {
|
||
|
|
display: inline-block;
|
||
|
|
width: 4px;
|
||
|
|
height: 14px;
|
||
|
|
background-color: #409eff;
|
||
|
|
margin-right: 8px;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
.password-form {
|
||
|
|
width: 60%;
|
||
|
|
}
|
||
|
|
.save-btn {
|
||
|
|
margin-top: 30px;
|
||
|
|
font-size: 14px;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
:deep(.el-form-item--label-right .el-form-item__label) {
|
||
|
|
text-align: left;
|
||
|
|
justify-content: flex-start;
|
||
|
|
color: #787878;
|
||
|
|
}
|
||
|
|
|
||
|
|
:deep(.el-input__inner) {
|
||
|
|
color: #363636;
|
||
|
|
min-height: 40px;
|
||
|
|
}
|
||
|
|
:deep(.el-form-item__label) {
|
||
|
|
line-height: 40px !important;
|
||
|
|
}
|
||
|
|
</style>
|