📌 功能概述
我的赏袋(列表页):按发售日期倒序展示用户拥有的系列,支持按系列名搜索过滤;从详情页勾选发货物品后返回,可对「已选择发货」的系列批量全选并下单发货(确认弹窗展示卡牌/赏品/系列数),确认后清空发货数据并刷新列表。点击卡片主体进入对应系列详情页。
页面同时承载卡牌销毁体系:顶部常驻「销毁进度卡」展示累计销毁张数(X / 5,000 张),满 5,000 解锁神秘礼物;礼物先计入待领取(可叠加、不丢),通过进度卡「去领取」一键领取全部并生成发货订单(有收货地址直接生成,无地址先引导填写)。
🧱 页面结构
| 模块 | 内容 | 数据来源 |
| 顶部导航 | 草莓粉纯色头部:左侧胶囊(返回小程序「我的」+ 首页)、标题「我的赏袋」、右侧微信胶囊 | 固定(小程序统一) |
| 搜索栏 | 白色圆角搜索框(placeholder「搜索系列名称」),按系列名实时过滤 + 清空按钮 + 空态提示 | 前端过滤(输入即筛) |
| 销毁进度卡 | 骑墙卡(白卡骑在粉色 header 下沿):神秘礼物图 + 销毁进度数字/进度条/剩余文案 + 规则按钮;满 5,000 金色高亮;有待领取礼物时金色待领取态「待领取 ×N」+「去领取」按钮 | 本地累计销毁记录 + 待领取礼物数 |
| 系列卡片列表 | 11 个系列按发售日期倒序(仅展示赏袋内产品数 > 0 的系列,产品数为 0 不显示):单选框、封面图、系列名、发货状态标签、数量标签 | 静态 HTML + 本地发货数据(shipData) |
| 底部操作栏 | 已选统计(卡牌张数 + 赏品个数)、「全选」、「下单发货」 | 勾选状态 + 发货数据汇总 |
| 确认发货弹窗(底部浮窗 v2.31) | 底部上滑浮窗:顶部拖动条 + 标题 + 卡牌数/赏品数统计块 + 共 N 个系列 + 系列名单 chips + 收货地址卡片 + 取消/确认按钮;内容超高时浮窗内部滚动(地址信息完整展示) | 勾选系列汇总 + wms_addresses |
| 神秘礼物弹窗 | 「领取成功」弹窗(礼物图 + 稍后查看/查看订单);无地址时跳「我的地址」页新增,保存返回自动领取 | localStorage wms_addresses(与我的地址页共享)+ 神秘礼物订单 |
📋 功能说明(需求)
- 系列展示:赏袋内产品数量为 0 的系列,列表页不显示对应系列卡片(仅展示已抽到卡牌/赏品的系列)
- 批量发货:列表仅展示「未选发货物品 / 已选择发货」两种状态;仅「已选择发货」系列可勾选;支持全选/取消全选;「下单发货」无选中时置灰并提示,有选中时弹确认弹窗(卡牌数/赏品数/共 N 个系列/系列名单/收货地址卡片);确认后生成发货订单(来源「我的赏袋」、含地址快照)、清空发货数据并刷新列表
- 搜索过滤:按系列名实时搜索过滤,无结果时展示空态提示;清空按钮一键恢复全部
- 销毁进度:累计销毁卡牌张数(触发源为详情页销毁,本页无销毁入口),满 5,000 解锁神秘礼物,进度清零重计(余数保留);进度卡实时展示剩余张数
- 神秘礼物:解锁后先计入待领取(可叠加、不丢);进度卡「去领取」一次领取全部待领取礼物,合并生成一张发货订单(神秘礼物 ×N);领取需有收货地址——有地址(默认/已选)确认弹窗显示地址卡片可直接领取或切换;无地址跳「我的地址」页新增(自动打开添加表单),保存返回自动继续领取,取消则保持待领取
- 规则入口:进度卡右上角「规则」按钮,跳转规则说明页(销卡说明 + 神秘礼物说明,法务审核文案)
🖱️ 交互行为
| 操作 | 页面行为 | 影响范围 |
| 点击卡片主体 | 跳转详情页(携带系列名参数) | 详情页 |
| 点击单选框 | 仅「已选择发货」系列可勾选/取消,选中粉色高亮 + 数量标签 + 更新统计 | 该卡片 + 底部栏 |
| 全选 | 一键选中/取消所有「已选择发货」系列;无任何可发货系列时 Toast「暂无可发货的系列」 | 全部可勾选卡片 |
| 搜索输入/清空 | 实时过滤列表;清空按钮一键恢复;无结果空态提示 | 列表 |
| 下单发货 | 无勾选时置灰 + Toast「请先选择要发货的系列」;有勾选时弹出确认弹窗 | 弹窗 |
| 确认发货 | 确认弹窗为底部浮窗(上滑动画,蒙版点击关闭):无地址先 Toast「请先选择收货地址」;有地址 → 按钮变「提交中...」置灰 → 生成发货订单(含地址快照)→ 展示「申请发货成功」完成态(礼袋图标 + 统计,1.6s 后自动刷新)→ 清空发货数据 → 刷新列表 | 本地数据 + 列表 + 完成态动画 |
| 进度卡「去领取」 | 有待领取礼物时金色待领取态;点击弹领取确认(显示收货地址卡片):有地址可直接领取/切换地址;无地址「去添加地址」跳地址页新增,保存返回自动领取;领完恢复普通进度 | 待领取数 + 神秘礼物订单 |
| 收货地址卡片 | 确认弹窗内地址卡片点击弹「选择收货地址」抽屉(单选列表 + 新增入口);点选即选中返回弹窗;「+ 新增地址」跳我的地址页(?add=1)新增,保存返回自动选中 | wms_addresses + 弹窗 |
| 领取弹窗按钮 | 「稍后查看」关闭弹窗;「查看订单」跳转小程序我的订单页 | 弹窗 / 订单页 |
| 离开列表页再回来 | 从详情页返回 → 保留已选发货状态(v2.30 起用 sessionStorage 标记,加载时先判标记再渲染);从首页/规则/我的等其他页面返回 → 清空发货选择(含浏览器后退 BFCache 兜底,pageshow 监听强制清理重载) | 列表 + localStorage shipData |
| 取消 / 点遮罩 | 关闭对应弹窗 | 弹窗 |
📐 数据口径
- 排序:按发售日期倒序(2026-07-19 → 2025-08-28)
- 发货状态:详情页已选择过发货物品的系列 =「已选择发货」(可勾选,展示卡牌张数/赏品个数);未选择过 =「未选发货物品」(不可勾选)
- 已选统计:勾选系列对应发货数据的卡牌张数 + 赏品个数累加,任一大于 0 时粉色加粗
- 全选范围:仅「已选择发货」系列;无此类系列时按钮无反应并 Toast 提示
- 销毁进度:累计销毁卡牌张数(0 ~ 5,000),满 5,000 清零重计(余数保留);仅刷新/新开页面归零,应用内跳转(详情 ↔ 列表)保留累计
- 待领取礼物:已解锁未领取的神秘礼物数(可叠加);「去领取」一次全部领取(置 0)并合并为一张订单(神秘礼物 ×N)
- 神秘礼物订单:来源「我的赏袋」、状态「待发货」、含神秘礼物 ×N 与收货地址;订单页读取展示
- 默认地址:领取充要条件 = 有收货地址;有地址自动生成订单,无地址先引导填写,取消则保持待领取
❌ 错误提示清单
| 页面 | 按钮/操作 | 场景 | 提示文案 |
| 列表页 | 下单发货 | 未勾选任何系列 | 请先选择要发货的系列 |
| 列表页 | 全选 | 无任何「已选择发货」系列 | 暂无可发货的系列 |
| 列表页 | 进度卡「去领取」 | 无待领取的神秘礼物 | 暂无待领取的神秘礼物 |
| 列表页 | 确认发货 | 无收货地址 | Toast「请先选择收货地址」 |
| 列表页 | 神秘礼物领取 | 无收货地址 | 「去添加地址」跳我的地址页新增(保存返回自动领取) |
| 列表页 | 地址选择抽屉 | 地址列表为空 | 空态「暂无收货地址,请先新增」+ 新增入口 |
🔲 状态说明
🔄 版本更新日志▶
v2.32确认发货弹窗地址卡补「默认」标签(默认地址在姓名旁显示粉色「默认」角标,与地址选择抽屉一致)
v2.31确认发货弹窗改底部浮窗:300px 居中弹窗 → 底部上滑浮窗(拖动条 + 标题 + 可滚动内容区),收货地址卡片完整展示不再挤压;内容超高时浮窗内部滚动;蒙版点击关闭
v2.30修复发货选择回显:列表页加载改为「先判来源再渲染」(sessionStorage fromDetail 标记,详情页返回才保留已选),不再先渲染后清理(原 bug:从其他页面跳回时 DOM 已渲染「已选择发货」但 localStorage 已清);新增 pageshow 监听兜底浏览器后退 BFCache(页面从缓存恢复不执行 JS,强制清空 + 重载)
v2.29地址体系升级:地址改为全局「我的地址」页管理(localStorage wms_addresses,含省市区/默认开关/上限10/增删改);神秘礼物领取确认弹窗显示收货地址卡片(默认自动带出,可切换/新增);发货申请确认弹窗加收货地址卡片;无地址时跳「我的地址」页新增(?add=1 自动打开表单),保存返回自动继续领取/发货;确认发货/领取生成订单均存地址快照(写入 mysteryOrders,我的订单-发货订单可查看);移除旧版返回清空 defaultAddr 演示逻辑
v2.28神秘礼物领取流程:默认无地址(列表页加载清空 defaultAddr)→ 无地址时填地址表单;填过地址即算有地址 → 解锁/确认弹窗合并(显示收货地址 + 修改地址/直接领取,减少弹窗层级:解锁→表单(可选)→成功);列表页点返回清空地址(演示闭环);说明面板去 sticky;列表页/详情页领取弹窗统一(index 补 .dd-warn + od-btn.cancel 灰底→粉边框)
v2.27操作按钮圆角统一 24px:销毁卡领取按钮 12→24、订单弹窗 od-btn 22→24、btn-outline/btn-primary 22→24;领取按钮颜色统一:金色渐变→纯色 #D96E89 白字
v2.26卡牌/赏品卡片图片下方两角改直角(详情页,本次)
v2.25赏品 Tab 卡片与卡牌一致:不显示赏品名称(详情页)
| 状态 | 说明 | 完成情况 |
| 默认 | 展示全部系列(赏袋内产品数 > 0 才显示卡片),状态为「未选发货物品」 | ✅ 已实现 |
| 系列产品数为 0 | 赏袋内产品数量为 0 的系列,列表页不显示对应系列卡片 | ✅ 已实现 |
| 已选择发货 | 标签「已选择发货」+ 卡牌/赏品数量两行展示,可勾选 | ✅ 已实现 |
| 销毁进度未满 | 进度卡粉色进度条 + 「还差 N 张解锁神秘礼物」 | ✅ 已实现 |
| 销毁进度已满 | 进度卡金色高亮「神秘礼物已解锁!继续销毁可再次获得」,进度清零重新累计 | ✅ 已实现 |
| 礼物待领取 | 进度卡金色待领取态「神秘礼物待领取 ×N」+「去领取」按钮,可随时补领 | ✅ 已实现 |
| 无默认地址 | 去领取时先弹地址表单;填写后生成订单并领取,取消则礼物保持待领取 | ✅ 已实现 |
| 搜索空态 | 无结果显示「未找到相关系列,换个关键词试试」;清空按钮一键恢复 | ✅ 已实现 |
| disabled | 发货按钮无勾选时置灰,点击弹 Toast 提示 | ✅ 已实现 |
| loading | 确认发货按钮「提交中...」置灰防重复点击 | ✅ 已实现 |
| 完成态 | 申请发货成功完成态(礼袋图标 + 统计),1.6s 后自动刷新列表 | ✅ 已实现 |