From dc4bd8afb61562c494a3a1ed534c83edd8fb41e6 Mon Sep 17 00:00:00 2001
From: heshunme <heshunme@outlook.com>
Date: Sun, 30 Jun 2024 00:26:17 +0800
Subject: [PATCH] =?UTF-8?q?=E5=AE=8C=E6=88=90=E4=BA=86=E7=94=A8=E6=88=B7?=
 =?UTF-8?q?=E4=BF=A1=E6=81=AF=E7=AE=A1=E7=90=86=E9=A1=B5=E9=9D=A2=E7=9A=84?=
 =?UTF-8?q?=E7=BB=98=E5=88=B6=20=E6=B3=A8=E5=86=8C=E4=BA=86=E8=AF=A5?=
 =?UTF-8?q?=E9=A1=B5=E9=9D=A2=E7=9A=84=E8=B7=AF=E7=94=B1?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/router/authentication.js               |   2 +
 src/views/authentication/ManageProfile.vue | 129 +++++++++++++++++++++
 2 files changed, 131 insertions(+)
 create mode 100644 src/views/authentication/ManageProfile.vue

diff --git a/src/router/authentication.js b/src/router/authentication.js
index 50c3785..74430e9 100644
--- a/src/router/authentication.js
+++ b/src/router/authentication.js
@@ -1,10 +1,12 @@
 // ！！！这是一个示例，请根据实际情况修改！！！
 import Login from '../views/authentication/Login.vue'
 import Register from '../views/authentication/Register.vue'
+import ManageProfile from '../views/authentication/ManageProfile.vue'
 // import Profile from '../views/authentication/Profile.vue'
 
 export default [
     { path: '/login', component: Login },
     { path: '/register', component: Register },
+    { path: '/manageProfile', component: ManageProfile },
     // { path: '/profile', component: Profile }
 ]
diff --git a/src/views/authentication/ManageProfile.vue b/src/views/authentication/ManageProfile.vue
new file mode 100644
index 0000000..3a1fc70
--- /dev/null
+++ b/src/views/authentication/ManageProfile.vue
@@ -0,0 +1,129 @@
+<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>