373 lines
11 KiB
Markdown
373 lines
11 KiB
Markdown
# 套餐列表页面 - 使用说明
|
|
|
|
> **小米米家风格** - 简约、纯粹的套餐管理页面
|
|
|
|
---
|
|
|
|
## 🚀 快速启动
|
|
|
|
```bash
|
|
pnpm dev:h5
|
|
# 访问 http://localhost:5173/
|
|
```
|
|
|
|
**页面入口**: `src/pages/agent-system/index.vue`
|
|
|
|
---
|
|
|
|
## ✨ 页面结构
|
|
|
|
### 简化设计
|
|
|
|
- ✅ **无顶部导航** - 去除Logo、搜索框、角色切换
|
|
- ✅ **直接显示列表** - 首页即套餐列表
|
|
- ✅ **两层结构** - 列表页 + 详情页
|
|
|
|
```
|
|
首页 (套餐列表)
|
|
├─ 统计卡片 (4个)
|
|
├─ 筛选标签 (全部、生效中、待生效、已过期)
|
|
└─ 套餐卡片列表
|
|
└─ 点击卡片 → 套餐详情页
|
|
└─ 点击返回 → 回到首页
|
|
```
|
|
|
|
---
|
|
|
|
## 📱 页面展示
|
|
|
|
### 首页 - 套餐列表
|
|
|
|
```
|
|
┌─────────────────────────────────┐
|
|
│ │
|
|
│ ┌──────┬──────┐ │ ← 统计卡片
|
|
│ │套餐 │生效中│ │
|
|
│ │总数 │ │ │
|
|
│ │ 4 │ 2 │ │
|
|
│ └──────┴──────┘ │
|
|
│ ┌──────┬──────┐ │
|
|
│ │待生效│已过期│ │
|
|
│ │ 1 │ 1 │ │
|
|
│ └──────┴──────┘ │
|
|
│ │
|
|
│ [全部] 生效中 待生效 已过期 → │ ← 筛选标签
|
|
│ │
|
|
│ ┌─────────────────────┐ │ ← 套餐卡片
|
|
│ │ 月付套餐 50GB 生效中│ │
|
|
│ │ 正式套餐 优先级:1 │ │
|
|
│ │ │ │
|
|
│ │ 虚流量使用 │ │
|
|
│ │ [████░░░] 25/100GB │ │
|
|
│ │ 真流量: 12.5/50GB │ │
|
|
│ │ │ │
|
|
│ │ 激活:03-01 到期:04-01 │ │
|
|
│ │ (剩5天) │ │
|
|
│ └─────────────────────┘ │
|
|
│ │
|
|
│ ┌─────────────────────┐ │
|
|
│ │ 加油包 20GB 生效中│ │
|
|
│ │ 加油包 优先级:2 │ │
|
|
│ │ [████░░░] 10/40GB │ │
|
|
│ │ 激活:03-15 到期:04-15│ │
|
|
│ └─────────────────────┘ │
|
|
│ │
|
|
└─────────────────────────────────┘
|
|
```
|
|
|
|
### 详情页 - 套餐详情
|
|
|
|
```
|
|
┌─────────────────────────────────┐
|
|
│ ← 返回 │
|
|
├─────────────────────────────────┤
|
|
│ │
|
|
│ ┌─────────────────────┐ │ ← 基本信息
|
|
│ │ 月付套餐 50GB 生效中│ │
|
|
│ │ │ │
|
|
│ │ 套餐类型: 正式套餐 │ │
|
|
│ │ 优先级: 1 │ │
|
|
│ └─────────────────────┘ │
|
|
│ │
|
|
│ ┌─────────────────────┐ │ ← 流量详情
|
|
│ │ 流量使用 │ │
|
|
│ │ │ │
|
|
│ │ 虚流量使用 25% │ │
|
|
│ │ [████████░░] │ │
|
|
│ │ │ │
|
|
│ │ 已用 剩余 总量│ │
|
|
│ │ 25GB 75GB 100GB│ │
|
|
│ │ │ │
|
|
│ │ 真流量: 12.5/50GB │ │
|
|
│ │ [████░░░░░] │ │
|
|
│ │ │ │
|
|
│ │ 虚流量比例: 1:2 │ │
|
|
│ └─────────────────────┘ │
|
|
│ │
|
|
│ ┌─────────────────────┐ │ ← 时间信息
|
|
│ │ 时间信息 │ │
|
|
│ │ 创建:2024-02-25 │ │
|
|
│ │ 激活:2024-03-01 │ │
|
|
│ │ 到期:2024-04-01 │ │
|
|
│ │ 剩余5天 │ │
|
|
│ └─────────────────────┘ │
|
|
│ │
|
|
│ [续费套餐] [购买加油包] │
|
|
│ │
|
|
└─────────────────────────────────┘
|
|
```
|
|
|
|
---
|
|
|
|
## 🎨 核心功能
|
|
|
|
### 1. 统计卡片 (4个)
|
|
|
|
```vue
|
|
套餐总数 - 蓝色图标
|
|
生效中 - 绿色图标
|
|
待生效 - 橙色图标
|
|
已过期 - 红色图标
|
|
```
|
|
|
|
### 2. 状态筛选
|
|
|
|
点击筛选标签过滤套餐:
|
|
|
|
| 标签 | 筛选条件 | 颜色 |
|
|
|------|---------|------|
|
|
| 全部 | 显示所有 | 橙色背景 (激活态) |
|
|
| 生效中 | status = 1 | 绿色背景 (激活态) |
|
|
| 待生效 | status = 0 | 橙色背景 (激活态) |
|
|
| 已过期 | status = 3 | 红色背景 (激活态) |
|
|
|
|
### 3. 套餐卡片
|
|
|
|
每个卡片显示:
|
|
|
|
- **标题行** - 套餐名称 + 状态标签
|
|
- **类型行** - 套餐类型 + 优先级
|
|
- **虚流量进度条** - 8px高度,显示使用比例
|
|
- **真流量文字** - 已用/总量
|
|
- **时间行** - 激活时间 + 到期时间 + 剩余天数
|
|
|
|
### 4. 套餐详情
|
|
|
|
点击卡片进入详情页,显示:
|
|
|
|
- **基本信息** - 名称、类型、优先级、关联主套餐
|
|
- **流量使用** - 虚流量大进度条 + 三格统计 + 真流量小进度条 + 比例
|
|
- **时间信息** - 创建、激活、到期、剩余天数
|
|
- **操作按钮** - 续费套餐 / 购买加油包
|
|
|
|
---
|
|
|
|
## 🎯 状态颜色
|
|
|
|
### 套餐状态标签
|
|
|
|
| 状态 | 文字颜色 | 背景颜色 |
|
|
|------|---------|---------|
|
|
| 待生效 | `#ff9800` | `#fff3e0` |
|
|
| 生效中 | `#4caf50` | `#e8f5e9` |
|
|
| 已用完 | `#9e9e9e` | `#f5f5f5` |
|
|
| 已过期 | `#f44336` | `#ffebee` |
|
|
| 已失效 | `#757575` | `#eeeeee` |
|
|
|
|
### 进度条颜色
|
|
|
|
```scss
|
|
// 虚流量进度条
|
|
status === 1 (生效中) → #4caf50 绿色
|
|
status === 2 (已用完) → #f44336 红色
|
|
其他状态 → #9e9e9e 灰色
|
|
|
|
// 真流量进度条
|
|
固定使用 #2196f3 蓝色
|
|
```
|
|
|
|
### 剩余天数
|
|
|
|
```scss
|
|
≤ 7天 → #f44336 红色 (紧急)
|
|
8-30天 → #ff9800 橙色 (提醒)
|
|
> 30天 → 不显示颜色 (正常)
|
|
```
|
|
|
|
---
|
|
|
|
## 💡 交互说明
|
|
|
|
### 列表页交互
|
|
|
|
1. **点击统计卡片** - 无交互 (纯展示)
|
|
2. **点击筛选标签** - 过滤套餐列表
|
|
3. **点击套餐卡片** - 进入套餐详情页
|
|
4. **上下滑动** - 浏览套餐列表
|
|
|
|
### 详情页交互
|
|
|
|
1. **点击返回按钮** - 返回套餐列表
|
|
2. **点击续费套餐** - (待实现) 打开续费表单
|
|
3. **点击购买加油包** - (待实现) 跳转加油包选择页
|
|
|
|
---
|
|
|
|
## 📊 数据示例
|
|
|
|
### 套餐列表数据
|
|
|
|
```typescript
|
|
interface PackageUsage {
|
|
package_usage_id: number // 使用记录ID
|
|
package_id: number // 套餐模板ID
|
|
package_name: string // 套餐名称
|
|
package_type: 'formal' | 'addon' // 套餐类型
|
|
status: 0 | 1 | 2 | 3 | 4 // 状态
|
|
status_name: string // 状态名称
|
|
data_limit_mb: number // 真流量总量(MB)
|
|
data_usage_mb: number // 已用真流量(MB)
|
|
virtual_limit_mb: number // 虚流量总量(MB)
|
|
virtual_used_mb: number // 已用虚流量(MB)
|
|
virtual_remain_mb: number // 剩余虚流量(MB)
|
|
virtual_ratio: number // 虚流量比例
|
|
priority: number // 优先级
|
|
usage_type: string // 使用类型
|
|
master_usage_id: number | null // 主套餐ID
|
|
activated_at: string | null // 激活时间
|
|
expires_at: string | null // 到期时间
|
|
created_at: string // 创建时间
|
|
}
|
|
```
|
|
|
|
---
|
|
|
|
## 🔧 核心函数
|
|
|
|
### 1. 流量格式化
|
|
|
|
```typescript
|
|
function formatDataSize(mb: number): string {
|
|
if (mb < 1024) return `${mb}MB`
|
|
return `${(mb / 1024).toFixed(1)}GB`
|
|
}
|
|
|
|
// 示例:
|
|
formatDataSize(512) // → "512MB"
|
|
formatDataSize(51200) // → "50.0GB"
|
|
```
|
|
|
|
### 2. 使用百分比
|
|
|
|
```typescript
|
|
function calcUsagePercent(used: number, total: number): number {
|
|
if (total === 0) return 0
|
|
return Math.min(Math.round((used / total) * 100), 100)
|
|
}
|
|
|
|
// 示例:
|
|
calcUsagePercent(25600, 102400) // → 25
|
|
```
|
|
|
|
### 3. 剩余天数
|
|
|
|
```typescript
|
|
function calcRemainingDays(expiresAt: string | null): number | null {
|
|
if (!expiresAt) return null
|
|
const now = new Date()
|
|
const expireDate = new Date(expiresAt)
|
|
const diff = expireDate.getTime() - now.getTime()
|
|
return Math.ceil(diff / (1000 * 60 * 60 * 24))
|
|
}
|
|
|
|
// 示例:
|
|
calcRemainingDays('2024-04-01T10:00:00Z') // → 5 (假设今天是3月27日)
|
|
```
|
|
|
|
### 4. 时间格式化
|
|
|
|
```typescript
|
|
function formatDate(dateStr: string | null): string {
|
|
if (!dateStr) return '--'
|
|
const date = new Date(dateStr)
|
|
return `${date.getMonth() + 1}-${String(date.getDate()).padStart(2, '0')}`
|
|
}
|
|
|
|
// 示例:
|
|
formatDate('2024-03-01T10:00:00Z') // → "3-01"
|
|
formatDate(null) // → "--"
|
|
```
|
|
|
|
---
|
|
|
|
## ✅ 设计检查清单
|
|
|
|
- [x] 移除顶部导航栏
|
|
- [x] 移除Logo和搜索框
|
|
- [x] 移除角色切换
|
|
- [x] 首页直接显示套餐列表
|
|
- [x] 统计卡片正常显示
|
|
- [x] 筛选标签功能正常
|
|
- [x] 套餐卡片样式正确
|
|
- [x] 详情页返回功能正常
|
|
- [x] 状态颜色准确
|
|
- [x] 进度条显示正确
|
|
|
|
---
|
|
|
|
## 🎯 下一步开发
|
|
|
|
### 优先级 P0 (核心功能)
|
|
|
|
- [ ] **API接口对接** - 获取真实套餐数据
|
|
- [ ] **下拉刷新** - 刷新套餐列表
|
|
- [ ] **上拉加载** - 分页加载更多
|
|
|
|
### 优先级 P1 (重要功能)
|
|
|
|
- [ ] **续费功能** - 续费套餐表单和支付
|
|
- [ ] **购买加油包** - 加油包选择和购买流程
|
|
- [ ] **套餐详情操作** - 更多操作选项
|
|
|
|
### 优先级 P2 (增强体验)
|
|
|
|
- [ ] **图表统计** - 流量使用趋势图
|
|
- [ ] **到期提醒** - 即将到期推送通知
|
|
- [ ] **搜索功能** - 按套餐名称搜索
|
|
|
|
---
|
|
|
|
## 📐 布局尺寸
|
|
|
|
### 间距
|
|
|
|
```scss
|
|
页面边距: px-4 (16px)
|
|
卡片间距: gap-3 (12px)
|
|
卡片内边距: p-4 (16px)
|
|
小元素间距: gap-2 (8px)
|
|
```
|
|
|
|
### 字号
|
|
|
|
```scss
|
|
24px - 统计数值
|
|
16px - 套餐名称
|
|
14px - 按钮文字
|
|
13px - 流量数值
|
|
12px - 状态标签
|
|
11px - 时间信息
|
|
```
|
|
|
|
### 圆角
|
|
|
|
```scss
|
|
12px - 卡片圆角
|
|
8px - 进度条圆角
|
|
full - 状态标签圆角
|
|
```
|
|
|
|
---
|
|
|
|
**小米米家风格 - 简约纯粹** 🎨
|