186 lines
4.7 KiB
Markdown
186 lines
4.7 KiB
Markdown
# 开票历史功能
|
||
|
||
## 功能说明
|
||
|
||
在发票页面添加了"开票历史"标签页，用户可以查看历史开票记录，包括开票状态、课程数量、开票金额等信息。
|
||
|
||
## 功能特性
|
||
|
||
### 1. 标签页切换
|
||
- **待开发票**: 显示可选择的课程列表，支持批量选择和开票
|
||
- **开票历史**: 显示历史开票记录，包含详细的开票信息
|
||
|
||
### 2. 开票历史记录
|
||
- **日期显示**: 显示开票日期（如：2021年6月11日）
|
||
- **课程数量**: 显示该次开票包含的课程数量（如：共计3个课程）
|
||
- **开票状态**: 显示开票的当前状态
|
||
- **开票金额**: 显示开票的金额信息
|
||
|
||
### 3. 开票状态类型
|
||
- **已开票**: 绿色显示，表示开票成功
|
||
- **开票失败**: 红色显示，表示开票失败
|
||
- **开票中**: 蓝色显示，表示正在处理中
|
||
|
||
## 页面结构
|
||
|
||
### 1. 标签页导航
|
||
```vue
|
||
<view class="tabs">
|
||
<view class="tab-item" :class="{ active: activeTab === 'pending' }">
|
||
<text>待开发票</text>
|
||
</view>
|
||
<view class="tab-divider"></view>
|
||
<view class="tab-item" :class="{ active: activeTab === 'history' }">
|
||
<text>开票历史</text>
|
||
</view>
|
||
</view>
|
||
```
|
||
|
||
### 2. 内容区域
|
||
- **待开发票**: 显示课程列表和底部操作栏
|
||
- **开票历史**: 显示历史记录列表
|
||
|
||
### 3. 历史记录项
|
||
```vue
|
||
<view class="history-item" v-for="item in historyList">
|
||
<view class="history-left">
|
||
<text class="history-date">{{ item.date }}</text>
|
||
<text class="history-count">{{ item.courseCount }}</text>
|
||
</view>
|
||
<view class="history-right">
|
||
<text class="history-status">{{ item.statusText }}</text>
|
||
<view class="history-arrow">›</view>
|
||
<text class="history-amount">{{ item.amount }}</text>
|
||
</view>
|
||
</view>
|
||
```
|
||
|
||
## 数据结构
|
||
|
||
### 1. 历史记录数据
|
||
```javascript
|
||
historyList: [
|
||
{
|
||
id: 1,
|
||
date: '2021年6月11日',
|
||
courseCount: '共计3个课程',
|
||
status: 'success',
|
||
statusText: '已开票',
|
||
amount: '¥0.00'
|
||
},
|
||
{
|
||
id: 2,
|
||
date: '2021年6月11日',
|
||
courseCount: '共计3个课程',
|
||
status: 'failed',
|
||
statusText: '开票失败',
|
||
amount: '¥0.00'
|
||
},
|
||
{
|
||
id: 3,
|
||
date: '2021年6月11日',
|
||
courseCount: '共计3个课程',
|
||
status: 'processing',
|
||
statusText: '开票中',
|
||
amount: '¥0.00'
|
||
}
|
||
]
|
||
```
|
||
|
||
### 2. 状态枚举
|
||
- `success`: 已开票（绿色）
|
||
- `failed`: 开票失败（红色）
|
||
- `processing`: 开票中（蓝色）
|
||
|
||
## 交互功能
|
||
|
||
### 1. 标签页切换
|
||
- 点击"待开发票"标签显示课程选择界面
|
||
- 点击"开票历史"标签显示历史记录界面
|
||
- 标签页之间有视觉分隔线
|
||
|
||
### 2. 历史记录查看
|
||
- 点击任意历史记录项可查看详情
|
||
- 显示相应的状态提示信息
|
||
- 支持后续扩展详情页面
|
||
|
||
### 3. 状态颜色区分
|
||
- 不同状态使用不同颜色显示
|
||
- 提供清晰的视觉反馈
|
||
- 符合用户认知习惯
|
||
|
||
## 样式设计
|
||
|
||
### 1. 历史记录项样式
|
||
- 浅灰色背景（#f8f8f8）
|
||
- 圆角设计（8rpx）
|
||
- 卡片式布局，带有间距
|
||
- 底部边框分隔线
|
||
|
||
### 2. 状态颜色
|
||
- 成功状态：绿色（#52c41a）
|
||
- 失败状态：红色（#ff4d4f）
|
||
- 处理中状态：蓝色（#1890ff）
|
||
- 默认状态：灰色（#666666）
|
||
|
||
### 3. 布局特点
|
||
- 左右分布，信息清晰
|
||
- 响应式设计，适配不同屏幕
|
||
- 触摸友好的交互区域
|
||
|
||
## 使用方法
|
||
|
||
### 1. 查看开票历史
|
||
- 在发票页面点击"开票历史"标签
|
||
- 浏览历史开票记录
|
||
- 查看开票状态和详细信息
|
||
|
||
### 2. 切换标签页
|
||
- 点击"待开发票"返回课程选择界面
|
||
- 点击"开票历史"查看历史记录
|
||
- 标签页状态实时更新
|
||
|
||
### 3. 查看记录详情
|
||
- 点击任意历史记录项
|
||
- 系统显示相应的状态信息
|
||
- 支持后续功能扩展
|
||
|
||
## 技术实现
|
||
|
||
### 1. 条件渲染
|
||
```vue
|
||
<view v-if="activeTab === 'pending'" class="pending-content">
|
||
<!-- 待开发票内容 -->
|
||
</view>
|
||
<view v-if="activeTab === 'history'" class="history-content">
|
||
<!-- 开票历史内容 -->
|
||
</view>
|
||
```
|
||
|
||
### 2. 数据绑定
|
||
- 使用Vue的响应式数据绑定
|
||
- 支持动态数据更新
|
||
- 状态切换实时响应
|
||
|
||
### 3. 事件处理
|
||
```javascript
|
||
viewHistoryDetail(item) {
|
||
console.log('查看开票历史详情:', item)
|
||
uni.showToast({
|
||
title: `查看${item.statusText}详情`,
|
||
icon: 'none'
|
||
})
|
||
}
|
||
```
|
||
|
||
## 后续优化建议
|
||
|
||
1. **详情页面**: 可以添加开票历史详情页面
|
||
2. **状态筛选**: 可以添加按状态筛选历史记录
|
||
3. **时间筛选**: 可以添加按时间范围筛选
|
||
4. **搜索功能**: 可以添加搜索特定开票记录
|
||
5. **导出功能**: 可以添加导出开票历史记录
|
||
6. **分页加载**: 可以添加分页加载更多历史记录
|
||
7. **实时更新**: 可以添加开票状态的实时更新
|
||
8. **通知功能**: 可以添加开票完成的通知提醒
|