9:41
神秘礼物
销毁进度0/ 5,000 张规则
还差 5,000 张解锁神秘礼物
神秘礼物待领取 ×1
伊索寓言·第二弹
未选发货物品
共10张
盗墓笔记·分隔页盲盒
未选发货物品
共10张
希腊神话·神谕
未选发货物品
共10张
安徒生童话·溯光
未选发货物品
共10张
哪吒传奇·第一弹
未选发货物品
共10张
红楼梦·大观共沉酣
未选发货物品
共10张
梦境爱丽丝·镜中奇幻
未选发货物品
共10张
一千零一夜·绘境
未选发货物品
共10张
星有野·第一弹
未选发货物品
共10张
聊斋志异·百相集
未选发货物品
共10张
格林童话·星愿
未选发货物品
共10张
已选发货数量
0 0
申请发货成功
发货订单已生成 · 即将返回列表
1
顶部导航
草莓粉纯色头部。左侧胶囊按钮组(返回上一页 + 回首页);居中白字标题「我的赏袋」;右侧模拟微信胶囊(不可点击)
2
搜索栏
白色圆角搜索框 placeholder「搜索系列名称」,按系列名实时过滤列表(前端过滤,大小写不敏感 + trim)。有输入时右侧出现清空按钮,点击一键清空恢复全部;无结果显示空态提示「未找到相关系列,换个关键词试试」;聚焦时边框粉色高亮
3
销毁进度卡(骑墙卡 + 规则入口)
常驻卡片骑在头部下沿(白卡一半叠在粉色 header 上):神秘礼物图 + 累计销毁数字(X / 5,000 张)+ 粉色进度条(实时百分比)+ 副文案「还差 N 张解锁神秘礼物」。满 5,000 时进度清零重计(余数保留)并切换金色高亮「神秘礼物已解锁!继续销毁可再次获得」。有待领取礼物时卡片切换金色待领取态:「神秘礼物待领取 ×N」(N 可叠加)+「去领取」按钮。右上角「规则」按钮跳转规则说明落地页
4
系列卡片列表
按发售日期倒序排列。每张卡片含:圆形单选框(选中粉色填充 + 对勾动画)、封面图、系列名称(14px 加粗)、发货状态标签。仅「已选择发货」系列可勾选;点击卡片主体进入详情页,点击单选框勾选/取消。选中后粉色边框高亮 + 数量标签(卡牌张数/赏品个数两行)
5
底部操作栏
已选统计(卡牌张数 + 赏品个数,有选中时粉色加粗)。「全选」粉色描边按钮一键选中/取消所有可发货系列;无可发货系列时点击弹 Toast「暂无可发货的系列」。「下单发货」按钮:无选中时灰色置灰,点击弹 Toast「请先选择要发货的系列」;有选中时粉色可点击,弹出确认发货弹窗
6
确认发货弹窗
居中弹窗:卡牌数/赏品数统计块 + 「共 N 个系列」+ 所选系列名单 chips(浅粉底标签,超出可滚动)+ 收货地址卡片(默认地址自动带出,点击弹「选择收货地址」抽屉可切换/新增;无地址显示「请选择收货地址」)。点击「确认发货」→ 无地址先 Toast 提示 → 按钮变「提交中...」置灰不可重复点击 → 生成发货订单(含地址快照)→ 展示「申请发货成功」完成态 → 清空发货数据 → 刷新列表。点击遮罩或「取消」关闭弹窗
7
申请发货成功完成态
确认发货后全屏展示完成态:粉色礼袋图标 + 标题「申请发货成功」+ 统计(N 个系列 · X 张卡牌 · Y 个赏品)+ 副文案「发货订单已生成 · 即将返回列表」,约 1.6s 后自动刷新列表。背景半透明白粉 + 模糊,仅盖手机框架
8
神秘礼物领取(去领取 / 地址卡片 / 新增跳转)
触发源为详情页销毁:满 5,000 先计入待领取(可叠加),详情页弹「神秘礼物已解锁」询问是否领取。本页进度卡「去领取」一键领取全部待领取礼物(合并生成一张订单,神秘礼物 ×N):有地址(默认/已选)→ 确认弹窗显示收货地址卡片(可点开切换)→ 直接领取生成发货订单(含地址快照);无地址 → 「去添加地址」跳「我的地址」页自动打开新增表单,保存返回自动继续领取。领取弹窗可「稍后查看」或「查看订单」跳转订单页
📋 说明面板 / 开发交付文档 — 我的赏袋列表页 v2.29
📌 功能概述

