123

doc/店铺后台/商品管理/商品列表/商品列表前端技术方案.md

@@ -0,0 +1,203 @@
+# 商品列表 — 前端技术方案
+
+> **依据：** 《商品列表功能需求.md》v1.1、《店铺商品列表技术方案.md》v1.0  
+> **前端规范：** `doc/前端设计/前端设计.md`  
+> **范围：** 仅 **ruoyi-ui 商家端（店铺经营管理端）** 当前店铺商品列表、检索、发品（v1.0 单规格）、编辑、提交上架、下架、删除；平台审核 **不在本页**。  
+> **实现状态：** 页面与 API 封装已落地，待菜单配置及 `/agri/seller/goods` 联调。
+
+---
+
+## 1. 技术栈与写法约定
+
+| 项 | 说明 |
+|----|------|
+| 框架 | Vue 2 + Element UI（与 RuoYi-Vue 一致） |
+| 请求 | `@/utils/request`；商家端接口携带 **`X-Shop-Id`** |
+| 参考页面 | `ruoyi-ui/src/views/agri/goods/audit/index.vue`（列表 Tab、批量操作） |
+| 商家端参考 | `ruoyi-ui/src/views/agri/seller/employee/index.vue`（`loadShopContext`） |
+| 布局 | 检索区 `el-card` + `<br/>` + 列表区 `el-card` + 表格 `border` |
+| 店铺切换 | **仅 Navbar**；业务页禁止展示店铺选择器（§5 商家端店铺上下文） |
+
+---
+
+## 2. 文件清单
+
+| 类型 | 路径 | 说明 |
+|------|------|------|
+| 列表页 | `ruoyi-ui/src/views/agri/seller/goods/index.vue` | 检索、Tab、列表、批量操作、发品/编辑弹窗 |
+| 详情抽屉 | `ruoyi-ui/src/views/agri/seller/goods/detail.vue` | 详情展示、行内操作 |
+| 商品 API | `ruoyi-ui/src/api/agri/seller/goods.js` | 列表、下拉、CRUD、submit、offShelf、delete |
+| 店铺上下文 | `ruoyi-ui/src/api/agri/seller/context.js` + `utils/sellerShop.js` | X-Shop-Id |
+
+**组件 name（keep-alive）：** `AgriSellerGoods`
+
+---
+
+## 3. 菜单与路由
+
+| 菜单名称 | 组件路径 | 路由 path（建议） | 权限标识 |
+|----------|----------|-------------------|----------|
+| 商品列表 | `agri/seller/goods/index` | `seller/goods` | `agri:seller:goods:list` |
+
+**上级菜单：** 店铺经营管理端 → **商品管理**
+
+| 按钮权限 | 标识 |
+|----------|------|
+| 详情 | `agri:seller:goods:query` |
+| 添加 / 编辑 / 提交上架 | `agri:seller:goods:edit` |
+| 添加 | `agri:seller:goods:add` |
+| 下架 | `agri:seller:goods:offshelf` |
+| 删除 | `agri:seller:goods:remove` |
+
+---
+
+## 4. 页面结构
+
+```text
+商品列表
+├── 检索区（el-card）
+│   ├── 商品编号 goodsSn（模糊）
+│   ├── 商品名称 goodsName（模糊）
+│   └── 商品分类 categoryId（平台二级下拉）
+├── 列表区（el-card + border 表格）
+│   ├── 状态 Tab：全部 / 未上架 / 待审核 / 出售中 / 审核失败 / 已下架
+│   ├── 工具栏：添加商品、批量提交上架、批量下架、批量删除
+│   ├── 列：编号、主图、名称、售价、库存、销量、商品分类、店铺分类、状态
+│   └── 行操作（按状态）：详情、编辑、提交上架、下架、删除
+├── 详情抽屉 detail.vue（72% 宽）
+│   ├── 基础 / 分类 / 状态 / 服务快照 / 详情 HTML
+│   └── 操作：编辑、提交上架、下架、删除（can* 或状态驱动）
+└── 添加/编辑弹窗（720px · v1.0 单规格）
+    ├── 商品分类 categoryId（必填，平台二级）
+    ├── 店铺商品分类 shopCategoryId（选填，本店二级）
+    ├── 商品名称、主图、销售价、库存
+    ├── 商品详情 detailContent（Editor 富文本）
+    └── 服务说明 serviceIds（多选；新建默认勾选 defaultShow）
+```
+
+**v1.0 未实现（后续扩展）：** 多图 gallery、多规格 SKU、运费模版、属性模版、独立 form 路由页。
+
+---
+
+## 5. 店铺上下文（X-Shop-Id）
+
+| 步骤 | 说明 |
+|------|------|
+| 页面 `created` | `getSellerContext()` → `setSellerShopContext` |
+| 每次 API | `sellerShopHeaders()` 注入 `X-Shop-Id` |
+| 切换店铺 | **仅 Navbar** → `location.reload()` |
+
+---
+
+## 6. 接口封装
+
+**Base URL：** `/agri/seller/goods`
+
+| 前端方法 | HTTP | 路径 | 用途 |
+|----------|------|------|------|
+| `listSellerGoods` | GET | `/list` | 分页列表 |
+| `sellerGoodsCategoryOptions` | GET | `/categoryOptions` | 平台二级分类 |
+| `sellerGoodsShopCategoryOptions` | GET | `/shopCategoryOptions` | 本店二级店铺分类 |
+| `sellerGoodsServiceOptions` | GET | `/serviceOptions` | `{ all, defaultShow }` |
+| `getSellerGoods` | GET | `/{goodsId}` | 详情 |
+| `addSellerGoods` | POST | `/` | 新增 → status=0 |
+| `updateSellerGoods` | PUT | `/` | 编辑（不改状态） |
+| `submitSellerGoods` | PUT | `/{goodsId}/submit` | 单条提交上架 |
+| `submitSellerGoodsBatch` | PUT | `/submit` | 批量提交 |
+| `offShelfSellerGoods` | PUT | `/{goodsId}/offShelf` | 单条下架 |
+| `offShelfSellerGoodsBatch` | PUT | `/offShelf` | 批量下架 |
+| `delSellerGoods` | DELETE | `/{goodsIds}` | 删除（逗号分隔批量） |
+
+### 6.1 列表 Query
+
+| 字段 | 说明 |
+|------|------|
+| pageNum, pageSize | 分页 |
+| goodsSn, goodsName | 模糊 |
+| categoryId | 平台二级分类 ID |
+| goodsStatusQuery | `0`～`4`；Tab 切换写入；不传查全部 |
+
+> 注意：商家列表用 **`goodsStatusQuery`**，与平台 `/agri/goods/list` 的 `goodsStatus` 字段名不同。
+
+### 6.2 商品状态（goods_status）
+
+| 值 | 标签 | 行操作 |
+|----|------|--------|
+| 0 | 未上架 | 详情、编辑、提交上架、删除 |
+| 1 | 待审核 | 详情、编辑 |
+| 2 | 出售中 | 详情、编辑、下架 |
+| 3 | 审核失败 | 详情、编辑、提交上架、删除 |
+| 4 | 已下架 | 详情、编辑、提交上架、删除 |
+
+### 6.3 保存体（GoodsSaveDTO · v1.0）
+
+| 字段 | 新增 | 编辑 | 说明 |
+|------|------|------|------|
+| categoryId | 必填 | 必填 | 平台二级 |
+| shopCategoryId | 选填 | 选填 | 本店二级 |
+| goodsName | 必填 | 必填 | max 200 |
+| mainPic | 必填 | 必填 | image-upload |
+| detailContent | 必填 | 必填 | 富文本 |
+| salePrice | 必填 | 必填 | ≥0 |
+| stock | 必填 | 必填 | 整数 ≥0 |
+| serviceIds | 选填 | 选填 | 数组 |
+| goodsId | — | 必填 | 编辑 |
+| goodsStatus | **禁止** | **禁止** | 后端拒收 |
+
+保存后状态 **不变**（新建为 0）；须单独调用 submit 接口上架。
+
+### 6.4 批量操作规则
+
+| 操作 | 允许状态 | 失败策略 |
+|------|----------|----------|
+| 批量提交 | 0、3、4 | 含其他状态 → 整批失败，`data.reasons` |
+| 批量下架 | 2 | 同上 |
+| 批量删除 | 0、3、4 | 同上 |
+
+前端通过 `selection.every(...)` 预禁用按钮；最终以服务端校验为准。
+
+### 6.5 详情 VO 扩展字段
+
+| 字段 | 用途 |
+|------|------|
+| canSubmit / canOffShelf / canDelete / canEdit | 按钮显隐 |
+| rejectReason | 审核失败展示 |
+| services[] | 服务快照；编辑时回显 `serviceIds` |
+| shopCategoryPath | 店铺分类路径 |
+
+---
+
+## 7. 交互要点
+
+| 场景 | 行为 |
+|------|------|
+| 添加成功 | 提示「未上架」；不自动提交 |
+| 提交成功 | 展示返回的 `goodsStatusLabel`（待审核 / 出售中） |
+| 下架 | 二次确认「C 端不可购买」 |
+| 删除 | 二次确认；待审核/出售中不可删 |
+| 审核失败 | 详情抽屉红色展示 `rejectReason` |
+| 服务默认勾选 | `serviceOptions.defaultShow` → 新建表单 `serviceIds` |
+
+---
+
+## 8. 联调检查清单
+
+- [ ] 菜单组件路径 `agri/seller/goods/index` 及按钮权限
+- [ ] Navbar 切换店铺后列表数据隔离
+- [ ] 五态 Tab 筛选正确
+- [ ] 添加 → 未上架 → 提交上架（免审开/关两种策略）
+- [ ] 出售中编辑保存后状态不变
+- [ ] 批量操作含非法状态时后端报错
+- [ ] 分类/店铺分类/服务下拉数据正确
+
+---
+
+## 9. 修订记录
+
+| 版本 | 说明 |
+|------|------|
+| v1.0 | 首版：列表 + v1.0 单规格发品弹窗 + 详情抽屉 + 状态流转操作 |
+
+---
+
+*文档版本：v1.0 · 关联《商品列表功能需求.md》v1.1、《店铺商品列表技术方案.md》v1.0*

