# 小程序家庭成员渠道选择 设计文档

**日期：** 2026-05-23
**版本：** 1.0

---

## 1. 背景

小程序新增/编辑家庭成员时，需要支持为成员指定渠道。渠道单选，只能从当前登录会员的渠道列表中选择。后端接口已就绪。

---

## 2. 改动范围

| 文件 | 改动类型 |
|------|---------|
| `SxsnWechat/pagesMy/familyMemberVindicate.vue` | 新增渠道选择行 + 数据加载/提交逻辑 |

---

## 3. UI 设计

在「成员信息」表单区域，「就读学校」行之后新增一行：

```
渠道        [请选择渠道 ▼]
```

- 样式与现有 `pre` 行完全一致（左侧标签 209rpx + 右侧内容右对齐）
- 使用微信小程序原生 `<picker>` 组件（mode="selector"），与项目现有风格一致
- 渠道为**非必填**，可不选（成员继承家长渠道）
- 右侧显示已选渠道名称，未选时显示「请选择渠道」（灰色占位）

---

## 4. 数据流

### 4.1 新增成员

1. 页面 `onLoad` 时调 `GET /app/channel/list` 获取会员渠道列表，存入 `channelList`
2. 用户选择渠道（可不选），存入 `selectedChannelId`
3. 点击保存 → 校验通过 → 调 `POST /core/family/member` 新增成员
4. 成功后：
   - 若 `selectedChannelId` 有值 → 调 `POST /app/member/setChannels?memberId={新成员id}&channelIds={selectedChannelId}`
   - 若无值 → 跳过渠道设置
5. 跳转

### 4.2 编辑成员

1. 页面 `onLoad` 时并行调：
   - `GET /app/channel/list` 获取会员渠道列表
   - `GET /app/member/channelList?memberId=xxx` 获取成员当前渠道（取第一个，单选）
2. 回显已选渠道
3. 点击保存 → 调 `PUT /core/family/member` 更新成员
4. 成功后调 `POST /app/member/setChannels?memberId=xxx&channelIds={selectedChannelId}`
   - 若未选渠道，`channelIds` 传空字符串（清空成员渠道，继承家长）
5. 跳转

---

## 5. 接口

| 接口 | 方法 | 说明 |
|------|------|------|
| `/app/channel/list` | GET | 获取会员渠道列表（需登录） |
| `/app/member/channelList?memberId=xxx` | GET | 获取成员当前渠道（编辑时回显） |
| `/app/member/setChannels` | POST | 设置成员渠道，参数：memberId、channelIds |

---

## 6. 错误处理

| 场景 | 处理 |
|------|------|
| 获取渠道列表失败 | Toast 提示，渠道选择行不显示（不阻断保存） |
| setChannels 失败 | Toast 提示错误信息，但不阻断页面跳转（成员已保存成功） |
| 渠道列表为空 | 渠道行显示「暂无可用渠道」，禁用选择 |

---

## 7. 不在本次范围内

- 家庭成员列表页展示渠道信息（已在管理端实现）
- 报名时按成员渠道过滤活动