130 lines
3.7 KiB
Vue
130 lines
3.7 KiB
Vue
<script setup>
|
|
import {ref} from 'vue';
|
|
import {ElButton, ElForm, ElFormItem, ElInput, ElMessage, ElRadio, ElRadioGroup, ElTabPane, ElTabs} from 'element-plus';
|
|
import 'element-plus/dist/index.css';
|
|
|
|
const nickname = ref('');
|
|
const phoneNumber = ref('');
|
|
const email = ref('');
|
|
const gender = ref('');
|
|
const oldPassword = ref('');
|
|
const newPassword = ref('');
|
|
const confirmPassword = ref('');
|
|
|
|
const handleSaveProfile = () => {
|
|
console.log('Saving profile with', {
|
|
nickname: nickname.value,
|
|
phoneNumber: phoneNumber.value,
|
|
email: email.value,
|
|
gender: gender.value
|
|
});
|
|
// 处理保存资料逻辑
|
|
ElMessage.success('资料保存成功');
|
|
};
|
|
|
|
const handleChangePassword = () => {
|
|
if (newPassword.value !== confirmPassword.value) {
|
|
ElMessage.error('新密码和确认密码不一致');
|
|
return;
|
|
}
|
|
console.log('Changing password with', {oldPassword: oldPassword.value, newPassword: newPassword.value});
|
|
// 处理修改密码逻辑
|
|
ElMessage.success('密码修改成功');
|
|
};
|
|
</script>
|
|
|
|
<template>
|
|
<div class="profile-container">
|
|
<div class="profile-box">
|
|
<h2>基本资料</h2>
|
|
<ElTabs>
|
|
<ElTabPane label="基本资料">
|
|
<ElForm @submit.prevent="handleSaveProfile" label-width="100px">
|
|
<ElFormItem label="用户昵称">
|
|
<ElInput v-model="nickname" type="text" placeholder="请输入用户昵称" required/>
|
|
</ElFormItem>
|
|
<ElFormItem label="手机号码">
|
|
<ElInput v-model="phoneNumber" type="text" placeholder="请输入手机号码" required/>
|
|
</ElFormItem>
|
|
<ElFormItem label="邮箱">
|
|
<ElInput v-model="email" type="email" placeholder="请输入邮箱" required/>
|
|
</ElFormItem>
|
|
<ElFormItem label="性别">
|
|
<ElRadioGroup v-model="gender">
|
|
<ElRadio label="男">男</ElRadio>
|
|
<ElRadio label="女">女</ElRadio>
|
|
</ElRadioGroup>
|
|
</ElFormItem>
|
|
<ElFormItem>
|
|
<ElButton type="primary" @click="handleSaveProfile">保存</ElButton>
|
|
<ElButton type="danger">取消</ElButton>
|
|
</ElFormItem>
|
|
</ElForm>
|
|
</ElTabPane>
|
|
<ElTabPane label="修改密码">
|
|
<ElForm @submit.prevent="handleChangePassword" label-width="100px">
|
|
<ElFormItem label="旧密码">
|
|
<ElInput v-model="oldPassword" type="password" placeholder="请输入旧密码" required/>
|
|
</ElFormItem>
|
|
<ElFormItem label="新密码">
|
|
<ElInput v-model="newPassword" type="password" placeholder="请输入新密码" required/>
|
|
</ElFormItem>
|
|
<ElFormItem label="确认密码">
|
|
<ElInput v-model="confirmPassword" type="password" placeholder="请输入确认密码" required/>
|
|
</ElFormItem>
|
|
<ElFormItem>
|
|
<ElButton type="primary" @click="handleChangePassword">修改密码</ElButton>
|
|
</ElFormItem>
|
|
</ElForm>
|
|
</ElTabPane>
|
|
</ElTabs>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<style scoped>
|
|
.profile-container {
|
|
display: flex;
|
|
justify-content: center;
|
|
align-items: center;
|
|
height: 100vh;
|
|
background: white;
|
|
}
|
|
|
|
.profile-box {
|
|
background: white;
|
|
padding: 2rem;
|
|
border-radius: 8px;
|
|
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
|
|
width: 90%;
|
|
max-width: 600px;
|
|
}
|
|
|
|
h2 {
|
|
margin-bottom: 1rem;
|
|
}
|
|
|
|
.el-form-item {
|
|
margin-bottom: 1rem;
|
|
text-align: left;
|
|
}
|
|
|
|
.el-form-item label {
|
|
display: block;
|
|
margin-bottom: 0.5rem;
|
|
}
|
|
|
|
.el-input {
|
|
width: 100%;
|
|
}
|
|
|
|
.el-button--primary {
|
|
background-color: #007bff;
|
|
color: white;
|
|
}
|
|
|
|
.el-button--primary:hover {
|
|
background-color: #0056b3;
|
|
}
|
|
</style>
|