万漫社 - 积分商城 v2.2

我的积分

12,800积分

首页

积分商城

抽卡机

手册

我的

兑换数量

合计

商品列表页

搜索栏

标题右侧玻璃胶囊搜索框，按商品名称模糊实时过滤，可与 IP 筛选叠加；有输入时显示 ✕ 清空按钮

IP 筛选（胶囊行 + 抽屉）

一行胶囊（「全部」固定第一 + 最多 3 个 IP，选中粉高亮，溢出渐隐）；点右侧展开按钮，下方弹出方形按钮抽屉展示全部 IP（带 logo）+ 蒙版锁定列表，点选即筛

商品卡片（瀑布流）

两列瀑布流高度自适应，状态差异化：在售（彩色）/预售（粉氛围+发售时间水印）/预告（白底粉边标签+???积分）/售罄（白纱+价格变灰）。左上毛玻璃状态标签+新品，右上锁徽标=限购，图片底部白渐变衔接，价格行=价格（左）+剩余库存（右，≤10 橙色）。卡片无按钮，点击进详情操作

抢票倒计时（临近发售 ≤24h）

预售品距发售 ≤24h 时：卡片图片底部水印变为「距开售 HH:MM:SS」红色大字（秒级跳动）；详情页发售时间行变为大号红色倒计时+发售日期；倒计时归零自动切换为在售/立即兑换，无需刷新。列表排序中临近预售置顶（快开的在前）

积分余额条（吸底）

品牌粉渐变胶囊条吸底在 Tab 上方：钻石图标+我的积分+余额+「兑换记录 →」按钮

底部 Tab 导航

首页/积分商城/抽卡机/直播手册/我的，均跳 /latest/，当前页高亮

商品详情页

详情信息区

名称（20px）/ 价格（26px 深粉）+ 状态标签（在售浅粉底深粉字 / 预售深粉实底 / 预告粉实底 / 售罄灰；在售+新品并存时仅显示新品）→ 品种 chips（白底深粉描边）→ 发售时间（临近≤24h 变倒计时）→ 库存+已兑数（数字深粉加粗）→ 限购 → 浅粉分隔线 → 退货说明。空气感分段，无粉底横条无虚线

立即兑换 → 选择规格悬浮窗

点击底部「立即兑换」后，底部弹出「选择规格」悬浮窗（白卡圆角上滑），内含步进器选数量 + 限购提示 + 「确认兑换」按钮；校验通过后弹出二次确认窗

商品详情卡片

兑换说明下方新增「商品详情」白卡，用对应商品的长图填充，完整展示商品细节

通知我（预售）

预售商品按钮切换「通知我/已通知」（铃铛图标），toast 提示「已开启通知，发售时将提醒你」；可取消。倒计时归零后自动变为「立即兑换」

📋 说明面板 / 开发交付文档 — 积分商城 v2.2▶

📌 功能概述

商品列表页

搜索 + IP 筛选 + 瀑布流浏览积分商品，状态差异化展示，点卡片进入详情；底部吸底余额条常驻。

商品详情页

橱窗多图 + 价格卡 + 信息卡 + 兑换说明 + 商品详情图 + 底部操作栏；在售「立即兑换」弹出底部规格选择悬浮窗，预售「通知我」订阅，预告/售罄置灰。删除了服务保障条和兑换数量卡，标题卡新增退货说明。

🧱 页面结构

商品列表页

模块	内容	数据来源
顶部导航	粉色渐变头部：居中标题「积分商城」（无返回）、小程序胶囊	固定（小程序统一）
搜索栏	独立一行（IP 筛选下方），玻璃胶囊，名称模糊查询	商品名称字段
IP 筛选栏	胶囊行（全部+IP logo）+ 展开抽屉（方形按钮网格）+ 蒙版	商品 IP 字段去重
商品瀑布流（2 列）	状态差异化卡片：方图、毛玻璃状态标签/新品、限购锁徽标、名称、价格+剩余库存、预售发售时间水印	D:\万漫社\03-C衍生品
积分余额条（吸底）	品牌粉渐变胶囊：钻石图标 + 我的积分 + 余额 + 兑换记录入口	用户积分账户（示例 12,800）
底部 Tab	首页 / 积分商城 / 抽卡机 / 直播手册 / 我的（均跳 /latest/）	小程序导航

商品详情页

模块	内容	数据来源
顶部导航	商品图沉浸背景（封面图 + 深色渐变遮罩），返回/居中标题/小程序胶囊浮于图上	商品封面图
商品橱窗	封面商品图（单图），无叠加标签（左上状态标签已移除）	cover 字段
价格 + 标题卡	上浮覆盖图片底部：名称（18px）、价格（预告无价格）+状态标签（在售浅粉底深粉字/预售/预告/售罄，虚线底分隔）+新品标签（与在售并存时仅新品）、粉底元信息条（品种 chips 白底深粉描边 / 发售时间 / 库存+已兑数 / 限购 / 退货说明），已删除独立规格表	积分商品表
兑换说明	卡片样式，7 条规则	固定文案
商品详情卡片	白卡 + 「商品详情」标题，用商品长图填充	detail 字段
底部操作栏	左：收藏/客服图标；右：合计 + 兑换/通知我/敬请期待/已售罄按钮；在售点击「立即兑换」弹出底部「选择规格」悬浮窗	售卖状态

📋 功能说明（需求）

商品列表页

