247 lines
9.3 KiB
Markdown
247 lines
9.3 KiB
Markdown
# 爱上萍乡 - 小程序改版设计（首页 + 入园码 + 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），后续替换真实图片
|