# 产品设计新增「企微群聊」选择字段

> 日期: 2026-03-19 | 服务: hl-product-service, hl-callback-service

---

## 一、变更说明

产品设计页面新增 `groupRoomId` 字段，用于关联企微群聊（会话存档），替代原来的静态群二维码图片。

**为什么需要这个字段**：产品关联群聊后，C端小程序可以展示该群的真实聊天消息（通过会话存档），比静态二维码图片更有吸引力。

---

## 二、新增字段

### 产品保存接口

**接口**：`POST /admin/product/item/save` 和 `PUT /admin/product/item/{productId}`

**新增请求字段**：

| 字段 | 类型 | 必填 | 说明 |
|------|------|------|------|
| groupRoomId | String | 否 | 企微群聊ID，从群组列表接口获取 |

**新增响应字段**（产品详情、产品列表都返回）：

| 字段 | 类型 | 说明 |
|------|------|------|
| groupRoomId | String | 企微群聊ID |

> 原有的 `groupChatQrUrl`（群聊二维码图片URL）保留不变，两者可以共存。

---

## 三、群组列表接口（已有，用于获取可选群）

**接口**：`GET /admin/msg-audit/groups`

**服务**：hl-callback-service

**说明**：获取已添加的企微群组列表，产品设计页面用此接口填充「群聊」下拉选择框。

**响应示例**：
```json
{
  "code": 200,
  "message": "成功",
  "data": [
    {
      "id": "2034000000000000001",
      "roomId": "wrOJ_wCgAAxxxxxx",
      "groupName": "嗨·冰雪3.0南线客户群",
      "ownerUserId": "WangXiao",
      "ownerName": "王骁",
      "memberCount": 12,
      "remark": "冰雪南线体验团",
      "createdAt": "2026-03-15 10:00:00"
    }
  ]
}
```

**关键字段说明**：

| 字段 | 类型 | 说明 |
|------|------|------|
| id | String | 群组记录ID |
| roomId | String | **企微群聊ID，保存产品时传这个值到 `groupRoomId`** |
| groupName | String | 群名称（用于下拉框显示） |
| ownerName | String | 群主姓名 |
| memberCount | Integer | 群成员数 |
| remark | String | 备注 |

---

## 四、前端页面布局

### 产品设计 → 展示设置步骤（DisplayStep / DisplaySettings）

在现有的「群聊二维码」输入框**上方或旁边**，新增一个**下拉选择框**：

```
┌─────────────────────────────────────┐
│ 群聊关联                              │
│                                     │
│ 企微群聊   [▼ 请选择群聊            ]  │
│            选项格式: groupName (memberCount人) │
│            值: roomId                │
│                                     │
│ 群聊二维码  [上传图片]   （已有字段）   │
└─────────────────────────────────────┘
```

### 实现要点

1. **页面加载时**调用 `GET /admin/msg-audit/groups` 获取群组列表
2. 下拉选项用 `groupName` 显示，`roomId` 作为 value
3. 选中后将 `roomId` 赋值给 `productData.groupRoomId`
4. 保存时将 `groupRoomId` 放入 payload（参考 `groupChatQrUrl` 的处理方式）
5. 加载产品详情时，响应中 `groupRoomId` 会返回已关联的群聊ID
6. **store 变更**：`productEdit.js` 的 `createDefaultProductData()` 添加 `groupRoomId: null`，`_loadProductDetail` 添加 `groupRoomId: data.groupRoomId || null`，`_saveProduct` payload 添加 `groupRoomId: productData.groupRoomId || null`

### 调用示例

```javascript
// 1. 获取群组列表（页面加载时）
import { http } from '@/utils/request'
const groups = await http.get('/msg-audit/groups')
// groups = [{ roomId: 'wrOJ_wCgAAxxxxxx', groupName: '冰雪南线客户群', memberCount: 12, ... }]

// 2. 保存产品时 payload 中添加
const payload = {
  // ...其他字段
  groupRoomId: productData.groupRoomId || null,  // 新增
  groupChatQrUrl: productData.groupChatQrUrl || '',  // 已有
}
```

---

## 五、校验规则

- `groupRoomId` 非必填，可以不选
- 如果选择了群聊，必须是 `/admin/msg-audit/groups` 返回的有效 `roomId`
- `groupRoomId` 和 `groupChatQrUrl` 互相独立，不冲突