# 填写发票信息页面

## 功能说明

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