# 开票历史功能

## 功能说明

在发票页面添加了"开票历史"标签页，用户可以查看历史开票记录，包括开票状态、课程数量、开票金额等信息。

## 功能特性

### 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. **通知功能**: 可以添加开票完成的通知提醒