# 活动主页设计文档

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

---

## 1. 背景与目标

### 背景

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

### 目标

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

---

## 2. 用户场景

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

---

## 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` 方法需改为:

```javascript
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）

```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）

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

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

---

## 10. 设计风格

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