新品速递
火爆新品《伊索寓言》 第二弹
通知我
全部商品
积分兑换
画画的棍子 MINI版画
1900积分
Gua老师 MINI版画
1900积分
安徒生联名镭射票
800积分
直播手册
收藏手册
希腊神话·神谕 收藏手册
7月25日更新
›
9:41
新品预告
画画的棍子
小小卡第一弹
小小卡第一弹
8月7日 · 限量上线
王小贱
黄金会员1280 积分
火爆新品Banner 轮播
1
轮播图
3 张大图自动轮播（3s 间隔），点圆点手动切换，标题文案随图切换
2
新品预告
轮播文案区：标签 + 标题 + 副标题（限量上线时间）
用户信息
3
会员信息条
头像 + 昵称 + 黄金会员 + 1280 积分
4
扫码兑换
进入扫码兑换流程（原型示意）
新品速递
5
新品卡
热卖商品《伊索寓言》第二弹，2026.07.19 正在热卖
6
通知我
订阅开售提醒，toast「已开启通知，发售时将提醒您」（原型示意）
全部商品
7
全部商品轮播
露边单卡轮播：中间大卡 + 左右露出相邻小卡（84% 宽 + 8% 露边），底部 3 张卡牌图，左右滑动循环、指示点跳转，发售时间最新在前（10 款）
8
卡牌图区
每款商品卡片底部展示 3 张真实卡牌图（竖版 3:4，源：D:\万漫社 01-A卡牌类 各系列卡面，/card-src/ 路由）
积分兑换
9
积分商品
3 款积分商品（限量徽章 800 / 麻辣迪迪 1200 / 爱丽丝盲盒 1500 积分），点击进详情（原型示意）
直播手册
10
收藏手册
《希腊神话·神谕 收藏手册》7月25日更新，入口卡片
底部 Tab
11
Tab 栏
首页（高亮）/ 积分商城 / 抽卡机（中心凸起）/ 手册 / 我的
📋 说明面板 / 开发交付文档 — 首页 v7.8▶
📌 功能概述
一句话
小程序首页 = Banner 轮播 + 用户信息 + 新品速递 + 全部商品（单卡轮播 + 3 卡图）+ 积分兑换 + 直播手册。
页面说明
顶部大图轮播（自动播放 + 圆点切换 + 新品预告文案）；用户条展示昵称/会员等级/积分 + 「扫码兑换」（点会员卡跳会员信息页）；新品速递卡展示热卖商品《伊索寓言》第二弹（「通知我」=订阅切换）；「全部商品」全宽单卡轮播（一次一张大卡 + 底部 3 张卡牌图）；「积分兑换」展示
3 个积分商品；「直播手册」入口卡片；底部 Tab 栏「首页」高亮。🧱 页面结构
| 模块 | 内容 | 数据来源 |
|---|---|---|
| Banner 轮播 | 3 张大图自动轮播（3s）+ 圆点切换 + 状态栏 + 标题区 + 新品预告文案 | Banner 图（../Banner/1-3.jpg）+ 轮播文案 JS |
| 用户信息条 | 头像 + 昵称（王小贱）+ 黄金会员 + 1280 积分 + 「扫码兑换」按钮 | 用户/会员数据（mock） |
| 新品速递 | 新品卡：《伊索寓言》第二弹 2026.07.19 正在热卖 + 「通知我」圆形按钮 | 商品数据（mock） |
| 全部商品 | 全宽单卡轮播（一次一张大卡，左右滑动循环、指示点跳转、底部 3 张卡牌图，发售时间最新在前） | 产品履历（JS 填充 10 款）+ D:\万漫社 卡图（/card-src/） |
| 积分兑换 | 3 个积分商品（画画的棍子 MINI版画 1900 / Gua老师 MINI版画 1900 / 安徒生联名镭射票 800） | 积分商品（源：积分商城真实商品图 /derivative-img/） |
| 直播手册 | 收藏手册卡：《希腊神话·神谕 收藏手册》7月25日更新 | 静态（mock） |
| 底部 Tab 栏 | 首页（激活）/ 积分商城 / 抽卡机（中心凸起）/ 手册 / 我的 | 固定 |
📋 功能说明（需求）
① Banner：自动轮播（3s）+ 手动圆点切换，标题文案随图切换；② 用户条：展示昵称/会员等级/积分，「扫码兑换」进入扫码（原型示意）；③ 新品速递：展示当前热卖新品，可「通知我」订阅开售提醒；④ 全部商品：全宽单卡轮播展示最新发售商品（大图 + 名称 + 日期 + 3 张卡牌图，左右滑动循环，点卡片进详情，原型示意）；⑤ 积分兑换：展示积分商品及所需积分；⑥ 直播手册：收藏手册内容入口。
🖱️ 交互行为
| 操作 | 页面行为 |
|---|---|
| Banner 圆点 | 点击切换到对应图 + 文案；3s 自动轮播循环 |
| 下滑提示箭头 | 平滑滚动到「新品速递」区块 |
| 轮播滑动 | 左右拖拽/触摸切换，松手吸附（位移 >50px 翻页），循环首尾呼应；指示点可点击跳转 |
| 通知我 | 点击订阅开售提醒（原型示意） |
| 扫码兑换 | 进入扫码兑换流程（原型示意） |
| 底部 Tab | 积分商城/我的 → 跳转对应页面；首页当前激活 |
📐 数据口径
全部商品 10 个 = 产品履历最新 10 款（按发售日期倒序，JS 填充名称/日期）；每款配 3 张卡牌图（cards 字段，源：D:\万漫社\01-A卡牌类 各系列卡面，/card-src/ 路由；伊索寓言/希腊神话用 /thumb/ 已有缩略图）；会员 1280 积分（黄金会员）；积分商品 800/1200/1500 积分（mock）；Banner 3 张 + 文案 3 组。
❌ 错误提示清单
| 页面 | 按钮/操作 | 场景 | 提示 |
|---|---|---|---|
| 首页 | 通知我 | 订阅成功（原型示意） | toast「已开启通知，发售时将提醒您」 |
| 首页 | 扫码兑换 | 进入扫码（原型示意） | 调起扫码（原型示意） |
🔲 状态说明
| 状态 | 说明 | 完成情况 |
|---|---|---|
| 默认 | 轮播自动播放、商品列表完整展示 | ✅ 已实现 |
| 轮播切换 | 3s 自动 + 手动圆点，淡入淡出 | ✅ 已实现 |
| 轮播卡片 | 全宽单卡：大图 + 名称 + 发售日期 + 3 张卡牌图 | 产品履历（JS） |
🔄 版本更新日志▶