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