# “我的”账户充值弹窗落地设计

日期：`2026-04-25`

## 1. 范围

本轮在“我的”页面的“会员充值”入口落地账户充值弹窗，包含两个页签：

1. `积分充值`
2. `会员卡充值`

前端只负责展示与发起购买，套餐、价格、赠送规则、会员权益、生效时间、钱包余额与交易流水统一由 `server-rs` 后端返回。当前没有真实支付网关，本轮采用服务端模拟支付成功：创建订单后立即写入余额或会员状态，并返回最新账户中心快照。后续接入真实支付时，只替换订单支付状态推进，不改前端套餐与账户快照 contract。

## 2. 产品规则

### 2.1 积分充值套餐

| productId | 积分 | 金额分 | 徽标 | 说明 |
| --- | ---: | ---: | --- | --- |
| `points_10` | 10 | 100 | 首充送积分 | 首充送19积分 |
| `points_60` | 60 | 600 | 无首充赠礼 | 无首充赠送 |
| `points_240` | 240 | 2400 | 首充双倍 | 首充送240积分 |
| `points_450` | 450 | 4500 | 首充双倍 | 首充送450积分 |
| `points_950` | 950 | 9500 | 首充双倍 | 首充送950积分 |
| `points_1980` | 1980 | 19800 | 首充双倍 | 首充送1980积分 |

首充赠送只按用户维度判断一次：用户历史上没有 `points_recharge` 流水时，购买支持首充赠送的套餐才发放赠送积分。实际到账积分写入交易流水，余额以 SpacetimeDB projection 为准。

### 2.2 会员卡套餐

| productId | 类型 | 天数 | 金额分 | 权益 |
| --- | --- | ---: | ---: | --- |
| `member_month` | 月卡 | 30 | 2800 | 免积分回合数100，每日签到加成0% |
| `member_season` | 季卡 | 90 | 7800 | 免积分回合数100，每日签到加成100% |
| `member_year` | 年卡 | 365 | 24800 | 免积分回合数100，每日签到加成210% |

购买会员时，如果当前会员仍有效，则从当前到期时间顺延；如果已过期或从未购买，则从当前服务端时间开始计算。状态只区分 `普通` 与已生效会员，前端不自行推断。

## 3. 后端接口

### 3.1 `GET /api/profile/recharge-center`

需要 Bearer JWT。返回：

1. 当前积分余额、会员状态、到期时间
2. 积分套餐与会员套餐
3. 会员权益表
4. 最近订单摘要

兼容路径：`GET /api/runtime/profile/recharge-center`

### 3.2 `POST /api/profile/recharge/orders`

需要 Bearer JWT。请求：

```json
{
  "productId": "points_240",
  "paymentChannel": "mock"
}
```

行为：

1. 校验 `productId`
2. 后端创建已支付订单
3. 积分套餐写入钱包余额与流水
4. 会员套餐写入会员状态
5. 返回最新账户中心快照与订单摘要

兼容路径：`POST /api/runtime/profile/recharge/orders`

## 4. 前端交互

1. “我的”页会员充值按钮打开独立弹窗，不在当前面板下方展开。
2. 弹窗顶部标题为 `账户充值`，右上角关闭。
3. 默认打开 `积分充值`，可切换到 `会员卡充值`。
4. 点击套餐后调用下单接口，按钮进入处理中状态，成功后刷新 `profileDashboard`。
5. 弹窗内不写大段说明文案，只保留必要金额、积分、会员权益和状态反馈。

## 5. 验收

1. 普通用户打开弹窗能看到积分与会员套餐。
2. 积分购买后余额增加，流水来源为 `points_recharge`。
3. 首充赠送只在首次积分充值时生效。
4. 会员购买后会员状态与到期时间立即更新。
5. 移动端弹窗单列可滚动，桌面端接近参考图卡片网格。