1

lzhe

2024-10-09 8b2a0199527fa2d2f0fd4c420dd374e42c496c48

1

 src/config/route.js

@@ -2,7 +2,7 @@
 * @Author: lzhe lzhe@example.com
 * @Date: 2024-05-24 11:25:26
 * @LastEditors: lzhe lzhe@example.com
 * @LastEditTime: 2024-06-19 21:52:58
 * @LastEditTime: 2024-10-09 09:58:40
 * @FilePath: /src/config/route.js
 * @Description: è¿™æ˜¯é»˜è®¤è®¾ç½®,请设置`customMade`, æ‰“å¼€koroFileHeader查看配置 è¿›è¡Œè®¾ç½®: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
 */
@@ -99,6 +99,17 @@
            type: 'menu',
            hidden: true
        }
    },
    {
        name: "账号信息",
        path: "/userCenter/edituser",
        component: "userCenter/edituser",
        meta: {
            icon: "el-icon-menu",
            title: "账号信息",
            type: 'menu',
            hidden: true
        }
    }
]


 src/layout/components/userbar.vue

@@ -145,7 +145,7 @@
            //个人信息
            handleUser(command) {
                if(command == "uc"){
                    this.$router.push({path: '/usercenter'});
                    this.$router.push({path: '/userCenter/edituser'});
                }
                if(command == "cmd"){
                    this.$router.push({path: '/cmd'});

 src/views/userCenter/edituser.vue

¶Ô±ÈÐÂÎļþ
@@ -0,0 +1,272 @@
<!--
 * @Author: lzhe lzhe@example.com
 * @Date: 2024-09-06 14:09:39
 * @LastEditors: lzhe lzhe@example.com
 * @LastEditTime: 2024-10-09 11:30:37
 * @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="800" destroy-on-close @closed="closeModel">
        <el-form :model="passwordForm" :rules="passwordRules" ref="dialogForm" label-width="120px" label-position="center">
            <el-row>
                <el-col :span="12">
                    <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="12">
                    <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="12">
                    <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>

 src/views/userCenter/img-logo.png