客户端小程序 — 产品购买流程

上级文档：客户端小程序

---

概述

对应主文档 §8.3、§13.2、§13.3

产品购买流程覆盖「浏览 → 选择 → 确认 → 支付 → 结果」全链路，是核心转化路径。金额、优惠、支付结果均以服务端返回为准。

页面路由

路由	页面	说明
/pages/product/list	套餐列表	展示可用产品套餐
/pages/product/detail	套餐详情	套餐规则、退款说明
/pages/order/confirm	订单确认	选券 + 金额确认
/pages/order/result	支付结果	成功/取消处理

购买流程

浏览套餐列表
    │
    ├─ 选择套餐 → 套餐详情（有效期、规则、退款说明）
    │
    ├─ 点击购买 → 订单确认页
    │                │
    │                ├─ 确认金额
    │                ├─ 点击「立即支付」
    │                │
    │                ├─ POST /api/v1/orders
    │                │    ├─ 失败 → 提示错误原因
    │                │    └─ 成功 → wx.requestPayment
    │                │
    │                ├─ 支付成功 → 轮询订单状态
    │                │    ├─ ACTIVE → 支付结果页（成功）
    │                │    └─ PAID   → 等 2s 重新轮询
    │                │
    │                └─ 取消/失败 → 订单列表（待支付订单）
    │
    └─ 待支付订单 → 继续支付 / 超时自动取消 [建议值 30min]

套餐列表页要素

• 门店名称 + 返回按钮
• 限时优惠区块：运营配置的促销套餐卡片
• 全部产品区块：通用产品列表
• 每个套餐卡片展示：产品名称、售价、划线价、有效期、次数（仅次卡/体验卡）、标签

套餐卡片字段

字段	来源字段	说明
产品名称	name	多语言
售价	price	格式 ¥XX.XX
划线价	originalPrice	删除线样式，为空不展示
有效期	durationDays	格式：X天
次数	timesTotal	仅次卡/体验卡展示，格式：X次
标签	tags	如 限时优惠、热门、推荐

套餐展示规则

1. 优先展示通用产品（storeId = null），再展示门店专属
2. 按 sortOrder 升序排列
3. 体验卡仅对从未购买过任何产品的用户展示（云端判断，无需前端处理）
4. 已下架产品不展示

确认订单页要素

• 产品信息区：名称、有效期、次数
• 金额明细：产品售价
• 「立即支付」按钮 + 服务协议提示

支付结果页

支付成功：

• 成功图标 + 文案
• 产品名称、有效期
• 未录脸时显示「完成人脸录入」按钮（强引导）
• 「查看我的会员」+ 「返回首页」

支付取消/失败：

• 警告图标 + 「订单未支付」
• 待支付订单摘要
• 「继续支付」+ 「返回首页」

购买异常处理

异常	处理
取消支付	订单保持 PENDING，可在订单列表继续支付
支付结果未回传	轮询订单状态（间隔 2s，最多 5 次）
待支付超时	不可继续支付，显示「已取消」
创建订单失败	展示服务端返回的错误原因

接口

GET /api/v1/products?storeId=xxx
  Response: { items: Product[] }

POST /api/v1/orders
  Auth: JWT
  Body: { productId: string }
  Response: {
    orderId: string,
    payParams: { timeStamp, nonceStr, package, signType, paySign },  // wx.requestPayment 参数
    amount: number
  }

GET /api/v1/orders/:id
  Response: Order { status, product, amount, paidAt, ... }