# 续费引导页 - PRD

> **文档版本**: v1.0 · 2026-09-03
> **作者**: 增长产品组
> **文档状态**: 评审中
> **关联 HTML 原型**: [subscribe.html](subscribe.html)
> **关联后端服务**: `payment-service` / `tenant-service`
> **关联业务**: 创也·乾坤 —— 会员过期后的"挽回漏斗"

---

## 0. 一句话定位

让会员过期用户在 **30 秒内**完成套餐选择 + 微信支付，把「租户冻结 → 用户流失」转化为「续费率 ≥ 60%」的关键接触点。

---

## 1. 业务背景与痛点

### 1.1 现状描述

- 会员过期后，用户访问业务后台会直接被踢出到登录页，**没有任何引导**，用户只能凭记忆去找「续费入口」。
- 老版本续费入口藏在「个人中心 → 订单管理 → 续费」3 层路径下，转化率 < 8%。
- 续费成功后没有自动恢复业务后台访问权限，需要用户手动重新登录。

### 1.2 痛点本质

1. **入口不显眼**：过期用户找不到续费页面，直接流失。
2. **价格不透明**：用户不知道续费要多少钱、套餐有什么区别。
3. **支付链路长**：要走"选套餐 → 填支付信息 → 等待到账"，每多一步少 30% 转化。
4. **过期无感知**：很多用户是不知道自己已经过期的，导致进入业务后台被踢。

### 1.3 价值主张 (Why now)

- **对用户**：一键看到「我现在的套餐 + 续费价格 + 支付二维码」，30 秒搞定。
- **对业务**：把续费率从 8% 提升到 35%+，按 ARPU ¥500/月算，月收入增长 25%。
- **对渠道**：通过 `?from=expired` / `?from=warning` 等参数区分来源，与合伙人 Dashboard 联动。

---

## 2. 角色模型与权限边界

### 2.1 涉及角色

| 角色 | 角色定义 | 在本模块中的典型动作 |
| --- | --- | --- |
| **过期用户 (Expired)** | 会员到期 1-30 天，未续费 | 看到红色过期横幅、被踢回此页 |
| **即将过期用户 (Warning)** | 到期前 7 天 | 看到黄色提示横幅，可继续使用 |
| **新注册试用用户 (Trial)** | 7 天免费试用期内 | 不进入此页 |
| **续费成功用户 (Renewed)** | 完成支付 | 自动恢复业务后台权限 |

### 2.2 权限矩阵

| 能力 | Expired | Warning | Trial | Renewed |
| --- | --- | --- | --- | --- |
| 访问本页面 | ✓ | ✓ | ✗ | ✓ |
| 选择套餐并支付 | ✓ | ✓ | — | ✓（推荐升级） |
| 查看历史订单 | ✓ | ✓ | — | ✓ |
| 访问业务后台 | ✗（冻结） | ✓（带提醒） | ✓ | ✓（恢复） |

---

## 3. 信息架构与页面规划

### 3.1 页面入口 / 触发链路

```
[业务后台访问被踢] → /login
  └→ 登录成功 → 检测到会员过期 → 跳转 /subscribe?from=expired

[业务后台顶部黄色提醒横幅] → 点击「立即续费」
  └→ /subscribe?from=warning

[合伙人 Dashboard 推荐升级卡] → 「升级旗舰版」
  └→ /subscribe?from=partner-upgrade

[过期用户直接访问任何业务页] → 拦截 → /subscribe?from=interceptor
```

### 3.2 页面分区（视觉布局）

```
┌──────────────────────────────────────────────────────────────┐
│  [Header] Logo Y + 「创也·乾坤」  [微信支付徽标]                │
├──────────────────────────────────────────────────────────────┤
│  [过期横幅] 红色脉冲 + 「您的会员有效期已过期」+ 客服/历史订单  │
├──────────────────────────────────────────────────────────────┤
│  [当前套餐信息卡] 「创也·乾坤 旗舰版」+ 购买日期 + 到期日        │
├─────────────────────────────┬────────────────────────────────┤
│  [订单表单]                  │  [微信扫码支付卡]                │
│  - 选择店铺数量 (+/-)         │  - QR 占位                    │
│  - 选择开通时间 (4 个套餐)     │  - 「点击立即支付生成二维码」   │
│  - 价格汇总                  │  - 应付金额 ¥432.00             │
│  - [立即支付] 按钮            │  - 「5 分钟内有效」              │
│  - 协议链接                  │                                │
│                             ├────────────────────────────────┤
│                             │  [续费说明] 4 条规则              │
│                             ├────────────────────────────────┤
│                             │  [历史订单] 3 条最近订单          │
└─────────────────────────────┴────────────────────────────────┘
```

