点击下方「扫一扫」，识别兑换卡二维码
兑换规则
选择款式
请选择一款
兑换成功
已放入我的赏袋，可在「我的赏袋」中查看
兑换失败
兑换码无效或已被使用，请联系客服处理
兑换规则
一兑换说明
- 使用【扫一扫】功能，扫描印有二维码的万漫社产品卡片，以获取对应活动奖励。
二注意事项
- 每个兑换二维码具有唯一性，仅可使用一次。请妥善保管您的兑换码，该兑换码为一次性使用，兑换后即失效。若兑换码被冒领使用，将不予补发。
- 扫码后可获得对应活动的奖品或虚拟道具，若超过规定时间未领取，将视为自动放弃，不予补发，请及时进行兑换并领取。
- 所有二维码一经兑换，不可进行退换。
- 未满 18 周岁的未成年人使用卡片时，请在监护人陪同下进行。
万漫社 · 兑换规则以官方公告为准
1
扫码页（默认）
深色取景框 + 四角 + 扫描线动画 + 兑换卡图；下方提示 + 「兑换规则」入口；吸底「扫一扫」按钮（点击模拟扫卡，1.5s 识别）
2
模拟扫码
点「扫一扫」进入全屏取景视图（四角框 + 扫描线动画），1.5s 自动识别兑换卡（85% 识别成功 / 15% 无效兑换码）
3
选款式页
识别成功后进入独立选款式页：卡信息卡 + 款式网格（3 列单选粉描边）+ 吸底「兑换」栏（未选置灰）
4
兑换成功/失败落地页
成功：赏品图 + 名称 + 已放入赏袋 + 查看赏袋；失败：兑换码无效提示 + 联系客服
📋 说明面板 / 开发交付文档 — 扫码兑换页 v1.0▶
📌 功能概述
扫码兑换落地页：扫描兑换卡二维码 → 选择兑换码关联的赏品款式（弹窗）→ 兑换成功落地页（赏品图+名称）或兑换失败落地页（联系客服）。数据用盗墓笔记·秘境启封第一弹真实兑换卡（4 张：DIY手账本 / 帆布手提袋 / 周边贴纸 / 定制工牌）。
🧱 页面结构
| 模块 | 内容 | 数据来源 |
|---|---|---|
| 扫码页 | 深色取景框 + 四角 + 扫描线动画 + 兑换卡图 + 「兑换规则」入口 + 吸底「扫一扫」 | 兑换卡图（/card-src/） |
| 选款式页 | 卡信息卡 + 款式网格（3 列单选）+ 吸底兑换栏 | 兑换卡关联赏品款式（真实图） |
| 兑换成功落地页 | 对勾 + 成功提示 + 赏品图 + 名称 + 返回/查看赏袋 | 所选款式 |
| 兑换失败落地页 | 失败图标 + 兑换码无效提示 + 返回/联系客服 | 固定 |
| 兑换规则弹窗 | 兑换说明（官方文案引言）+ 注意事项 4 条（一次性/逾期不补/不可退换/未成年人监护） | 静态文案（2026-08-17 珏哥提供官方口径） |
📋 功能说明（需求）
① 落地页：入口为「我的」页扫码兑换宫格；可查看兑换规则（官方文案）；② 点「扫一扫」模拟扫卡：全屏取景识别兑换卡二维码；③ 识别成功 → 弹选款式浮窗（该卡关联赏品款式限选一款）→ 兑换；④ 兑换成功 → 落地页展示赏品图片 + 赏品名称；⑤ 兑换失败（模拟：15% 概率识别出无效兑换码）→ 落地页提示联系客服。
兑换规则文案：2026-08-17 珏哥提供官方口径（扫一扫引言 + 注意事项 3 条 + 未成年人监护提示），改动需确认；兑换失败页「联系客服」为原型示意（toast 复制客服微信）。
🖱️ 交互行为
| 操作 | 行为 | 影响范围 |
|---|---|---|
| 点「扫一扫」 | 进入全屏扫码视图，扫描线动画 1.5s 自动识别（85% 成功 / 15% 无效码） | 视图切换 |
| 识别成功 | 关闭扫码视图 → 弹选款式底部浮窗 | 弹窗 |
| 识别失败 | 关闭扫码视图 → 跳兑换失败落地页（兑换码无效，联系客服） | 视图切换 |
| 点款式 | 单选高亮（粉描边），底部已选联动 | 弹窗内 |
| 点「兑换」 | 未选置灰；已选 → 跳兑换成功落地页 | 视图切换 |
| 点「兑换规则」 | 弹规则底部浮窗（兑换说明 + 注意事项，可滚动），X/蒙版关闭 | 弹窗 |
| 联系客服 | toast「已复制客服微信：wanmanshe888」（原型示意） | toast |
📐 数据口径
- 兑换卡 4 张（盗墓笔记·秘境启封 026 系列）：DIY手账本（DMBJ-SC，1 款）/ 帆布手提袋（DMBJ-FB，2 款）/ 周边贴纸（DMBJ-ZT，8 款）/ 定制工牌（DMBJ-GP，吴邪/张起灵/胖子 3 款）
- 兑换码格式：DMBJ-{卡类}-{四位序号}（扫码随机生成）
- 图片源：D:\万漫社\01-A卡牌类\026-... 兑换卡 JPG 卡背 + 箱配赏品图（/card-src/ 路由）
- 🔴 原型说明：兑换成功仅提示「已放入赏袋」，数据不真正写入我的赏袋（我的赏袋数据为页面内 mock）；兑换失败为模拟（15% 概率识别无效兑换码）；后续接真实后端时按「用户ID+兑换码+款式」落库
❌ 错误提示清单
| 页面 | 按钮/操作 | 场景 | 提示 |
|---|---|---|---|
| 选款式 | 兑换 | 未选择款式 | toast「请先选择赏品款式」 |
| 扫码 | 自动识别 | 兑换码无效/已被使用 | 跳兑换失败落地页「兑换码无效或已被使用，请联系客服处理」 |
🔲 状态说明
| 状态 | 说明 | 完成情况 |
|---|---|---|
| 落地页默认 | 扫码说明 + 扫一扫 + 兑换规则 | ✅ 已实现 |
| 扫码识别中 | 扫描线动画，1.5s 自动识别 | ✅ 已实现 |
| 选款弹窗 | 款式单选，兑换置灰联动 | ✅ 已实现 |
| 兑换成功 | 赏品图 + 名称落地页 | ✅ 已实现 |
| 兑换失败 | 无效兑换码 + 联系客服落地页 | ✅ 已实现 |
🔄 版本更新日志（共 1 次迭代）▶