我的赏袋(列表页):按发售日期倒序展示用户拥有的系列,支持按系列名搜索过滤;从详情页勾选发货物品后返回,可对「已选择发货」的系列批量全选并下单发货(确认弹窗展示卡牌/赏品/系列数),确认后清空发货数据并刷新列表。点击卡片主体进入对应系列详情页。

页面同时承载卡牌销毁体系:顶部常驻「销毁进度卡」展示累计销毁张数(X / 5,000 张),满 5,000 解锁神秘礼物;礼物先计入待领取(可叠加、不丢),通过进度卡「去领取」一键领取全部并生成发货订单(有收货地址直接生成,无地址先引导填写)。

🧱 页面结构
模块内容数据来源
顶部导航草莓粉纯色头部:左侧胶囊(返回小程序「我的」+ 首页)、标题「我的赏袋」、右侧微信胶囊固定(小程序统一)
搜索栏白色圆角搜索框(placeholder「搜索系列名称」),按系列名实时过滤 + 清空按钮 + 空态提示前端过滤(输入即筛)
销毁进度卡骑墙卡(白卡骑在粉色 header 下沿):神秘礼物图 + 销毁进度数字/进度条/剩余文案 + 规则按钮;满 5,000 金色高亮;有待领取礼物时金色待领取态「待领取 ×N」+「去领取」按钮本地累计销毁记录 + 待领取礼物数
系列卡片列表11 个系列按发售日期倒序(仅展示赏袋内产品数 > 0 的系列,产品数为 0 不显示):单选框、封面图、系列名、发货状态标签、数量标签静态 HTML + 本地发货数据(shipData)
底部操作栏已选统计(卡牌张数 + 赏品个数)、「全选」、「下单发货」勾选状态 + 发货数据汇总
确认发货弹窗卡牌数/赏品数统计块 + 共 N 个系列 + 系列名单 chips + 取消/确认勾选系列汇总
神秘礼物弹窗「领取成功」弹窗(礼物图 + 稍后查看/查看订单);无地址时跳「我的地址」页新增,保存返回自动领取localStorage wms_addresses(与我的地址页共享)+ 神秘礼物订单
📋 功能说明(需求)
  • 系列展示:赏袋内产品数量为 0 的系列,列表页不显示对应系列卡片(仅展示已抽到卡牌/赏品的系列)
  • 批量发货:列表仅展示「未选发货物品 / 已选择发货」两种状态;仅「已选择发货」系列可勾选;支持全选/取消全选;「下单发货」无选中时置灰并提示,有选中时弹确认弹窗(卡牌数/赏品数/共 N 个系列/系列名单/收货地址卡片);确认后生成发货订单(来源「我的赏袋」、含地址快照)、清空发货数据并刷新列表
  • 搜索过滤:按系列名实时搜索过滤,无结果时展示空态提示;清空按钮一键恢复全部
  • 销毁进度:累计销毁卡牌张数(触发源为详情页销毁,本页无销毁入口),满 5,000 解锁神秘礼物,进度清零重计(余数保留);进度卡实时展示剩余张数
  • 神秘礼物:解锁后先计入待领取(可叠加、不丢);进度卡「去领取」一次领取全部待领取礼物,合并生成一张发货订单(神秘礼物 ×N);领取需有收货地址——有地址(默认/已选)确认弹窗显示地址卡片可直接领取或切换;无地址跳「我的地址」页新增(自动打开添加表单),保存返回自动继续领取,取消则保持待领取
  • 规则入口:进度卡右上角「规则」按钮,跳转规则说明页(销卡说明 + 神秘礼物说明,法务审核文案)
