From 22575418a9287d7d1f3276ee19bb6ee279410f55 Mon Sep 17 00:00:00 2001 From: jacobxu666 Date: Wed, 24 Jun 2026 17:24:55 +0800 Subject: [PATCH] docs: add homepage + qrcode + tabBar redesign spec Co-Authored-By: Claude --- .../2026-06-24-homepage-redesign-design.md | 246 ++++++++++++++++++ 1 file changed, 246 insertions(+) create mode 100644 docs/superpowers/specs/2026-06-24-homepage-redesign-design.md diff --git a/docs/superpowers/specs/2026-06-24-homepage-redesign-design.md b/docs/superpowers/specs/2026-06-24-homepage-redesign-design.md new file mode 100644 index 0000000..49fb99f --- /dev/null +++ b/docs/superpowers/specs/2026-06-24-homepage-redesign-design.md @@ -0,0 +1,246 @@ +# 爱上萍乡 - 小程序改版设计（首页 + 入园码 + tabBar） + +## 概述 + +将小程序从"湖南12301文旅专区"改版为"爱上萍乡"旅游卡销售平台。核心变更：tabBar 从 2 个扩展为 3 个，首页全面重新设计，新增入园码一级页面。 + +## 产品背景 + +- **小程序名称**：爱上萍乡 +- **旅游卡产品**： + - 赣湘全域旅游年卡：¥300/套卡(2张)，面向萍乡市工会会员，关联 22 家景区 + - 超级玩家卡：¥198，面向大学生及普通市民，关联 40 家景区 +- **设计风格**：视觉冲击风格（方案 B），大卡片大留白，单列纵向布局 + +## tabBar 结构 + +| Tab | 页面路径 | 图标 | 状态 | +|-----|---------|------|------| +| 首页 | `pages/index/index` | 房子 | 重新设计 | +| 入园码 | `pages/qrcode/index` | 二维码 | 新建 | +| 我的 | `pages/profile/index` | 人物 | 保留现有 | + +需新增入园码 tabBar 图标文件：`static/tabbar/qrcode.png` + `qrcode-active.png`。 + +## 首页设计（pages/index/index） + +### 页面结构（从上到下） + +#### 1. 头部区域 + +- **高度**：~360rpx（含状态栏安全区域） +- **背景**：武功山风景大图 + 从上到下深色半透明渐变遮罩 +- **标题**："爱上萍乡"，白色，36rpx 加粗 +- **副标题**："赣湘之间 · 发现旅途美好"，白色半透明，24rpx +- **搜索栏**：白色圆角胶囊，点击跳转搜索页（搜索页暂不实现） + +#### 2. 公告栏 + +- 位于头部下方，白色背景条 +- 左侧 📢 图标 + "公告" 标签 +- 右侧文字用 `` 实现纵向轮播（多条公告时自动切换） +- **数据来源**：后端 API（先 mock，接口预留） +- 无公告时隐藏该区域 + +#### 3. 卡片销售宣传 + +两张旅游卡纵向排列，每张占满宽度： + +**卡面设计**： +- 尺寸：宽 650rpx × 高 400rpx，圆角 24rpx +- 背景：各自主题渐变色（赣湘卡：深蓝+金色；超级玩家卡：活力橙+紫色） +- 卡名：32rpx 白色加粗 +- 价格：56rpx 白色超大字号 +- 3 个核心卖点：✦ 图标 + 白色文字 +- CTA 按钮：白色圆角按钮 "立即抢购 →" + +**赣湘全域旅游年卡内容**： +- ¥300 / 套卡含2张 · 工会会员专属 +- ✦ 22家景区免门票 +- ✦ 武功山·方特·君澜温泉 +- ✦ 覆盖萍乡/长沙/株洲/湘潭 + +**超级玩家卡内容**： +- ¥198 · 大学生·市民专属 +- ✦ 40家景区免门票 +- ✦ 武功山·方特·韶山·滴水洞 +- ✦ 含外骨骼登山·青年旅社等 + +点击整张卡片跳转对应年卡详情页。 + +#### 4. 热门景点列表 + +- **标题栏**："热门景点" + "查看全部 >" +- **景点卡片**：每个占满宽度，上方大图（高度 320rpx），下方信息区 +- **信息区**：景点名称（28rpx 加粗）+ 区域标签（萍乡/长沙/株洲/湘潭）+ 挂牌价 + "持卡免门票" 绿色标签 +- **数据来源**：两张 Excel 合并去重后 ~50 个景点，前端先硬编码（后续接 API） +- 不实现分页，全部纵向滚动 + +**景点数据**（合并去重）： + +赣湘全域旅游年卡关联景区（22家）： +1. 武功山金顶景区 - 萍乡 - ¥70 +2. 仙凤三宝景区 - 萍乡 - ¥50 +3. 武功山君澜温泉 - 萍乡 - ¥228 +4. 凯光新天地生态旅游区 - 萍乡 - ¥90 +5. 山猫王国 - 萍乡 - ¥68 +6. 和平农场·哎马乐园 - 萍乡 - ¥79 +7. 花涧里景区 - 萍乡 - ¥80 +8. 玉皇谷景区 - 萍乡 - ¥50 +9. 龙溪秘境 - 萍乡 - ¥30 +10. 南正街唐朝诡事录 - 萍乡 - ¥158 +11. 孽龙洞水上乐园 - 萍乡 - ¥180 +12. 桐花谷 - 萍乡 - ¥50 +13. 长沙方特东方神画 - 长沙 - ¥280 +14. 麦咭乐园红星运动空间站 - 长沙 - ¥278 +15. 宁乡野趣亲子乐园 - 长沙 - ¥88 +16. 长沙乐田派绣乡亲子乐园 - 长沙 - ¥68 +17. 湘东漂流 - 长沙 - ¥168 +18. 长沙黑麋峰森林公园 - 长沙 - ¥27 +19. 炎帝陵 - 株洲 - ¥62 +20. 酷洛潮漫（株洲馆） - 株洲 - ¥118 +21. 盘龙大观园 - 湘潭 - ¥128 +22. 米莱知识宇宙（湘潭万达馆） - 湘潭 - ¥326 + +超级玩家卡关联景区（40家）： +1. 武功山金顶景区 - 萍乡 - ¥70（重复） +2. 杨岐山孽龙洞景区 - 萍乡 - ¥68 +3. 仙凤三宝景区 - 萍乡 - ¥50（重复） +4. 武功山君澜温泉 - 萍乡 - ¥228（重复） +5. 凯光新天地生态旅游区 - 萍乡 - ¥90（重复） +6. 和平农场·哎马乐园 - 萍乡 - ¥79（重复） +7. 花涧里景区 - 萍乡 - ¥80（重复） +8. 玉皇谷景区 - 萍乡 - ¥50（重复） +9. 龙溪秘境 - 萍乡 - ¥30（重复） +10. 山猫王国 - 萍乡 - ¥68（重复） +11. 南正街唐朝诡事录 - 萍乡 - ¥158（重复） +12. 孽龙洞水上乐园 - 萍乡 - ¥180（重复） +13. 赣西野生动物王国 - 萍乡 - ¥160 +14. 桐花谷 - 萍乡 - ¥50（重复） +15. 武功山外骨骼登山 - 萍乡 - ¥200 +16. 发光登山杖 - 萍乡 - ¥88 +17. 三只猫青年旅社 - 萍乡 - ¥60 +18. 武功山奖牌 - 萍乡 - ¥19.9 +19. AI中医 - 萍乡 - ¥125 +20. 长沙方特东方神画 - 长沙 - ¥280（重复） +21. 湘江游轮 - 长沙 - ¥120 +22. 天心阁 - 长沙 - ¥58 +23. 皇龙峡生态旅游区 - 长沙 - ¥138 +24. 靖港古镇 - 长沙 - ¥80 +25. 西溪磐石大峡谷 - 长沙 - ¥48 +26. 湖南省木偶皮影剧场 - 长沙 - ¥68 +27. 湘东漂流 - 长沙 - ¥168（重复） +28. 金坑溯溪 - 长沙 - ¥99 +29. 关山古镇 - 长沙 - ¥50 +30. 浏河第一湾 - 长沙 - ¥88 +31. 神农谷风景旅游区 - 株洲 - ¥62 +32. 云上大院 - 株洲 - ¥50 +33. 云阳山 - 株洲 - ¥45 +34. 酒仙湖 - 株洲 - ¥65 +35. 滴水洞 - 湘潭 - ¥40 +36. 盘龙大观园 - 湘潭 - ¥128（重复） +37. 毛泽东纪念园 - 湘潭 - ¥60 +38. 韶峰景区（含缆车） - 湘潭 - ¥60 +39. 彭德怀纪念馆·《跟着走》AL-LBE行进交互式沉浸体验馆 - 湘潭 - ¥98 +40. 《最忆韶山冲》演出 - 湘潭 - ¥298 + +**去重后约 47 个景点**（去掉重复的武功山、仙凤三宝、君澜温泉、凯光新天地、山猫王国、和平农场、花涧里、玉皇谷、龙溪秘境、南正街唐朝诡事录、孽龙洞水上乐园、桐花谷、方特、湘东漂流、盘龙大观园）。 + +## 入园码页面设计（pages/qrcode/index） + +### 页面结构（从上到下） + +#### 1. 卡面展示区域 + +- **卡面图片**：使用旅游卡实际设计图作为背景（`` mode="aspectFill"），本次先使用渐变色占位 +- **叠加信息**（position: absolute 定位在卡面上）： + - 头像：圆形，100rpx，白色边框 + - 姓名：头像右侧或下方，28rpx 白色加粗 + - 有效期：卡面底部，22rpx 白色 +- **左右滑动切换**：用户有多张卡时，左右滑动卡面切换，底部指示点（●○○） + +#### 2. 持卡信息（可展开/收起） + +- 默认收起状态：显示一行 "📋 持卡信息 ▼" +- 点击展开显示： + - 证件类型：身份证 + - 证件号码：脱敏显示（360***1234） + - 手机号码：脱敏显示（138****5678） +- 再次点击收起 + +#### 3. 二维码区域 + +- 居中展示大二维码 +- 60 秒自动刷新（安全性） +- 显示倒计时 "⏱ XX秒后刷新" +- 未登录/未持卡时显示引导提示 + +#### 4. 功能入口 + +3 个图标按钮横向排列，圆形图标 + 文字标签： +- 📅 景区预约 → 跳转预约页面（后续开发，本次点击提示"功能开发中"） +- 📋 使用记录 → 跳转记录页面（后续开发，本次点击提示"功能开发中"） +- 🏔️ 权益景区 → 跳转该卡关联景区列表（后续开发，本次点击提示"功能开发中"） + +### 数据来源 + +- 卡面图片：后端 API 或本地静态资源 +- 持卡信息：后端 API（用户绑卡信息） +- 二维码：后端 API 生成 +- 本次先搭建页面框架，核心逻辑后续接入 + +## 我的页面（pages/profile/index） + +保持现有结构和布局不变，仅更新应用名称相关内容。 + +## 全局变更 + +### pages.json + +- 更新 `globalStyle.navigationBarTitleText` 为 "爱上萍乡" +- tabBar 新增入园码项 +- 新增入园码页面路由 + +### 新增文件 + +| 文件 | 说明 | +|------|------| +| `src/pages/qrcode/index.vue` | 入园码页面 | +| `src/static/tabbar/qrcode.png` | 入园码 tab 图标（未选中） | +| `src/static/tabbar/qrcode-active.png` | 入园码 tab 图标（选中） | + +### 修改文件 + +| 文件 | 变更 | +|------|------| +| `src/pages.json` | tabBar 3项 + 新页面路由 + 标题 | +| `src/pages/index/index.vue` | 首页完全重写 | +| `src/pages/profile/index.vue` | 更新标题文案（如有） | + +## 实现范围 + +### 本次实现（Phase 1） +- ✅ 首页 4 个模块完整实现 +- ✅ 入园码页面框架（卡面 + 信息 + 二维码占位 + 功能入口） +- ✅ tabBar 3 项配置 +- ✅ 景点数据硬编码（~47 个景点） +- ✅ 公告栏组件（mock 数据 + API 接口预留） + +### 后续实现（Phase 2+） +- 公告后端 API 对接 +- 景点数据后端 API 对接 +- 景点图片资源 +- 入园码二维码生成逻辑 +- 景区预约功能 +- 使用记录功能 +- 权益景区列表功能 +- 卡面设计图片替换 +- 搜索功能 + +## 技术注意事项 + +1. 首页景点列表 ~47 项纵向滚动，需关注性能（考虑虚拟列表或懒加载图片） +2. 入园码卡面区域用 `position: relative` + `position: absolute` 叠加信息，需在不同机型测试定位准确性 +3. 卡面左右滑动用 `` 组件 +4. 公告纵向轮播用 `` 的 `vertical` 属性 +5. 所有图片先用占位图（渐变色或 placeholder URL），后续替换真实图片