# 管理端渠道列表页改造设计文档

**日期：** 2026-05-21  
**版本：** 1.0  
**文件：** `src/views/modules/supplier/channel.vue`

---

## 1. 背景

后端新增渠道二维码生成功能（`POST /core/channel/generateQr/{id}`），渠道分页接口响应新增 `code`、`qrUrl`、`qrCreateTime` 字段。管理端需配合展示新字段并提供生成二维码操作。

---

## 2. 改动范围

仅修改 `src/views/modules/supplier/channel.vue`，不新增文件。

---

## 3. 表格列变更

| 列 | 改动 | 说明 |
|----|------|------|
| 渠道方名称 | 不变 | — |
| 渠道码 | **新增** | 展示 `code` 字段，纯文本 |
| 二维码 | **新增** | 见下方逻辑 |
| 联系人 | 不变 | — |
| 联系方式 | 不变 | — |
| 操作 | 新增按钮 | 新增「生成二维码」按钮 |

**二维码列逻辑：**
- `qrUrl` 有值：使用 `el-image` 展示 60×60 缩略图，`preview-src-list` 支持点击放大
- `qrUrl` 为 null：展示灰色文字「未生成」

---

## 4. 生成二维码交互

```
点击「生成二维码」
  → 该行按钮进入 loading（loadingIds 数组记录行 id）
  → POST /core/channel/generateQr/{id}
  → 成功：就地更新 dataList 中该行的 qrUrl，按钮恢复正常
  → 失败：$message.error(res.data.msg)，按钮恢复正常
```

per-row loading 用 `loadingIds: []` 数组实现，避免多行同时操作互相干扰。

---

## 5. 数据层

`getDataList()` 调用 `GET /core/channel/page`，后端响应已包含新字段，前端无需修改接口调用，直接使用 `code`、`qrUrl` 字段即可。

---

## 6. 错误处理

| 场景 | 处理 |
|------|------|
| 生成二维码失败 | `$message.error(res.data.msg)` |
| 网络异常 | catch 中 `$message.error('操作失败，请重试')` |

---

## 7. 不在本次范围内

- 小程序端改造（登录/注册渠道参数、我的渠道页、家庭成员渠道设置）
- H5 扫码落地页
- 新增渠道表单（无需改动，code 由后端自动生成）