玄鸟权益中心小程序产品系统Vibe Coding

联合南航、和平精英等品牌方推出游戏皮肤 / 积分权益兑换工具
• 主导需求落地、UI 还原、接口对接、线上部署与活动运维全链路交付
• 搭建数据可视化看板，实时呈现权益兑换与流量数据
• 针对大促高并发场景做性能优化，攻克加载卡顿、支付失败、低端机型适配等难
题

一、核心基础功能

1. 用户登录与账号体系

1. 手机号 + 验证码快捷登录，需阅读隐私协议、用户服务协议；
2. 绑定游戏账号（和平精英微信 / QQ 区），作为道具发放接收账号；
3. 个人中心：查看已购道具、待发放权益、历史订单、兑换记录。

2. 游戏道具商城（核心功能）

1. 展示和平精英限定套装、枪械皮肤、玩偶外观（糯粉咩咩、萌神阿基、M416 仓鼠灰灰等南航联名款）；
2. 道具标价对应南航里程抵扣额度，仅支持南航里程兑换的权益券核销，不直接充值付费；
3. 限时抢购、皮肤返场活动专区，上架限定联名外观。

3. 权益核销发放（核心用途）

1. 从南方航空小程序用里程兑换皮肤权益后，会生成对应兑换凭证；
2. 在玄鸟权益中心登录同一手机号，匹配已购权益；
3. 绑定和平精英游戏账号，一键核销，道具直接发放至游戏内邮箱。

二、配套辅助功能

1. 订单查询：全部核销记录、发放状态、付费 / 里程抵扣明细；
2. 客服咨询：小程序内置客服通道，处理道具未到账、绑定失败、核销异常；
3. 活动任务配套：联动南航做签到、浏览、抽奖任务，获取额外里程用于兑换皮肤；
4. 账号解绑：支持更换、解绑绑定的和平精英游戏账号。

1. 用户账号登录绑定模块

- 实现手机号验证码登录逻辑：前端做手机号格式校验、验证码倒计时防抖，登录成功后存储 token，全局路由守卫拦截未登录页面自动跳转登录页；
- 游戏账号绑定功能：区分微信 / QQ 游戏大区下拉选择，表单实时校验账号数字格式，绑定成功后存入本地缓存并同步后端，个人中心展示已绑定游戏账号，支持解绑切换。

### 2. 权益商城首页模块

- 首页采用分包加载，分为活动 banner 区、限时权益列表、里程兑换商品卡片；
- 商品卡片组件封装复用，动态渲染皮肤名称、展示图、所需里程、库存状态、兑换按钮；
- 做无数据 / 加载中 / 兑换售罄三种兜底 UI，优化弱网下页面体验；
- 下拉刷新、上拉分页加载权益商品列表，节流防抖处理滚动事件。

3. 权益核销发放核心业务模块

1. 卡券匹配逻辑：登录后前端调用后端接口拉取当前手机号下南航兑换的全部权益券，区分待核销 / 已发放 / 过期三种状态；
2. 核销流程交互：选中权益→校验游戏账号是否绑定→二次确认弹窗→发起核销请求；
3. 状态实时反馈：核销中 loading、核销成功弹窗跳转订单、核销失败展示后端返回错误文案（账号错误、权益过期、库存不足）；
4. 对接后端道具发放接口，前端轮询查询发放进度，完成后提示前往游戏邮箱查收道具。

### 4. 个人中心 & 订单记录模块

- 个人中心聚合展示用户手机号、绑定游戏账号、历史核销订单入口、客服入口；
- 订单列表分页渲染，每条订单展示权益皮肤、核销时间、发放状态；支持点击查看订单详情；
- 全部页面做状态缓存，返回不重复刷新页面，提升操作流畅度。

5. 跨小程序联动与客服功能

- 配置微信跳转 API，实现从玄鸟小程序跳转南航小程序权益兑换页；
- 封装微信官方客服组件构选型、项目开发、项目落地