一、约定

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

二、属性（Attributes）

组件props传入参数

序号	参数名	类型	必填	说明	示例
1	formData	Object	是	用户信息数据	{id: 1, phone: "13800138000"}
2	saveBtnShow	Boolean	是	保存按钮显示状态	false

内部data参数

序号	参数名	类型	说明	默认值	可选值
1	editStatus	number	编辑状态	0	0,1
2	userPhoneForm	object	手机号表单数据	{phone:'', code:''}	--
3	formRules	object	表单验证规则	根据编辑状态动态设置	--
4	countdown	number	验证码倒计时	0	0-60
5	disabled	Boolean	获取验证码按钮禁用状态	true	true,false
6	formRef	ref	表单引用	--	--

三、组件管理

（一）组件事件

组件自身提供的功能

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

手机号展示

手机号修改表单

验证码获取与验证

保存与取消编辑

（二）子组件

使用子组件提供功能

手机号信息展示

表单信息展示

1. el-form组件

提供表单功能

父→子组件传参

model: 表单数据对象

rules: 表单验证规则

label-position: 标签位置

validate-on-rule-change: 是否在规则改变时验证

子→父事件上报

上报通知	用途	执行内部事件
validate	表单验证	验证表单数据

2. el-button组件

提供按钮功能

父→子组件传参

color: 按钮颜色

disabled: 是否禁用

子→父事件上报

上报通知	用途	执行内部事件
click	点击事件	handleChangePhoneBtn/handleGetCode

四、事件方法

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

1. handleChangePhoneBtn() 开始修改手机号

设置编辑状态为1

通知父组件显示保存按钮

2. cancel() 取消编辑

重置编辑状态为0

通知父组件隐藏保存按钮

3. save() 保存编辑

验证表单数据

构建请求参数

调用updatePhone接口更新手机号

更新编辑状态

通知父组件隐藏保存按钮

通知父组件保存成功

4. handleGetCode() 获取验证码

验证手机号格式

构建请求参数

调用sendVerificationCodeForChangePhone接口发送验证码

开始倒计时

5. startCountdown() 开始倒计时

设置倒计时初始值为60秒

创建定时器每秒减1

倒计时结束时启用获取验证码按钮

6. checkPhone() 验证手机号格式

使用正则表达式验证手机号格式

五、监听方法（watch）

1. userPhoneForm 监听

监听手机号长度变化

当手机号长度达到11位时启用获取验证码按钮

2. editStatus 监听

监听编辑状态变化

根据编辑状态动态设置表单验证规则

六、表单验证规则

1. 手机号验证规则

必填项，触发方式为blur

格式验证：符合中国大陆手机号格式（1开头的11位数字）

2. 验证码验证规则

必填项，触发方式为change

ChangePhone组件

一、约定#

二、属性（Attributes）#

三、组件管理#

（一）组件事件#

（二）子组件#

1. el-form组件#

2. el-button组件#

四、事件方法#

1. handleChangePhoneBtn() 开始修改手机号#

2. cancel() 取消编辑#

3. save() 保存编辑#

4. handleGetCode() 获取验证码#

5. startCountdown() 开始倒计时#

6. checkPhone() 验证手机号格式#

五、监听方法（watch）#

1. userPhoneForm 监听#

2. editStatus 监听#

六、表单验证规则#

1. 手机号验证规则#

2. 验证码验证规则#

一、约定

二、属性（Attributes）

三、组件管理

（一）组件事件

（二）子组件

1. el-form组件

2. el-button组件

四、事件方法

1. handleChangePhoneBtn() 开始修改手机号

2. cancel() 取消编辑

3. save() 保存编辑

4. handleGetCode() 获取验证码

5. startCountdown() 开始倒计时

6. checkPhone() 验证手机号格式

五、监听方法（watch）

1. userPhoneForm 监听

2. editStatus 监听

六、表单验证规则

1. 手机号验证规则

2. 验证码验证规则