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