# Story 011.004: Mini小程序前端支付页面和流程集成

## Status
✅ Completed

## Story
**As a** 小程序用户,
**I want** 在前端页面中完成支付流程和订单取消操作,
**so that** 我可以在小程序中顺畅地完成订单支付和退款流程

## Acceptance Criteria
1. 创建完整的支付页面，支持微信支付调用
2. 订单提交页面成功跳转到支付页面
3. 订单列表页面的"去支付"按钮正常工作
4. 订单详情页面支持取消订单操作
5. 支付成功/失败有相应的页面跳转和提示
6. 复用现有的支付工具函数库
7. 实现完整的订单状态机流转
8. 支持退款失败的重试机制

## Tasks / Subtasks
- [x] 创建支付页面 `mini/src/pages/payment/index.tsx` (AC: 1, 5, 6)
  - [x] 实现支付页面UI布局
  - [x] 集成支付工具函数调用
  - [x] 处理支付结果和页面跳转
  - [x] 添加支付状态管理
- [x] 集成订单提交页面支付跳转 (AC: 2)
  - [x] 修改订单提交页面跳转逻辑 `mini/src/pages/order-submit/index.tsx:85-87`
  - [x] 添加支付页面跳转参数传递
- [x] 集成订单列表页面支付功能 (AC: 3)
  - [x] 修复订单列表页面"去支付"按钮跳转 `mini/src/pages/order-list/index.tsx:248-252`
  - [x] 确保支付页面路径正确
- [x] 完善订单详情页面取消订单功能 (AC: 4, 7)
  - [x] 验证取消订单API调用 `mini/src/pages/order-detail/index.tsx:224-260`
  - [x] 添加取消订单状态反馈
  - [x] 集成退款流程状态显示
- [x] 实现支付状态流转逻辑 (AC: 7, 8)
  - [x] 集成支付状态管理类
  - [x] 实现支付重试机制
  - [x] 添加支付超时处理

## Dev Notes

### Previous Story Insights
- Story 1-3: 后端支付、订单取消、退款功能已完全实现并通过测试
- 多租户数据隔离已验证通过
- 支付回调、订单取消、退款API已可用
- 所有后端集成测试通过

### Data Models
**订单状态枚举** [Source: mini/src/pages/order-list/index.tsx:24-31]
- `0`: 未支付
- `1`: 支付中
- `2`: 已支付
- `3`: 已退款
- `4`: 支付失败
- `5`: 已关闭

**支付状态枚举** [Source: mini/src/utils/payment.ts:383-390]
- `PENDING`: 待支付
- `PROCESSING`: 支付中
- `SUCCESS`: 支付成功
- `FAILED`: 支付失败
- `REFUNDED`: 已退款
- `CLOSED`: 已关闭

### API Specifications
**订单API客户端** [Source: mini/src/api.ts:26]
- `orderClient`: RPC客户端实例
- 可用方法：
  - `create-order`: 创建订单
  - `cancel-order`: 取消订单
  - `:id`: 获取订单详情

**支付工具函数** [Source: mini/src/utils/payment.ts]
- `requestWechatPayment()`: 调用微信支付
- `PaymentStateManager`: 支付状态管理
- `retryPayment()`: 支付重试逻辑
- `PaymentRateLimiter`: 支付频率限制

### Component Specifications
**现有页面组件**
- `OrderSubmitPage`: 订单提交页面，需要添加支付跳转
- `OrderListPage`: 订单列表页面，需要修复"去支付"按钮
- `OrderDetailPage`: 订单详情页面，需要完善取消订单功能

**需要创建的组件**
- `PaymentPage`: 支付页面，需要创建新页面

### File Locations
- **支付页面**: `mini/src/pages/payment/index.tsx` (需要创建)
- **订单提交页面**: `mini/src/pages/order-submit/index.tsx:85-87` (需要修改跳转逻辑)
- **订单列表页面**: `mini/src/pages/order-list/index.tsx:248-252` (需要修复支付跳转)
- **订单详情页面**: `mini/src/pages/order-detail/index.tsx:224-260` (需要完善取消订单)
- **支付工具函数**: `mini/src/utils/payment.ts` (已存在，需要集成)

### Testing Requirements
**测试框架**
- **单元测试**: Vitest
- **组件测试**: Testing Library
- **E2E测试**: Playwright

**测试位置**
- `mini/tests/` 文件夹与源码并列

**测试场景**
- 支付页面渲染测试
- 支付流程集成测试
- 订单取消功能测试
- 支付状态流转测试
- 错误处理和重试测试

### Technical Constraints
**技术栈**
- **前端框架**: Taro + React + TypeScript
- **状态管理**: TanStack Query
- **UI组件**: Heroicons + Tailwind CSS
- **API调用**: Hono RPC客户端

**小程序限制**
- 使用 `Taro.requestPayment` 调用微信支付
- 页面跳转使用 `Taro.navigateTo` / `Taro.redirectTo`
- 支付结果通过回调处理

### Project Structure Notes
项目结构完全对齐，所有需要的包和模块都已存在：
- `mini/src/pages/`: 页面组件目录
- `mini/src/utils/`: 工具函数目录
- `mini/src/api.ts`: API客户端配置
- 现有支付工具函数库功能完整，可直接复用

## Change Log
| Date | Version | Description | Author |
|------|---------|-------------|--------|
| 2025-11-21 | 1.0 | 初始故事草稿创建 | Bob (Scrum Master) |
| 2025-11-21 | 1.1 | 故事实现完成，所有验收标准达成 | Claude Code |

## Dev Agent Record

### Agent Model Used
- Claude Code (d8d-model)

### Debug Log References
- 类型检查修复：清理未使用的导入和变量
- SCSS转Tailwind 4：统一样式系统
- API调用状态码验证：确保错误处理正确

### Completion Notes List
1. ✅ 创建完整的支付页面，支持微信支付调用
2. ✅ 订单提交页面成功跳转到支付页面
3. ✅ 订单列表页面的"去支付"按钮正常工作
4. ✅ 订单详情页面支持取消订单操作
5. ✅ 支付成功/失败有相应的页面跳转和提示
6. ✅ 复用现有的支付工具函数库
7. ✅ 实现完整的订单状态机流转
8. ✅ 支持退款失败的重试机制

### File List
**创建的文件：**
- `mini/src/pages/payment/index.tsx` - 支付页面
- `mini/src/pages/payment-success/index.tsx` - 支付成功页面

**修改的文件：**
- `mini/src/pages/order-submit/index.tsx` - 集成支付跳转
- `mini/src/pages/order-list/index.tsx` - 修复支付按钮
- `mini/src/pages/order-detail/index.tsx` - 完善取消订单
- `mini/src/utils/payment.ts` - 增强状态管理
- `mini/src/app.config.ts` - 添加页面路由

**删除的文件：**
- `mini/src/pages/payment-success/index.scss` - 清理SCSS文件

## QA Results
*Story implementation completed successfully. All acceptance criteria met.*
- ✅ 支付页面功能完整，支持微信支付调用
- ✅ 支付流程集成正确，页面跳转正常
- ✅ 订单取消功能完善，支持退款流程
- ✅ 支付状态管理完整，支持重试机制
- ✅ 样式统一，使用Tailwind 4
- ✅ 类型检查通过，无支付相关错误