一、约定

标题	内容
路由地址	http://ip:port/personalInfo
路由页面	src\views\PersonalInfo\index.vue
操作权限	无限制
API调用约定	当前组件进行API调用集中管理、内置组件仅做展现层控制。

二、属性（Attributes）

组件props传入参数

无

内部data参数

序号	参数名	类型	说明	默认值	可选值
1	tabsList	array	菜单选项数据	账号信息、更换手机号、更改密码	--
2	activeIndex	number	当前激活的菜单索引	0	0,1,2
3	formData	object	用户信息数据	{}	--
4	saveBtnShow	Boolean	保存按钮显示状态	false	true,false
5	userId	string	用户ID	从localStorage获取	--

三、组件管理

（一）组件事件

组件自身提供的功能

核心功能点，执行的事件关系：

菜单切换功能

用户信息加载与管理

子组件状态管理与交互

（二）子组件

使用子组件提供个人信息管理功能

对子组件的传参赋值

子组件上报事件的接收处理

1. Header组件（公共头部）

实现头部样式展示

父→子组件传参

无传参

子→父事件上报

上报通知	用途	执行内部事件
无	--	--

2. AccountInfo组件

实现账号信息展示与编辑功能

父→子组件传参

formData：用户信息数据

v-model:saveBtnShow：保存按钮显示状态

子→父事件上报

上报通知	用途	执行内部事件
saveSuccess	保存成功通知	initUserInfo()

3. ChangePhone组件

实现更换手机号功能

父→子组件传参

formData：用户信息数据

v-model:saveBtnShow：保存按钮显示状态

子→父事件上报

上报通知	用途	执行内部事件
saveSuccess	保存成功通知	initUserInfo()

4. ChangePassword组件

实现更改密码功能

父→子组件传参

formData：用户信息数据

v-model:saveBtnShow：保存按钮显示状态

子→父事件上报

上报通知	用途	执行内部事件
saveSuccess	保存成功通知	initUserInfo()

四、事件方法

核心事件，含数据处理、API调用、事件管理管理等

1. initUserInfo() 初始化用户信息

调用userInfoLoadOne接口获取用户信息

将获取的数据赋值给formData

2. handleClick() 菜单切换

接收菜单索引参数

更新activeIndex值

隐藏保存按钮

3. handleBack() 返回上一页

调用router.go(-1)返回上一页

4. handleCancel() 取消编辑

重新加载用户信息

根据当前激活的菜单索引调用对应子组件的cancel方法

5. handleSave() 保存编辑

根据当前激活的菜单索引调用对应子组件的save方法

个人中心页

一、约定#

二、属性（Attributes）#

三、组件管理#

（一）组件事件#

（二）子组件#

1. Header组件（公共头部）#

2. AccountInfo组件#

3. ChangePhone组件#

4. ChangePassword组件#

四、事件方法#

1. initUserInfo() 初始化用户信息#

2. handleClick() 菜单切换#

3. handleBack() 返回上一页#

4. handleCancel() 取消编辑#

5. handleSave() 保存编辑#

一、约定

二、属性（Attributes）

三、组件管理

（一）组件事件

（二）子组件

1. Header组件（公共头部）

2. AccountInfo组件

3. ChangePhone组件

4. ChangePassword组件

四、事件方法

1. initUserInfo() 初始化用户信息

2. handleClick() 菜单切换

3. handleBack() 返回上一页

4. handleCancel() 取消编辑

5. handleSave() 保存编辑