活动主页设计文档

日期: 2026-07-02 状态: 进行中 负责人: Sisyphus

1. 背景与目标

背景

目前小程序中各维度页面（身/心/智/行/富）的 DimensionActivities 组件点击"更多"按钮后统一跳转到 discover/index?type=activity，该页面以商品发现为主，活动仅为筛选类型之一，用户体验不专注。

目标

设计独立的活动主页 /pages/activity/index，作为活动聚合入口，统一承接所有维度页"更多"来的流量，优先展示用户报名的活动。

2. 用户场景

家长/孩子 从某个维度详情页点击"更多 ›"进入活动主页，查看自己报名的活动或发现新活动
服务商（规划师） 进入活动主页，浏览/管理自己发布的活动
未登录用户 进入活动主页，仅能浏览公开活动，不能报名/签到

3. 页面结构

路由

/pages/activity/index   (新建，独立subPackage: pages/activity)

Tab 结构（三 Tab 并列）

Tab	内容	数据来源
我的活动	用户报名的活动（含状态筛选）	`getMyActivityRegistrations`
发现活动	所有公开活动（含维度筛选）	`getActivityList`
历史记录	已结束/已签到的活动	`getMyActivityRegistrations(status=ended)`

注意: 未登录用户默认展示"发现活动"Tab，"我的活动"和"历史记录"显示登录引导。

4. 各 Tab 详细设计

4.1 我的活动 Tab（默认激活）

状态筛选 Chips（横向滚动）:

全部 / 🟢 待开始 / 🟡 待审核 / ✅ 已签到 / ❌ 已取消

活动卡片展示:

┌────────────────────────────────────────┐
│ [封面图]  │  活动标题                     │
│ 72×72    │  🕐 时间 / 📍 地点              │
│          │  [状态标签] [倒计时标签]          │
│          ├────────────────────────────────┤
│          │  [取消报名]        [签到]        │
└────────────────────────────────────────┘

操作按钮逻辑:

报名成功 + 未到时间 → 显示"签到"按钮
报名成功 + 已到时间 + 未签到 → 显示"签到"按钮
报名待审核 → 显示"取消报名"按钮（灰色）
已签到 → 不显示操作按钮
已结束 → 归入"历史记录"Tab

空状态:

📋 暂无报名的活动
去发现页探索精彩活动吧
[去发现活动] 按钮

4.2 发现活动 Tab

维度筛选 Chips（横向滚动）:

全部 / 身 / 心 / 智 / 行 / 富

活动卡片展示:

┌────────────────────────────────────────┐
│ [封面图]  │  活动标题                     │
│ 72×72    │  🕐 时间 / 📍 地点              │
│          │  [状态标签]  价格               │
└────────────────────────────────────────┘

点击卡片 → 跳转 /pages/discover/activity-detail/activity-detail?id=xxx

空状态:

🎯 暂无相关活动
试试其他维度筛选

4.3 历史记录 Tab

筛选 Chips: 全部 / 已结束 / 已签到

卡片样式同"我的活动"，但操作按钮均不显示。

5. API 集成

现有 API（无需后端改动）

前端函数	端点	参数
`getMyActivityRegistrations(data)`	`POST /api/activity/my-registrations`	`{ childId, page, size, status? }`
`getActivityList(data)`	`POST /api/activity/list`	`{ dimensionCode?, page, size, status? }`
`getActivityDetail(id)`	`POST /api/activity/detail`	`{ id }`
`registerActivity(data)`	`POST /api/activity/register`	`{ id, childId }`
`cancelActivityRegistration(data)`	`POST /api/activity/cancel-registration`	`{ id, childId }`
`activityCheckin(data)`	`POST /api/activity/checkin`	`{ id, childId }`

状态映射

后端 status	前端标签	说明
`pending`	🟡 待审核	报名待审核
`approved`	🟢 报名成功	已通过审核
`rejected`	❌ 已拒绝	报名被拒绝
`cancelled`	⚪ 已取消	用户取消
`checked_in`	✅ 已签到	签到完成

6. 入口整合

需要更新的页面（共16个文件）

所有使用 DimensionActivities 组件的页面，其 goMoreActivities 方法需改为:

goMoreActivities: function() {
  uni.navigateTo({ url: '/pages/activity/index' })
}

受影响文件:

pages/index/parent-index.vue
pages/index/child-index.vue
pages/body/index.vue
pages/body/member-body-detail.vue
pages/body-detail/member-body-detail.vue
pages/mind/index.vue
pages/mind/member-mind-detail.vue
pages/mind-detail/member-mind-detail.vue
pages/wisdom/index.vue
pages/wisdom/member-wisdom-detail.vue
pages/wisdom/wisdom_temp/member-wisdom-detail.vue
pages/wisdom-detail/member-wisdom-detail.vue
pages/action/index.vue
pages/action/member-action-detail.vue
pages/action-detail/member-action-detail.vue
pages/wisdom/wisdom_temp/index.vue

7. 文件清单

新增文件

文件	说明
`cfc-frontend/pages/activity/index.vue`	活动主页主页面
`cfc-frontend/pages/activity/activity-detail/activity-detail.vue`	活动详情页（可复用现有，但需迁移路由注册）

需修改文件

文件	修改内容
`cfc-frontend/pages.json`	注册 `pages/activity` subPackage
16个使用 DimensionActivities 的页面	更新 `goMoreActivities` 跳转目标

可复用的现有组件/样式

DimensionActivities.vue 卡片样式参考（但不完全复用，因为是新页面自己管理数据）
pages/discover/activity-detail/activity-detail.vue 详情页逻辑参考
uni.scss 全局样式变量

8. 路由注册（pages.json）

{
  "root": "pages/activity",
  "pages": [
    {
      "path": "index",
      "style": { "navigationBarTitleText": "活动中心" }
    },
    {
      "path": "activity-detail/activity-detail",
      "style": { "navigationBarTitleText": "活动详情" }
    }
  ]
}

注意: pages/discover/activity-detail/activity-detail.vue 仍保留（discover-detail subPackage），新路由为独立 activity subPackage。

9. 待确认事项（TBD）

以下内容需用户确认后才能最终确定：

「历史记录」Tab — 是否需要？如不需要可简化为两 Tab
服务商视角 — 是否需要在活动主页展示"我发布的活动"？（如需要，Tab 调整为：我参加的活动 / 我发布的活动 / 发现活动）
维度筛选 Chips — 发现活动 Tab 的维度筛选是否需要按五维（身/心/智/行/富）？

10. 设计风格

主色调: #F97316（暖橙，同小程序主色）
卡片风格: 白色背景 + 轻阴影 + 圆角12px
字体: 系统默认
图片: 封面图 72×72 正方形，圆角8px
状态标签色:
- 待开始: #FFF7ED + #F97316
- 待审核: #FEF3C7 + #D97706
- 已签到: #F0FDF4 + #22C55E
- 已拒绝: #FEE2E2 + #EF4444
- 已取消: #F5F5F5 + #999

2026-07-02-activity-home-page-design.md 7.5 KB History Raw