131 lines
2.9 KiB
Vue
131 lines
2.9 KiB
Vue
<template>
|
|
<div class="personal-info">
|
|
<el-form :model="userForm" label-width="120px" class="info-form">
|
|
<el-form-item label="头像">
|
|
<div class="avatar-upload">
|
|
<img :src="userForm.avatar || defaultAvatar" alt="头像" class="avatar-preview" />
|
|
<el-button size="small" @click="handleAvatarUpload">更换头像</el-button>
|
|
</div>
|
|
</el-form-item>
|
|
|
|
<el-form-item label="用户名">
|
|
<el-input v-model="userForm.username" disabled />
|
|
</el-form-item>
|
|
|
|
<el-form-item label="姓名">
|
|
<el-input v-model="userForm.realName" />
|
|
</el-form-item>
|
|
|
|
<el-form-item label="性别">
|
|
<el-radio-group v-model="userForm.gender">
|
|
<el-radio :label="1">男</el-radio>
|
|
<el-radio :label="2">女</el-radio>
|
|
</el-radio-group>
|
|
</el-form-item>
|
|
|
|
<el-form-item label="手机号">
|
|
<el-input v-model="userForm.phone" />
|
|
</el-form-item>
|
|
|
|
<el-form-item label="邮箱">
|
|
<el-input v-model="userForm.email" />
|
|
</el-form-item>
|
|
|
|
<el-form-item label="部门">
|
|
<el-input v-model="userForm.deptName" disabled />
|
|
</el-form-item>
|
|
|
|
<el-form-item label="个人简介">
|
|
<el-input
|
|
v-model="userForm.bio"
|
|
type="textarea"
|
|
:rows="4"
|
|
placeholder="介绍一下自己吧..."
|
|
/>
|
|
</el-form-item>
|
|
|
|
<el-form-item>
|
|
<el-button type="primary" @click="handleSave">保存</el-button>
|
|
<el-button @click="handleCancel">取消</el-button>
|
|
</el-form-item>
|
|
</el-form>
|
|
</div>
|
|
</template>
|
|
|
|
<script setup lang="ts">
|
|
import { ref, onMounted } from 'vue';
|
|
import { ElForm, ElFormItem, ElInput, ElButton, ElRadio, ElRadioGroup, ElMessage } from 'element-plus';
|
|
|
|
// 默认头像
|
|
const defaultAvatar = new URL('@/assets/imgs/default-avatar.png', import.meta.url).href;
|
|
|
|
const userForm = ref({
|
|
avatar: '',
|
|
username: '',
|
|
realName: '',
|
|
gender: 1,
|
|
phone: '',
|
|
email: '',
|
|
deptName: '',
|
|
bio: ''
|
|
});
|
|
|
|
onMounted(() => {
|
|
// TODO: 加载用户信息
|
|
loadUserInfo();
|
|
});
|
|
|
|
function loadUserInfo() {
|
|
// 模拟数据
|
|
userForm.value = {
|
|
avatar: '',
|
|
username: '平台用户bc7a1b',
|
|
realName: '张三',
|
|
gender: 1,
|
|
phone: '15268425987',
|
|
email: 'zhangsan@example.com',
|
|
deptName: '机械学院',
|
|
bio: ''
|
|
};
|
|
}
|
|
|
|
function handleAvatarUpload() {
|
|
// TODO: 上传头像
|
|
ElMessage.info('上传头像功能开发中');
|
|
}
|
|
|
|
function handleSave() {
|
|
// TODO: 保存用户信息
|
|
ElMessage.success('保存成功');
|
|
}
|
|
|
|
function handleCancel() {
|
|
// 重置表单
|
|
loadUserInfo();
|
|
}
|
|
</script>
|
|
|
|
<style lang="scss" scoped>
|
|
.personal-info {
|
|
max-width: 600px;
|
|
}
|
|
|
|
.info-form {
|
|
padding: 20px 0;
|
|
}
|
|
|
|
.avatar-upload {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 20px;
|
|
}
|
|
|
|
.avatar-preview {
|
|
width: 80px;
|
|
height: 80px;
|
|
border-radius: 50%;
|
|
object-fit: cover;
|
|
border: 2px solid #e0e0e0;
|
|
}
|
|
</style>
|