130 lines
4.6 KiB
Markdown
130 lines
4.6 KiB
Markdown
|
# 移动端计费功能实现总结
|
|||
|
|
|
|||
|
|
## 已实现的功能
|
|||
|
|
|
|||
|
|
### 1. 计费系统核心功能 (`src/types/billing.ts`)
|
|||
|
|
- ✅ 用户类型定义：个人用户和企业用户
|
|||
|
|
- ✅ 通话类型：语音通话和视频通话
|
|||
|
|
- ✅ 翻译类型：文本翻译、手语翻译、人工翻译
|
|||
|
|
- ✅ 计费规则配置
|
|||
|
|
- ✅ 用户账户信息管理
|
|||
|
|
- ✅ 预约信息结构
|
|||
|
|
- ✅ 翻译员信息管理
|
|||
|
|
- ✅ 通话记录和充值记录
|
|||
|
|
|
|||
|
|
### 2. 计费服务 (`src/services/billingService.ts`)
|
|||
|
|
- ✅ 单例模式的计费服务类
|
|||
|
|
- ✅ 根据用户类型设置不同的计费规则
|
|||
|
|
- ✅ 通话费用计算（基于通话类型、翻译类型、时长、翻译员费率）
|
|||
|
|
- ✅ 余额检查和扣费功能
|
|||
|
|
- ✅ 低余额警告
|
|||
|
|
- ✅ 账户充值功能
|
|||
|
|
- ✅ 金额格式化显示
|
|||
|
|
|
|||
|
|
### 3. 预约服务 (`src/services/appointmentService.ts`)
|
|||
|
|
- ✅ 预约管理服务
|
|||
|
|
- ✅ 翻译员管理和可用性检查
|
|||
|
|
- ✅ 预约创建、查询、更新、取消
|
|||
|
|
- ✅ 时间冲突检查
|
|||
|
|
- ✅ 按日期和月份筛选预约
|
|||
|
|
- ✅ 模拟数据初始化
|
|||
|
|
|
|||
|
|
### 4. 移动端首页更新 (`src/pages/mobile/Home.tsx`)
|
|||
|
|
- ✅ 用户账户余额显示
|
|||
|
|
- ✅ 账户类型显示
|
|||
|
|
- ✅ 快捷操作按钮（语音通话、视频通话、预约通话、账户充值）
|
|||
|
|
- ✅ 即将到来的预约预览
|
|||
|
|
- ✅ 最近活动记录（包含费用信息）
|
|||
|
|
- ✅ 美观的卡片式布局
|
|||
|
|
|
|||
|
|
### 5. 移动端通话页面 (`src/pages/mobile/Call.tsx`)
|
|||
|
|
- ✅ 支持语音和视频通话选择
|
|||
|
|
- ✅ 翻译类型选择（文本、手语、人工翻译）
|
|||
|
|
- ✅ 实时费用计算和显示
|
|||
|
|
- ✅ 账户余额监控
|
|||
|
|
- ✅ 通话时长计时
|
|||
|
|
- ✅ 翻译员选择（人工翻译时）
|
|||
|
|
- ✅ 翻译历史记录
|
|||
|
|
- ✅ 自动扣费功能
|
|||
|
|
|
|||
|
|
### 6. 移动端充值页面 (`src/pages/mobile/Recharge.tsx`)
|
|||
|
|
- ✅ 预设充值金额选择
|
|||
|
|
- ✅ 自定义充值金额输入
|
|||
|
|
- ✅ 充值赠送金额计算
|
|||
|
|
- ✅ 多种支付方式支持
|
|||
|
|
- ✅ 充值历史记录查看
|
|||
|
|
- ✅ 账户余额实时显示
|
|||
|
|
- ✅ 充值成功后余额更新
|
|||
|
|
|
|||
|
|
### 7. 移动端预约页面 (`src/pages/mobile/Appointment.tsx`)
|
|||
|
|
- ✅ 通话类型选择（语音/视频）
|
|||
|
|
- ✅ 翻译类型选择
|
|||
|
|
- ✅ 日期和时间选择（未来7天）
|
|||
|
|
- ✅ 语言对选择
|
|||
|
|
- ✅ 翻译员选择（基于语言和日期可用性）
|
|||
|
|
- ✅ 预估费用计算
|
|||
|
|
- ✅ 余额充足性检查
|
|||
|
|
- ✅ 预约创建和确认
|
|||
|
|
|
|||
|
|
### 8. 移动端设置页面 (`src/pages/mobile/Settings.tsx`)
|
|||
|
|
- ✅ 用户信息展示（账户类型、余额）
|
|||
|
|
- ✅ 账户管理功能
|
|||
|
|
- ✅ 通话设置选项
|
|||
|
|
- ✅ 翻译设置选项
|
|||
|
|
- ✅ 通知设置管理
|
|||
|
|
- ✅ 帮助和反馈入口
|
|||
|
|
- ✅ 退出登录功能
|
|||
|
|
|
|||
|
|
### 9. 路由配置更新 (`src/routes/index.tsx`)
|
|||
|
|
- ✅ 新增充值页面路由 `/mobile/recharge`
|
|||
|
|
- ✅ 新增预约页面路由 `/mobile/appointment`
|
|||
|
|
- ✅ 移动端路由完整配置
|
|||
|
|
|
|||
|
|
## 核心计费逻辑
|
|||
|
|
|
|||
|
|
### 费率配置
|
|||
|
|
- **语音通话 + 文本翻译**: ¥0.50/分钟
|
|||
|
|
- **视频通话 + 手语翻译**: ¥1.00/分钟
|
|||
|
|
- **视频通话 + 人工翻译**: ¥2.00/分钟 + 翻译员费率
|
|||
|
|
|
|||
|
|
### 用户类型差异
|
|||
|
|
- **个人用户**: 使用标准费率
|
|||
|
|
- **企业用户**: 可配置专属费率和信用额度
|
|||
|
|
|
|||
|
|
### 余额管理
|
|||
|
|
- 低余额警告：不足5分钟通话费用时提醒
|
|||
|
|
- 最低余额限制：不足1分钟通话费用时禁止通话
|
|||
|
|
- 自动扣费：通话结束后自动从账户余额扣除费用
|
|||
|
|
|
|||
|
|
### 充值优惠
|
|||
|
|
- 充值金额越大，赠送比例越高
|
|||
|
|
- 支持多种支付方式（微信、支付宝、银行卡等）
|
|||
|
|
|
|||
|
|
## 技术特性
|
|||
|
|
|
|||
|
|
- 🎯 **TypeScript 类型安全**: 完整的类型定义确保代码质量
|
|||
|
|
- 🏗️ **单例模式**: 服务类使用单例模式确保数据一致性
|
|||
|
|
- 💾 **模拟数据**: 完整的模拟数据支持开发和测试
|
|||
|
|
- 🎨 **响应式设计**: 适配移动端的美观界面
|
|||
|
|
- ⚡ **实时计算**: 费用和余额实时更新
|
|||
|
|
- 🔒 **余额保护**: 多重余额检查防止超支
|
|||
|
|
|
|||
|
|
## 使用流程
|
|||
|
|
|
|||
|
|
1. **用户注册/登录** → 获得初始账户和余额
|
|||
|
|
2. **查看余额** → 在首页或设置页面查看当前余额
|
|||
|
|
3. **充值账户** → 选择金额和支付方式进行充值
|
|||
|
|
4. **预约通话** → 选择时间、类型、翻译员创建预约
|
|||
|
|
5. **开始通话** → 选择通话类型和翻译方式
|
|||
|
|
6. **实时计费** → 通话过程中显示累计费用
|
|||
|
|
7. **自动扣费** → 通话结束后自动从余额扣除费用
|
|||
|
|
8. **查看记录** → 在首页查看通话历史和费用记录
|
|||
|
|
|
|||
|
|
## 下一步开发建议
|
|||
|
|
|
|||
|
|
1. **后端集成**: 连接真实的后端API替换模拟数据
|
|||
|
|
2. **支付集成**: 集成真实的支付网关
|
|||
|
|
3. **推送通知**: 实现余额不足和预约提醒
|
|||
|
|
4. **数据持久化**: 实现本地数据存储
|
|||
|
|
5. **错误处理**: 完善网络错误和支付失败处理
|
|||
|
|
6. **单元测试**: 为核心计费逻辑添加测试用例
|