P04 抽奖活动页

P04 抽奖活动页

页面概述

• 页面名称：抽奖活动页
• 页面目标：承接积分抽奖互动
• 适用角色：已登录并绑定手机号用户
• 页面入口：首页抽奖浮窗

页面组成

1. 奖盘区

• 字段：prizeId、prizeName、prizeImage、probability
• 说明：展示 8 个奖品与抽奖动效

2. 用户资产区

• 字段：currentPoints、costPoints
• 说明：展示当前积分和单次抽奖消耗

3. 奖品说明区

• 字段：prizeType、claimMode、ruleText
• 说明：说明积分奖、核销券、实物奖的领取方式

4. 结果弹窗

• 字段：resultStatus、rewardValue、contactHint
• 说明：抽奖结束后展示结果信息

按钮设计

按钮	显示条件	动作
立即抽奖	登录且积分满足条件	调用抽奖接口
查看中奖记录	固定显示	打开 P30
联系客服	中奖后显示	打开 P32

交互逻辑

1. 进入页面后，先查询奖盘配置。
2. 用户点击“立即抽奖”后，先校验积分状态。
3. 校验通过后，触发抽奖动效。
4. 动效结束后展示抽奖结果弹窗。

校验规则

• 登录状态校验
• 积分余额充足
• 活动启用中
• 奖池库存充足
• 防重复点击

状态处理

加载失败

• 当奖盘配置加载失败时：
  • 不可执行抽奖
  • 页面仅展示重试按钮

异常提示

• 积分不足：当前积分不足，请先完成打卡或兑换积分后再参与
• 活动关闭：当前活动暂未开放

页面跳转关系

• P04 -> P30：查看中奖记录
• P04 -> P32：联系客服

埋点建议

• lottery_show
• lottery_draw_click
• lottery_draw_success
• lottery_draw_fail

实现要点

• 奖盘配置需在页面初始化时完成拉取
• 抽奖前置校验应在接口调用前完成，避免无效请求
• 抽奖按钮需具备防重入控制，避免重复点击造成并发请求
• 结果弹窗需兼容不同奖品类型的展示与引导动作