SxsnPC/docs/superpowers/plans/2026-05-21-channel-admin-frontend.md

管理端渠道列表页改造 Implementation Plan

For agentic workers: REQUIRED SUB-SKILL: Use superpowers:subagent-driven-development (recommended) or superpowers:executing-plans to implement this plan task-by-task. Steps use checkbox (- [ ]) syntax for tracking.

Goal: 在管理端渠道列表页新增「渠道码」列、「二维码」列，以及「生成二维码」操作按钮。

Architecture: 仅修改 src/views/modules/supplier/channel.vue 一个文件。在现有 el-table 中插入两列，操作列新增按钮，用 loadingIds 数组实现 per-row loading，用 el-image 的 preview-src-list 实现图片放大预览。

Tech Stack: Vue 2.6、Element UI、axios（通过 this.$http）

---

文件变更清单

操作	文件
Modify	src/views/modules/supplier/channel.vue

---

Task 1: 新增「渠道码」列

Files:

• Modify: src/views/modules/supplier/channel.vue

• [ ] Step 1: 在「渠道方名称」列后插入「渠道码」列

在 channel.vue 的 <el-table> 中，找到：

<el-table-column prop="channelName" label="渠道方名称"></el-table-column>

在其后插入：

<el-table-column prop="code" label="渠道码" width="120"></el-table-column>

• Step 2: 手动验证

启动开发服务器（npm run serve），打开渠道方列表页，确认表格出现「渠道码」列，展示后端返回的 code 字段值（8位字母数字）。若后端暂未部署，可在 getDataList 的 mock 数据中临时加 code: 'ab3x9k2m' 验证。

• Step 3: Commit

git add src/views/modules/supplier/channel.vue
git commit -m "feat: 渠道列表新增渠道码列"

---

Task 2: 新增「二维码」列

Files:

• Modify: src/views/modules/supplier/channel.vue

• [ ] Step 1: 在「渠道码」列后插入「二维码」列

在 Task 1 新增的 code 列后插入：

<el-table-column label="二维码" width="100" align="center">
  <template slot-scope="scope">
    <el-image
      v-if="scope.row.qrUrl"
      :src="scope.row.qrUrl"
      :preview-src-list="[scope.row.qrUrl]"
      style="width: 60px; height: 60px;"
      fit="contain"
    ></el-image>
    <span v-else style="color: #999; font-size: 12px;">未生成</span>
  </template>
</el-table-column>

• Step 2: 手动验证

在列表页确认：

• 有 qrUrl 的行显示 60×60 缩略图，点击可放大

• qrUrl 为 null 的行显示灰色「未生成」文字

• [ ] Step 3: Commit

git add src/views/modules/supplier/channel.vue
git commit -m "feat: 渠道列表新增二维码列，支持缩略图预览"

---

Task 3: 操作列新增「生成二维码」按钮

Files:

• Modify: src/views/modules/supplier/channel.vue

• [ ] Step 1: 在 data() 中新增 loadingIds 数组

找到 data() 的 return 对象，在 buttonLoading: false 后新增：

loadingIds: []

• Step 2: 在操作列新增「生成二维码」按钮

找到操作列的 template：

<template slot-scope="scope">
    <el-button type="text" @click="handleEdit(scope.row)">编辑</el-button>
    <el-button type="text" @click="handleDelete(scope.row)">删除</el-button>
</template>

替换为：

<template slot-scope="scope">
    <el-button type="text" @click="handleEdit(scope.row)">编辑</el-button>
    <el-button type="text" @click="handleDelete(scope.row)">删除</el-button>
    <el-button
      type="text"
      :loading="loadingIds.includes(scope.row.id)"
      @click="handleGenerateQr(scope.row)"
    >生成二维码</el-button>
</template>

• Step 3: 新增 handleGenerateQr 方法

在 methods 中，在 cancel() 方法后新增：

handleGenerateQr (row) {
  this.loadingIds.push(row.id)
  this.$http.post(`/core/channel/generateQr/${row.id}`).then(res => {
    if (res.data.code !== 0) {
      this.$message.error(res.data.msg)
    } else {
      row.qrUrl = res.data.data
      this.$message.success('二维码生成成功')
    }
  }).catch(() => {
    this.$message.error('操作失败，请重试')
  }).finally(() => {
    this.loadingIds = this.loadingIds.filter(id => id !== row.id)
  })
}

• Step 4: 手动验证

在列表页点击某行「生成二维码」：

• 按钮进入 loading 状态
• 请求成功后，该行二维码列从「未生成」变为缩略图
• 其他行按钮不受影响

• 网络失败时弹出错误提示

• [ ] Step 5: Commit

git add src/views/modules/supplier/channel.vue
git commit -m "feat: 渠道列表操作列新增生成二维码按钮"

---

自检清单

• 规格书 §3.1「列表新增渠道码列」→ Task 1
• 规格书 §3.1「列表新增二维码列，有图/无图两种状态」→ Task 2
• 规格书 §3.1「操作列新增生成二维码按钮，loading 等待，成功刷新行数据」→ Task 3
• 规格书 §3.2「新增表单无需改动」→ 未涉及，正确
• 错误处理：失败弹 $message.error，网络异常 catch → Task 3 Step 3
• per-row loading 避免多行互相干扰 → loadingIds 数组