一句话
个人中心页 = 用户信息 + 积分入口 + 核心功能宫格 + 图鉴概览 + 服务中心。
页面说明
顶部展示当前登录用户(头像/昵称/消息入口/用户ID 可复制/会员箭头);「我的积分」条展示积分余额(15769);核心功能宫格 4 项(我的赏袋/我的订单/积分商城/扫码兑换)跳转对应页面;「我的图鉴」卡概览收藏情况(全部系列 28、收集进度 42%,点「全部」进图鉴页);服务中心 4 项(兑换记录/协议管理/我的地址/联系我们)——v2.3 起「我的地址」可跳转地址管理页;顶部会员箭头/头像/昵称点击进入会员信息页(v2.7 起:资料编辑/退出登录/注销账号);底部 Tab 栏「我的」高亮。
| 模块 | 内容 | 数据来源 |
|---|---|---|
| 用户信息头部 | 背景图 + 头像/昵称(王小贱)/消息铃铛(角标 99+)/用户ID(38472910,可复制)/会员箭头(点击进入会员信息页) | 用户信息(mock) |
| 我的积分条 | 「我的积分」+ 余额 15769 + 箭头,点击进「我的积分」落地页(/我的积分/latest/) | 积分账户(mock) |
| 核心功能宫格 | 我的赏袋 / 我的订单 / 积分商城 / 扫码兑换(4 宫格) | 固定入口 |
| 我的图鉴卡 | 标题「我的图鉴」+ 全部入口 + 全部系列 28 / 收集进度 42% | 图鉴数据(mock) |
| 服务中心 | 兑换记录 / 协议管理 / 我的地址 / 联系我们(4 宫格);「我的地址」跳转 /我的地址/latest/ | 固定入口 + 跳转 |
| 底部 Tab 栏 | 首页 / 积分商城 / 抽卡机(中心凸起)/ 手册 / 我的(激活高亮) | 固定 |
① 用户信息展示:头像、昵称、用户 ID(可点击复制)、消息入口(未读角标,无未读时隐藏);点击头像/昵称/会员箭头进入会员信息页(v2.7 起:编辑资料/退出登录/注销账号);② 积分入口:展示当前积分余额,点击进入「我的积分」落地页(积分明细 + 积分规则 + 去兑换入口);③ 核心宫格:我的赏袋/我的订单/积分商城跳转对应页面,扫码兑换占位(原型示意);④ 我的图鉴:展示全部系列数与收集进度,点「全部」进入图鉴页(atlas.html);⑤ 服务中心:兑换记录/协议管理/联系我们(占位入口);「我的地址」v2.3 起跳转地址管理页(维护收件地址,赏袋/积分商城下单共用);⑥ 退出登录与注销账号:v2.7 起移至会员信息页操作。
| 操作 | 页面行为 |
|---|---|
| 点核心宫格 | 我的赏袋/我的订单/积分商城 → 跳转对应页面 latest;扫码兑换 → 占位(原型示意) |
| 点积分条 | 跳转「我的积分」落地页(/原型/万漫社/miniApp/我的积分/latest/) |
| 点图鉴「全部」 | 跳转 /小程序我的/latest/atlas.html 图鉴页 |
| 点用户 ID 复制图标 | 复制用户 ID 到剪贴板,toast「复制成功」(原型示意) |
| 点会员箭头/头像/昵称 | 跳转会员信息页(/会员信息/latest/) |
| 底部 Tab | 切换首页/积分商城/抽卡机/手册/我的,当前页「我的」高亮 |
用户 ID 38472910;积分余额 15769;全部系列 28;收集进度 42%(收集系列数 ÷ 全部系列数);消息角标 99+(未读消息数,mock)。
| 页面 | 按钮/操作 | 场景 | 提示 |
|---|---|---|---|
| 我的 | 复制 ID | 点击复制(原型示意) | toast「已复制用户ID」 |
| 状态 | 说明 | 完成情况 |
|---|---|---|
| 默认 | 用户已登录,完整展示各模块 | ✅ 已实现 |
| 无消息 | 消息角标隐藏(无未读) | ✅ 已实现(mock 99+ 演示) |
| 未登录(游客模式) | ?guest=1 进入:默认灰色头像 + 「点击登录」、隐藏铃铛/ID/会员箭头,积分条显示「登录后查看」,宫格/图鉴/服务点击提示「请先登录」 | ✅ 已实现(注销成功跳转演示链路) |