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

日期： 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 由后端自动生成）

2026-05-21-channel-admin-frontend-design.md 2.0 KB 永久链接 文件历史 原始文件