ruoyi-ui/src/api/agri/seller/goods.js

@@ -0,0 +1,116 @@
+import request from '@/utils/request'
+import { sellerShopHeaders } from '@/utils/sellerShop'
+
+// 查询当前店铺商品列表
+export function listSellerGoods(query) {
+  return request({
+    url: '/agri/seller/goods/list',
+    method: 'get',
+    params: query,
+    headers: sellerShopHeaders()
+  })
+}
+
+// 平台二级「商品分类」下拉
+export function sellerGoodsCategoryOptions() {
+  return request({
+    url: '/agri/seller/goods/categoryOptions',
+    method: 'get',
+    headers: sellerShopHeaders()
+  })
+}
+
+// 本店二级「店铺商品分类」下拉
+export function sellerGoodsShopCategoryOptions(visibleOnly) {
+  return request({
+    url: '/agri/seller/goods/shopCategoryOptions',
+    method: 'get',
+    params: { visibleOnly: visibleOnly },
+    headers: sellerShopHeaders()
+  })
+}
+
+// 商品服务选项（all + defaultShow）
+export function sellerGoodsServiceOptions() {
+  return request({
+    url: '/agri/seller/goods/serviceOptions',
+    method: 'get',
+    headers: sellerShopHeaders()
+  })
+}
+
+// 查询商品详情
+export function getSellerGoods(goodsId) {
+  return request({
+    url: '/agri/seller/goods/' + goodsId,
+    method: 'get',
+    headers: sellerShopHeaders()
+  })
+}
+
+// 新增商品
+export function addSellerGoods(data) {
+  return request({
+    url: '/agri/seller/goods',
+    method: 'post',
+    data: data,
+    headers: sellerShopHeaders()
+  })
+}
+
+// 修改商品
+export function updateSellerGoods(data) {
+  return request({
+    url: '/agri/seller/goods',
+    method: 'put',
+    data: data,
+    headers: sellerShopHeaders()
+  })
+}
+
+// 提交上架（单条）
+export function submitSellerGoods(goodsId) {
+  return request({
+    url: '/agri/seller/goods/' + goodsId + '/submit',
+    method: 'put',
+    headers: sellerShopHeaders()
+  })
+}
+
+// 批量提交上架
+export function submitSellerGoodsBatch(data) {
+  return request({
+    url: '/agri/seller/goods/submit',
+    method: 'put',
+    data: data,
+    headers: sellerShopHeaders()
+  })
+}
+
+// 下架（单条）
+export function offShelfSellerGoods(goodsId) {
+  return request({
+    url: '/agri/seller/goods/' + goodsId + '/offShelf',
+    method: 'put',
+    headers: sellerShopHeaders()
+  })
+}
+
+// 批量下架
+export function offShelfSellerGoodsBatch(data) {
+  return request({
+    url: '/agri/seller/goods/offShelf',
+    method: 'put',
+    data: data,
+    headers: sellerShopHeaders()
+  })
+}
+
+// 删除商品（支持批量，逗号分隔 ID）
+export function delSellerGoods(goodsIds) {
+  return request({
+    url: '/agri/seller/goods/' + goodsIds,
+    method: 'delete',
+    headers: sellerShopHeaders()
+  })
+}