### 3.3 关键交互清单

| 编号 | 触发元素 | 用户动作 | 预期反馈 |
| --- | --- | --- | --- |
| INT-001 | 店铺数量 [+] [-] | 点击 | 数字 ±1，价格实时重算 |
| INT-002 | 店铺数量输入框 | 直接输入 | 限制 1-50，越界自动修正 |
| INT-003 | 套餐选项 (1月/3月/6月/1年) | 点击 | 选中态深蓝灰 + 价格实时重算 |
| INT-004 | [立即支付] | 点击 | 1) 按钮 loading 2) 弹提示「已生成二维码」3) 1.5s 后弹「支付成功」 |
| INT-005 | [联系客服] | 点击 | 弹提示「正在接通企业微信客服」 |
| INT-006 | [查看历史订单] | 点击 | 平滑滚动到右侧「历史订单」区域 |
| INT-007 | 套餐折扣标签 | 鼠标悬停 | 浮窗显示「相比按月购买省 X 元」 |

---

## 4. 核心功能模块设计

### 4.1 模块 A：过期状态横幅

#### 4.1.1 状态判断

| 状态 | 触发条件 | 横幅样式 | 文案 |
| --- | --- | --- | --- |
| **已过期** | `today > expire_at` | 红色背景 + 脉冲图标 | 「您的会员有效期已过期，请续费后继续使用」 |
| **即将过期** | `0 < expire_at - today ≤ 7` | 黄色背景 + 警告图标 | 「您的会员将于 N 天后到期，建议提前续费」 |
| **正常** | `expire_at - today > 7` | 不显示横幅 | — |

#### 4.1.2 字段定义

| 字段 | 类型 | 来源 | 说明 |
| --- | --- | --- | --- |
| `tenant_expire_at` | date | 从租户信息读取 | 到期日期 |
| `days_remaining` | int | 自动计算 | 剩余天数（负数表示已过期 N 天） |
| `store_count` | int | 从租户信息读取 | 已授权店铺数（冻结后仍可看） |

### 4.2 模块 B：套餐选择

#### 4.2.1 套餐定价表

| 套餐 ID | 时长 | 月单价 | 总价 | 折扣 | 标签 |
| --- | --- | --- | --- | --- | --- |
| `plan_1m` | 1 个月 | ¥88 | ¥88 × store_count | 无 | — |
| `plan_3m` | 3 个月 | ¥80 | ¥240 × store_count | 省 9% | 推荐 |
| `plan_6m` | 6 个月 | ¥72 | ¥432 × store_count | 省 18% | 最受欢迎 |
| `plan_12m` | 1 年 | ¥65 | ¥780 × store_count | 省 26% | 超值 |

#### 4.2.2 业务规则

- **规则 1**：6 个月为默认推荐项（最高性价比，转化率最高）。
- **规则 2**：店铺数量 **1-50**，超过 50 走 B 端商务流程。
- **规则 3**：价格 = 月单价 × 店铺数 × 月数，**不允许**手动改价。
- **规则 4**：优惠券抵扣在 v1.1 接入，本期不做。

#### 4.2.3 状态机

```
[套餐未选] -- 默认选中 6 个月 --> [plan_6m]
[plan_6m] -- 点击其他 --> [plan_1m/3m/12m]
[任何套餐] -- 立即支付 --> [支付中] -- 成功 --> [支付完成] -- 1.5s --> [回到本页面 + 状态变为已续费]
```

### 4.3 模块 C：微信扫码支付

#### 4.3.1 流程

```
[点击立即支付]
  ├─ 提交订单（套餐 + 店铺数） → 后端返回二维码图片
  ├─ 前端显示「已生成二维码」提示
  ├─ 二维码占位切换为真实二维码图片
  ├─ 每 2 秒轮询一次支付状态
  └─ 状态 = 已支付 → 弹「支付成功」提示 + 1.5s 后恢复业务后台权限
```

#### 4.3.2 字段定义

| 字段 | 类型 | 说明 |
| --- | --- | --- |
| `prepay_id` | string | 微信预支付订单号 |
| `qr_code_url` | string | 二维码图片 URL |
| `expire_at` | datetime | 二维码过期时间（5 分钟） |
| `status` | enum | `pending` / `paid` / `expired` / `refunded` |

### 4.4 模块 D：续费说明 + 历史订单

#### 4.4.1 续费说明（4 条规则）

