我的积分
12,800积分
确认兑换
商品列表页
1
搜索栏
标题右侧玻璃胶囊搜索框，按商品名称模糊实时过滤，可与 IP 筛选叠加；有输入时显示 ✕ 清空按钮
2
IP 筛选（胶囊行 + 抽屉）
一行胶囊（「全部」固定第一 + 最多 3 个 IP，选中粉高亮，溢出渐隐）；点右侧展开按钮，下方弹出方形按钮抽屉展示全部 IP（带 logo）+ 蒙版锁定列表，点选即筛
3
商品卡片（瀑布流）
两列瀑布流高度自适应，状态差异化：在售（彩色）/预售（粉氛围+「08.18 发售」底部水印）/预告（白底粉边标签+???积分）/售罄（白纱+价格变灰）。左上毛玻璃状态标签+新品，右上锁徽标=限购，图片底部白渐变衔接，价格行=价格（左）+剩余库存（右，≤10 橙色）。卡片无按钮，点击进详情操作
4
积分余额条（吸底）
品牌粉渐变胶囊条吸底在 Tab 上方：钻石图标+我的积分+余额+「兑换记录 →」按钮
5
底部 Tab 导航
首页/积分商城/抽卡机/直播手册/我的，均跳 /latest/，当前页高亮
商品详情页
6
详情信息区
详情图、毛玻璃状态标签、名称/种类、价格、状态说明、发售时间、库存、限购锁徽标+数量、兑换说明
7
步进器 ±
调整兑换数量，达限购上限/库存后 + 置灰；预售/预告/售罄禁用
8
立即兑换
校验余额/限购/库存→确认窗→扣积分、减库存；成功后更新余额
9
通知我（预售）
预售商品按钮切换「通知我/已通知」（铃铛图标），toast 提示「已开启通知，发售时将提醒你」；可取消
📋 说明面板 / 开发交付文档 — 积分商城 v1.6▶
📌 功能概述
商品列表页
搜索 + IP 筛选 + 瀑布流浏览积分商品，状态差异化展示，点卡片进入详情；底部吸底余额条常驻。
商品详情页
橱窗多图 + 价格卡 + 服务保障 + 信息卡 + 兑换说明 + 底部操作栏；在售「立即兑换」，预售「通知我」订阅，预告/售罄置灰。
v1.6 迭代（2026-08-04）：标题旁新增玻璃搜索栏（名称模糊查询）；IP 筛选改为胶囊行 + 展开抽屉（方形按钮 + 蒙版）；积分余额条改吸底品牌粉渐变条；商品卡片改两列瀑布流 + 状态差异化（在售/预售/预告/售罄）；限购用锁徽标（无文字）；卡片显示剩余库存；预售不可兑换改为「通知我」订阅；排序改为新品最前 → 在售 → 预售 → 预告 → 售罄；图标全面换成本地 @icon-park/svg 官方 SVG（无 CDN 依赖）。
🧱 页面结构
商品列表页
| 模块 | 内容 | 数据来源 |
|---|---|---|
| 顶部导航 | 粉色渐变头部：居中标题「积分商城」（无返回）、小程序胶囊 | 固定（小程序统一） |
| 搜索栏 | 独立一行（IP 筛选下方），玻璃胶囊，名称模糊查询 | 商品名称字段 |
| IP 筛选栏 | 胶囊行（全部+IP logo）+ 展开抽屉（方形按钮网格）+ 蒙版 | 商品 IP 字段去重 |
| 商品瀑布流（2 列） | 状态差异化卡片：方图、毛玻璃状态标签/新品、限购锁徽标、名称、价格+剩余库存、预售发售时间水印 | D:\万漫社\03-C衍生品 |
| 积分余额条（吸底） | 品牌粉渐变胶囊：钻石图标 + 我的积分 + 余额 + 兑换记录入口 | 用户积分账户（示例 12,800） |
| 底部 Tab | 首页 / 积分商城 / 抽卡机 / 直播手册 / 我的（均跳 /latest/） | 小程序导航 |
商品详情页
| 模块 | 内容 | 数据来源 |
|---|---|---|
| 顶部导航 | 商品图沉浸背景（封面图 + 深色渐变遮罩），返回/居中标题/小程序胶囊浮于图上 | 商品封面图 |
| 商品橱窗 | 封面商品图（单图），左上毛玻璃状态标签、右上限购锁徽标 | cover 字段 |
| 价格 + 标题卡 | 上浮覆盖图片底部：价格（??? 积分占位）、状态/新品标签、名称、种类 chips、发售时间 + 完整规格表（状态/发售时间/库存/限购/艺术家IP） | 积分商品表 |
| 服务保障条 | 官方正品 / 积分兑换 / 15日发货 / 不可退改（竖线分隔） | 固定文案 |
| 兑换数量卡 | 步进器 + 限购提示 | 数量 + 已兑换记录 |
| 兑换说明 | 卡片样式，7 条规则 | 固定文案 |
| 商品详情长图 | 卡片展示第二张图（详情长图，完整宽图） | detail 字段 |
| 底部操作栏 | 左：收藏/客服图标；右：合计 + 兑换/通知我/敬请期待/已售罄按钮 | 售卖状态 + 数量 |
📐 数据口径
商品列表页
- 售卖状态（优先级）：预告标记 → 预告；库存=0 → 售罄；发售时间＞当前 → 预售；≤当前 → 在售。
- 新品：在售中发售时间最新者（可多条），卡片左上角粉渐变「新品」标签。
- 排序：新品最前 → 在售（发售倒序）→ 预售（发售正序，快发售在前）→ 预告 → 售罄沉底。
- 限购：上限=限购量−已兑换；卡片右上角锁徽标（无文字），数量在详情页说明。
- 库存：卡片副行显示剩余（在售「剩 N 件」，≤10 橙色「仅剩 N 件」）；预售/售罄不显示。
- 搜索/筛选：名称模糊 + IP 双重过滤，取交集。
商品详情页
- 兑换校验：状态（在售）→ 限购（限购量−已兑换）→ 库存 → 余额，逐级拦截。
- 预售订阅：「通知我」后发售时提醒，可取消；预售不可兑换。
- 图片：封面→方图；详情→详情图；来自
D:\万漫社\03-C衍生品\积分商品\，服务端路由/derivative-img/。
🖱️ 交互行为
商品列表页
| 操作 | 行为 | 影响范围 |
|---|---|---|
| 搜索 | 名称模糊实时过滤（不区分大小写），与 IP 筛选叠加；✕ 清空 | 商品列表 |
| IP 筛选 | 胶囊选中/再点取消回全部；展开抽屉（方形按钮）看全部 IP；蒙版关闭 | 商品列表、筛选状态 |
| 点击卡片 | 进入商品详情页 | 视图切换 |
| 兑换记录 | 跳转 我的-我的积分（toast 模拟） | 路由跳转 |
商品详情页
| 操作 | 行为 | 影响范围 |
|---|---|---|
| 返回 | 回列表页并重渲染 | 视图切换 |
| 步进器 ± | 调整兑换数量，达限购上限后 + 置灰 | 数量、合计、按钮 |
| 立即兑换 | 校验余额/限购/库存→确认窗→扣积分、减库存 | 积分余额、库存、售卖状态 |
| 通知我（预售） | 切换订阅状态，toast 提示「已开启通知，发售时将提醒你」；已通知可取消 | 订阅状态 |
| 售罄/预告 | 按钮置灰不可点（已售罄/敬请期待） | 兑换按钮 |
🔲 状态说明
商品列表页
| 状态 | 完成 |
|---|---|
| 默认 | ✅ 骨架屏 400ms 后渲染瀑布流 |
| Loading | ✅ 骨架屏闪烁 |
| Empty | ✅ 空态插画+文案（搜索时「未找到相关商品」，IP 筛选时「暂无该 IP 的积分商品」） |
| Error | ✅ 图片 onerror 兜底 |
| 在售 | ✅ 彩色图 + 深粉价格 + 新品粉渐变标签；卡片无按钮 |
| 预售 | ✅ 粉氛围渐变 + 深粉「预售」标签 + 图片底部发售时间水印；卡片无按钮 |
| 预告 | ✅ 白底粉边「预告」标签 + 「??? 积分」；卡片无按钮 |
| 售罄 | ✅ 白纱遮罩 + 灰「售罄」标签 + 价格变灰，排最后；卡片无按钮 |
商品详情页
| 状态 | 完成 |
|---|---|
| 在售 | ✅ 详情信息完整、步进器可用、「立即兑换」校验+确认窗+扣积分 |
| 预售 | ✅ 详情信息+发售时间、「通知我」铃铛按钮、步进器禁用 |
| 预告 | ✅ 发售时间/价格未定、按钮置灰「敬请期待」、步进器禁用 |
| 售罄 | ✅ 库存 0、按钮置灰「已售罄」、步进器禁用 |
| 限购达上限 | ✅ 步进器 + 置灰 + toast 提示 |
| 积分不足 | ✅ toast 提示 |
🔧 技术实现
- 纯静态；数据为内置 mock（16 件，含
D:\万漫社\03-C衍生品真实方图+详情图） - 状态
new Date()实时推导；排序/搜索/筛选纯前端计算 - 图标：本地
@icon-park/svg官方 SVG 内联（搜索/钻石/锁/铃铛/购物袋/购物车/展开收起），无 CDN 依赖 - 瀑布流：flex 两列奇偶分列，卡片高度自适应内容
- 毛玻璃：搜索栏/状态标签
backdrop-filter，prefers-reduced-transparency回退实色 - 图片通过 8898 服务器路由
/derivative-img/转发 - 字体：寒蝉全圆体；可见滚动条（细）；浏览器背景
#E8E5E0与其他页面一致