ruoyi-ui/src/views/agri/seller/goods/detail.vue

@@ -0,0 +1,192 @@
+<template>
+  <el-drawer
+    :title="'商品详情 · ' + (detail.goodsName || detail.goodsSn || '')"
+    :visible.sync="localVisible"
+    direction="rtl"
+    size="72%"
+    append-to-body
+    custom-class="detail-drawer"
+  >
+    <div v-loading="loading" class="drawer-content">
+      <h4 class="section-header">基础信息</h4>
+      <el-descriptions :column="2" border size="small" class="mb16">
+        <el-descriptions-item label="商品编号">{{ detail.goodsSn || '—' }}</el-descriptions-item>
+        <el-descriptions-item label="商品状态">
+          <el-tag size="small" :type="goodsStatusTag(detail.goodsStatus)">{{ goodsStatusLabel(detail.goodsStatus) }}</el-tag>
+        </el-descriptions-item>
+        <el-descriptions-item label="商品名称" :span="2">{{ detail.goodsName || '—' }}</el-descriptions-item>
+        <el-descriptions-item label="售价">{{ detail.salePrice != null ? detail.salePrice : '—' }}</el-descriptions-item>
+        <el-descriptions-item label="库存">{{ detail.stock != null ? detail.stock : '—' }}</el-descriptions-item>
+        <el-descriptions-item label="销量">{{ detail.salesCount != null ? detail.salesCount : '—' }}</el-descriptions-item>
+        <el-descriptions-item label="主图">
+          <image-preview v-if="detail.mainPic" :src="detail.mainPic" :width="80" :height="80" />
+          <span v-else>—</span>
+        </el-descriptions-item>
+      </el-descriptions>
+
+      <h4 class="section-header">分类信息</h4>
+      <el-descriptions :column="1" border size="small" class="mb16">
+        <el-descriptions-item label="商品分类">{{ detail.categoryPath || '—' }}</el-descriptions-item>
+        <el-descriptions-item label="店铺商品分类">{{ detail.shopCategoryPath || detail.shopCategoryName || '—' }}</el-descriptions-item>
+      </el-descriptions>
+
+      <h4 class="section-header">状态信息</h4>
+      <el-descriptions :column="2" border size="small" class="mb16">
+        <el-descriptions-item label="提交时间">{{ parseTime(detail.submitTime) || '—' }}</el-descriptions-item>
+        <el-descriptions-item label="审核时间">{{ parseTime(detail.auditTime) || '—' }}</el-descriptions-item>
+        <el-descriptions-item v-if="detail.goodsStatus === '3'" label="驳回原因" :span="2">
+          <span class="reject-reason">{{ detail.rejectReason || '—' }}</span>
+        </el-descriptions-item>
+        <el-descriptions-item v-if="detail.goodsStatus === '4'" label="下架时间">{{ parseTime(detail.offShelfTime) || '—' }}</el-descriptions-item>
+      </el-descriptions>
+
+      <h4 class="section-header">商品服务快照</h4>
+      <el-table v-if="detail.services && detail.services.length" border size="small" :data="detail.services" class="mb16">
+        <el-table-column label="服务名称" prop="serviceName" />
+        <el-table-column label="简介" prop="serviceIntro" :show-overflow-tooltip="true" />
+        <el-table-column label="图标" width="80">
+          <template slot-scope="scope">
+            <image-preview :src="scope.row.serviceIcon" :width="40" :height="40" />
+          </template>
+        </el-table-column>
+      </el-table>
+      <div v-else class="empty-tip mb16">暂无勾选服务项</div>
+
+      <h4 v-if="detail.detailContent" class="section-header">商品详情</h4>
+      <div v-if="detail.detailContent" class="detail-content mb16" v-html="detail.detailContent"></div>
+
+      <div class="action-bar">
+        <el-button v-if="detail.canEdit !== false" type="primary" plain @click="handleEdit" v-hasPermi="['agri:seller:goods:edit']">编辑</el-button>
+        <el-button v-if="detail.canSubmit" type="success" @click="handleSubmit" v-hasPermi="['agri:seller:goods:edit']">提交上架</el-button>
+        <el-button v-if="detail.canOffShelf" type="warning" plain @click="handleOffShelf" v-hasPermi="['agri:seller:goods:offshelf']">下架</el-button>
+        <el-button v-if="detail.canDelete" type="danger" plain @click="handleDelete" v-hasPermi="['agri:seller:goods:remove']">删除</el-button>
+      </div>
+    </div>
+  </el-drawer>
+</template>
+
+<script>
+import {
+  getSellerGoods,
+  submitSellerGoods,
+  offShelfSellerGoods,
+  delSellerGoods
+} from "@/api/agri/seller/goods"
+
+export default {
+  name: "SellerGoodsDetail",
+  props: {
+    visible: { type: Boolean, default: false },
+    goodsId: { type: [Number, String], default: null }
+  },
+  data() {
+    return {
+      localVisible: false,
+      loading: false,
+      detail: {}
+    }
+  },
+  watch: {
+    visible(val) {
+      this.localVisible = val
+      if (val && this.goodsId) {
+        this.loadDetail()
+      }
+    },
+    localVisible(val) {
+      this.$emit("update:visible", val)
+    }
+  },
+  methods: {
+    /** 加载商品详情 */
+    loadDetail() {
+      this.loading = true
+      getSellerGoods(this.goodsId).then(response => {
+        this.detail = response.data || {}
+        this.loading = false
+      }).catch(() => {
+        this.loading = false
+      })
+    },
+    goodsStatusLabel(status) {
+      const map = { "0": "未上架", "1": "待审核", "2": "出售中", "3": "审核失败", "4": "已下架" }
+      return map[status] || this.detail.goodsStatusLabel || "—"
+    },
+    goodsStatusTag(status) {
+      const map = { "0": "", "1": "warning", "2": "success", "3": "danger", "4": "info" }
+      return map[status] || "info"
+    },
+    /** 跳转编辑 */
+    handleEdit() {
+      this.$emit("edit", this.detail)
+      this.localVisible = false
+    },
+    /** 提交上架 */
+    handleSubmit() {
+      this.$modal.confirm("确认提交上架该商品？").then(() => {
+        return submitSellerGoods(this.goodsId)
+      }).then(response => {
+        const data = response.data || {}
+        const label = data.goodsStatusLabel || "操作成功"
+        this.$modal.msgSuccess("提交成功，当前状态：" + label)
+        this.localVisible = false
+        this.$emit("success")
+      }).catch(() => {})
+    },
+    /** 下架 */
+    handleOffShelf() {
+      this.$modal.confirm("下架后 C 端不可购买，是否继续？").then(() => {
+        return offShelfSellerGoods(this.goodsId)
+      }).then(() => {
+        this.$modal.msgSuccess("下架成功")
+        this.localVisible = false
+        this.$emit("success")
+      }).catch(() => {})
+    },
+    /** 删除 */
+    handleDelete() {
+      this.$modal.confirm("确认删除该商品？删除后不可恢复。").then(() => {
+        return delSellerGoods(this.goodsId)
+      }).then(() => {
+        this.$modal.msgSuccess("删除成功")
+        this.localVisible = false
+        this.$emit("success")
+      }).catch(() => {})
+    }
+  }
+}
+</script>
+
+<style scoped>
+.drawer-content {
+  padding: 0 20px 20px;
+}
+.section-header {
+  margin: 16px 0 10px;
+  font-size: 15px;
+  color: #303133;
+  border-left: 3px solid #409EFF;
+  padding-left: 8px;
+}
+.mb16 {
+  margin-bottom: 16px;
+}
+.reject-reason {
+  color: #F56C6C;
+}
+.empty-tip {
+  color: #909399;
+  font-size: 13px;
+}
+.detail-content {
+  padding: 12px;
+  background: #fafafa;
+  border-radius: 4px;
+  line-height: 1.6;
+}
+.action-bar {
+  margin-top: 24px;
+  padding-top: 16px;
+  border-top: 1px solid #EBEEF5;
+}
+</style>

