|
|
@@ -0,0 +1,276 @@
|
|
|
+# 登录前浏览体验设计
|
|
|
+
|
|
|
+> **状态:** 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. 影响范围
|
|
|
+
|
|
|
+| 文件 | 改动类型 | 说明 |
|
|
|
+|------|----------|------|
|
|
|
+| `zxyj-frontend/App.vue` | 修改 | 登录态判断 + TabBar 切换逻辑 |
|
|
|
+| `zxyj-frontend/pages/discover/index.vue` | 重构 | 全新布局（沙盘+活动+商品） |
|
|
|
+| `zxyj-frontend/pages/shop/index.vue` | 修改 | 添加未登录态预览逻辑 |
|
|
|
+| `zxyj-frontend/pages/login/login.vue` | 微调 | 支持 redirect 参数 |
|
|
|
+| `zxyj-frontend/components/wuxing-sandbox.vue` | 新增 | 五行沙盘组件提取 |
|
|
|
+| `zxyj-frontend/components/bottom-nav.vue` | 新增 | 自定义底部导航组件 |
|
|
|
+| `zxyj-frontend/utils/api.js` | 新增 | 公开内容接口 |
|
|
|
+| 全站前端文件 | 文本替换 | 溪艾福→汐艾福 |
|
|
|
+
|
|
|
+### 不改动的范围
|
|
|
+- 后端 API 不需要新增（除非需要动态内容接口）
|
|
|
+- 首页 parent-index.vue / child-index.vue — 保持现有（登录后使用）
|
|
|
+- 登录页 login.vue — 不做内容增强
|
|
|
+
|
|
|
+---
|
|
|
+
|
|
|
+## 9. 验收标准
|
|
|
+
|
|
|
+- [ ] 未登录用户打开小程序，看到的不是登录页，而是发现页
|
|
|
+- [ ] 发现页展示五行沙盘（五个角可点击，点击跳转登录）
|
|
|
+- [ ] 发现页展示活动卡片（3+ 个，横向滚动，点击跳转登录）
|
|
|
+- [ ] 发现页展示商品卡片（2+ 个，点击跳转登录）
|
|
|
+- [ ] 未登录时底部导航仅显示「发现」「商城」两个入口
|
|
|
+- [ ] 商城页未登录时展示商品列表，点击详情/购买跳转登录
|
|
|
+- [ ] 登录后恢复原生 TabBar（首页/发现/商城/我的）
|
|
|
+- [ ] 退出登录后回到未登录态
|
|
|
+- [ ] 全站「溪艾福」文本已替换为「汐艾福」
|
|
|
+- [ ] 五行沙盘可复用（preview/parent/child 三种模式）
|
User