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

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

• 创建支付页面 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)
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
• ✅ 类型检查通过，无支付相关错误