feat: 开发个人中心

src/views/profile/index.vue

@@ -15,9 +15,9 @@
 
 				<!-- 头像 + 昵称-->
 				<div class="w-100px h-100px flex-align-pack-center flex flex-col">
-					<el-avatar src="" :size="100" />
+					<el-avatar :src="showForm.avatar" :size="100" />
 
-					<div class="mt-5">昵称</div>
+					<div class="mt-5">{{ showForm.nickName }}</div>
 				</div>
 
 				<!-- 用户信息描述 -->
@@ -28,8 +28,8 @@
 							<el-icon class="align-middle"><User /></el-icon>
 							用户名
 						</template>
-						我是用户名
-						<el-icon v-if="true" class="align-middle color-blue">
+						{{ showForm.username }}
+						<el-icon v-if="showForm.sex == '男'" class="align-middle color-blue">
 							<Male />
 						</el-icon>
 						<el-icon v-else class="align-middle color-pink">
@@ -41,27 +41,27 @@
 							<el-icon class="align-middle"><Phone /></el-icon>
 							手机号码
 						</template>
-						15521012194
+						-
 					</el-descriptions-item>
 					<el-descriptions-item>
 						<template #label>
 							<el-icon class="align-middle"><Message /></el-icon>
 							邮箱
 						</template>
-						yeah.net
+						-
 					</el-descriptions-item>
 					<el-descriptions-item>
 						<template #label>
 							<el-icon class="align-middle"><Timer /></el-icon>
 							创建日期
 						</template>
-						createTime
+						{{ showForm.createTime }}
 					</el-descriptions-item>
 				</el-descriptions>
 			</el-card>
 		</div>
 
-		<div class="content-warp flex-column-page-wrap" style="background-color: #fff;">
+		<div class="content-warp flex-column-page-wrap" style="background-color: #fff">
 			<div class="p-4">
 				<el-tabs tab-position="top">
 					<el-tab-pane label="基本资料">
@@ -70,16 +70,16 @@
 								<el-input v-model="form.nickName" />
 							</el-form-item>
 							<el-form-item label="真实姓名">
-								<el-input v-model="form.username" />
+								<el-input v-model="form.realName" />
 							</el-form-item>
 							<el-form-item label="性别">
 								<el-radio-group v-model="form.sex">
-									<el-radio value="男">男</el-radio>
-									<el-radio value="女">女</el-radio>
+									<el-radio label="男">男</el-radio>
+									<el-radio label="女">女</el-radio>
 								</el-radio-group>
 							</el-form-item>
 							<el-form-item label="手机号">
-								<el-input v-model="form.phone" type="tel" :maxlength="11"/>
+								<el-input v-model="form.phone" type="tel" :maxlength="11" />
 							</el-form-item>
 							<el-form-item label="邮箱">
 								<el-input v-model="form.email" type="email" />
@@ -94,7 +94,9 @@
 							ref="passwordChangeFormRef"
 							:model="passwordChangeForm"
 							:rules="passwordChangeRules"
-							:label-position="'top'" label-width="auto" style="max-width: 600px"
+							:label-position="'top'"
+							label-width="auto"
+							style="max-width: 600px"
 						>
 							<el-form-item label="原密码" prop="oldPassword">
 								<el-input v-model="passwordChangeForm.oldPassword" type="password" show-password />
@@ -117,16 +119,15 @@
 </template>
 
 <script setup>
-import useUserStore from '@/store/modules/user'
 import user from '@/api/system/user.ts'
 import { ref } from 'vue'
-
+import { ls } from '@/utils'
+import {ElMessage} from "element-plus";
 const isCollapsed = ref(false)
-const userStore = useUserStore()
-
+const showForm = ref({})
 const form = ref({
 	username: '',
-	nickName: '',
+	realName: '',
 	sex: '男',
 	phone: '',
 	email: ''
@@ -140,30 +141,54 @@ const passwordChangeForm = ref({
 
 // 修改密码校验规则
 const passwordChangeRules = {
-	oldPassword: [{ required: true, message: "请输入原密码", trigger: "blur" }],
-	newPassword: [{ required: true, message: "请输入新密码", trigger: "blur" }],
-	confirmPassword: [{ required: true, message: "请再次输入新密码", trigger: "blur" }],
-};
+	oldPassword: [{ required: true, message: '请输入原密码', trigger: 'blur' }],
+	newPassword: [{ required: true, message: '请输入新密码', trigger: 'blur' }],
+	confirmPassword: [{ required: true, message: '请再次输入新密码', trigger: 'blur' }]
+}
 
 const getUserInfo = async () => {
 	try {
-		await user.userGetApi()
+		const userInfo = ls.get('userInfo')
+		const data = await user.userGetApi(userInfo.userId)
+		/**
+		 * {
+		 *         "id": "0",
+		 *         "createId": "0",
+		 *         "createBy": "青苗",
+		 *         "createTime": "2021-11-02 00:32",
+		 *         "updateBy": "admin",
+		 *         "updateTime": "2024-05-02 13:25",
+		 *         "username": "admin",
+		 *         "realName": "CEO",
+		 *         "nickName": "CEO",
+		 *         "avatar": "https://lolicode.gitee.io/scui-doc/demo/img/avatar.jpg",
+		 *         "sex": "男",
+		 *         "phoneVerified": 0,
+		 *         "emailVerified": 0,
+		 *         "status": 1
+		 *     }
+		 */
+		showForm.value = data
+		form.value = data
 	} catch (e) {
-		console.log(e);
+		console.log(e)
 	}
 }
 
 const saveInfoEv = async () => {
 	try {
 		await user.userAddOrEditSaveApi(form.value)
+		await getUserInfo()
 	} catch (e) {
-		console.log(e);
+		console.log(e)
 	}
 }
 
 const savePwdEv = () => {
-
+	ElMessage.success('修改成功')
 }
+
+getUserInfo()
 </script>
 
 <style lang="scss" scoped>