<!--
|
* @Author: lzhe lzhe@example.com
|
* @Date: 2024-09-06 14:09:39
|
* @LastEditors: lzhe lzhe@example.com
|
* @LastEditTime: 2024-10-22 20:18:13
|
* @FilePath: /smart-web/src/views/usercenter.vue
|
* @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
|
-->
|
<template>
|
<div class="user-main">
|
<div class="user-title marB12">基础信息</div>
|
<el-upload
|
:headers="authorization"
|
class="avatar-uploader"
|
action="/api/blade-resource/oss/endpoint/put-file"
|
:show-file-list="false"
|
:on-success="handleAvatarSuccess"
|
:before-upload="beforeAvatarUpload">
|
<div v-if="baseData.avatar" style="position: relative;">
|
<img :src="baseData.avatar" class="avatar">
|
<div class="el-icon-editDom">
|
<span class="el-icon-edit">编辑</span>
|
<span class="el-icon-del" @click.stop="avatarDel">删除</span>
|
</div>
|
</div>
|
<el-icon v-else class="el-icon-plus avatar-uploader-icon"><Picture /></el-icon>
|
</el-upload>
|
<div class="marB12" style="margin-top: 12px;"><span class="user-title">账号</span><span class="user-content">{{baseData.account}}</span></div>
|
<div class="marB12">
|
<span class="user-title">账号昵称</span><span class="user-content">{{baseData.realName}}</span>
|
<el-icon v-if="isEditRealName" class="password-icon" @click="editRealName"><EditPen /></el-icon>
|
<div class="realNameRepeat" v-if="!isEditRealName">
|
<el-input v-model="realNameRepeat" style="width: 240px" placeholder="请输入" />
|
<el-icon @click="realNameSub"><Check /></el-icon>
|
<el-icon @click="realNameClose"><Close /></el-icon>
|
</div>
|
</div>
|
<div class="marB12"><span class="user-title">登录密码</span><span class="user-content editPassword" @click="editPasswordModel = true">点击修改</span></div>
|
</div>
|
<el-dialog title="修改密码" v-model="editPasswordModel" :width="400" destroy-on-close @closed="closeModel">
|
<el-form :model="passwordForm" :rules="passwordRules" ref="dialogForm" label-width="80px" label-position="center">
|
<el-row>
|
<el-col :span="24">
|
<el-form-item label="原密码" prop="oldPassword">
|
<el-input placeholder="请输入密码" clearable v-model="passwordForm.oldPassword" show-password></el-input>
|
</el-form-item>
|
</el-col>
|
<el-col :span="24">
|
<el-form-item label="新密码" prop="newPassword">
|
<el-input placeholder="请输入密码" clearable v-model="passwordForm.newPassword" show-password></el-input>
|
</el-form-item>
|
</el-col>
|
<el-col :span="24">
|
<el-form-item label="确认密码" prop="newPassword1">
|
<el-input placeholder="请输入密码" clearable v-model="passwordForm.newPassword1" show-password></el-input>
|
</el-form-item>
|
</el-col>
|
</el-row>
|
</el-form>
|
<template #footer>
|
<el-button @click="editPasswordModel=false" >取 消</el-button>
|
<el-button v-if="mode!='show'" type="primary" :loading="isSaveing" @click="passwordSubmit">确 定</el-button>
|
</template>
|
</el-dialog>
|
</template>
|
|
<script>
|
import * as ElementPlusIconsVue from '@element-plus/icons-vue'
|
let icons = []
|
for (const [key, component] of Object.entries(ElementPlusIconsVue)) {
|
icons.push(key)
|
}
|
export default {
|
name: 'usercenter',
|
components: {
|
...ElementPlusIconsVue
|
},
|
data() {
|
return {
|
isEditRealName: true,
|
realNameRepeat: "",
|
baseData: {},
|
//表单数据
|
passwordForm: {
|
oldPassword: "",
|
newPassword: "",
|
newPassword1: ""
|
},
|
//验证规则
|
passwordRules: {
|
oldPassword: [{required: true, message: '请输入原密码'}],
|
newPassword: [{required: true, message: '请输入新密码'}],
|
newPassword1: [{required: true, message: '请输入确认密码'}]
|
},
|
authorization: {},
|
titleMap: "修改密码",
|
editPasswordModel: false
|
}
|
},
|
mounted() {
|
this.getInfo();
|
},
|
methods: {
|
realNameSub() {
|
var obj = {...this.baseData};
|
obj.realName = this.realNameRepeat;
|
this.updateData();
|
},
|
realNameClose() {
|
this.realNameRepeat = this.baseData.realName;
|
this.isEditRealName = !this.isEditRealName;
|
},
|
editRealName() {
|
this.realNameRepeat = this.baseData.realName;
|
this.isEditRealName = !this.isEditRealName;
|
},
|
getInfo() {
|
this.$HTTP.get(`/api/blade-user/info`).then(res=> {
|
if(res.code == 200) {
|
this.baseData = res.data;
|
this.realNameRepeat = res.data.realName;
|
}else {
|
this.$alert(res.message, "提示", {type: 'error'});
|
}
|
})
|
},
|
passwordSubmit() {
|
this.$refs.dialogForm.validate(async (valid) => {
|
if (valid) {
|
this.$HTTP.post(`/api/blade-user/update-password?oldPassword=${this.passwordForm.oldPassword}&newPassword=${this.passwordForm.newPassword}&newPassword1=${this.passwordForm.newPassword1}`).then(res=> {
|
if(res.code == 200) {
|
this.editPasswordModel = false;
|
this.$message.success("操作成功");
|
}else {
|
this.$alert(res.message, "提示", {type: 'error'});
|
}
|
})
|
}else{
|
return false;
|
}
|
})
|
},
|
closeModel(flag) {
|
console.log(flag);
|
this.passwordForm = {
|
oldPassword: "",
|
newPassword: "",
|
newPassword1: ""
|
}
|
},
|
avatarDel() {
|
this.baseData.avatar = "";
|
this.updateData();
|
},
|
updateData() {
|
this.$HTTP.post(`/api/blade-user/update-info`,this.baseData).then(res=> {
|
if(res.code == 200) {
|
this.getInfo();
|
this.isEditRealName = true;
|
}else {
|
this.$alert(res.message, "提示", {type: 'error'});
|
}
|
})
|
},
|
handleAvatarSuccess(file) {
|
this.baseData.avatar = file.data.link;
|
this.updateData();
|
},
|
beforeAvatarUpload(file) {
|
var isJPG = (file.type === 'image/jpeg' || file.type === 'image/png');
|
if (!isJPG) {
|
this.$message.error('请上传图片！');
|
}
|
var TOKEN = this.$TOOL.cookie.get("TOKEN")
|
this.authorization = {Authorization: 'Basic c2FiZXI6c2FiZXJfc2VjcmV0','Blade-Auth': TOKEN}
|
return isJPG;
|
},
|
}
|
}
|
</script>
|
<style scoped>
|
.user-main {
|
background-color: #f9fafb;
|
border: 1px solid #dcdfe6;
|
box-shadow: 0 2px 4px 0 rgba(0,0,0,.12), 0 0 6px 0 rgba(0,0,0,.04);
|
margin: 8px;
|
padding: 16px 20px;
|
background-color: #fff;
|
}
|
.user-title {
|
font-weight: 700;
|
font-size: 16px;
|
margin-right: 12px;
|
}
|
.marB12 {
|
margin-bottom: 12px;
|
}
|
.user-content {
|
color: #303133;
|
font-size: 16px;
|
}
|
.editPassword {
|
color: #409eff;
|
cursor: pointer;
|
margin-right: 6px;
|
}
|
.realNameRepeat {
|
display: inline-block;
|
margin-left: 12px;
|
}
|
.realNameRepeat i {
|
font-size: 16px;
|
vertical-align: middle;
|
margin-left: 8px;
|
cursor: pointer;
|
color: #409eff;
|
}
|
.password-icon {
|
font-size: 14px;
|
vertical-align: text-top;
|
cursor: pointer;
|
margin-left: 6px;
|
}
|
.avatar-uploader .el-upload {
|
border: 1px dashed #d9d9d9;
|
border-radius: 6px;
|
cursor: pointer;
|
position: relative;
|
overflow: hidden;
|
}
|
.avatar-uploader .el-upload:hover {
|
border-color: #409EFF;
|
}
|
.avatar-uploader-icon {
|
font-size: 28px;
|
color: #8c939d;
|
width: 80px;
|
height: 80px;
|
line-height: 80px;
|
text-align: center;
|
background-color: #c0c4cc;
|
}
|
.el-icon-editDom {
|
position: absolute;
|
left: 4px;
|
top: 56px;
|
font-weight: 700;
|
color: #409eff;
|
}
|
.el-icon-editDom span {
|
margin: 0;
|
padding: 0;
|
font-size: 12px;
|
line-height: 18px;
|
border: 1px solid #409eff;
|
background: #fff;
|
padding-left: 2px;
|
padding-right: 2px;
|
cursor: pointer;
|
}
|
.el-icon-editDom .el-icon-edit {
|
margin-right: 4px;
|
}
|
.el-icon-editDom .el-icon-del {
|
|
}
|
.avatar {
|
width: 80px;
|
height: 80px;
|
display: block;
|
}
|
</style>
|