ruoyi-ui/src/views/agri/seller/goods/index.vue

@@ -0,0 +1,449 @@
+<template>
+  <div class="app-container">
+    <!-- 检索区 -->
+    <el-card shadow="never" class="search-card">
+      <el-form :model="queryParams" ref="queryForm" size="small" :inline="true" v-show="showSearch" label-width="80px">
+        <el-form-item label="商品编号" prop="goodsSn">
+          <el-input v-model="queryParams.goodsSn" placeholder="商品编号" clearable style="width: 160px" @keyup.enter.native="handleQuery" />
+        </el-form-item>
+        <el-form-item label="商品名称" prop="goodsName">
+          <el-input v-model="queryParams.goodsName" placeholder="商品名称" clearable style="width: 160px" @keyup.enter.native="handleQuery" />
+        </el-form-item>
+        <el-form-item label="商品分类" prop="categoryId">
+          <el-select v-model="queryParams.categoryId" placeholder="全部" clearable filterable style="width: 200px">
+            <el-option v-for="item in categoryOptions" :key="item.categoryId" :label="item.label" :value="item.categoryId" />
+          </el-select>
+        </el-form-item>
+        <el-form-item>
+          <el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button>
+          <el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
+        </el-form-item>
+      </el-form>
+    </el-card>
+
+    <br/>
+
+    <!-- 列表区 -->
+    <el-card shadow="never" class="table-card">
+      <el-tabs v-model="statusTab" @tab-click="handleTabClick">
+        <el-tab-pane label="全部" name="all" />
+        <el-tab-pane label="未上架" name="0" />
+        <el-tab-pane label="待审核" name="1" />
+        <el-tab-pane label="出售中" name="2" />
+        <el-tab-pane label="审核失败" name="3" />
+        <el-tab-pane label="已下架" name="4" />
+      </el-tabs>
+
+      <el-row :gutter="10" class="mb8">
+        <el-col :span="1.5">
+          <el-button type="primary" plain icon="el-icon-plus" size="mini" @click="handleAdd" v-hasPermi="['agri:seller:goods:add']">添加商品</el-button>
+        </el-col>
+        <el-col :span="1.5">
+          <el-button type="success" plain icon="el-icon-upload2" size="mini" :disabled="!canBatchSubmit" @click="handleBatchSubmit" v-hasPermi="['agri:seller:goods:edit']">批量提交上架</el-button>
+        </el-col>
+        <el-col :span="1.5">
+          <el-button type="warning" plain icon="el-icon-bottom" size="mini" :disabled="!canBatchOffShelf" @click="handleBatchOffShelf" v-hasPermi="['agri:seller:goods:offshelf']">批量下架</el-button>
+        </el-col>
+        <el-col :span="1.5">
+          <el-button type="danger" plain icon="el-icon-delete" size="mini" :disabled="!canBatchDelete" @click="handleBatchDelete" v-hasPermi="['agri:seller:goods:remove']">批量删除</el-button>
+        </el-col>
+        <right-toolbar :showSearch.sync="showSearch" @queryTable="getList"></right-toolbar>
+      </el-row>
+
+      <el-table border v-loading="loading" :data="goodsList" @selection-change="handleSelectionChange">
+        <el-table-column type="selection" width="55" align="center" />
+        <el-table-column label="商品编号" align="center" prop="goodsSn" width="140" />
+        <el-table-column label="主图" align="center" width="80">
+          <template slot-scope="scope">
+            <image-preview :src="scope.row.mainPic" :width="50" :height="50" />
+          </template>
+        </el-table-column>
+        <el-table-column label="商品名称" align="center" prop="goodsName" min-width="140" :show-overflow-tooltip="true" />
+        <el-table-column label="售价" align="center" prop="salePrice" width="90" />
+        <el-table-column label="库存" align="center" prop="stock" width="70" />
+        <el-table-column label="销量" align="center" prop="salesCount" width="70" />
+        <el-table-column label="商品分类" align="center" prop="categoryPath" min-width="120" :show-overflow-tooltip="true" />
+        <el-table-column label="店铺分类" align="center" prop="shopCategoryName" min-width="110" :show-overflow-tooltip="true">
+          <template slot-scope="scope">
+            <span>{{ scope.row.shopCategoryName || '—' }}</span>
+          </template>
+        </el-table-column>
+        <el-table-column label="状态" align="center" prop="goodsStatus" width="90">
+          <template slot-scope="scope">
+            <el-tag size="small" :type="goodsStatusTag(scope.row.goodsStatus)">{{ goodsStatusLabel(scope.row) }}</el-tag>
+          </template>
+        </el-table-column>
+        <el-table-column label="操作" align="center" width="240" fixed="right">
+          <template slot-scope="scope">
+            <el-button size="mini" type="text" icon="el-icon-view" @click="handleDetail(scope.row)" v-hasPermi="['agri:seller:goods:query']">详情</el-button>
+            <el-button size="mini" type="text" icon="el-icon-edit" @click="handleUpdate(scope.row)" v-hasPermi="['agri:seller:goods:edit']">编辑</el-button>
+            <el-button v-if="canRowSubmit(scope.row)" size="mini" type="text" icon="el-icon-upload2" @click="handleRowSubmit(scope.row)" v-hasPermi="['agri:seller:goods:edit']">提交上架</el-button>
+            <el-button v-if="scope.row.goodsStatus === '2'" size="mini" type="text" icon="el-icon-bottom" @click="handleRowOffShelf(scope.row)" v-hasPermi="['agri:seller:goods:offshelf']">下架</el-button>
+            <el-button v-if="canRowDelete(scope.row)" size="mini" type="text" icon="el-icon-delete" @click="handleRowDelete(scope.row)" v-hasPermi="['agri:seller:goods:remove']">删除</el-button>
+          </template>
+        </el-table-column>
+      </el-table>
+
+      <pagination v-show="total > 0" :total="total" :page.sync="queryParams.pageNum" :limit.sync="queryParams.pageSize" @pagination="getList" />
+    </el-card>
+
+    <!-- 详情抽屉 -->
+    <seller-goods-detail
+      :visible.sync="detailOpen"
+      :goods-id="currentGoodsId"
+      @edit="handleUpdateFromDetail"
+      @success="handleSuccess"
+    />
+
+    <!-- 添加/编辑弹窗 -->
+    <el-dialog :title="formTitle" :visible.sync="formOpen" width="720px" append-to-body @close="cancelForm">
+      <el-form ref="form" :model="form" :rules="rules" label-width="110px">
+        <el-form-item label="商品分类" prop="categoryId">
+          <el-select v-model="form.categoryId" placeholder="请选择平台二级分类" filterable style="width: 100%">
+            <el-option v-for="item in categoryOptions" :key="item.categoryId" :label="item.label" :value="item.categoryId" />
+          </el-select>
+        </el-form-item>
+        <el-form-item label="店铺商品分类" prop="shopCategoryId">
+          <el-select v-model="form.shopCategoryId" placeholder="选填，本店二级分类" clearable filterable style="width: 100%">
+            <el-option v-for="item in shopCategoryOptions" :key="item.shopCategoryId" :label="item.label" :value="item.shopCategoryId" />
+          </el-select>
+        </el-form-item>
+        <el-form-item label="商品名称" prop="goodsName">
+          <el-input v-model="form.goodsName" placeholder="请输入商品名称" maxlength="200" />
+        </el-form-item>
+        <el-form-item label="商品主图" prop="mainPic">
+          <image-upload v-model="form.mainPic" :limit="1" :file-size="5" :file-type="['png', 'jpg', 'jpeg']" />
+        </el-form-item>
+        <el-row :gutter="16">
+          <el-col :span="12">
+            <el-form-item label="销售价" prop="salePrice">
+              <el-input-number v-model="form.salePrice" :min="0" :precision="2" controls-position="right" style="width: 100%" />
+            </el-form-item>
+          </el-col>
+          <el-col :span="12">
+            <el-form-item label="库存" prop="stock">
+              <el-input-number v-model="form.stock" :min="0" :precision="0" controls-position="right" style="width: 100%" />
+            </el-form-item>
+          </el-col>
+        </el-row>
+        <el-form-item label="商品详情" prop="detailContent">
+          <editor v-model="form.detailContent" :min-height="200" />
+        </el-form-item>
+        <el-form-item label="服务说明">
+          <el-checkbox-group v-model="form.serviceIds">
+            <el-checkbox v-for="item in serviceOptions" :key="item.serviceId" :label="item.serviceId">{{ item.serviceName }}</el-checkbox>
+          </el-checkbox-group>
+          <div v-if="!serviceOptions.length" class="form-tip">暂无可用服务项</div>
+        </el-form-item>
+      </el-form>
+      <div slot="footer" class="dialog-footer">
+        <el-button type="primary" @click="submitForm">保 存</el-button>
+        <el-button @click="cancelForm">取 消</el-button>
+      </div>
+    </el-dialog>
+  </div>
+</template>
+
+<script>
+import {
+  listSellerGoods,
+  sellerGoodsCategoryOptions,
+  sellerGoodsShopCategoryOptions,
+  sellerGoodsServiceOptions,
+  getSellerGoods,
+  addSellerGoods,
+  updateSellerGoods,
+  submitSellerGoods,
+  submitSellerGoodsBatch,
+  offShelfSellerGoods,
+  offShelfSellerGoodsBatch,
+  delSellerGoods
+} from "@/api/agri/seller/goods"
+import { getSellerContext } from "@/api/agri/seller/context"
+import { setSellerShopContext } from "@/utils/sellerShop"
+import SellerGoodsDetail from "./detail"
+
+export default {
+  name: "AgriSellerGoods",
+  components: { SellerGoodsDetail },
+  data() {
+    return {
+      loading: true,
+      showSearch: true,
+      total: 0,
+      goodsList: [],
+      selection: [],
+      detailOpen: false,
+      currentGoodsId: null,
+      formOpen: false,
+      formTitle: "",
+      statusTab: "all",
+      categoryOptions: [],
+      shopCategoryOptions: [],
+      serviceOptions: [],
+      defaultServiceIds: [],
+      queryParams: {
+        pageNum: 1,
+        pageSize: 10,
+        goodsSn: undefined,
+        goodsName: undefined,
+        categoryId: undefined,
+        goodsStatusQuery: undefined
+      },
+      form: {},
+      rules: {
+        categoryId: [{ required: true, message: "请选择商品分类", trigger: "change" }],
+        goodsName: [{ required: true, message: "请输入商品名称", trigger: "blur" }],
+        mainPic: [{ required: true, message: "请上传商品主图", trigger: "change" }],
+        salePrice: [{ required: true, message: "请输入销售价", trigger: "blur" }],
+        stock: [{ required: true, message: "请输入库存", trigger: "blur" }],
+        detailContent: [{ required: true, message: "请填写商品详情", trigger: "blur" }]
+      }
+    }
+  },
+  computed: {
+    /** 所选是否均可提交上架 */
+    canBatchSubmit() {
+      return this.selection.length > 0 && this.selection.every(item => this.canRowSubmit(item))
+    },
+    /** 所选是否均可下架 */
+    canBatchOffShelf() {
+      return this.selection.length > 0 && this.selection.every(item => item.goodsStatus === "2")
+    },
+    /** 所选是否均可删除 */
+    canBatchDelete() {
+      return this.selection.length > 0 && this.selection.every(item => this.canRowDelete(item))
+    }
+  },
+  created() {
+    this.initPage()
+  },
+  methods: {
+    /** 初始化：店铺上下文 + 下拉 + 列表 */
+    initPage() {
+      this.loadShopContext().then(() => {
+        this.loadFormOptions()
+        this.getList()
+      }).catch(() => {
+        this.loadFormOptions()
+        this.getList()
+      })
+    },
+    /** 写入 X-Shop-Id 缓存 */
+    loadShopContext() {
+      return getSellerContext().then(response => {
+        const data = response.data || {}
+        if (data.shopId != null) {
+          setSellerShopContext(data.shopId, data.shopName)
+        }
+      })
+    },
+    /** 加载发品/检索用下拉 */
+    loadFormOptions() {
+      sellerGoodsCategoryOptions().then(response => {
+        this.categoryOptions = response.data || []
+      }).catch(() => {})
+      sellerGoodsShopCategoryOptions(false).then(response => {
+        this.shopCategoryOptions = response.data || []
+      }).catch(() => {})
+      sellerGoodsServiceOptions().then(response => {
+        const data = response.data || {}
+        this.serviceOptions = data.all || []
+        const defaults = data.defaultShow || []
+        this.defaultServiceIds = defaults.map(item => item.serviceId)
+      }).catch(() => {})
+    },
+    /** 查询商品列表 */
+    getList() {
+      this.loading = true
+      listSellerGoods(this.queryParams).then(response => {
+        this.goodsList = response.rows || []
+        this.total = response.total || 0
+        this.loading = false
+      }).catch(() => {
+        this.loading = false
+      })
+    },
+    goodsStatusLabel(row) {
+      if (row.goodsStatusLabel) {
+        return row.goodsStatusLabel
+      }
+      const map = { "0": "未上架", "1": "待审核", "2": "出售中", "3": "审核失败", "4": "已下架" }
+      return map[row.goodsStatus] || "—"
+    },
+    goodsStatusTag(status) {
+      const map = { "0": "", "1": "warning", "2": "success", "3": "danger", "4": "info" }
+      return map[status] || "info"
+    },
+    /** 是否可提交上架 */
+    canRowSubmit(row) {
+      return row.goodsStatus === "0" || row.goodsStatus === "3" || row.goodsStatus === "4"
+    },
+    /** 是否可删除 */
+    canRowDelete(row) {
+      return this.canRowSubmit(row)
+    },
+    handleTabClick() {
+      this.queryParams.goodsStatusQuery = this.statusTab === "all" ? undefined : this.statusTab
+      this.queryParams.pageNum = 1
+      this.getList()
+    },
+    handleQuery() {
+      this.queryParams.pageNum = 1
+      this.getList()
+    },
+    resetQuery() {
+      this.resetForm("queryForm")
+      this.statusTab = "all"
+      this.queryParams.goodsStatusQuery = undefined
+      this.handleQuery()
+    },
+    handleSelectionChange(selection) {
+      this.selection = selection
+    },
+    handleDetail(row) {
+      this.currentGoodsId = row.goodsId
+      this.detailOpen = true
+    },
+    /** 重置表单 */
+    resetFormData() {
+      this.form = {
+        goodsId: undefined,
+        categoryId: undefined,
+        shopCategoryId: undefined,
+        goodsName: undefined,
+        mainPic: undefined,
+        detailContent: undefined,
+        salePrice: undefined,
+        stock: undefined,
+        serviceIds: [...this.defaultServiceIds]
+      }
+      this.resetForm("form")
+    },
+    /** 打开添加商品 */
+    handleAdd() {
+      this.resetFormData()
+      this.formOpen = true
+      this.formTitle = "添加商品"
+    },
+    /** 打开编辑商品 */
+    handleUpdate(row) {
+      this.resetFormData()
+      getSellerGoods(row.goodsId).then(response => {
+        const data = response.data || {}
+        this.form = {
+          goodsId: data.goodsId,
+          categoryId: data.categoryId,
+          shopCategoryId: data.shopCategoryId,
+          goodsName: data.goodsName,
+          mainPic: data.mainPic,
+          detailContent: data.detailContent,
+          salePrice: data.salePrice,
+          stock: data.stock,
+          serviceIds: (data.services || []).map(item => item.serviceId)
+        }
+        this.formOpen = true
+        this.formTitle = "编辑商品"
+      })
+    },
+    /** 详情抽屉跳转编辑 */
+    handleUpdateFromDetail(detail) {
+      this.handleUpdate({ goodsId: detail.goodsId })
+    },
+    cancelForm() {
+      this.formOpen = false
+      this.resetFormData()
+    },
+    /** 保存商品 */
+    submitForm() {
+      this.$refs["form"].validate(valid => {
+        if (!valid) {
+          return
+        }
+        const payload = { ...this.form }
+        if (!payload.shopCategoryId) {
+          payload.shopCategoryId = null
+        }
+        const submitFn = payload.goodsId != null ? updateSellerGoods : addSellerGoods
+        submitFn(payload).then(() => {
+          this.$modal.msgSuccess(payload.goodsId != null ? "修改成功" : "添加成功，商品状态为未上架")
+          this.formOpen = false
+          this.getList()
+        })
+      })
+    },
+    /** 单条提交上架 */
+    handleRowSubmit(row) {
+      this.$modal.confirm("确认提交上架商品「" + row.goodsName + "」？").then(() => {
+        return submitSellerGoods(row.goodsId)
+      }).then(response => {
+        const data = response.data || {}
+        const label = data.goodsStatusLabel || "操作成功"
+        this.$modal.msgSuccess("提交成功，当前状态：" + label)
+        this.handleSuccess()
+      }).catch(() => {})
+    },
+    /** 批量提交上架 */
+    handleBatchSubmit() {
+      const ids = this.selection.map(item => item.goodsId)
+      this.$modal.confirm("确认批量提交上架所选 " + ids.length + " 件商品？").then(() => {
+        return submitSellerGoodsBatch({ goodsIds: ids })
+      }).then(() => {
+        this.$modal.msgSuccess("批量提交成功")
+        this.handleSuccess()
+      }).catch(() => {})
+    },
+    /** 单条下架 */
+    handleRowOffShelf(row) {
+      this.$modal.confirm("下架后 C 端不可购买，是否继续？").then(() => {
+        return offShelfSellerGoods(row.goodsId)
+      }).then(() => {
+        this.$modal.msgSuccess("下架成功")
+        this.handleSuccess()
+      }).catch(() => {})
+    },
+    /** 批量下架 */
+    handleBatchOffShelf() {
+      const ids = this.selection.map(item => item.goodsId)
+      this.$modal.confirm("确认批量下架所选 " + ids.length + " 件商品？").then(() => {
+        return offShelfSellerGoodsBatch({ goodsIds: ids })
+      }).then(() => {
+        this.$modal.msgSuccess("批量下架成功")
+        this.handleSuccess()
+      }).catch(() => {})
+    },
+    /** 单条删除 */
+    handleRowDelete(row) {
+      this.$modal.confirm("确认删除商品「" + row.goodsName + "」？").then(() => {
+        return delSellerGoods(row.goodsId)
+      }).then(() => {
+        this.$modal.msgSuccess("删除成功")
+        this.handleSuccess()
+      }).catch(() => {})
+    },
+    /** 批量删除 */
+    handleBatchDelete() {
+      const ids = this.selection.map(item => item.goodsId)
+      this.$modal.confirm("确认批量删除所选 " + ids.length + " 件商品？").then(() => {
+        return delSellerGoods(ids.join(","))
+      }).then(() => {
+        this.$modal.msgSuccess("批量删除成功")
+        this.handleSuccess()
+      }).catch(() => {})
+    },
+    handleSuccess() {
+      this.getList()
+    }
+  }
+}
+</script>
+
+<style scoped>
+.search-card {
+  margin-bottom: 0;
+}
+.form-tip {
+  color: #909399;
+  font-size: 13px;
+}
+</style>