9.3 KiB
9.3 KiB
爱上萍乡 - 小程序改版设计（首页 + 入园码 + 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家）：
- 武功山金顶景区 - 萍乡 - ¥70
- 仙凤三宝景区 - 萍乡 - ¥50
- 武功山君澜温泉 - 萍乡 - ¥228
- 凯光新天地生态旅游区 - 萍乡 - ¥90
- 山猫王国 - 萍乡 - ¥68
- 和平农场·哎马乐园 - 萍乡 - ¥79
- 花涧里景区 - 萍乡 - ¥80
- 玉皇谷景区 - 萍乡 - ¥50
- 龙溪秘境 - 萍乡 - ¥30
- 南正街唐朝诡事录 - 萍乡 - ¥158
- 孽龙洞水上乐园 - 萍乡 - ¥180
- 桐花谷 - 萍乡 - ¥50
- 长沙方特东方神画 - 长沙 - ¥280
- 麦咭乐园红星运动空间站 - 长沙 - ¥278
- 宁乡野趣亲子乐园 - 长沙 - ¥88
- 长沙乐田派绣乡亲子乐园 - 长沙 - ¥68
- 湘东漂流 - 长沙 - ¥168
- 长沙黑麋峰森林公园 - 长沙 - ¥27
- 炎帝陵 - 株洲 - ¥62
- 酷洛潮漫（株洲馆） - 株洲 - ¥118
- 盘龙大观园 - 湘潭 - ¥128
- 米莱知识宇宙（湘潭万达馆） - 湘潭 - ¥326
超级玩家卡关联景区（40家）：
- 武功山金顶景区 - 萍乡 - ¥70（重复）
- 杨岐山孽龙洞景区 - 萍乡 - ¥68
- 仙凤三宝景区 - 萍乡 - ¥50（重复）
- 武功山君澜温泉 - 萍乡 - ¥228（重复）
- 凯光新天地生态旅游区 - 萍乡 - ¥90（重复）
- 和平农场·哎马乐园 - 萍乡 - ¥79（重复）
- 花涧里景区 - 萍乡 - ¥80（重复）
- 玉皇谷景区 - 萍乡 - ¥50（重复）
- 龙溪秘境 - 萍乡 - ¥30（重复）
- 山猫王国 - 萍乡 - ¥68（重复）
- 南正街唐朝诡事录 - 萍乡 - ¥158（重复）
- 孽龙洞水上乐园 - 萍乡 - ¥180（重复）
- 赣西野生动物王国 - 萍乡 - ¥160
- 桐花谷 - 萍乡 - ¥50（重复）
- 武功山外骨骼登山 - 萍乡 - ¥200
- 发光登山杖 - 萍乡 - ¥88
- 三只猫青年旅社 - 萍乡 - ¥60
- 武功山奖牌 - 萍乡 - ¥19.9
- AI中医 - 萍乡 - ¥125
- 长沙方特东方神画 - 长沙 - ¥280（重复）
- 湘江游轮 - 长沙 - ¥120
- 天心阁 - 长沙 - ¥58
- 皇龙峡生态旅游区 - 长沙 - ¥138
- 靖港古镇 - 长沙 - ¥80
- 西溪磐石大峡谷 - 长沙 - ¥48
- 湖南省木偶皮影剧场 - 长沙 - ¥68
- 湘东漂流 - 长沙 - ¥168（重复）
- 金坑溯溪 - 长沙 - ¥99
- 关山古镇 - 长沙 - ¥50
- 浏河第一湾 - 长沙 - ¥88
- 神农谷风景旅游区 - 株洲 - ¥62
- 云上大院 - 株洲 - ¥50
- 云阳山 - 株洲 - ¥45
- 酒仙湖 - 株洲 - ¥65
- 滴水洞 - 湘潭 - ¥40
- 盘龙大观园 - 湘潭 - ¥128（重复）
- 毛泽东纪念园 - 湘潭 - ¥60
- 韶峰景区（含缆车） - 湘潭 - ¥60
- 彭德怀纪念馆·《跟着走》AL-LBE行进交互式沉浸体验馆 - 湘潭 - ¥98
- 《最忆韶山冲》演出 - 湘潭 - ¥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 对接
- 景点图片资源
- 入园码二维码生成逻辑
- 景区预约功能
- 使用记录功能
- 权益景区列表功能
- 卡面设计图片替换
- 搜索功能
技术注意事项
- 首页景点列表 ~47 项纵向滚动，需关注性能（考虑虚拟列表或懒加载图片）
- 入园码卡面区域用
position: relative+position: absolute叠加信息，需在不同机型测试定位准确性 - 卡面左右滑动用
<swiper>组件 - 公告纵向轮播用
<swiper>的vertical属性 - 所有图片先用占位图（渐变色或 placeholder URL），后续替换真实图片