# 登录前浏览体验设计 > **状态:** Draft > **日期:** 2026-06-04 > **品牌名变更:** 溪艾福 → 浠艾福（本设计沿用新品牌名） --- ## 1. 设计目标 让未登录用户在登录前即可浏览平台内容，对浠艾福的定位和功能形成初步了解，降低注册门槛，提升转化率。 ### 核心原则 - **零门槛浏览** — 打开小程序无需登录即可看到内容 - **渐进式引导** — 浏览过程中自然触发登录，而非强制登录 - **品牌心智** — 通过五行沙盘视觉符号建立品牌认知 - **低改造成本** — 尽量复用现有页面和组件，减少重复开发 --- ## 2. 品牌更名 全站文本替换（涉及前端页面 + 后端返回数据）： | 原词 | 新词 | 范围 | |------|------|------| | 溪艾福 | 浠艾福 | 所有前端页面标题、文案、Banner | | 溪福俱乐部 | 浠艾福俱乐部 | 会员相关文案 | | 溪艾福 (Care Family Club) | 浠艾福 (Care Family Club) | 品牌全称 | | XIAIFU | XIAIFU | 无变化（拼音相同） | --- ## 3. 用户流程 ``` ┌─────────────────────────────────────────────────┐ │ 打开小程序 │ └────────────────────┬────────────────────────────┘ ↓ ┌─────────────────────────────────────────────────┐ │ 发现 Tab（未登录 = 首屏） │ │ · 五行沙盘视觉展示 │ │ · 精选活动介绍 │ │ · 推荐商品介绍 │ │ 底部导航：[发现] [商城] │ └────────────────────┬────────────────────────────┘ ↓ ┌───────────┴───────────┐ ↓ ↓ ┌────────────┐ ┌────────────┐ │ 浏览内容 │ │ 商城 │ │ (发现页) │ │ (商品列表) │ └──────┬─────┘ └──────┬─────┘ ↓ ↓ ┌────────────────────────────────────────┐ │ 点击交互点（任意以下操作） │ │ · 五行沙盘五个角 │ │ · 活动卡片「查看详情」 │ │ · 商品卡片「立即购买」 │ │ · 底部「登录解锁完整功能」 │ └──────────────────┬─────────────────────┘ ↓ ┌────────────────────────────────────────┐ │ 跳转登录页 │ │ (现有 login.vue，无需改造) │ └──────────────────┬─────────────────────┘ ↓ ┌────────────────────────────────────────┐ │ 登录成功 → 恢复原生 TabBar │ │ 首页 | 发现 | 商城 | 我的 │ │ 根据角色显示对应内容 │ └────────────────────────────────────────┘ ``` --- ## 4. 页面设计 ### 4.1 发现页（预登录核心页面） **位置:** `pages/discover/index.vue`（现有，需重构） **页面结构（从上到下）:** ``` ┌─────────────────────────────────────────────┐ │ 📱 状态栏 │ ├─────────────────────────────────────────────┤ │ ★ Banner 区 │ │ ┌───────────────────────────────────────┐ │ │ │ 🌟 浠艾福 Care Family Club │ │ │ │ 以五行五维为内核的 │ │ │ │ 家庭主动健康管理平台 │ │ │ │ │ │ │ │ [任务积分] [五行沙盘] [家庭共育] │ │ │ └───────────────────────────────────────┘ │ │ │ │ ★ 五行能量沙盘（视觉主体） │ │ ┌───────────────────────────────────────┐ │ │ │ 🔥 心·火 (点此登录) │ │ │ │ │ │ │ │ 🌿 行·木 ⭐五行平衡 💧 富·水 │ │ │ │ 共同成长 │ │ │ │ │ │ │ │ ⚔️ 智·金 🌏 身·土(点此登录) │ │ │ └───────────────────────────────────────┘ │ │ 五个角可点击，触发登录 │ │ 底部有相生指引文字「🌱 完成测评，点亮身·土」│ │ │ │ ★ 精选活动 │ │ ┌─────┐ ┌─────┐ ┌─────┐ │ │ │亲子 │ │情绪 │ │菌群 │ ← 横向滚动 │ │ │瑜伽 │ │管理 │ │调养 │ │ │ │体验课│ │工作坊│ │讲座 │ │ │ │¥199 │ │免费 │ │¥299 │ │ │ │查看→│ │查看→│ │查看→│ │ │ └─────┘ └─────┘ └─────┘ │ │ 点击活动卡片→跳转登录 │ │ │ │ ★ 推荐商品 │ │ ┌───────────────────────────────────────┐ │ │ │ 🧘 亲子瑜伽体验课 ¥199 │ │ │ │ ★★★★☆ 已售230份 │ │ │ │ 适合5-12岁儿童与家长共同参与 │ │ │ └───────────────────────────────────────┘ │ │ ┌───────────────────────────────────────┐ │ │ │ 🎮 舒尔特方格专注力训练 ¥49 │ │ │ │ ★★★★★ 已售568份 │ │ │ │ 经典注意力训练游戏，每日5分钟 │ │ │ └───────────────────────────────────────┘ │ │ 点击商品卡片→跳转登录 │ │ │ │ ★ 登录引导条 │ │ ┌───────────────────────────────────────┐ │ │ │ 🔒 登录解锁完整功能 │ │ │ │ 创建家庭 / 管理任务 / 五行沙盘 │ │ │ │ 【立即登录 →】 │ │ │ └───────────────────────────────────────┘ │ │ │ ├─────────────────────────────────────────────┤ │ [发现] [商城] ← 自定义底部 │ └─────────────────────────────────────────────┘ ``` **关键交互:** - 所有交互点（沙盘五角、活动卡片、商品卡片、登录引导条）统一调用登录跳转 - 登录跳转使用 `uni.navigateTo({ url: '/pages/login/login' })` - 登录成功后 `uni.reLaunch` 回到当前页面并恢复原生 TabBar ### 4.2 商城页（未登录预览态） **位置:** `pages/shop/index.vue`（现有，需改造） **变化:** - 保持现有商品/服务分类标签 - 添加登录状态检测 - 点击商品详情或购买→未登录则跳转登录 - 底部保持与发现页一致的自定义底部导航 **限制:** - 未登录状态下最多展示 6 个推荐商品，超过提示登录查看全部 - 价格显示但不展示用户专属价 - 不展示收藏/购物车功能 ### 4.3 登录页（不做内容改造） **位置:** `pages/login/login.vue`（保持现有） **变化:** 无内容改造。仅在用户从发现/商城跳转过来时带有 `redirect` 参数，登录成功后返回来源页。 ### 4.4 已登录 TabBar（保持现有） 登录后恢复原生 4Tab 配置： - 首页（角色分流） - 发现（完整版，含真实数据） - 商城（完整版） - 我的（个人中心） --- ## 5. TabBar 切换策略 ### 未登录态 - **隐藏原生 TabBar**（调用 `uni.hideTabBar()`） - **使用自定义底部导航** — 在 发现页 和 商城页 底部渲染统一的自定义导航组件 - 两个入口：`[发现]` | `[商城]` - 自定义导航视觉风格：浅色背景，选中态高亮色 `#FF6B6B` ### 登录态 - **恢复原生 TabBar**（调用 `uni.showTabBar()`） - 使用 pages.json 中配置的 4Tab 结构 ### 切换时机 | 事件 | 动作 | |------|------| | App.vue onLaunch（无 token） | 隐藏原生 TabBar，跳转发现页 | | App.vue onLaunch（有 token） | 显示原生 TabBar, 正常流向 | | 登录成功 | 显示原生 TabBar, 跳转首页 | | 退出登录 | 隐藏原生 TabBar, 跳转发现页 | --- ## 6. 五行沙盘组件复用 **现有:** `parent-index.vue` 和 `child-index.vue` 中已实现五行沙盘的 HTML+CSS **复用策略:** - 将五行沙盘提取为独立组件 `components/wuxing-sandbox.vue` - 三个场景共用同一组件（父参数控制模式）： | 模式 | 场景 | 交互 | |------|------|------| | `preview` | 发现页（未登录） | 点击任意角→跳转登录，状态文字=「点此登录」 | | `parent` | 家长首页（已登录） | 点击跳转对应维度详情，状态=实际成长数据 | | `child` | 孩子首页（已登录） | 同上，但数据源为孩子视角 | --- ## 7. 数据来源 ### 未登录态内容数据 **Phase 1 实现策略 — 纯静态数据（无后端依赖）：** 第一阶段全部使用页面内硬编码的静态默认数据，不依赖任何后端接口。这样可以零后端改造成本快速上线。 | 数据 | 来源 | 策略 | |------|------|------| | Banner | 页面内静态 HTML | 1 条默认品牌 Banner | | 活动卡片 | 页面内静态数组 | 3 条默认活动（亲子瑜伽/情绪管理/菌群调养） | | 推荐商品 | 页面内静态数组 | 2 条默认商品（瑜伽体验课/舒尔特方格） | | 五行沙盘 | 前端组件 `wuxing-sandbox.vue` | 纯 UI 展示，无需数据 | **Phase 2（后续增强）：** 如需动态内容，新增后端公开内容接口（无需 JWT 认证），发现页按需调用。 ### 容错策略 - 静态数据作为默认值始终可用 - 如需调用后端接口，接口不可用时回退到静态数据 --- ## 8. 影响范围 | 文件 | 改动类型 | 说明 | |------|----------|------| | `cfc-frontend/App.vue` | 修改 | 登录态判断 + TabBar 切换逻辑 | | `cfc-frontend/pages/discover/index.vue` | 重构 | 全新布局（沙盘+活动+商品） | | `cfc-frontend/pages/shop/index.vue` | 修改 | 添加未登录态预览逻辑 | | `cfc-frontend/pages/login/login.vue` | 微调 | 支持 redirect 参数 | | `cfc-frontend/components/wuxing-sandbox.vue` | 新增 | 五行沙盘组件提取 | | `cfc-frontend/components/bottom-nav.vue` | 新增 | 自定义底部导航组件 | | `cfc-frontend/utils/api.js` | 新增 | 公开内容接口 | | 全站前端文件 | 文本替换 | 溪艾福→浠艾福 | ### 不改动的范围 - 后端 API 不需要新增（除非需要动态内容接口） - 首页 parent-index.vue / child-index.vue — 保持现有（登录后使用） - 登录页 login.vue — 不做内容增强 --- ## 9. 验收标准 - [ ] 未登录用户打开小程序，看到的不是登录页，而是发现页 - [ ] 发现页展示五行沙盘（五个角可点击，点击跳转登录） - [ ] 发现页展示活动卡片（3+ 个，横向滚动，点击跳转登录） - [ ] 发现页展示商品卡片（2+ 个，点击跳转登录） - [ ] 未登录时底部导航仅显示「发现」「商城」两个入口 - [ ] 商城页未登录时展示商品列表，点击详情/购买跳转登录 - [ ] 登录后恢复原生 TabBar（首页/发现/商城/我的） - [ ] 退出登录后回到未登录态 - [ ] 全站「溪艾福」文本已替换为「浠艾福」 - [ ] 五行沙盘可复用（preview/parent/child 三种模式）