96 lines
2.5 KiB
Markdown
96 lines
2.5 KiB
Markdown
# 填写发票信息页面
|
||
|
||
## 功能说明
|
||
|
||
这是一个填写发票信息的页面，完全按照设计图100%还原实现。用户在选择课程后，通过此页面填写详细的发票信息。
|
||
|
||
## 页面特性
|
||
|
||
### 1. 状态栏
|
||
- 显示时间 "9:41"
|
||
- 显示信号、WiFi、电池等状态图标
|
||
|
||
### 2. 导航栏
|
||
- 左侧：红色返回按钮
|
||
- 中间：红色标题 "填写发票信息"
|
||
- 右侧：红色圆形信息按钮
|
||
|
||
### 3. 表单内容
|
||
- **发票抬头**: 输入框，必填项
|
||
- **单位税号**: 输入框，必填项
|
||
- **发票内容**: 显示固定值 "培训费"
|
||
- **发票金额**: 显示固定值 "¥59.00"（红色显示）
|
||
- **电子邮箱**: 输入框，必填项
|
||
|
||
### 4. 提交按钮
|
||
- 底部固定位置的青色按钮
|
||
- 白色文字 "提交"
|
||
|
||
## 使用方法
|
||
|
||
### 1. 访问页面
|
||
在发票页面选择课程后，点击"开具发票"按钮即可跳转到此页面。
|
||
|
||
### 2. 填写信息
|
||
- 发票抬头：输入公司或个人名称
|
||
- 单位税号：输入税务登记号
|
||
- 电子邮箱：输入接收发票的邮箱地址
|
||
|
||
### 3. 提交表单
|
||
- 点击"提交"按钮
|
||
- 系统会验证必填字段和邮箱格式
|
||
- 提交成功后自动返回上一页
|
||
|
||
## 技术实现
|
||
|
||
### 文件结构
|
||
```
|
||
pages_course/
|
||
└── invoice_info/
|
||
└── invoice_info.vue # 发票信息填写页面
|
||
```
|
||
|
||
### 主要功能
|
||
- 表单验证（必填字段、邮箱格式）
|
||
- 响应式布局设计
|
||
- 自定义导航栏
|
||
- 表单数据双向绑定
|
||
|
||
### 样式特点
|
||
- 使用红色作为主色调（#ff0000）
|
||
- 青色作为提交按钮颜色（#20b2aa）
|
||
- 白色卡片式表单设计
|
||
- 浅灰色分隔线
|
||
- 现代化UI设计，包含圆角、阴影等效果
|
||
|
||
## 表单验证规则
|
||
|
||
1. **发票抬头**: 必填，不能为空
|
||
2. **单位税号**: 必填，不能为空
|
||
3. **电子邮箱**: 必填，必须符合邮箱格式
|
||
|
||
## 页面流程
|
||
|
||
1. 用户在发票页面选择课程
|
||
2. 点击"开具发票"按钮
|
||
3. 跳转到填写发票信息页面
|
||
4. 填写必要信息
|
||
5. 点击提交
|
||
6. 验证通过后返回上一页
|
||
|
||
## 注意事项
|
||
|
||
1. 页面使用了自定义导航栏样式
|
||
2. 发票内容和金额为固定值，不可编辑
|
||
3. 页面已配置为无导航栏模式（navigationStyle: "custom"）
|
||
4. 支持返回上一页功能
|
||
5. 表单验证失败会显示相应的提示信息
|
||
|
||
## 后续优化建议
|
||
|
||
1. 可以添加发票类型选择功能
|
||
2. 可以增加发票抬头历史记录
|
||
3. 可以添加发票预览功能
|
||
4. 可以增加发票模板选择
|
||
5. 可以添加发票状态查询功能
|