📌 功能概述
我的积分落地页:展示积分余额 + 全量积分明细(5 种来源、4 类分类、不同来源详情字段不同)+ 积分规则;入口为「我的」页积分条 与 积分商城吸底余额条;余额卡「去兑换」可跳转积分商城列表页。
🧱 页面结构
| 模块 | 内容 | 数据来源 |
| 顶部导航 | 返回箭头(按来源页智能回跳)+ 标题「我的积分」+ 胶囊 | header-nav.js |
| 余额卡 | 钻石图标 + 我的积分 + 余额 + 「积分规则」入口 + 「去兑换」按钮 | 静态 mock(15,769) |
| 来源筛选(胶囊行) | 全部 6 项来源横向滚动(拖拽 + 渐隐),顺序按使用频率 | 固定 |
| 积分明细列表 | 独立卡片(白卡圆角 16px):来源名 + 时间 + ±积分 + 箭头,滚动分批加载;分类与完整内容(赏品/商品/订单/二维码)在详情浮窗 | mock 120 条(种子生成) |
| 明细详情浮窗 | 来源标签 + 分类 + 大号 ±积分 + 按来源展示专属字段 | 明细行数据 |
| 积分规则浮窗 | 五张规则卡片(介绍/有效期/获取/使用/声明) | 静态文案(2026-08-17 珏哥提供) |
📋 功能说明(需求)
积分来源与分类映射
| 积分来源 | 来源分类 | 关联业务 | 明细详情字段 |
| 我的赏袋 | 赏品分解 | 我的赏袋 | 按 IP·系列分组展示赏品列表(缩略图 + 名称 ×数量,一次分解可含多个赏品/跨系列,可滚动;积分数展示在弹窗顶部大数字) |
| 积分兑换 | 积分商城 | 积分商城 | 商品缩略图 + 商品名称 + 兑换数量 ×N(积分数展示在弹窗顶部大数字) |
| 系统发放 | 额外赠送 | 订单补偿 | 订单号(补偿对象) |
| 扫码兑换 | 额外赠送 | 扫码活动 | 兑换码 ID |
| 订单取消 | 发货订单 | 发货订单取消 | 订单号(被取消订单) |
明细展示(列表行):来源名 + 积分变动时间 + 积分数量(增加/消耗),两行式;来源分类与完整内容在详情浮窗;订单取消为积分退回(+);所有明细按时间倒序。
积分规则:积分介绍 / 有效期(12 个自然月,月底最后一日过期)/ 获取渠道(注册 50 积分、线上消费满 1 元 1 积分、其他指定行为)/ 使用渠道(积分商城兑换不退、积分抵扣运费、先进先出原则)/ 声明(违规收回)。
🖱️ 交互行为
| 操作 | 行为 | 影响范围 |
| 返回箭头 | referrer 含「积分商城」回积分商城 latest,否则回小程序我的 latest | 页面跳转 |
| 点「去兑换」 | 跳转 /原型/万漫社/miniApp/积分商城/latest/ | 页面跳转 |
| 点「积分规则」 | 底部弹出积分规则浮窗(可滚动) | 浮窗 |
| 点筛选胶囊 | 列表按来源过滤,计数联动「共 N 条」,选中态切换,选中项滚到胶囊行可视区第一个;无结果显示轻提示「暂无明细」 | 列表 |
| 拖拽胶囊行 | 按住左右拖拽横向滑动(或滚轮横向滚动),两端渐隐提示可滚动 | 筛选行 |
| 点明细行 | 底部弹出明细详情浮窗,按来源展示专属字段;系统发放/订单取消的订单号可点击 → 跳转我的订单页打开该订单详情(?order=ID) | 浮窗 + 路由跳转 |
| 滚动列表 | 触底加载下一批(每批 20 条),全部加载后显示「没有更多了」 | 列表 |
| 点浮窗 X / 蒙版 | 关闭浮窗 | 浮窗 |
📐 数据口径
- 积分余额:15,769(与小程序我的页积分条一致)
- 来源筛选:胶囊行展示全部 6 项(可左右拖拽滚动,两端渐隐),选中项自动滚到可视区第一个,与全站 IP 筛选交互一致;顺序按使用频率(我的赏袋/积分兑换/扫码兑换/系统发放/订单取消),后续新增来源自动进胶囊行
- 明细 mock:120 条,确定性种子生成(打开数据一致);5 种来源加权分布:我的赏袋 34% / 积分兑换 26% / 扫码兑换 16% / 系统发放 12% / 订单取消 12%
- 赏品池:真实可分解赏品(源:确认发货 PRIZE_CATEGORIES,decomp:true)= 伊索寓言·第二弹 5 款(十二生肖视觉日历 / 金属悬吊画 / 干花亚克力色纸 / 双面亚克力半身吊牌 / 时尚制服卡册)+ 希腊神话·神谕 XLSH 6 款(云翼织梦手账卡包 / 命运之轮浮雕书立 / 圣域花语书签 / 爱琴海月典藏卡册 / 神谕弈境国际象棋 / 荷马史诗典藏邮票装裱);每款固定积分值(pts,后台可配);赏品图 = /prize-thumb/{file}.jpg(服务器路由,28 张真实缩略图)
- 积分商城商品:真实 cover 图(源:积分商城 v2.67 PRODUCTS,/derivative-img/ 路径)
- 赏品分解:一次分解可含多个赏品(批量分解,跨 IP 系列),明细记录存赏品数组(name/ip/series/img/qty/guids),每件赏品实例分配唯一 guid(PG+6 位,可追溯);详情浮窗按 IP·系列分组展示(仿照确认发货「已选发货信息」),每行带 44px 缩略图;mock 分布:单件 40% / 2-4 件 30% / 5-9 件 20% / 10-20 件 10%
- 积分商城商品名:真实积分商品(红楼梦系列吧唧 / 一千零一夜【主题九宫卡册】 / 艺术家联名款杯面马口铁徽章 / 红楼梦十二金钗大全套纪念套装)
- 订单号:FH+时间戳 格式(与发货订单一致);兑换码 ID:XQ-YYYYMMDD-四位序号
- 积分变动方向:我的赏袋/系统发放/扫码兑换/订单取消 = 增加(+);积分兑换 = 消耗(-)
- 积分规则文案:2026-08-17 珏哥提供的《会员积分规则》文档原文(法务口径),改动需确认
- 时间:精确到秒(YYYY-MM-DD HH:mm:ss),详情字段名「兑换时间」;列表行与详情浮窗均展示
- 时间倒序;批次 20 条/批,滚动加载
❌ 错误提示清单
| 页面 | 按钮/操作 | 场景 | 提示 |
| 我的积分 | 筛选 chip | 该来源暂无明细(mock 数据各来源均有,正常不可见) | 轻提示「暂无明细」 |
| 我的积分 | 滚动列表 | 全部明细已加载 | 「没有更多了」 |
🔲 状态说明
| 状态 | 说明 | 完成情况 |
| 默认 | 全部来源明细,时间倒序,首屏 20 条 | ✅ 已实现 |
| 筛选 | 按来源过滤,计数联动,选中 chip 高亮 | ✅ 已实现 |
| 空态 | 筛选无结果显示轻提示「暂无明细」 | ✅ 已实现 |
| 加载中 | 滚动触底自动加载下一批 | ✅ 已实现 |
| 浮窗 | 规则/详情浮窗上滑动画,蒙版点击关闭 | ✅ 已实现 |
🔄 版本更新日志(共 1 次迭代)▶
v1.0我的积分落地页初始版本:余额卡 + 5 来源筛选 + 明细列表(分类详情浮窗字段各异)+ 积分规则浮窗(法务文案);入口接线 我的页 v2.16 / 积分商城 v2.67