moto/web/src/views/organize/user/Profile.vue

<template>
    <div class="profile-container">
        <el-row :gutter="20">
            <el-col :span="6">
                <div class="profile">
                    <div class="profile-avatar text-center d-flex">
                        <div class="flex-shrink">
                            <el-avatar :size="72" :src="avatar" />
                        </div>
                        <div class="flex-fill">
                            <h3>{{ username }}</h3>
                            <span class="text-muted">{{ description }}</span>
                        </div>
                    </div>
                    <div class="profile-fields">
                        <preview label="工号" :value="uid"></preview>
                        <preview label="名称" :value="username"></preview>
                        <preview label="邮箱" :value="email"></preview>
                    </div>
                </div>
            </el-col>
            <el-col :span="18">
                <div class="profile-tabs">
                    <el-tabs v-model="activeTab">
                        <el-tab-pane label="基本资料" name="basic">
                            <el-form ref="basicForm" :model="basicModel" status-icon label-width="120px"
                                class="segment-form">
                                <el-form-item label="用户名" prop="oldPassword">
                                    <el-input v-model="basicModel.username" autocomplete="off" placeholder="请输入用户名" />
                                </el-form-item>
                                <el-form-item label="邮箱" prop="newPassword">
                                    <el-input v-model="basicModel.email" autocomplete="off" placeholder="请输入邮箱" />
                                </el-form-item>
                                <el-form-item label="个人简介" prop="confirmPassword">
                                    <el-input v-model="basicModel.description" type="textarea" autocomplete="off"
                                        :rows="10" placeholder="请介绍下自己" />
                                </el-form-item>
                                <el-form-item>
                                    <el-button type="primary" @click="handleUpdateProfile">修改</el-button>
                                </el-form-item>
                            </el-form>
                        </el-tab-pane>
                        <el-tab-pane label="密码修改" name="password">
                            <el-form ref="passwordForm" :model="passwordModel" :rules="passwordRules" status-icon
                                label-width="120px" class="segment-form">
                                <el-form-item label="旧密码" prop="oldPassword">
                                    <el-input v-model="passwordModel.oldPassword" type="password" autocomplete="off"
                                        placeholder="请输入旧密码" />
                                </el-form-item>
                                <el-form-item label="新密码" prop="newPassword">
                                    <el-input v-model="passwordModel.newPassword" type="password" autocomplete="off"
                                        placeholder="请输入新密码" />
                                </el-form-item>
                                <el-form-item label="确认密码" prop="confirmPassword">
                                    <el-input v-model="passwordModel.confirmPassword" type="password" autocomplete="off"
                                        placeholder="请再次输入新密码" />
                                </el-form-item>
                                <el-form-item>
                                    <el-button type="primary" @click="handleResetPassword">修改</el-button>
                                </el-form-item>
                            </el-form>
                        </el-tab-pane>
                    </el-tabs>
                </div>
            </el-col>
        </el-row>
    </div>
</template>

<style lang="scss">
.profile {
    box-sizing: border-box;
    padding: 1rem;
    background-color: white;
    border-radius: 6px;
    box-shadow: var(--el-box-shadow-light);
}

.profile-tabs {
    background-color: white;
    border-radius: 6px;
    box-shadow: var(--el-box-shadow-light);
}

.profile-container {
    box-sizing: border-box;
    padding: 1rem;

    .profile-avatar {
        margin-bottom: 2rem;

        .el-avatar {
            box-shadow: var(--el-box-shadow);
            margin-right: 1.2rem;
        }

        .el-avatar {
            margin-bottom: 1.8rem;
        }

        h3 {
            margin: .5rem 0 10px 0;
        }
    }

    .profile-desc {
        h4 {
            margin: .5rem 0;
        }

        p {
            text-indent: 2rem;
            font-size: .78rem;
            line-height: 1.48rem;
        }

        margin-bottom: 2.8rem;
    }
}
</style>

<script setup>
import { ref } from 'vue'
import useUserStore from '@/stores/user'
import Preview from '@/components/widgets/Preview.vue';
import { storeToRefs } from 'pinia';
import { updateProfile, resetPassword } from '@/apis/organize'
import { ElMessage } from 'element-plus';
const userStore = useUserStore()

const { avatar, username, email, uid, description } = storeToRefs(userStore)

const activeTab = ref('basic')


const basicModel = ref({
    username: username,
    email: email,
    description: description,
})

const passwordForm = ref()

const passwordModel = ref({
    oldPassword: '',
    newPassword: '',
    confirmPassword: ''
})

const validateConfirmPassword = (rule, value, callback) => {

    if (value != passwordModel.value.newPassword) {
        callback(new Error("两次密码输入不一致"))
    } else if (!/(?=.*[0-9])(?=.*[a-zA-Z]).{6,20}/.test(value)) {
        callback(new Error("密码必须包含数字和字母, 长度6-20位"))
    } else {
        callback()
    }
}

const passwordRules = ref({
    oldPassword: [
        { required: true, message: '密码不能为空', trigger: 'blur' }
    ],
    newPassword: [
        { required: true, message: '密码不能为空', trigger: 'blur' }
    ],
    confirmPassword: [
        { validator: validateConfirmPassword, trigger: 'blur' }
    ]
})


const handleUpdateProfile = () => {
    updateProfile(basicModel.value).then(res => {

    }).catch(e => {
        ElMessage.error(e.message)
    })
}

const handleResetPassword = () => {
    passwordForm.value.validate().then(valid => {
        if (valid) {
            resetPassword(passwordModel.value.oldPassword, passwordModel.value.newPassword).then(res => {
                ElMessage.success('密码重置成功')
            }).catch(e => {
                ElMessage.error(e.message)
            })
        }
    }).catch(e => {

    })
}

</script>