mini-starter/docs/stories/011.004.mini-payment-frontend-integration.story.md

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

Status

Draft

Story

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

Acceptance Criteria

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

Tasks / Subtasks

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

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)

Dev Agent Record

This section is populated by the development agent during implementation

Agent Model Used

Debug Log References

Completion Notes List

File List

QA Results

Results from QA Agent QA review of the completed story implementation