parent
f27a831869
commit
df00bca905
@ -0,0 +1,208 @@
|
|||||||
|
<template>
|
||||||
|
<div class="container">
|
||||||
|
<el-row class="top">
|
||||||
|
<el-col :span="20" class="col">个人信息</el-col>
|
||||||
|
</el-row>
|
||||||
|
|
||||||
|
<el-row class="body">
|
||||||
|
<el-col :span="6" class="avatar-col">
|
||||||
|
<el-image
|
||||||
|
class="user-img"
|
||||||
|
:src="userImgSrc"
|
||||||
|
@error="handleImageError"
|
||||||
|
fit="cover"
|
||||||
|
></el-image>
|
||||||
|
<el-button class="upload-btn" type="text" @click="triggerFileUpload">更换头像</el-button>
|
||||||
|
<input type="file" @change="handleFileUpload" style="display: none;" />
|
||||||
|
</el-col>
|
||||||
|
|
||||||
|
<el-col :span="14" class="form-col">
|
||||||
|
<el-tag class="phone">{{ phoneNumber }}</el-tag>
|
||||||
|
<el-form label-width="auto" class="user-form" style="max-width: 600px">
|
||||||
|
<el-form-item label="昵称">
|
||||||
|
<el-input v-model="form.nickname" placeholder="请输入昵称"></el-input>
|
||||||
|
</el-form-item>
|
||||||
|
<el-form-item label="性别">
|
||||||
|
<el-select v-model="form.sex" placeholder="选择性别">
|
||||||
|
<el-option label="男" value="男"></el-option>
|
||||||
|
<el-option label="女" value="女"></el-option>
|
||||||
|
</el-select>
|
||||||
|
</el-form-item>
|
||||||
|
<el-form-item label="生日">
|
||||||
|
<el-date-picker
|
||||||
|
v-model="form.birthday"
|
||||||
|
type="date"
|
||||||
|
placeholder="Pick a day"
|
||||||
|
style="width: 100%"
|
||||||
|
/>
|
||||||
|
</el-form-item>
|
||||||
|
<el-form-item label="地区">
|
||||||
|
<el-input v-model="form.region" placeholder="请输入地区"></el-input>
|
||||||
|
</el-form-item>
|
||||||
|
<el-form-item label="电话号码">
|
||||||
|
<el-input v-model="form.phoneNumber" type="tel" placeholder="请输入电话号码"></el-input>
|
||||||
|
</el-form-item>
|
||||||
|
|
||||||
|
<el-form-item>
|
||||||
|
<el-button type="primary" class="save-btn" @click="saveForm">保存</el-button>
|
||||||
|
</el-form-item>
|
||||||
|
</el-form>
|
||||||
|
</el-col>
|
||||||
|
</el-row>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
export default {
|
||||||
|
data() {
|
||||||
|
return {
|
||||||
|
userImgSrc: '/user.png', // 默认头像
|
||||||
|
form: {
|
||||||
|
nickname: '',
|
||||||
|
sex: '',
|
||||||
|
birthday: null,
|
||||||
|
region: '',
|
||||||
|
profileImage: null,
|
||||||
|
phoneNumber: '' // 新增电话号码字段
|
||||||
|
},
|
||||||
|
};
|
||||||
|
},
|
||||||
|
computed: {
|
||||||
|
phoneNumber() {
|
||||||
|
return this.form.phoneNumber;
|
||||||
|
}
|
||||||
|
},
|
||||||
|
created() {
|
||||||
|
this.fetchUserInfo();
|
||||||
|
},
|
||||||
|
methods: {
|
||||||
|
// 从 localStorage 中读取表单数据
|
||||||
|
fetchUserInfo() {
|
||||||
|
const storedForm = localStorage.getItem('userInfo');
|
||||||
|
if (storedForm) {
|
||||||
|
const parsedForm = JSON.parse(storedForm);
|
||||||
|
this.form = parsedForm;
|
||||||
|
this.userImgSrc = parsedForm.profileImage || '/user.png';
|
||||||
|
}
|
||||||
|
},
|
||||||
|
|
||||||
|
// 处理文件上传
|
||||||
|
handleFileUpload(event) {
|
||||||
|
const file = event.target.files[0];
|
||||||
|
if (file) {
|
||||||
|
const reader = new FileReader();
|
||||||
|
reader.onload = (e) => {
|
||||||
|
this.userImgSrc = e.target.result;
|
||||||
|
this.form.profileImage = e.target.result;
|
||||||
|
};
|
||||||
|
reader.readAsDataURL(file);
|
||||||
|
}
|
||||||
|
},
|
||||||
|
|
||||||
|
// 手动触发文件上传
|
||||||
|
triggerFileUpload() {
|
||||||
|
const fileInput = document.querySelector('input[type="file"]');
|
||||||
|
fileInput?.click();
|
||||||
|
},
|
||||||
|
|
||||||
|
// 保存表单数据
|
||||||
|
saveForm() {
|
||||||
|
localStorage.setItem('userInfo', JSON.stringify(this.form));
|
||||||
|
this.$message({
|
||||||
|
message: '保存成功',
|
||||||
|
type: 'success'
|
||||||
|
});
|
||||||
|
},
|
||||||
|
|
||||||
|
// 处理头像加载失败
|
||||||
|
handleImageError() {
|
||||||
|
this.userImgSrc = '/user.png'; // 使用默认头像
|
||||||
|
},
|
||||||
|
},
|
||||||
|
};
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style scoped>
|
||||||
|
.container {
|
||||||
|
display: flex;
|
||||||
|
justify-content: center;
|
||||||
|
align-items: flex-start;
|
||||||
|
padding: 30px;
|
||||||
|
background-color: #f4f7f6;
|
||||||
|
min-height: 100vh;
|
||||||
|
}
|
||||||
|
|
||||||
|
.top {
|
||||||
|
margin-bottom: 30px;
|
||||||
|
text-align: center;
|
||||||
|
font-size: 24px;
|
||||||
|
font-weight: 600;
|
||||||
|
}
|
||||||
|
|
||||||
|
.col {
|
||||||
|
font-size: 30px;
|
||||||
|
text-align: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
.body {
|
||||||
|
width: 100%;
|
||||||
|
display: flex;
|
||||||
|
justify-content: space-between;
|
||||||
|
align-items: flex-start;
|
||||||
|
gap: 30px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.avatar-col {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
justify-content: center;
|
||||||
|
align-items: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
.user-img {
|
||||||
|
width: 120px;
|
||||||
|
height: 120px;
|
||||||
|
border-radius: 50%;
|
||||||
|
margin-bottom: 10px;
|
||||||
|
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
|
||||||
|
}
|
||||||
|
|
||||||
|
.upload-btn {
|
||||||
|
font-size: 12px;
|
||||||
|
color: #409eff;
|
||||||
|
margin-top: 10px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.form-col {
|
||||||
|
flex: 1;
|
||||||
|
background-color: white;
|
||||||
|
padding: 20px;
|
||||||
|
border-radius: 10px;
|
||||||
|
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
|
||||||
|
}
|
||||||
|
|
||||||
|
.phone {
|
||||||
|
margin-top: 10px;
|
||||||
|
font-size: 14px;
|
||||||
|
color: #666;
|
||||||
|
}
|
||||||
|
|
||||||
|
.user-form .el-form-item {
|
||||||
|
margin-bottom: 15px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.user-form .el-input, .user-form .el-select, .user-form .el-date-picker {
|
||||||
|
border-radius: 8px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.save-btn {
|
||||||
|
width: 100%;
|
||||||
|
padding: 10px 0;
|
||||||
|
font-size: 16px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.el-button--primary {
|
||||||
|
background-color: #409eff;
|
||||||
|
border-color: #409eff;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
Loading…
Reference in new issue