1. 续费后到期时间在**当前到期日**基础上**累加**（不是从今天开始算）
2. 同一店铺授权下的多个接口共享套餐时长
3. 企业版（私有部署 / SLA）请走商务对接
4. 支付到账时间约 1-3 分钟，超时请联系客服

#### 4.4.2 历史订单字段

| 列 | 来源 | 说明 |
| --- | --- | --- |
| 套餐名称 + 时长 | 订单数据 | 「旗舰版 · 12 个月」 |
| 下单时间 | 订单数据 | YYYY-MM-DD |
| 金额 | 订单数据 | ¥780.00 |
| 状态 | 订单数据 | 已完成 / 已退款 |

---

## 5. 交互细节与校验规则

### 5.1 表单校验

| 字段 | 触发时机 | 规则 | 错误提示文案 |
| --- | --- | --- | --- |
| 店铺数量 | 输入时实时 | 1-50，越界自动修正 | — |
| 套餐选择 | 默认选中 | 必须有选中（默认 6 个月） | — |

### 5.2 异常路径

| 异常场景 | 触发条件 | 用户感知 | 系统处理 |
| --- | --- | --- | --- |
| 网络断开 | 用户无网络 | 顶部黄色提示 | 阻断「立即支付」 |
| 二维码失效 | 5 分钟未支付 | 顶部提示「二维码已失效，请重新生成」 | 自动重新生成 |
| 支付失败 | 后端报错 | 按钮恢复 + 红色提示「支付失败，请重试」 | 不自动重试 |
| 重复点击「立即支付」 | 按钮已变灰 | 无响应 | 防止重复提交 |
| 轮询超时 | 30 次（60 秒）无响应 | 顶部提示「支付确认中，请稍后查看订单」 | 停止轮询，引导到历史订单 |

### 5.3 可访问性

> 给有视力障碍用户使用的辅助功能。

- 套餐选项可用键盘 `←/→` 切换
- 立即支付按钮在键盘聚焦时显示紫色描边
- 过期天数要被屏幕阅读器自动读出

---

## 6. 异常与边界场景

### 6.1 数据边界

- **店铺数 = 0**：不允许（最小 1）
- **店铺数 > 50**：自动修正到 50 + 提示「已超过最大授权数，请联系商务」
- **价格 = 0**：不允许（不会出现，月单价 ≥ ¥65）

### 6.2 业务边界

- **跨租户续费**：不允许，每个租户独立续自己的
- **续费冲突**：5 秒内重复提交，自动去重
- **支付成功但权限未恢复**：3 秒后自动刷新页面，重新校验权限

---

## 7. 验收标准

> 上线前必须满足的条件，每条都打勾才算完成。

- [ ] **功能完整性**：
  - [ ] 4 个套餐选项能正常切换，价格实时重算
  - [ ] 店铺数量 ±1 按钮 + 直接输入都工作
  - [ ] 「立即支付」能成功调起微信支付
  - [ ] 支付成功后 1.5 秒内恢复业务后台权限
  - [ ] 历史订单能正常展示
- [ ] **校验规则**：店铺数 1-50、套餐必选
- [ ] **异常路径**：网络断开、二维码失效、支付失败、超时
- [ ] **性能**：首屏加载 < 1.5 秒，价格重算 < 0.05 秒
- [ ] **浏览器兼容**：Chrome 100+ / Safari 15+ / Edge 100+
- [ ] **响应式**：≥ 1280px、1024px、768px 三个屏幕宽度下都验证过
- [ ] **无障碍**：键盘可操作，过期天数自动读屏
- [ ] **数据埋点**：续费漏斗（查看 → 选套餐 → 支付 → 成功）
- [ ] **设计走查**：UI 同事 review 通过
- [ ] **对接回归**：与 [settings.html](settings.html) 的租户到期状态同步

---

## 8. 未来迭代 (本期不做)

| 版本 | 计划内容 | 价值评估 |
| --- | --- | --- |
| v1.1 | 优惠券抵扣（合伙人专属券） | 高 |
| v1.1 | 支付宝 / 银联支付 | 高 |
| v2.0 | 自动续费（每月自动扣款） | 中 |
| v2.0 | 老用户专属折扣（连续 N 年付费） | 中 |

---

## 9. 修订记录

| 版本 | 日期 | 修改人 | 修改内容 |
| --- | --- | --- | --- |
| v1.0 | 2026-09-03 | 增长产品组 | 初稿 |
| v1.1 | 2026-09-03 | 增长产品组 | 移除技术细节章节（API/接口/组件映射），统一为产品语言 |