docs: add homepage + qrcode + tabBar redesign spec

Co-Authored-By: Claude <noreply@anthropic.com>
2026-06-24 17:24:55 +08:00
parent 3d00309d56
commit 22575418a9
1 changed files with 246 additions and 0 deletions
@@ -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. 公告栏
 - 位于头部下方，白色背景条
 - 左侧 📢 图标 + "公告" 标签
 - 右侧文字用 `<swiper>` 实现纵向轮播（多条公告时自动切换）
 - **数据来源**：后端 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. 卡面展示区域
 - **卡面图片**：使用旅游卡实际设计图作为背景（`<image>` 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. 卡面左右滑动用 `<swiper>` 组件
 4. 公告纵向轮播用 `<swiper>` 的 `vertical` 属性
 5. 所有图片先用占位图（渐变色或 placeholder URL），后续替换真实图片