搜索（名称模糊）+ IP 筛选（胶囊行 + 抽屉展开）浏览积分商品；两列瀑布流 + 状态差异化展示（在售/预售/预告/售罄）；限购商品锁徽标；卡片显示剩余库存；预售「通知我」订阅；排序：新品最前 → 在售 → 预售 → 预告 → 售罄；底部吸底余额条常驻。

商品详情页

橱窗多图 + 价格卡 + 信息卡 + 兑换说明 + 商品详情长图 + 底部操作栏；在售「立即兑换」→ 底部弹出「选择规格」悬浮窗 → 步进器选数量 → 确认兑换（校验库存/限购/积分）；预售显示发售时间与倒计时（临近 ≤24h 红色秒级跳动），归零自动切在售；预告「敬请期待」置灰、隐藏价格；售罄「已售罄」置灰；「不支持7天无理由退还」警示红加粗。

📐 数据口径

商品列表页

售卖状态（优先级）：预告标记 → 预告；库存=0 → 售罄；发售时间＞当前 → 预售；≤当前 → 在售。
发售时间：统一为发售日期当天 12:00:00（v2.0 口径），示例「2026-08-08」→ 08-08 12:00 开售。
抢票倒计时：预售品距发售 ≤24h 触发，列表卡片 + 详情页显示「距开售 HH:MM:SS」；秒级刷新（本地时间）；归零自动切在售。
新品：在售中发售时间最新者（可多条），卡片左上角粉渐变「新品」标签。
排序（v2.0）：临近预售（≤24h，快开在前）→ 在售新品 → 在售（发售倒序）→ 普通预售（发售正序，快发售在前）→ 预告 → 售罄沉底（发售倒序）。
限购：上限=限购量−已兑换；卡片右上角锁徽标（无文字），数量在详情页说明。
库存：卡片副行显示剩余（在售「剩 N 件」，≤10 橙色「仅剩 N 件」）；预售/售罄不显示。
搜索/筛选：名称模糊 + IP 双重过滤，取交集。

商品详情页

兑换校验：状态（在售）→ 限购（限购量−已兑换）→ 库存 → 余额，逐级拦截。
预售订阅：「通知我」后发售时提醒，可取消；预售不可兑换；倒计时归零自动切「立即兑换」。
图片：封面→方图；详情→详情图；来自 D:\万漫社\03-C衍生品\积分商品\，服务端路由 /derivative-img/。

🖱️ 交互行为

商品列表页

操作	行为	影响范围
搜索	名称模糊实时过滤（不区分大小写），与 IP 筛选叠加；✕ 清空	商品列表
IP 筛选	胶囊选中/再点取消回全部；展开抽屉（方形按钮）看全部 IP；蒙版关闭	商品列表、筛选状态
点击卡片	进入商品详情页	视图切换
兑换记录	跳转我的-我的积分（toast 模拟）	路由跳转

商品详情页

操作	行为	影响范围
返回	回列表页并关闭悬浮窗	视图切换
立即兑换（在售）	底部弹出「选择规格」悬浮窗 → 步进器选数量 → 「确认兑换」校验余额/限购/库存 → 二次确认窗 → 扣积分、减库存、同步更新已兑数	积分余额、库存、售卖状态、兑换总数
通知我（预售）	切换订阅状态，toast 提示「已开启通知，发售时将提醒你」；已通知可取消；临近发售 ≤24h 时发售行显示倒计时，归零自动变「立即兑换」	订阅状态、倒计时状态
售罄/预告	按钮置灰不可点（已售罄/敬请期待）	兑换按钮

🔲 状态说明

商品列表页

状态	完成
默认	✅ 骨架屏 400ms 后渲染瀑布流
Loading	✅ 骨架屏闪烁
Empty	✅ 空态插画+文案（搜索时「未找到相关商品」，IP 筛选时「暂无该 IP 的积分商品」）
Error	✅ 图片 onerror 兜底
在售	✅ 彩色图 + 深粉价格 + 新品粉渐变标签；卡片无按钮
预售	✅ 粉氛围渐变 + 深粉「预售」标签 + 图片底部发售时间水印；临近 ≤24h 水印变红色倒计时「距开售 HH:MM:SS」；卡片无按钮
预告	✅ 白底粉边「预告」标签 + 「??? 积分」；卡片无按钮
售罄	✅ 白纱遮罩 + 灰「售罄」标签 + 价格变灰，排最后；卡片无按钮

商品详情页

状态	完成
在售	✅ 绿色✓「在售」标签、详情信息完整、「立即兑换」→底部弹出选择规格悬浮窗→校验→确认窗→扣积分
预售	✅ 详情信息+发售时间（临近≤24h 显示红色大号倒计时+日期）、「通知我」铃铛按钮；归零自动切「立即兑换」
预告	✅ 标题卡「即将发售」、无价格、按钮置灰「敬请期待」
售罄	✅ 库存 0、按钮置灰「已售罄」
限购达上限	✅ 悬浮窗内步进器 + 置灰 + toast 提示
积分不足	✅ toast 提示

❌ 错误提示清单

页面	按钮/操作	场景	提示
列表页	兑换	积分不足	toast「积分不足」
详情页	立即兑换	限购达上限	悬浮窗步进器置灰 + toast 提示
详情页	立即兑换	库存为 0	按钮置灰「已售罄」
列表页	搜索	无匹配商品	空态「未找到相关商品」
列表页	IP 筛选	该 IP 无积分商品	空态「暂无该 IP 的积分商品」
列表页/详情页	图片加载	图片加载失败	onerror 兜底图

🔄 版本更新日志（v1.6 ~ v2.2，共 7 次迭代）▶