Files
soul-yongping/开发文档/4、前端/ui/08-支付系统说明.md
2026-02-09 15:09:29 +08:00

5.2 KiB
Raw Blame History

支付系统说明

支付方式

支付方式 状态 说明
微信支付 启用 主要支付方式
支付宝 禁用 已移除
USDT ⚠️ 可选 默认禁用
PayPal ⚠️ 可选 默认禁用

支付流程

┌─────────────────────────────────────────────────────┐
│                    支付流程                          │
├─────────────────────────────────────────────────────┤
│                                                     │
│  1. 用户点击购买                                     │
│          │                                          │
│          ▼                                          │
│  2. 弹出支付弹窗                                     │
│     - 显示商品信息                                   │
│     - 选择支付方式(微信为主)                        │
│          │                                          │
│          ▼                                          │
│  3. 调用后端创建订单                                 │
│     POST /api/payment/create                        │
│          │                                          │
│          ▼                                          │
│  4. 返回支付二维码                                   │
│     - 微信:返回支付链接                             │
│     - 生成QR码展示                                  │
│          │                                          │
│          ▼                                          │
│  5. 用户扫码支付                                     │
│          │                                          │
│          ▼                                          │
│  6. 前端轮询支付状态                                 │
│     POST /api/payment/query                         │
│     - 每3秒查询一次                                  │
│     - 最多轮询60次3分钟                          │
│          │                                          │
│     ┌────┴────┐                                    │
│     ▼         ▼                                    │
│  支付成功   超时/失败                               │
│     │         │                                    │
│     ▼         ▼                                    │
│  更新订单   提示重试                                │
│  解锁内容                                          │
│                                                     │
└─────────────────────────────────────────────────────┘

价格体系

定价

商品 价格 说明
单章购买 ¥1 单独购买一章
基础版全书 ¥9.9 包含50章基础内容
最新完整版 ¥9.9 + N N = 新增章节数 × ¥1

分销优惠

原价 好友优惠(5%) 实付
¥1 ¥0.05 ¥0.95
¥9.9 ¥0.50 ¥9.40

支付弹窗组件

文件位置:components/payment-modal.tsx

Props

interface PaymentModalProps {
  isOpen: boolean
  onClose: () => void
  type: "section" | "fullbook"
  sectionId?: string
  sectionTitle?: string
  amount: number
  onSuccess: () => void
}

支付状态

type PaymentState = 
  | "idle"       // 初始状态
  | "creating"   // 创建订单中
  | "pending"    // 等待支付
  | "polling"    // 轮询状态
  | "success"    // 支付成功
  | "failed"     // 支付失败

微信支付配置

配置位置:lib/store.ts -> Settings.paymentMethods.wechat

wechat: {
  enabled: true,
  qrCode: string,          // 收款二维码
  account: string,         // 微信号
  websiteAppId: string,    // 网站应用AppID
  websiteAppSecret: string,
  serviceAppId: string,    // 服务号AppID
  serviceAppSecret: string,
  mpVerifyCode: string,    // 公众号验证码
  merchantId: string,      // 商户号
  apiKey: string,          // API密钥
  groupQrCode?: string     // 微信群二维码
}

订单数据结构

interface Purchase {
  id: string
  userId: string
  type: "section" | "fullbook"
  sectionId?: string
  sectionTitle?: string
  amount: number
  status: "pending" | "completed" | "failed"
  paymentMethod?: string
  orderSn?: string         // 订单号
  tradeSn?: string         // 交易号
  referrerEarnings?: number // 推广者收益
  createdAt: string
}

支付回调处理

支付成功

  1. 更新订单状态为 completed
  2. 更新用户购买记录
  3. 如有推荐人,计算分销收益
  4. 刷新页面解锁内容

支付失败/超时

  1. 更新订单状态为 failed
  2. 提示用户重试
  3. 保留订单记录便于追踪

文档版本v2.0 | 更新日期2026-01-18