parent
b1ed7b9149
commit
70a9e725e6
@ -0,0 +1,164 @@
|
||||
<template>
|
||||
<div class="main-content">
|
||||
<el-card style="width: 50%; margin: 30px auto">
|
||||
<div style="text-align: right; margin-bottom: 20px">
|
||||
<el-button type="primary" @click="updatePassword">修改密码</el-button>
|
||||
</div>
|
||||
<el-form :model="user" label-width="80px" style="padding-right: 20px">
|
||||
<div style="margin: 15px; text-align: center">
|
||||
<el-upload
|
||||
class="avatar-uploader"
|
||||
:action="$baseUrl + '/files/upload'"
|
||||
:show-file-list="false"
|
||||
:on-success="handleAvatarSuccess"
|
||||
>
|
||||
<img v-if="user.avatar" :src="user.avatar" class="avatar" />
|
||||
<i v-else class="el-icon-plus avatar-uploader-icon"></i>
|
||||
</el-upload>
|
||||
</div>
|
||||
<el-form-item label="用户名" prop="username">
|
||||
<el-input v-model="user.username" placeholder="用户名" disabled></el-input>
|
||||
</el-form-item>
|
||||
<el-form-item label="姓名" prop="name">
|
||||
<el-input v-model="user.name" placeholder="姓名"></el-input>
|
||||
</el-form-item>
|
||||
<el-form-item label="电话" prop="phone">
|
||||
<el-input v-model="user.phone" placeholder="电话"></el-input>
|
||||
</el-form-item>
|
||||
<el-form-item label="邮箱" prop="email">
|
||||
<el-input v-model="user.email" placeholder="邮箱"></el-input>
|
||||
</el-form-item>
|
||||
<div style="text-align: center; margin-bottom: 20px">
|
||||
<el-button type="primary" @click="update">保 存</el-button>
|
||||
</div>
|
||||
</el-form>
|
||||
</el-card>
|
||||
<el-dialog title="修改密码" :visible.sync="dialogVisible" width="30%" :close-on-click-modal="false" destroy-on-close>
|
||||
<el-form :model="user" label-width="80px" style="padding-right: 20px" :rules="rules" ref="formRef">
|
||||
<el-form-item label="原始密码" prop="password">
|
||||
<el-input show-password v-model="user.password" placeholder="原始密码"></el-input>
|
||||
</el-form-item>
|
||||
<el-form-item label="新密码" prop="newPassword">
|
||||
<el-input show-password v-model="user.newPassword" placeholder="新密码"></el-input>
|
||||
</el-form-item>
|
||||
<el-form-item label="确认密码" prop="confirmPassword">
|
||||
<el-input show-password v-model="user.confirmPassword" placeholder="确认密码"></el-input>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
<div slot="footer" class="dialog-footer">
|
||||
<el-button @click="fromVisible = false">取 消</el-button>
|
||||
<el-button type="primary" @click="save">确 定</el-button>
|
||||
</div>
|
||||
</el-dialog>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
const validatePassword = (rule, value, callback) => {
|
||||
if (value === '') {
|
||||
callback(new Error('请确认密码'))
|
||||
} else if (value !== this.user.newPassword) {
|
||||
callback(new Error('确认密码错误'))
|
||||
} else {
|
||||
callback()
|
||||
}
|
||||
}
|
||||
return {
|
||||
user: JSON.parse(localStorage.getItem('xm-user') || '{}'),
|
||||
dialogVisible: false,
|
||||
|
||||
rules: {
|
||||
password: [
|
||||
{ required: true, message: '请输入原始密码', trigger: 'blur' },
|
||||
],
|
||||
newPassword: [
|
||||
{ required: true, message: '请输入新密码', trigger: 'blur' },
|
||||
],
|
||||
confirmPassword: [
|
||||
{ validator: validatePassword, required: true, trigger: 'blur' },
|
||||
],
|
||||
}
|
||||
}
|
||||
},
|
||||
created() {
|
||||
|
||||
},
|
||||
methods: {
|
||||
update() {
|
||||
// 保存当前的用户信息到数据库
|
||||
this.$request.put('/user/update', this.user).then(res => {
|
||||
if (res.code === '200') {
|
||||
// 成功更新
|
||||
this.$message.success('保存成功')
|
||||
// 更新浏览器缓存里的用户信息
|
||||
localStorage.setItem('xm-user', JSON.stringify(this.user))
|
||||
|
||||
// 触发父级的数据更新
|
||||
this.$emit('update:user')
|
||||
} else {
|
||||
this.$message.error(res.msg)
|
||||
}
|
||||
})
|
||||
},
|
||||
handleAvatarSuccess(response, file, fileList) {
|
||||
// 把user的头像属性换成上传的图片的链接
|
||||
this.$set(this.user, 'avatar', response.data)
|
||||
},
|
||||
// 修改密码
|
||||
updatePassword() {
|
||||
this.dialogVisible = true
|
||||
},
|
||||
save() {
|
||||
this.$refs.formRef.validate((valid) => {
|
||||
if (valid) {
|
||||
this.$request.put('/updatePassword', this.user).then(res => {
|
||||
if (res.code === '200') {
|
||||
// 成功更新
|
||||
this.$message.success('修改密码成功')
|
||||
this.$router.push('/login')
|
||||
} else {
|
||||
this.$message.error(res.msg)
|
||||
}
|
||||
})
|
||||
}
|
||||
})
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
/deep/.el-form-item__label {
|
||||
font-weight: bold;
|
||||
}
|
||||
/deep/.el-upload {
|
||||
border-radius: 50%;
|
||||
}
|
||||
/deep/.avatar-uploader .el-upload {
|
||||
border: 1px dashed #d9d9d9;
|
||||
cursor: pointer;
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
border-radius: 50%;
|
||||
}
|
||||
/deep/.avatar-uploader .el-upload:hover {
|
||||
border-color: #409EFF;
|
||||
}
|
||||
.avatar-uploader-icon {
|
||||
font-size: 28px;
|
||||
color: #8c939d;
|
||||
width: 120px;
|
||||
height: 120px;
|
||||
line-height: 120px;
|
||||
text-align: center;
|
||||
border-radius: 50%;
|
||||
}
|
||||
.avatar {
|
||||
width: 120px;
|
||||
height: 120px;
|
||||
display: block;
|
||||
border-radius: 50%;
|
||||
}
|
||||
</style>
|
||||
Loading…
Reference in new issue