uniapp-app/README_INVOICE_INFO.md

填写发票信息页面

功能说明

这是一个填写发票信息的页面，完全按照设计图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. 可以添加发票状态查询功能