# 精品课开具发票页面

## 功能说明

这是一个精品课开具发票的页面，完全按照设计图100%还原实现。

## 页面特性

### 1. 状态栏
- 显示时间 "9:41"
- 显示信号、WiFi、电池等状态图标

### 2. 导航栏
- 左侧：红色返回按钮
- 中间：红色标题 "开具发票"
- 右侧：红色圆形信息按钮

### 3. 标签页
- "待开发票" - 当前激活状态
- "开票历史" - 可切换查看
- 标签页之间有灰色分隔线

### 4. 课程列表
- 显示5个课程项目
- 每个项目包含：
  - 圆形复选框（可选中/取消）
  - 课程缩略图（使用医生头像占位图）
  - 课程描述文字
  - 实际支付价格（红色显示）
- 默认第3个课程被选中

### 5. 底部操作栏
- 左侧：全选复选框和"全选"文字
- 中间：显示开票金额和已选课程数量
- 右侧：红色"开具发票"按钮

## 使用方法

### 1. 访问页面
在首页功能网格中点击"开具发票"按钮，即可跳转到发票页面。

### 2. 选择课程
- 点击单个课程的复选框来选中/取消选中
- 点击底部的"全选"复选框来全选/取消全选所有课程

### 3. 开具发票
- 选择要开票的课程后，底部会显示总金额
- 点击"开具发票"按钮进行开票操作

## 技术实现

### 文件结构
```
pages_course/
  └── invoice/
      └── invoice.vue    # 发票页面主文件
```

### 主要功能
- 响应式布局，适配不同屏幕尺寸
- 复选框状态管理
- 动态计算选中课程数量和总金额
- 页面路由配置已添加到 pages.json

### 样式特点
- 使用红色作为主色调（#ff0000）
- 橙色作为选中状态颜色（#ff6b35）
- 现代化的UI设计，包含圆角、阴影等效果
- 响应式设计，支持不同设备

## 注意事项

1. 页面使用了自定义导航栏样式
2. 课程图片使用了占位图 `/static/placeholder_doctor.png`
3. 页面已配置为无导航栏模式（navigationStyle: "custom"）
4. 支持返回上一页功能

## 后续优化建议

1. 可以添加真实的课程数据接口
2. 可以增加发票类型选择功能
3. 可以添加发票信息填写表单
4. 可以增加开票记录查询功能