feat(platform): 新增企业端轮播广告和楼层广告管理功能

- 创建轮播广告管理页面，支持广告的增删改查和上下线状态管理
- 实现楼层广告配置功能，包括三联广告、图标广告和横幅广告的展示和编辑
- 集成图片上传组件，支持广告图片的上传和预览功能
- 添加日期范围筛选功能，便于按时间段查询广告内容
- 实现分页表格展示广告列表，支持按名称和时间范围搜索
- 集成广告状态切换功能，实时显示上线/下线标签
- 添加表单验证功能，确保广告信息的完整性和准确性
- 实现广告排序功能，支持自定义展示顺序
- 创建商品配置页面，集成商品搜索和价格管理功能

src/views/platform/enterprise/carousel/index.vue

@@ -0,0 +1,352 @@
+<template>
+  <div class="carousel-page">
+    <div class="carousel-container">
+      <!-- 搜索区域（独立卡片） -->
+      <div class="search-card">
+        <el-form ref="queryFormRef" :model="queryParams" :inline="true">
+          <el-form-item label="广告名称" prop="adName">
+            <el-input
+              v-model="queryParams.adName"
+              placeholder="请输入广告名称"
+              clearable
+              @keyup.enter="handleQuery"
+            />
+          </el-form-item>
+          <el-form-item label="起始时间" prop="dateRange">
+            <el-date-picker
+              v-model="dateRange"
+              type="daterange"
+              range-separator="-"
+              start-placeholder="开始时间"
+              end-placeholder="结束时间"
+              value-format="YYYY-MM-DD"
+              style="width: 240px"
+            />
+          </el-form-item>
+          <el-form-item>
+            <el-button type="primary" icon="Search" @click="handleQuery">搜索</el-button>
+            <el-button icon="Refresh" @click="resetQuery">重置</el-button>
+            <el-button type="primary" plain icon="Plus" @click="handleAdd">添加广告</el-button>
+          </el-form-item>
+        </el-form>
+        <div class="toolbar">
+          <right-toolbar v-model:show-search="showSearch" @query-table="getList"></right-toolbar>
+        </div>
+      </div>
+
+      <!-- 表格区域（独立卡片） -->
+      <div class="table-card">
+        <!-- 表格标题 -->
+        <div class="table-title">轮播广告信息列表</div>
+
+      <!-- 表格 -->
+      <el-table v-loading="loading" :data="carouselList" border>
+        <el-table-column label="广告图片" align="center" width="120">
+          <template #default="scope">
+            <el-image
+              :src="scope.row.imageUrl"
+              :preview-src-list="[scope.row.imageUrl]"
+              fit="cover"
+              style="width: 80px; height: 60px; border-radius: 4px"
+              lazy
+            />
+          </template>
+        </el-table-column>
+        <el-table-column label="广告名称" align="center" prop="title" :show-overflow-tooltip="true" min-width="200" />
+        <el-table-column label="时间" align="center" width="280">
+          <template #default="scope">
+            <div>开始时间：{{ scope.row.startTime }}</div>
+            <div>到期时间：{{ scope.row.endTime }}</div>
+          </template>
+        </el-table-column>
+        <el-table-column label="上线/下线" align="center" width="100">
+          <template #default="scope">
+            <el-tag :type="scope.row.status === 1 ? 'success' : 'danger'">
+              {{ scope.row.status === 1 ? '上线' : '下线' }}
+            </el-tag>
+          </template>
+        </el-table-column>
+        <el-table-column label="排序" align="center" prop="sort" width="80" />
+        <el-table-column label="链接" align="center" prop="link" :show-overflow-tooltip="true" min-width="200" />
+        <el-table-column label="操作" align="center" width="150">
+          <template #default="scope">
+            <span class="action-link primary" @click="handleUpdate(scope.row)">编辑</span>
+            <span class="action-link danger" @click="handleDelete(scope.row)">删除</span>
+          </template>
+        </el-table-column>
+      </el-table>
+
+        <!-- 分页 -->
+        <pagination
+          v-show="total > 0"
+          v-model:page="queryParams.pageNum"
+          v-model:limit="queryParams.pageSize"
+          :total="total"
+          @pagination="getList"
+        />
+      </div>
+    </div>
+
+    <!-- 添加或修改对话框 -->
+    <el-dialog v-model="dialog.visible" :title="dialog.title" width="600px" append-to-body @close="cancel">
+      <el-form ref="carouselFormRef" :model="form" :rules="rules" label-width="100px">
+        <el-form-item label="广告名称" prop="title">
+          <el-input v-model="form.title" placeholder="请输入广告名称" />
+        </el-form-item>
+        <el-form-item label="广告图片" prop="imageUrl">
+          <image-upload v-model="form.imageUrl" :limit="1" />
+        </el-form-item>
+        <el-form-item label="开始时间" prop="startTime">
+          <el-date-picker
+            v-model="form.startTime"
+            type="date"
+            placeholder="选择开始时间"
+            value-format="YYYY-MM-DD"
+            style="width: 100%"
+          />
+        </el-form-item>
+        <el-form-item label="结束时间" prop="endTime">
+          <el-date-picker
+            v-model="form.endTime"
+            type="date"
+            placeholder="选择结束时间"
+            value-format="YYYY-MM-DD"
+            style="width: 100%"
+          />
+        </el-form-item>
+        <el-form-item label="链接地址" prop="link">
+          <el-input v-model="form.link" placeholder="请输入链接地址" />
+        </el-form-item>
+        <el-form-item label="排序" prop="sort">
+          <el-input-number v-model="form.sort" controls-position="right" :min="0" />
+        </el-form-item>
+        <el-form-item label="状态" prop="status">
+          <el-radio-group v-model="form.status">
+            <el-radio :value="1">上线</el-radio>
+            <el-radio :value="0">下线</el-radio>
+          </el-radio-group>
+        </el-form-item>
+      </el-form>
+      <template #footer>
+        <div class="dialog-footer">
+          <el-button type="primary" @click="submitForm">确 定</el-button>
+          <el-button @click="cancel">取 消</el-button>
+        </div>
+      </template>
+    </el-dialog>
+  </div>
+</template>
+
+<script setup name="DecorationCarousel" lang="ts">
+import { listAdContent, addAdContent, updateAdContent, delAdContent } from '@/api/ad/content';
+import dayjs from 'dayjs';
+
+const { proxy } = getCurrentInstance() as ComponentInternalInstance;
+
+const carouselList = ref<any[]>([]);
+const loading = ref(false);
+const total = ref(0);
+const showSearch = ref(true);
+const dateRange = ref<[string, string]>(['', '']);
+
+const queryParams = ref({
+  pageNum: 1,
+  pageSize: 10,
+  adName: '',
+  startTime: '',
+  endTime: ''
+});
+
+const dialog = reactive<DialogOption>({
+  visible: false,
+  title: ''
+});
+
+const carouselFormRef = ref<ElFormInstance>();
+
+const initFormData = {
+  id: undefined as number | undefined,
+  adType: 'enterprise_banner',
+  title: '',
+  imageUrl: '',
+  startTime: '',
+  endTime: '',
+  link: '',
+  color: '#ffffff',
+  remark: '',
+  extJson: '{}',
+  sort: 0,
+  status: 1
+};
+
+const form = ref({ ...initFormData });
+
+const rules = reactive({
+  title: [{ required: true, message: '广告名称不能为空', trigger: 'blur' }],
+  startTime: [{ required: true, message: '开始时间不能为空', trigger: 'change' }],
+  endTime: [{ required: true, message: '结束时间不能为空', trigger: 'change' }]
+});
+
+/** 查询列表 */
+const getList = async () => {
+  loading.value = true;
+  const params: any = {
+    pageNum: queryParams.value.pageNum,
+    pageSize: queryParams.value.pageSize,
+    title: queryParams.value.adName,
+    adType: 'enterprise_banner'
+  };
+  if (dateRange.value && dateRange.value[0] && dateRange.value[1]) {
+    params.startTime = dateRange.value[0];
+    params.endTime = dateRange.value[1];
+  }
+  const res = await listAdContent(params);
+  carouselList.value = res.rows || [];
+  total.value = res.total || 0;
+  loading.value = false;
+};
+
+/** 搜索按钮操作 */
+const handleQuery = () => {
+  queryParams.value.pageNum = 1;
+  getList();
+};
+
+/** 重置按钮操作 */
+const resetQuery = () => {
+  dateRange.value = ['', ''];
+  queryParams.value.adName = '';
+  queryParams.value.startTime = '';
+  queryParams.value.endTime = '';
+  handleQuery();
+};
+
+/** 取消按钮 */
+const cancel = () => {
+  reset();
+  dialog.visible = false;
+};
+
+/** 表单重置 */
+const reset = () => {
+  form.value = { ...initFormData };
+  carouselFormRef.value?.resetFields();
+};
+
+/** 新增按钮操作 */
+const handleAdd = () => {
+  reset();
+  const today = dayjs().format('YYYY-MM-DD');
+  const future = dayjs().add(30, 'day').format('YYYY-MM-DD');
+  form.value.startTime = today;
+  form.value.endTime = future;
+  dialog.visible = true;
+  dialog.title = '添加广告';
+};
+
+/** 修改按钮操作 */
+const handleUpdate = (row: any) => {
+  reset();
+  form.value = {
+    ...row,
+    adType: 'enterprise_banner',
+    imageUrl: row.imageUrl || '',
+    status: row.status ?? 1,
+    color: row.color || '#ffffff',
+    remark: row.remark || '',
+    extJson: row.extJson || '{}',
+    startTime: row.startTime ? dayjs(row.startTime).format('YYYY-MM-DD') : '',
+    endTime: row.endTime ? dayjs(row.endTime).format('YYYY-MM-DD') : ''
+  };
+  dialog.visible = true;
+  dialog.title = '修改广告';
+};
+
+/** 提交按钮 */
+const submitForm = () => {
+  carouselFormRef.value?.validate((valid: boolean) => {
+    if (valid) {
+      const api = form.value.id ? updateAdContent : addAdContent;
+      api(form.value).then(() => {
+        proxy?.$modal.msgSuccess(form.value.id ? '修改成功' : '新增成功');
+        dialog.visible = false;
+        getList();
+      });
+    }
+  });
+};
+
+/** 删除按钮操作 */
+const handleDelete = (row: any) => {
+  proxy?.$modal.confirm('是否确认删除广告名称为"' + row.title + '"的数据项?').then(() => {
+    delAdContent(row.id).then(() => {
+      proxy?.$modal.msgSuccess('删除成功');
+      getList();
+    });
+  });
+};
+
+onMounted(() => {
+  getList();
+});
+</script>
+
+<style scoped lang="scss">
+.carousel-page {
+  min-height: 100vh;
+  background: #f5f5f5;
+  padding: 20px;
+}
+
+.carousel-container {
+  max-width: 1200px;
+  margin: 0 auto;
+}
+
+.search-card {
+  background: #fff;
+  border-radius: 4px;
+  padding: 20px;
+  margin-bottom: 12px;
+  display: flex;
+  justify-content: space-between;
+  align-items: flex-start;
+
+  .el-form {
+    flex: 1;
+  }
+
+  .toolbar {
+    flex-shrink: 0;
+  }
+}
+
+.table-card {
+  background: #fff;
+  border-radius: 4px;
+  padding: 20px;
+}
+
+.table-title {
+  font-size: 16px;
+  font-weight: 600;
+  color: #303133;
+  margin-bottom: 15px;
+}
+
+.action-link {
+  cursor: pointer;
+  margin: 0 8px;
+
+  &.primary {
+    color: #409eff;
+    &:hover { color: #66b1ff; }
+  }
+
+  &.danger {
+    color: #f56c6c;
+    &:hover { color: #f78989; }
+  }
+}
+</style>
+

src/views/platform/enterprise/floorAd/index.vue

@@ -0,0 +1,421 @@
+<template>
+  <div class="floor-ad-page">
+    <div class="floor-ad-container">
+      <!-- 楼层广告区域（独立卡片） -->
+      <div class="ad-card">
+        <!-- 标签页切换 -->
+        <el-tabs v-model="activeTab" @tab-change="handleTabChange">
+          <el-tab-pane label="首页三联广告" name="triple" />
+          <el-tab-pane label="首页图标广告" name="icon" />
+          <el-tab-pane label="首页横幅广告" name="banner" />
+        </el-tabs>
+
+        <!-- 三联广告展示区 -->
+        <div v-if="activeTab === 'triple'" class="ad-preview triple-preview">
+          <div class="triple-grid">
+            <div
+              v-for="(item, index) in adList"
+              :key="item.id"
+              class="triple-item"
+              :class="{ active: selectedIndex === index }"
+              @click="selectAd(index)"
+            >
+              <el-image :src="item.imageUrl" fit="contain" class="triple-image">
+                <template #error>
+                  <div class="image-slot">
+                    <el-icon><Picture /></el-icon>
+                  </div>
+                </template>
+              </el-image>
+            </div>
+          </div>
+        </div>
+
+        <!-- 图标广告展示区 -->
+        <div v-if="activeTab === 'icon'" class="ad-preview icon-preview">
+          <div class="icon-grid">
+            <div
+              v-for="(item, index) in adList"
+              :key="item.id"
+              class="icon-item"
+              :class="{ active: selectedIndex === index }"
+              @click="selectAd(index)"
+            >
+              <div class="icon-img">
+                <el-image :src="item.imageUrl" fit="contain" class="icon-image">
+                  <template #error>
+                    <el-icon size="32"><Picture /></el-icon>
+                  </template>
+                </el-image>
+              </div>
+              <span class="icon-text">{{ item.title }}</span>
+            </div>
+          </div>
+        </div>
+
+        <!-- 横幅广告展示区 -->
+        <div v-if="activeTab === 'banner'" class="ad-preview banner-preview">
+          <div class="banner-list">
+            <div
+              v-for="(item, index) in adList"
+              :key="item.id"
+              class="banner-item"
+              :class="{ active: selectedIndex === index }"
+              @click="selectAd(index)"
+            >
+              <el-image :src="item.imageUrl" fit="contain" class="banner-image">
+                <template #error>
+                  <div class="image-slot banner-slot">
+                    <el-icon><Picture /></el-icon>
+                    <span>点击编辑横幅广告</span>
+                  </div>
+                </template>
+              </el-image>
+            </div>
+          </div>
+        </div>
+
+        <!-- 编辑表单（展开在下方） -->
+        <div v-if="selectedIndex !== null && adList.length > 0" class="ad-form">
+          <el-form ref="formRef" :model="form" label-width="80px">
+            <el-row :gutter="20">
+              <el-col :span="12">
+                <el-form-item label="文字:" required>
+                  <el-input v-model="form.title" placeholder="请输入文字" />
+                </el-form-item>
+              </el-col>
+              <el-col :span="12">
+                <el-form-item label="链接:">
+                  <el-input v-model="form.link" placeholder="请输入链接地址" />
+                </el-form-item>
+              </el-col>
+            </el-row>
+            <el-row :gutter="20">
+              <el-col :span="12">
+                <el-form-item label="图片:">
+                  <image-upload v-model="form.imageUrl" :limit="1" />
+                </el-form-item>
+              </el-col>
+              <el-col :span="12" v-if="activeTab === 'icon'">
+                <el-form-item label="背景色:">
+                  <el-color-picker v-model="form.color" />
+                </el-form-item>
+              </el-col>
+            </el-row>
+            <el-form-item label="描述:">
+              <el-input v-model="form.remark" type="textarea" :rows="3" placeholder="请输入描述" />
+            </el-form-item>
+            <el-form-item>
+              <el-button type="primary" @click="handleSubmit">提交</el-button>
+            </el-form-item>
+          </el-form>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup name="DecorationFloorAd" lang="ts">
+import { ref, reactive, onMounted, watch } from 'vue';
+import { ElMessage } from 'element-plus';
+import type { FormInstance } from 'element-plus';
+import { Picture } from '@element-plus/icons-vue';
+import { listAdContent, updateAdContent } from '@/api/ad/content';
+import dayjs from 'dayjs';
+
+// 当前标签页
+const activeTab = ref('triple');
+
+// 当前选中的广告索引（默认null，点击才展开）
+const selectedIndex = ref<number | null>(null);
+
+// 广告类型映射
+const adTypeMap: Record<string, string> = {
+  triple: 'enterprise_ad_triple',
+  icon: 'enterprise_ad_icon',
+  banner: 'enterprise_ad_banner'
+};
+
+// 广告列表数据
+const adList = ref<any[]>([]);
+const loading = ref(false);
+
+// 表单数据
+const formRef = ref<FormInstance>();
+const form = ref({
+  id: undefined as number | undefined,
+  adType: '',
+  title: '',
+  remark: '',
+  link: '',
+  imageUrl: '',
+  color: '#e74c3c',
+  sort: 0,
+  status: 1,
+  startTime: '',
+  endTime: ''
+});
+
+// 加载广告列表
+const loadAdList = async () => {
+  loading.value = true;
+  try {
+    const adType = adTypeMap[activeTab.value];
+    const res = await listAdContent({ adType, pageSize: 100 });
+    adList.value = res.rows || [];
+    // 不默认选中，点击才展开
+    selectedIndex.value = null;
+  } catch (error) {
+    console.error('加载广告列表失败', error);
+    adList.value = [];
+    selectedIndex.value = null;
+  } finally {
+    loading.value = false;
+  }
+};
+
+// 切换标签页
+const handleTabChange = () => {
+  selectedIndex.value = null;
+  loadAdList();
+};
+
+// 选择广告
+const selectAd = (index: number) => {
+  selectedIndex.value = index;
+  loadFormData();
+};
+
+// 加载表单数据
+const loadFormData = () => {
+  if (selectedIndex.value === null || !adList.value[selectedIndex.value]) return;
+  const item = adList.value[selectedIndex.value];
+  form.value = {
+    id: item.id,
+    adType: adTypeMap[activeTab.value],
+    title: item.title || '',
+    remark: item.remark || '',
+    link: item.link || '',
+    imageUrl: item.imageUrl || '',
+    color: item.color || '#e74c3c',
+    sort: item.sort || 0,
+    status: item.status ?? 1,
+    startTime: item.startTime ? dayjs(item.startTime).format('YYYY-MM-DD') : '',
+    endTime: item.endTime ? dayjs(item.endTime).format('YYYY-MM-DD') : ''
+  };
+};
+
+// 提交
+const handleSubmit = async () => {
+  if (!form.value.title) {
+    ElMessage.warning('请输入文字');
+    return;
+  }
+  try {
+    // 确保有时间
+    if (!form.value.startTime) {
+      form.value.startTime = dayjs().format('YYYY-MM-DD');
+    }
+    if (!form.value.endTime) {
+      form.value.endTime = dayjs().add(365, 'day').format('YYYY-MM-DD');
+    }
+    await updateAdContent(form.value);
+    ElMessage.success('提交成功');
+    await loadAdList();
+  } catch (error) {
+    ElMessage.error('保存失败');
+  }
+};
+
+onMounted(() => {
+  loadAdList();
+});
+</script>
+
+<style scoped lang="scss">
+.floor-ad-page {
+  min-height: 100vh;
+  background: #f5f5f5;
+  padding: 20px;
+}
+
+.floor-ad-container {
+  max-width: 1200px;
+  margin: 0 auto;
+}
+
+.ad-card {
+  background: #fff;
+  border-radius: 4px;
+  padding: 20px;
+
+  :deep(.el-tabs__nav-wrap::after) {
+    height: 1px;
+    background-color: #e4e7ed;
+  }
+
+  :deep(.el-tabs__item) {
+    font-size: 14px;
+    color: #666;
+    padding: 0 20px;
+
+    &.is-active {
+      color: #409eff;
+      font-weight: normal;
+    }
+  }
+
+  :deep(.el-tabs__active-bar) {
+    height: 2px;
+  }
+}
+
+.ad-preview {
+  margin: 20px 0;
+  padding-bottom: 20px;
+  border-bottom: 1px solid #e4e7ed;
+}
+
+/* 三联广告样式 */
+.triple-preview {
+  .triple-grid {
+    display: flex;
+    justify-content: flex-start;
+    gap: 15px;
+  }
+
+  .triple-item {
+    width: 200px;
+    height: 80px;
+    flex-shrink: 0;
+    background: #fff;
+    cursor: pointer;
+    transition: all 0.3s;
+    border: 2px solid transparent;
+
+    &:hover {
+      opacity: 0.9;
+    }
+
+    &.active {
+      border-color: #409eff;
+    }
+
+    .triple-image {
+      width: 100%;
+      height: 100%;
+    }
+  }
+}
+
+/* 图标广告样式 */
+.icon-preview {
+  .icon-grid {
+    display: flex;
+    justify-content: flex-start;
+    gap: 10px;
+  }
+
+  .icon-item {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    padding: 10px;
+    cursor: pointer;
+    transition: all 0.3s;
+    border-radius: 4px;
+    border: 2px solid transparent;
+
+    &:hover {
+      background: #f5f5f5;
+    }
+
+    &.active {
+      border-color: #409eff;
+      background: #ecf5ff;
+    }
+
+    .icon-img {
+      width: 50px;
+      height: 50px;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      margin-bottom: 6px;
+
+      .icon-image {
+        width: 100%;
+        height: 100%;
+      }
+    }
+
+    .icon-text {
+      font-size: 12px;
+      color: #333;
+    }
+  }
+}
+
+/* 横幅广告样式 */
+.banner-preview {
+  .banner-list {
+    display: flex;
+    flex-direction: column;
+    gap: 20px;
+  }
+
+  .banner-item {
+    width: 100%;
+    height: 150px;
+    cursor: pointer;
+    transition: all 0.3s;
+    border: 2px solid transparent;
+
+    &:hover {
+      opacity: 0.9;
+    }
+
+    &.active {
+      border-color: #409eff;
+    }
+
+    .banner-image {
+      width: 100%;
+      height: 100%;
+    }
+
+    .banner-slot {
+      display: flex;
+      flex-direction: column;
+      align-items: center;
+      justify-content: center;
+      height: 100%;
+      background: #f5f7fa;
+      color: #909399;
+
+      .el-icon {
+        font-size: 48px;
+        margin-bottom: 10px;
+      }
+    }
+  }
+}
+
+.image-slot {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  width: 100%;
+  height: 100%;
+  background: #f5f7fa;
+  color: #909399;
+  font-size: 24px;
+}
+
+/* 编辑表单 */
+.ad-form {
+  border-top: 1px solid #ebeef5;
+  padding-top: 20px;
+  margin-top: 20px;
+}
+</style>

src/views/platform/enterprise/product/productConfig.vue

@@ -0,0 +1,660 @@
+<template>
+  <div class="p-2">
+    <!-- 返回按钮 + 标题 -->
+    <el-card shadow="never" class="mb-2">
+      <div class="flex items-center">
+        <el-button link @click="handleBack">
+          <el-icon><ArrowLeft /></el-icon>
+          返回
+        </el-button>
+        <el-divider direction="vertical" />
+        <span class="text-base font-medium">商品配置</span>
+      </div>
+    </el-card>
+
+    <!-- 搜索区域 -->
+    <transition :enter-active-class="proxy?.animate.searchAnimate.enter" :leave-active-class="proxy?.animate.searchAnimate.leave">
+      <div v-show="showSearch" class="mb-[10px]">
+        <el-card shadow="hover">
+          <el-form ref="queryFormRef" :model="queryParams" :inline="true" label-width="70px">
+            <el-form-item label="商品编号" prop="productNo">
+              <el-input v-model="queryParams.productNo" placeholder="请输入商品编号" clearable style="width: 180px" @keyup.enter="handleQuery" />
+            </el-form-item>
+            <el-form-item label="商品名称" prop="itemName">
+              <el-input v-model="queryParams.itemName" placeholder="请输入商品名称" clearable style="width: 180px" @keyup.enter="handleQuery" />
+            </el-form-item>
+            <el-form-item label="商品品牌" prop="brandId">
+              <el-select v-model="queryParams.brandId" placeholder="请选择" clearable style="width: 120px">
+                <el-option v-for="item in brandOptions" :key="item.id" :label="item.brandName" :value="item.id" />
+              </el-select>
+            </el-form-item>
+            <el-form-item label="商品类别" prop="categoryId">
+              <el-select v-model="queryParams.topCategoryId" placeholder="请选择" clearable style="width: 100px" @change="handleTopCategoryChange">
+                <el-option v-for="item in topCategoryOptions" :key="item.id" :label="item.categoryName" :value="item.id" />
+              </el-select>
+              <el-select v-model="queryParams.mediumCategoryId" placeholder="请选择" clearable style="width: 100px; margin-left: 5px" @change="handleMediumCategoryChange">
+                <el-option v-for="item in mediumCategoryOptions" :key="item.id" :label="item.categoryName" :value="item.id" />
+              </el-select>
+              <el-select v-model="queryParams.bottomCategoryId" placeholder="请选择" clearable style="width: 100px; margin-left: 5px">
+                <el-option v-for="item in bottomCategoryOptions" :key="item.id" :label="item.categoryName" :value="item.id" />
+              </el-select>
+            </el-form-item>
+            <el-form-item>
+              <el-button type="primary" icon="Search" @click="handleQuery">搜索</el-button>
+              <el-button icon="Refresh" @click="resetQuery">重置</el-button>
+            </el-form-item>
+          </el-form>
+        </el-card>
+      </div>
+    </transition>
+
+    <!-- 表格区域 -->
+    <el-card shadow="never">
+      <template #header>
+        <div class="flex justify-between items-center">
+          <span class="font-bold text-[#409EFF]">商品列表信息列表</span>
+          <div class="flex gap-2">
+            <el-button type="primary" icon="Plus" @click="handleAddProduct">添加商品</el-button>
+            <el-button type="primary" icon="Upload" @click="handleImportProduct">导入商品</el-button>
+            <el-button type="primary" icon="Download" @click="handleExportProduct">导出商品</el-button>
+          </div>
+        </div>
+      </template>
+
+      <el-table v-loading="loading" border :data="productList">
+        <el-table-column label="商品编号" align="center" prop="productNo" width="100" />
+        <el-table-column label="商品图片" align="center" width="100">
+          <template #default="scope">
+            <image-preview :src="scope.row.productImage" :width="60" :height="60"/>
+          </template>
+        </el-table-column>
+        <el-table-column label="商品信息" align="center" min-width="400">
+          <template #default="scope">
+            <div class="text-left" style="font-size: 12px;">
+              <div>{{ scope.row.itemName }}</div>
+              <div class="text-gray-500">品牌：{{ scope.row.brandName || '-' }}</div>
+            </div>
+          </template>
+        </el-table-column>
+        <el-table-column label="商品类别" align="center" prop="categoryName" width="120" />
+        <el-table-column label="单位" align="center" width="100">
+          <template #default="scope">
+            <div style="font-size: 12px;">
+              <div>单位：{{ scope.row.unitName || '个' }}</div>
+              <div>起订量：{{ scope.row.minOrderQuantity || 1 }}</div>
+            </div>
+          </template>
+        </el-table-column>
+        <el-table-column label="SKU价格" align="center" width="130">
+          <template #default="scope">
+            <div class="text-left" style="font-size: 12px;">
+              <div>市场价：¥{{ scope.row.marketPrice || '0.00' }}</div>
+              <div class="text-[#f56c6c]">平台售价：¥{{ scope.row.platformPrice || '0.00' }}</div>
+              <div>最低售价：¥{{ scope.row.minPrice || '0.00' }}</div>
+            </div>
+          </template>
+        </el-table-column>
+        <el-table-column label="采购价" align="center" prop="purchasePrice" width="100" />
+        <el-table-column label="协议价" align="center" prop="agreementPrice" width="100" />
+        <el-table-column label="毛利率" align="center" width="130">
+          <template #default="scope">
+            {{ calcGrossMargin(scope.row) }}
+          </template>
+        </el-table-column>
+        <el-table-column label="商品状态" align="center" width="100">
+          <template #default="scope">
+            <el-tag v-if="scope.row.productStatus === '1'" type="success" size="small">上架</el-tag>
+            <el-tag v-else type="info" size="small">下架</el-tag>
+          </template>
+        </el-table-column>
+        <el-table-column label="操作" align="center" width="100" fixed="right">
+          <template #default="scope">
+            <div class="flex flex-col items-center gap-1">
+              <el-link type="primary" :underline="false" @click="handlePriceEdit(scope.row)">价格修改</el-link>
+              <el-link type="danger" :underline="false" @click="handleDelete(scope.row)">删 除</el-link>
+            </div>
+          </template>
+        </el-table-column>
+      </el-table>
+
+      <pagination v-show="total > 0" :total="total" v-model:page="queryParams.pageNum" v-model:limit="queryParams.pageSize" @pagination="getList" />
+    </el-card>
+
+    <!-- 价格修改弹窗 -->
+    <el-dialog title="价格修改" v-model="priceDialog.visible" width="500px" append-to-body>
+      <el-form ref="priceFormRef" :model="priceDialog.form" :rules="priceRules" label-width="100px">
+        <el-form-item label="商品名称">
+          <span>{{ priceDialog.row?.itemName }}</span>
+        </el-form-item>
+        <el-form-item label="协议价" prop="agreementPrice">
+          <el-input-number v-model="priceDialog.form.agreementPrice" :precision="2" :min="0" controls-position="right" style="width: 100%" />
+        </el-form-item>
+      </el-form>
+      <template #footer>
+        <el-button @click="priceDialog.visible = false">取 消</el-button>
+        <el-button type="primary" @click="submitPriceForm">确 定</el-button>
+      </template>
+    </el-dialog>
+
+    <!-- 导入商品弹窗 -->
+    <el-dialog title="导入商品" v-model="importDialog.visible" width="500px" append-to-body>
+      <el-form label-width="100px">
+        <el-form-item label="导入模板">
+          <el-button type="primary" link icon="Download" @click="handleDownloadTemplate">下载导入模板</el-button>
+        </el-form-item>
+        <el-form-item label="选择文件">
+          <el-upload
+            ref="importUploadRef"
+            action="#"
+            :auto-upload="false"
+            :limit="1"
+            accept=".xlsx,.xls"
+            :on-change="handleImportFileChange"
+            :on-remove="() => (importDialog.file = null)"
+          >
+            <el-button type="primary" icon="Upload">选择文件</el-button>
+            <template #tip>
+              <div class="el-upload__tip">只支持 .xlsx / .xls 格式文件</div>
+            </template>
+          </el-upload>
+        </el-form-item>
+      </el-form>
+      <template #footer>
+        <el-button @click="importDialog.visible = false">取 消</el-button>
+        <el-button type="primary" :loading="importDialog.loading" @click="handleConfirmImport">确 定</el-button>
+      </template>
+    </el-dialog>
+
+    <!-- 添加商品弹窗 -->
+    <el-dialog title="添加商品" v-model="addProductDialog.visible" width="1500px" append-to-body top="5vh">
+      <div class="add-product-dialog">
+        <el-form :model="addProductQuery" :inline="true" class="mb-4">
+          <el-form-item>
+            <el-button type="primary" icon="Plus" @click="handleBatchAdd">加入清单</el-button>
+          </el-form-item>
+          <el-form-item label="商品名称:">
+            <el-input v-model="addProductQuery.itemName" placeholder="商品名称" clearable style="width: 180px" />
+          </el-form-item>
+          <el-form-item label="商品编号:">
+            <el-input v-model="addProductQuery.productNo" placeholder="商品编号" clearable style="width: 180px" />
+          </el-form-item>
+          <el-form-item>
+            <el-button type="primary" icon="Search" @click="handleSearchProducts">搜索</el-button>
+          </el-form-item>
+        </el-form>
+
+        <el-table
+          ref="addProductTableRef"
+          v-loading="addProductDialog.loading"
+          :data="addProductDialog.productList"
+          border
+          @selection-change="handleSelectionChange"
+          max-height="500"
+        >
+          <el-table-column type="selection" width="55" align="center" />
+          <el-table-column label="商品编号" align="center" prop="productNo" width="100" />
+          <el-table-column label="商品图片" align="center" width="100">
+            <template #default="scope">
+              <image-preview :src="scope.row.productImage" :width="60" :height="60"/>
+            </template>
+          </el-table-column>
+          <el-table-column label="商品信息" align="center" min-width="400">
+            <template #default="scope">
+              <div class="text-left" style="font-size: 12px;">
+                <div>{{ scope.row.itemName }}</div>
+                <div class="text-gray-500">品牌：{{ scope.row.brandName || '-' }}</div>
+              </div>
+            </template>
+          </el-table-column>
+          <el-table-column label="商品分类" align="center" prop="categoryName" width="120" />
+          <el-table-column label="单位" align="center" width="100">
+            <template #default="scope">
+              <div class="text-left" style="font-size: 12px;">
+                <div>单位：{{ scope.row.unitName || '个' }}</div>
+                <div>起订量：{{ scope.row.minOrderQuantity || 1 }}</div>
+              </div>
+            </template>
+          </el-table-column>
+          <el-table-column label="SKU价格" align="center" width="130">
+            <template #default="scope">
+              <div class="text-left" style="font-size: 12px;">
+                <div>市场价：¥{{ scope.row.midRangePrice || '0.00' }}</div>
+                <div class="text-[#f56c6c]">平台价：¥{{ scope.row.standardPrice || '0.00' }}</div>
+                <div>最低价：¥{{ scope.row.certificatePrice || '0.00' }}</div>
+              </div>
+            </template>
+          </el-table-column>
+          <el-table-column label="库存情况" align="center" width="130">
+            <template #default="scope">
+              <div class="text-left" style="font-size: 12px;">
+                <div class="text-[#f56c6c]">库存总数：{{ scope.row.stock || 0 }}</div>
+                <div>现有库存：{{ scope.row.availableStock || 0 }}</div>
+                <div>虚拟库存：{{ scope.row.virtualStock || 0 }}</div>
+              </div>
+            </template>
+          </el-table-column>
+          <el-table-column label="采购价" align="center" prop="purchasingPrice" width="80" />
+          <el-table-column label="商品状态" align="center" prop="productStatus" width="80" >
+            <template #default="scope">
+              <el-tag v-if="scope.row.productStatus === '1'" type="success" size="small">上架</el-tag>
+              <el-tag v-else type="info" size="small">下架</el-tag>
+            </template>
+          </el-table-column>
+          <el-table-column label="协议价" align="center" width="150">
+            <template #default="scope">
+              <el-input-number
+                v-model="scope.row.agreementPrice"
+                :precision="2"
+                :min="0"
+                controls-position="right"
+                style="width: 120px"
+                placeholder="请输入"
+              />
+            </template>
+          </el-table-column>
+          <el-table-column label="操作" align="center" width="100" fixed="right">
+            <template #default="scope">
+              <el-link type="primary" :underline="false" @click="handleAddSingleProduct(scope.row)">加入清单</el-link>
+            </template>
+          </el-table-column>
+        </el-table>
+
+        <pagination
+          v-show="addProductDialog.productList.length > 0"
+          v-model:page="addProductQuery.pageNum"
+          v-model:limit="addProductQuery.pageSize"
+          :total="addProductDialog.total"
+          @pagination="getProductList"
+        />
+      </div>
+    </el-dialog>
+  </div>
+</template>
+
+<script setup name="ProductConfig" lang="ts">
+import { ref, reactive, onMounted, getCurrentInstance } from 'vue';
+import type { ComponentInternalInstance } from 'vue';
+import type { FormInstance } from 'element-plus';
+import { useRoute, useRouter } from 'vue-router';
+import { ArrowLeft } from '@element-plus/icons-vue';
+import { listBase } from '@/api/pmsProduct/base';
+import { listProductCategory } from '@/api/customerOperation/customerBlacklist';
+import { listBrand } from '@/api/product/brand';
+import {
+  addSiteProduct,
+  getSiteProductPage,
+  exportSiteProductData,
+  importSiteProductData,
+  getSiteProductImportTemplate,
+  updateSiteProduct,
+  delSiteProduct
+} from '@/api/product/siteProduct/index';
+import FileSaver from 'file-saver';
+
+const { proxy } = getCurrentInstance() as ComponentInternalInstance;
+const route = useRoute();
+const router = useRouter();
+
+const productList = ref<any[]>([]);
+const loading = ref(false);
+const showSearch = ref(true);
+const total = ref(0);
+
+const queryFormRef = ref<ElFormInstance>();
+
+// 品牌选项
+const brandOptions = ref<any[]>([]);
+
+// 分类三级联动
+const topCategoryOptions = ref<any[]>([]);
+const mediumCategoryOptions = ref<any[]>([]);
+const bottomCategoryOptions = ref<any[]>([]);
+const allCategoryList = ref<any[]>([]);
+
+// 查询参数
+const queryParams = ref({
+  pageNum: 1,
+  pageSize: 10,
+  productNo: undefined as string | undefined,
+  itemName: undefined as string | undefined,
+  brandId: undefined as number | undefined,
+  topCategoryId: undefined as number | undefined,
+  mediumCategoryId: undefined as number | undefined,
+  bottomCategoryId: undefined as number | undefined
+});
+
+// 价格修改弹窗
+const priceDialog = reactive({
+  visible: false,
+  row: null as any,
+  form: {
+    id: undefined as number | undefined,
+    agreementPrice: 0
+  }
+});
+const priceFormRef = ref<FormInstance>();
+const priceRules = {
+  agreementPrice: [{ required: true, message: '请输入协议价', trigger: 'blur' }]
+};
+
+// 添加商品弹窗
+const addProductDialog = reactive({
+  visible: false,
+  loading: false,
+  productList: [] as any[],
+  total: 0
+});
+const addProductQuery = ref({
+  pageNum: 1,
+  pageSize: 10,
+  isSelf: 1,
+  productNo: undefined as string | undefined,
+  itemName: undefined as string | undefined
+});
+const selectedProducts = ref<any[]>([]);
+const addProductTableRef = ref<any>();
+
+// 导入商品弹窗
+const importDialog = reactive({
+  visible: false,
+  loading: false,
+  file: null as File | null
+});
+const importUploadRef = ref<any>();
+
+/** 初始化 */
+const initData = () => {
+  getList();
+};
+
+/** 查询商品列表 */
+const getList = async () => {
+  loading.value = true;
+  try {
+    const res = await getSiteProductPage({
+      ...queryParams.value,
+      bottomCategoryId: queryParams.value.bottomCategoryId || queryParams.value.mediumCategoryId || queryParams.value.topCategoryId
+    });
+    productList.value = res.rows || [];
+    total.value = res.total || 0;
+  } catch (error) {
+    console.error('获取商品列表失败:', error);
+  } finally {
+    loading.value = false;
+  }
+};
+
+/** 加载品牌列表 */
+const loadBrandOptions = async () => {
+  try {
+    const res = await listBrand({ pageNum: 1, pageSize: 1000 });
+    brandOptions.value = res.rows || [];
+  } catch (error) {
+    console.error('获取品牌列表失败:', error);
+  }
+};
+
+/** 加载商品分类 */
+const loadCategoryOptions = async () => {
+  try {
+    const res = await listProductCategory({ pageNum: 1, pageSize: 1000, dataSource: 'A10' });
+    allCategoryList.value = res.rows || [];
+    topCategoryOptions.value = allCategoryList.value.filter((item: any) => !item.parentId || item.parentId === 0);
+  } catch (error) {
+    console.error('加载分类失败:', error);
+  }
+};
+
+/** 顶级分类变化 */
+const handleTopCategoryChange = (val: number | undefined) => {
+  queryParams.value.mediumCategoryId = undefined;
+  queryParams.value.bottomCategoryId = undefined;
+  bottomCategoryOptions.value = [];
+  if (val) {
+    mediumCategoryOptions.value = allCategoryList.value.filter((item: any) => item.parentId === val);
+  } else {
+    mediumCategoryOptions.value = [];
+  }
+};
+
+/** 中级分类变化 */
+const handleMediumCategoryChange = (val: number | undefined) => {
+  queryParams.value.bottomCategoryId = undefined;
+  if (val) {
+    bottomCategoryOptions.value = allCategoryList.value.filter((item: any) => item.parentId === val);
+  } else {
+    bottomCategoryOptions.value = [];
+  }
+};
+
+/** 计算毛利率：(协议价 - 采购价) ÷ 采购价 × 100% */
+const calcGrossMargin = (row: any): string => {
+  const agreement = parseFloat(row.agreementPrice);
+  const purchase = parseFloat(row.purchasePrice || row.purchasingPrice);
+  if (!purchase || purchase === 0 || isNaN(agreement) || isNaN(purchase)) return '-';
+  const margin = ((agreement - purchase) / purchase) * 100;
+  return `${margin.toFixed(2)}%`;
+};
+
+/** 搜索 */
+const handleQuery = () => {
+  queryParams.value.pageNum = 1;
+  getList();
+};
+
+/** 重置 */
+const resetQuery = () => {
+  queryFormRef.value?.resetFields();
+  queryParams.value = {
+    pageNum: 1,
+    pageSize: 10,
+    productNo: undefined,
+    itemName: undefined,
+    brandId: undefined,
+    topCategoryId: undefined,
+    mediumCategoryId: undefined,
+    bottomCategoryId: undefined
+  };
+  mediumCategoryOptions.value = [];
+  bottomCategoryOptions.value = [];
+  handleQuery();
+};
+
+/** 返回 */
+const handleBack = () => {
+  router.back();
+};
+
+/** 价格修改 */
+const handlePriceEdit = (row: any) => {
+  priceDialog.row = row;
+  priceDialog.form = {
+    id: row.id,
+    agreementPrice: row.agreementPrice || 0
+  };
+  priceDialog.visible = true;
+};
+
+/** 提交价格修改 */
+const submitPriceForm = async () => {
+  await priceFormRef.value?.validate();
+  await updateSiteProduct({
+    id: priceDialog.form.id,
+    agreementPrice: String(priceDialog.form.agreementPrice)
+  });
+  proxy?.$modal.msgSuccess('价格修改成功');
+  priceDialog.visible = false;
+  await getList();
+};
+
+/** 删除商品 */
+const handleDelete = async (row: any) => {
+  await proxy?.$modal.confirm(`确认要删除商品"${row.itemName}"吗？`);
+  await delSiteProduct(row.id);
+  proxy?.$modal.msgSuccess('删除成功');
+  await getList();
+};
+
+/** 添加商品 */
+const handleAddProduct = () => {
+  addProductDialog.visible = true;
+  addProductQuery.value = {
+    pageNum: 1,
+    pageSize: 10,
+    isSelf: 1,
+    productNo: undefined,
+    itemName: undefined
+  };
+  selectedProducts.value = [];
+  getProductList();
+};
+
+/** 获取可添加的商品列表 */
+const getProductList = async () => {
+  addProductDialog.loading = true;
+  try {
+    const res = await listBase(addProductQuery.value);
+    addProductDialog.productList = res.rows || [];
+    addProductDialog.total = res.total || 0;
+  } catch (error) {
+    console.error('获取商品列表失败:', error);
+    addProductDialog.productList = [];
+    addProductDialog.total = 0;
+  } finally {
+    addProductDialog.loading = false;
+  }
+};
+
+/** 搜索商品 */
+const handleSearchProducts = () => {
+  addProductQuery.value.pageNum = 1;
+  getProductList();
+};
+
+/** 选择变化 */
+const handleSelectionChange = (selection: any[]) => {
+  selectedProducts.value = selection;
+};
+
+/** 批量加入清单 */
+const handleBatchAdd = async () => {
+  if (selectedProducts.value.length === 0) {
+    proxy?.$modal.msgWarning('请先选择要添加的商品');
+    return;
+  }
+  // 校验是否填写协议价
+  const noPrice = (selectedProducts.value as any[]).filter((item: any) => !item.agreementPrice || Number(item.agreementPrice) <= 0);
+  if (noPrice.length > 0) {
+    proxy?.$modal.msgWarning(`有 ${noPrice.length} 个商品未填写协议价，请填写后再加入清单`);
+    return;
+  }
+  try {
+    await Promise.all(
+      (selectedProducts.value as any[]).map((item: any) =>
+        addSiteProduct({
+          productId: item.id,
+          productNo: item.productNo,
+          agreementPrice: String(item.agreementPrice)
+        })
+      )
+    );
+    proxy?.$modal.msgSuccess(`成功添加 ${selectedProducts.value.length} 个商品`);
+    addProductDialog.visible = false;
+    selectedProducts.value = [];
+    if (addProductTableRef.value) {
+      addProductTableRef.value.clearSelection();
+    }
+    await getList();
+  } catch (error) {
+    console.error('添加商品失败:', error);
+  }
+};
+
+/** 添加单个商品 */
+const handleAddSingleProduct = async (row: any) => {
+  if (!row.agreementPrice || Number(row.agreementPrice) <= 0) {
+    proxy?.$modal.msgWarning('请先填写协议价');
+    return;
+  }
+  try {
+    await addSiteProduct({
+      productId: row.id,
+      productNo: row.productNo,
+      agreementPrice: String(row.agreementPrice)
+    });
+    proxy?.$modal.msgSuccess('添加成功');
+    await getList();
+  } catch (error) {
+    console.error('添加商品失败:', error);
+  }
+};
+
+/** 下载导入模板 */
+const handleDownloadTemplate = async () => {
+  try {
+    const res = await getSiteProductImportTemplate();
+    const blob = new Blob([res as any], { type: 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet' });
+    FileSaver.saveAs(blob, '站点商品导入模板.xlsx');
+  } catch (error) {
+    console.error('下载模板失败:', error);
+  }
+};
+
+/** 导入文件选择 */
+const handleImportFileChange = (file: any) => {
+  importDialog.file = file.raw;
+};
+
+/** 确认导入 */
+const handleConfirmImport = async () => {
+  if (!importDialog.file) {
+    proxy?.$modal.msgWarning('请先选择要导入的文件');
+    return;
+  }
+  importDialog.loading = true;
+  try {
+    await importSiteProductData(importDialog.file);
+    proxy?.$modal.msgSuccess('导入成功');
+    importDialog.visible = false;
+    importDialog.file = null;
+    if (importUploadRef.value) importUploadRef.value.clearFiles();
+    await getList();
+  } catch (error) {
+    console.error('导入失败:', error);
+  } finally {
+    importDialog.loading = false;
+  }
+};
+
+/** 导入商品 */
+const handleImportProduct = () => {
+  importDialog.visible = true;
+  importDialog.file = null;
+  if (importUploadRef.value) importUploadRef.value.clearFiles();
+};
+
+/** 导出商品 */
+const handleExportProduct = async () => {
+  try {
+    const res = await exportSiteProductData({});
+    const blob = new Blob([res as any], { type: 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet' });
+    FileSaver.saveAs(blob, `商品数据_${new Date().getTime()}.xlsx`);
+  } catch (error) {
+    console.error('导出失败:', error);
+  }
+};
+
+onMounted(() => {
+  initData();
+  loadBrandOptions();
+  loadCategoryOptions();
+});
+</script>
+
+<style scoped lang="scss">
+.add-product-dialog {
+  :deep(.el-form--inline .el-form-item) {
+    margin-right: 10px;
+  }
+}
+</style>