🖱️ 交互行为
操作页面行为影响范围
点击卡片主体跳转详情页(携带系列名参数)详情页
点击单选框仅「已选择发货」系列可勾选/取消,选中粉色高亮 + 数量标签 + 更新统计该卡片 + 底部栏
全选一键选中/取消所有「已选择发货」系列;无任何可发货系列时 Toast「暂无可发货的系列」全部可勾选卡片
搜索输入/清空实时过滤列表;清空按钮一键恢复;无结果空态提示列表
下单发货无勾选时置灰 + Toast「请先选择要发货的系列」;有勾选时弹出确认弹窗弹窗
确认发货无地址先 Toast「请先选择收货地址」;有地址 → 按钮变「提交中...」置灰 → 生成发货订单(含地址快照)→ 展示「申请发货成功」完成态(礼袋图标 + 统计,1.6s 后自动刷新)→ 清空发货数据 → 刷新列表本地数据 + 列表 + 完成态动画
进度卡「去领取」有待领取礼物时金色待领取态;点击弹领取确认(显示收货地址卡片):有地址可直接领取/切换地址;无地址「去添加地址」跳地址页新增,保存返回自动领取;领完恢复普通进度待领取数 + 神秘礼物订单
收货地址卡片确认弹窗内地址卡片点击弹「选择收货地址」抽屉(单选列表 + 新增入口);点选即选中返回弹窗;「+ 新增地址」跳我的地址页(?add=1)新增,保存返回自动选中wms_addresses + 弹窗
领取弹窗按钮「稍后查看」关闭弹窗;「查看订单」跳转小程序我的订单页弹窗 / 订单页
取消 / 点遮罩关闭对应弹窗弹窗
📐 数据口径
  • 排序:按发售日期倒序(2026-07-19 → 2025-08-28)
  • 发货状态:详情页已选择过发货物品的系列 =「已选择发货」(可勾选,展示卡牌张数/赏品个数);未选择过 =「未选发货物品」(不可勾选)
  • 已选统计:勾选系列对应发货数据的卡牌张数 + 赏品个数累加,任一大于 0 时粉色加粗
  • 全选范围:仅「已选择发货」系列;无此类系列时按钮无反应并 Toast 提示
  • 销毁进度:累计销毁卡牌张数(0 ~ 5,000),满 5,000 清零重计(余数保留);仅刷新/新开页面归零,应用内跳转(详情 ↔ 列表)保留累计
  • 待领取礼物:已解锁未领取的神秘礼物数(可叠加);「去领取」一次全部领取(置 0)并合并为一张订单(神秘礼物 ×N)
  • 神秘礼物订单:来源「我的赏袋」、状态「待发货」、含神秘礼物 ×N 与收货地址;订单页读取展示
  • 默认地址:领取充要条件 = 有收货地址;有地址自动生成订单,无地址先引导填写,取消则保持待领取
❌ 错误提示清单
页面按钮/操作场景提示文案
列表页下单发货未勾选任何系列请先选择要发货的系列
列表页全选无任何「已选择发货」系列暂无可发货的系列
列表页进度卡「去领取」无待领取的神秘礼物暂无待领取的神秘礼物
列表页确认发货无收货地址Toast「请先选择收货地址」
列表页神秘礼物领取无收货地址「去添加地址」跳我的地址页新增(保存返回自动领取)
列表页地址选择抽屉地址列表为空空态「暂无收货地址,请先新增」+ 新增入口
🔲 状态说明
🔄 版本更新日志
状态说明完成情况
默认展示全部系列(赏袋内产品数 > 0 才显示卡片),状态为「未选发货物品」✅ 已实现
系列产品数为 0赏袋内产品数量为 0 的系列,列表页不显示对应系列卡片✅ 已实现
已选择发货标签「已选择发货」+ 卡牌/赏品数量两行展示,可勾选✅ 已实现
销毁进度未满进度卡粉色进度条 + 「还差 N 张解锁神秘礼物」✅ 已实现
销毁进度已满进度卡金色高亮「神秘礼物已解锁!继续销毁可再次获得」,进度清零重新累计✅ 已实现
礼物待领取进度卡金色待领取态「神秘礼物待领取 ×N」+「去领取」按钮,可随时补领✅ 已实现
无默认地址去领取时先弹地址表单;填写后生成订单并领取,取消则礼物保持待领取✅ 已实现
搜索空态无结果显示「未找到相关系列,换个关键词试试」;清空按钮一键恢复✅ 已实现
disabled发货按钮无勾选时置灰,点击弹 Toast 提示✅ 已实现
loading确认发货按钮「提交中...」置灰防重复点击✅ 已实现
完成态申请发货成功完成态(礼袋图标 + 统计),1.6s 后自动刷新列表✅ 已实现