目录:
(1)个人中心信息展示
(2)用户信息修改
(3)修改密码功能
(4)修改用户头像
(1)个人中心信息展示
创建AdminInfo.vue:
在router中index.js中配置路由:
(2)用户信息修改
去掉123
更改名字发现右上角的没有变
设置全局更新
在main.js
这样上方的名字也更改了:
(3)修改密码功能
(4)修改用户头像
AdminInfo.vue:详细代码:
<template>
<div>
<el-card class="box-card" style="width: 400px">
<div slot="header" class="clearfix">
<span>{{admin.name}}</span>
</div>
<div>
<div style="display: flex;justify-content: center">
<el-upload
action="/admin/userface"
:headers="headers"
:data="admin"
:show-file-list="false"
:on-success="onSuccess">
<img title="点击修改用户头像" :src="admin.userFace"
style="height: 100px;width: 100px;border-radius: 50px"
alt="">
</el-upload>
</div>
<div style="margin-top: 10px">电话号码:
<el-tag style="margin-left: 10px">{{admin.telephone}}</el-tag>
</div>
<div style="margin-top: 10px">手机号码:
<el-tag style="margin-left: 10px">{{admin.phone}}</el-tag>
</div>
<div style="margin-top: 10px">居住地址:
<el-tag style="margin-left: 10px">{{admin.address}}</el-tag>
</div>
<div style="margin-top: 10px">用户标签:
<el-tag style="margin-left: 10px" type="success" v-for="(r,index) in admin.roles" :key="index">
{{r.nameZh}}
</el-tag>
</div>
<div style="display: flex;justify-content: center;margin-top: 10px">
<el-button type="primary" @click="showUpdateAdminInfoView">修改信息</el-button>
<el-button type="danger" @click="showUpdatePasswordVie">修改密码</el-button>
</div>
</div>
</el-card>
<!--更新用户弹出框 -->
<el-dialog
title="编辑用户信息"
:visible.sync="dialogVisible"
width="30%">
<div>
<table>
<tr>
<td>用户昵称:</td>
<td>
<el-input v-model="admin2.name"></el-input>
</td>
</tr>
<tr>
<td>电话号码:</td>
<td>
<el-input v-model="admin2.telephone"></el-input>
</td>
</tr>
<tr>
<td>手机号码:</td>
<td>
<el-input v-model="admin2.phone"></el-input>
</td>
</tr>
<tr>
<td>用户地址:</td>
<td>
<el-input v-model="admin2.address"></el-input>
</td>
</tr>
</table>
</div>
<span slot="footer" class="dialog-footer">
<el-button @click="dialogVisible = false">取 消</el-button>
<el-button type="primary" @click="updateAdminInfo">确 定</el-button>
</span>
</el-dialog>
<!--修改密码弹出框 -->
<el-dialog
title="更新密码"
:visible.sync="passwordDialogVisible"
width="30%">
<div>
<el-form :model="ruleForm" status-icon :rules="rules" ref="ruleForm" label-width="100px"
class="demo-ruleForm">
<el-form-item label="请输入旧密码" prop="oldPass">
<el-input type="password" v-model="ruleForm.oldPass" autocomplete="off"></el-input>
</el-form-item>
<el-form-item label="请输入新密码" prop="pass">
<el-input type="password" v-model="ruleForm.pass" autocomplete="off"></el-input>
</el-form-item>
<el-form-item label="请确认新密码" prop="checkPass">
<el-input type="password" v-model="ruleForm.checkPass" autocomplete="off"></el-input>
</el-form-item>
<el-form-item>
<el-button type="primary" @click="submitForm('ruleForm')">提交</el-button>
<el-button @click="resetForm('ruleForm')">重置</el-button>
</el-form-item>
</el-form>
</div>
</el-dialog>
</div>
</template>
<script>
export default {
name: "AdminInfo",
data() {
//修改密码校验规则
var validatePass = (rule, value, callback) => {
if (value === '') {
callback(new Error('请输入密码'));
} else {
if (this.ruleForm.checkPass !== '') {
this.$refs.ruleForm.validateField('checkPass');
}
callback();
}
};
var validatePass2 = (rule, value, callback) => {
if (value === '') {
callback(new Error('请再次输入密码'));
} else if (value !== this.ruleForm.pass) {
callback(new Error('两次输入密码不一致!'));
} else {
callback();
}
};
return {
headers:{
Authorization:window.sessionStorage.getItem('tokenStr')
},
admin: null,
admin2: null,
dialogVisible: false,
passwordDialogVisible: false,
//修改密码校验规则
ruleForm: {
pass: '',
checkPass: '',
oldPass: ''
},
rules: {
pass: [
{validator: validatePass, trigger: 'blur'}
],
checkPass: [
{validator: validatePass2, trigger: 'blur'}
],
oldPass: [
{validator: validatePass, trigger: 'blur'}
]
}
};
},
mounted() {
this.initAdmin();
},
methods: {
//获取用户信息
initAdmin() {
this.getRequest('/admin/info').then(resp => {
if (resp) {
this.admin = resp;
this.admin2 = Object.assign({}, this.admin);
//存一下数据
window.sessionStorage.setItem('user', JSON.stringify(resp));
this.$store.commit('INIT_ADMIN', resp);
}
})
},
//展示用户用户弹出框
showUpdateAdminInfoView() {
this.dialogVisible = true;
},
//更新用户信息
updateAdminInfo() {
this.putRequest('/admin/info', this.admin2).then(resp => {
if (resp) {
this.dialogVisible = false;
this.initAdmin();
}
})
},
//头像上传成功初始化页面
onSuccess(){
this.initAdmin();
},
//修改密码提交表单
submitForm(formName) {
this.$refs[formName].validate((valid) => {
if (valid) {
this.ruleForm.adminId = this.admin.id;
this.putRequest('/admin/pass', this.ruleForm).then(resp => {
if (resp) {
//更新密码成功后退出登录
this.putRequest('/logout');
window.sessionStorage.removeItem('user');
window.sessionStorage.removeItem('tokenStr');
this.$store.commit('initRoutes', []);
this.$router.replace('/');
}
})
} else {
console.log('error submit!!');
return false;
}
});
},
//重置表单
resetForm(formName) {
this.$refs[formName].resetFields();
},
//显示修改密码弹出框
showUpdatePasswordVie() {
this.passwordDialogVisible = true;
}
}
}
</script>
<style scoped>
</style>