uniapp-app/README_INVOICE.md

精品课开具发票页面

功能说明

这是一个精品课开具发票的页面，完全按照设计图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. 可以增加开票记录查询功能