From 4b535ea385033fc9a2461a1cd69b6920f1de22b7 Mon Sep 17 00:00:00 2001
From: lihaoyuan <18278596806@163.com>
Date: Thu, 4 Sep 2025 16:25:14 +0800
Subject: [PATCH] =?UTF-8?q?update:=E6=96=B0=E5=A2=9E=E7=AE=80=E5=8D=95?=
 =?UTF-8?q?=E4=B8=BE=E6=8A=A5=E8=AF=A6=E6=83=85=EF=BC=8C=E6=96=B0=E5=A2=9E?=
 =?UTF-8?q?=E5=9B=BE=E5=BA=93=E7=AE=A1=E7=90=86?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/api/base/config.js                        |   3 +-
 src/api/goodsTool.js                          |  20 +-
 src/utils/routes.js                           |  17 +-
 .../product/goodsImg/batchEditBarcode.vue     | 177 ++++++++
 src/views/product/goodsImg/editGoodsImgs.vue  | 158 ++++++++
 src/views/product/goodsImg/goodsImgs.vue      | 301 ++++++++++++++
 src/views/settings/config/report.vue          | 377 ++++++++++++------
 src/views/settings/config/reportDeal.vue      | 244 ++++++++----
 src/views/settings/config/reportDetail.vue    |  75 ++++
 9 files changed, 1158 insertions(+), 214 deletions(-)
 create mode 100644 src/views/product/goodsImg/batchEditBarcode.vue
 create mode 100644 src/views/product/goodsImg/editGoodsImgs.vue
 create mode 100644 src/views/product/goodsImg/goodsImgs.vue
 create mode 100644 src/views/settings/config/reportDetail.vue

diff --git a/src/api/base/config.js b/src/api/base/config.js
index d5b25ee..d512e40 100644
--- a/src/api/base/config.js
+++ b/src/api/base/config.js
@@ -64,10 +64,11 @@ export function getSmsRecord(params) {
     params,
   })
 }
-export function getReportList(){
+export function getReportList(params){
   return request({
     url:URL.account.base.config.report_list,
     method:'get',
+    params:params
   })
 }
 export function dealReport(data){
diff --git a/src/api/goodsTool.js b/src/api/goodsTool.js
index b146b66..615ffbb 100644
--- a/src/api/goodsTool.js
+++ b/src/api/goodsTool.js
@@ -126,7 +126,23 @@ export async function syncShopImages(data) {
     method: 'post',
   })
 }
-
+export async function getImgList(data) {
+  data = stringify(data)
+  return request({
+    url: `/admin/shop/libraryProduct/list?${data}`,
+    method:'get',
+  })
+}
+export async function saveBatchBarcode(data) {
+  return request({
+    url:'/admin/shop/libraryProduct/saveBatch',
+    method:'put',
+    data,
+    headers: {
+      'Content-Type': 'application/json;charset=UTF-8'
+    }
+  })
+}
 export default {
   getProductMapperList,
   getShopList,
@@ -141,4 +157,6 @@ export default {
   syncProductMaping,
   importGoodsData,
   syncShopImages,
+  getImgList,
+  saveBatchBarcode
 }
diff --git a/src/utils/routes.js b/src/utils/routes.js
index 5ad9050..0fd2588 100644
--- a/src/utils/routes.js
+++ b/src/utils/routes.js
@@ -30,7 +30,22 @@ export function convertRouter(asyncRoutes) {
 
       route.children.push(obj)
     }
-
+    if (route.meta.title == '商品' && route.name == 'Vab320') {
+      const obj = {
+        path: '/goodsImgs',
+        component: '@/views/product/goodsImg/goodsImgs',
+        name: 'Vab88000',
+        redirect: null,
+        meta: {
+          title: '商品图库管理',
+          icon: '',
+          noClosable: 0,
+          hidden: null,
+        },
+        menuHidden: false,
+      }
+      route.children.push(obj)
+    }
     if (route.meta.title == '店铺' && route.name == 'Vab330') {
       const obj = {
         path: '/storeConf',
diff --git a/src/views/product/goodsImg/batchEditBarcode.vue b/src/views/product/goodsImg/batchEditBarcode.vue
new file mode 100644
index 0000000..9c04c35
--- /dev/null
+++ b/src/views/product/goodsImg/batchEditBarcode.vue
@@ -0,0 +1,177 @@
+<template>
+  <el-dialog
+    title="批量编辑商品编码"
+    :visible.sync="visible"
+    width="600px"
+    :close-on-click-modal="false"
+    :max-height="600"
+    @close="handleClose"
+  >
+    <div class="batch-tip">
+      共选中
+      {{ selectedData.length }} 个商品，请为每个商品设置编码（仅填写需要修改的）
+    </div>
+
+    <!-- 批量编辑列表 -->
+    <div
+      class="edit-list"
+      style="max-height: 400px; overflow-y: auto; padding-right: 10px"
+    >
+      <el-form ref="batchForm" :model="formData" label-width="100px">
+        <!-- 循环渲染每个选中的商品 -->
+        <div
+          v-for="(item, index) in formData.items"
+          :key="item.id"
+          class="edit-item"
+        >
+          <el-form-item label="商品ID" :label-width="100">
+            <div class="product-id">{{ item.id }}</div>
+          </el-form-item>
+          <el-form-item label="商品名称" :label-width="100">
+            <div class="product-name">{{ item.name }}</div>
+          </el-form-item>
+
+          <el-form-item
+            label="商品编码"
+            :prop="`items[${index}].barcode`"
+            :rules="[
+              { required: false, message: '请输入商品编码', trigger: 'blur' },
+            ]"
+            :label-width="100"
+          >
+            <el-input
+              v-model="item.barcode"
+              placeholder="请输入商品编码"
+              clearable
+              maxlength="50"
+            />
+          </el-form-item>
+
+          <el-divider v-if="index !== formData.items.length - 1" />
+        </div>
+      </el-form>
+    </div>
+
+    <template #footer>
+      <el-button @click="handleClose">取消</el-button>
+      <el-button type="primary" @click="handleSubmit">提交修改</el-button>
+    </template>
+  </el-dialog>
+</template>
+
+<script>
+  import GoodsToolApi from '@/api/goodsTool'
+
+  export default {
+    data() {
+      return {
+        visible: false,
+        selectedData: [], // 选中的商品数据
+        formData: {
+          items: [], // 用于编辑的商品列表
+        },
+      }
+    },
+    methods: {
+      // 打开弹窗并初始化数据
+      open(selection) {
+        this.visible = true
+        this.selectedData = [...selection]
+
+        // 初始化表单数据
+        this.formData.items = this.selectedData.map((item) => ({
+          id: item.id,
+          name: item.name || '未知名称',
+          barcode: item.barcode || '', // 保留原有编码
+        }))
+
+        // 重置表单验证
+        this.$nextTick(() => {
+          if (this.$refs.batchForm) {
+            this.$refs.batchForm.clearValidate()
+          }
+        })
+      },
+      handleClose() {
+        this.visible = false
+        this.selectedData = []
+        this.formData.items = []
+        if (this.$refs.batchForm) {
+          this.$refs.batchForm.clearValidate()
+        }
+      },
+
+      // 提交批量修改
+      async handleSubmit() {
+        // 表单验证
+        try {
+          await this.$refs.batchForm.validate()
+        } catch (error) {
+          return false
+        }
+
+        // 构建提交数据 - 只包含有填写编码的商品
+        const submitData = this.formData.items
+          .filter((item) => item.barcode.trim() !== '') // 过滤掉未填写编码的
+          .map((item) => ({
+            id: item.id,
+            name: item.name,
+            barcode: item.barcode.trim(),
+          }))
+
+        if (submitData.length === 0) {
+          this.$message.warning('请至少填写一个商品编码')
+          return
+        }
+
+        try {
+          // 调用接口提交数据
+          const res = await GoodsToolApi.saveBatchBarcode(submitData)
+          console.log('批量修改结果:', res)
+
+          this.$message.success(`成功修改 ${submitData.length} 个商品编码`)
+          this.handleClose()
+          this.$emit('success') // 通知父组件刷新列表
+        } catch (error) {
+          console.error('批量修改失败:', error)
+          this.$message.error('修改失败，请重试')
+        }
+      },
+    },
+  }
+</script>
+
+<style lang="scss" scoped>
+  .batch-tip {
+    color: #666;
+    padding: 8px 12px;
+    background-color: #f5f7fa;
+    border-radius: 4px;
+    margin-bottom: 16px;
+    font-size: 13px;
+    border-left: 3px solid #409eff;
+  }
+
+  .edit-item {
+    padding: 10px 0;
+  }
+
+  .product-name {
+    line-height: 32px;
+    color: #333;
+    max-width: 400px;
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+  }
+
+  .product-id {
+    line-height: 32px;
+    color: #666;
+    font-size: 13px;
+  }
+
+  ::v-deep .el-form-item {
+    margin-bottom: 10px;
+  }
+</style>
diff --git a/src/views/product/goodsImg/editGoodsImgs.vue b/src/views/product/goodsImg/editGoodsImgs.vue
new file mode 100644
index 0000000..3c305d9
--- /dev/null
+++ b/src/views/product/goodsImg/editGoodsImgs.vue
@@ -0,0 +1,158 @@
+<template>
+  <el-dialog
+    :title="dialogTitle"
+    :visible.sync="visible"
+    width="600px"
+    :close-on-click-modal="false"
+    @close="handleClose"
+  >
+    <el-form
+      ref="editForm"
+      :model="formData"
+      :rules="formRules"
+      label-width="120px"
+      class="edit-form"
+    >
+      <el-form-item label="商品id" prop="id">
+        <el-input
+          v-model="formData.id"
+          placeholder="请输入商品id"
+          disabled
+        />
+      </el-form-item>
+      <el-form-item label="商品名称" prop="name">
+        <el-input
+          v-model="formData.name"
+          placeholder="请输入商品名称"
+          disabled
+        />
+      </el-form-item>
+      
+      <el-form-item label="商品编码" prop="barcode">
+        <el-input
+          v-model="formData.barcode"
+          placeholder="请输入商品编码"
+          clearable
+        />
+      </el-form-item>
+    </el-form>
+
+    <template #footer>
+      <el-button @click="handleClose">取消</el-button>
+      <el-button type="primary" @click="handleSubmit">提交</el-button>
+    </template>
+  </el-dialog>
+</template>
+
+<script>
+import GoodsToolApi from '@/api/goodsTool'
+
+export default {
+  data() {
+    return {
+      visible: false,
+      isBatch: false, // 是否批量编辑
+      selectedData: [], // 选中的数据
+      formData: {
+        id: '',
+        barcode: '',
+        name: ''
+      },
+      formRules: {
+        barcode: [
+          { required: false, message: '请输入商品编码', trigger: 'blur' }
+        ],
+      }
+    }
+  },
+  computed: {
+    // 弹窗标题
+    dialogTitle() {
+      return this.isBatch ? '批量编辑商品' : '编辑商品'
+    },
+    // 选中数量
+    selectedCount() {
+      return this.selectedData.length
+    }
+  },
+  methods: {
+    // 打开弹窗
+    open(options) {
+      this.isBatch = options.isBatch
+      this.selectedData = options.data instanceof Array ? options.data : [options.data]
+      this.visible = true
+      
+      // 单条编辑时填充当前数据
+      if (!this.isBatch && this.selectedData.length > 0) {
+        const item = this.selectedData[0]
+        this.formData = {
+          name: item.name || '',
+          barcode: item.barcode || '',
+          id: item.id || ''
+        }
+      } else {
+        // 批量编辑清空表单
+        this.formData = {
+          name: '',
+          barcode: '',
+          id: ''
+        }
+      }
+      
+      // 重置表单验证
+      this.$nextTick(() => {
+        this.$refs.editForm.clearValidate()
+      })
+    },
+    
+    // 关闭弹窗
+    handleClose() {
+      this.visible = false
+      this.$refs.editForm.clearValidate()
+    },
+    
+    // 提交编辑
+    async handleSubmit() {
+      // 表单验证
+      try {
+        await this.$refs.editForm.validate()
+      } catch (error) {
+        return false
+      }
+      
+      // 构建提交数据 - 只包含有修改的字段
+      const updateData = this.selectedData.map(item => {
+        const data = { id: item.id }
+        if (this.formData.barcode !== '') data.barcode = this.formData.barcode
+        return data
+      })
+      
+      try {
+        let res=await GoodsToolApi.saveBatchBarcode(updateData)
+        this.$message.success(this.isBatch ? '批量编辑成功' : '编辑成功')
+        this.visible = false
+        // 通知父组件刷新列表
+        this.$emit('success')
+      } catch (error) {
+        console.error('编辑商品失败:', error)
+        this.$message.error('编辑失败，请重试')
+      }
+    }
+  }
+}
+</script>
+<style lang="scss" scoped>
+.edit-form {
+  margin-top: 20px;
+}
+
+.batch-tip {
+  color: #666;
+  padding: 8px 12px;
+  background-color: #f5f7fa;
+  border-radius: 4px;
+  margin-bottom: 20px;
+  font-size: 13px;
+  border-left: 3px solid #409eff;
+}
+</style>
diff --git a/src/views/product/goodsImg/goodsImgs.vue b/src/views/product/goodsImg/goodsImgs.vue
new file mode 100644
index 0000000..918de91
--- /dev/null
+++ b/src/views/product/goodsImg/goodsImgs.vue
@@ -0,0 +1,301 @@
+<template>
+  <div class="container">
+    <div class="filter">
+      <el-input
+        v-model="filter.name"
+        class="input_item"
+        clearable
+        placeholder="请输入商品名字"
+        prefix-icon="el-icon-search"
+      />
+      <el-input
+        v-model="filter.barcode"
+        class="input_item"
+        clearable
+        placeholder="请输入商品编码"
+        prefix-icon="el-icon-barcode"
+      />
+      <el-select
+        v-model="filter.barcodeEmty"
+        clearable
+        placeholder="编码是否为空"
+        class="input_item"
+      >
+        <el-option label="无编码" value="yes" />
+        <el-option label="有编码" value="no" />
+      </el-select>
+      <el-button size="medium" type="primary" @click="handleSearch">
+        查询
+      </el-button>
+      <el-button size="medium" @click="handleReset">重置</el-button>
+      <el-button size="medium" type="warning" @click="handleBatchEdit">
+        批量编辑
+      </el-button>
+    </div>
+    <div class="list">
+      <el-table
+        ref="imgTable"
+        :data="tableData"
+        style="width: 100%"
+        border
+        stripe
+        :empty-text="tableData.length === 0 ? '暂无商品数据' : '加载中...'"
+        @selection-change="handleSelectionChange"
+      >
+        <el-table-column type="selection" width="55" />
+        <el-table-column label="操作" width="120">
+          <template #default="scope">
+            <el-button
+              plain
+              size="mini"
+              type="primary"
+              @click="handleEdit(scope.row)"
+            >
+              编辑
+            </el-button>
+          </template>
+        </el-table-column>
+        <el-table-column label="商品id" prop="id" width="120px" />
+        <el-table-column label="商品主图" width="180px">
+          <template #default="scope">
+            <div v-if="scope.row.thumb" class="img-group">
+              <el-image
+                :src="scope.row.thumb"
+                :preview-src-list="[scope.row.thumb]"
+                class="img-thumb"
+                fit="cover"
+                :title="scope.row.name || '商品主图'"
+              />
+            </div>
+            <span v-else class="no-data">无主图</span>
+          </template>
+        </el-table-column>
+        <el-table-column label="商品名称" prop="name" width="300">
+          <template #default="scope">
+            <div class="text-ellipsis" :title="scope.row.name">
+              {{ scope.row.name }}
+            </div>
+          </template>
+        </el-table-column>
+        <el-table-column label="商品编码" prop="barcode" width="150">
+          <template #default="scope">
+            <div :title="scope.row.barcode || '无编码'">
+              {{ scope.row.barcode || '无' }}
+            </div>
+          </template>
+        </el-table-column>
+        <el-table-column label="分类" prop="category" width="120" />
+        <el-table-column label="价格" width="120">
+          <template #default="scope">
+            {{ Number(scope.row.price).toFixed(2) }} 元
+          </template>
+        </el-table-column>
+        <el-table-column label="创建时间" prop="createdAt" width="180" />
+        <el-table-column label="更新时间" prop="updatedAt" width="180" />
+      </el-table>
+
+      <el-pagination
+        background
+        :current-page="pagination.pageNum"
+        :page-size="pagination.pageSize"
+        :total="pagination.total"
+        layout="total, sizes, prev, pager, next, jumper"
+        @current-change="handleCurrentChange"
+        @size-change="handleSizeChange"
+        :disabled="pagination.total === 0"
+      />
+    </div>
+    <editGoodsImgs ref="goodsEdit" @success="handleEditSuccess" />
+    <batchEditBarcode ref="batchEditBarcode" @success="handleEditSuccess" />
+  </div>
+</template>
+
+<script>
+  import GoodsToolApi from '@/api/goodsTool'
+  import editGoodsImgs from './editGoodsImgs.vue'
+  import batchEditBarcode from './batchEditBarcode.vue'
+  export default {
+    data() {
+      return {
+        tableData: [],
+        pagination: {
+          pageNum: 1,
+          pageSize: 10,
+          total: 0,
+          pages: 0,
+        },
+        filter: {
+          name: '', 
+          barcode: '', 
+          barcodeEmty: '', // 编码是否为空: 'yes'无编码, 'no'有编码
+        },
+        multipleSelection: [],
+      }
+    },
+    components: {
+      editGoodsImgs,
+      batchEditBarcode,
+    },
+    mounted() {
+      this.handleImgList()
+    },
+    methods: {
+      async handleImgList() {
+        try {
+          // 构建查询参数，包含分页和筛选条件
+          const params = {
+            pageNum: this.pagination.pageNum,
+            pageSize: this.pagination.pageSize,
+            // 仅当有值时才添加到参数中
+            ...(this.filter.name && { name: this.filter.name }),
+            ...(this.filter.barcode && { barcode: this.filter.barcode }),
+            ...(this.filter.barcodeEmty && {
+              barcodeEmty: this.filter.barcodeEmty,
+            }),
+          }
+
+          const res = await GoodsToolApi.getImgList(params)
+
+          this.tableData = res.records || []
+          this.pagination.total = res.total || 0
+          this.pagination.pages = res.pages || 0
+          this.pagination.current = res.current || 1
+
+          console.log('商品列表数据获取成功', {
+            tableData: this.tableData,
+            pagination: this.pagination,
+            params: params,
+          })
+        } catch (error) {
+          this.$message.error('获取数据失败，请重试')
+          this.tableData = []
+        }
+      },
+
+      // 点击查询按钮
+      handleSearch() {
+        // 重置为第一页，再执行查询
+        this.pagination.pageNum = 1
+        this.handleImgList()
+      },
+
+      // 重置查询条件
+      handleReset() {
+        // 清空筛选条件
+        this.filter = {
+          name: '',
+          barcode: '',
+          barcodeEmty: '',
+        }
+        // 重置为第一页，重新查询
+        this.pagination.pageNum = 1
+        this.handleImgList()
+      },
+
+      handleCurrentChange(pageNum) {
+        this.pagination.pageNum = pageNum
+        this.handleImgList()
+      },
+
+      handleSizeChange(pageSize) {
+        this.pagination.pageSize = pageSize
+        this.pagination.pageNum = 1
+        this.handleImgList()
+      },
+
+      handleSelectionChange(val) {
+        this.multipleSelection = val
+      },
+
+      // 单条编辑：调用弹窗组件的 open 方法
+      handleEdit(row) {
+        this.$refs.goodsEdit.open({
+          isBatch: false, // 单条编辑
+          data: row, // 传递当前行数据
+        })
+      },
+
+
+handleBatchEdit() {
+  if (this.multipleSelection.length === 0) {
+    this.$message.warning('请先选中需要编辑的商品');
+    return;
+  }
+  this.$refs.batchEditBarcode.open(this.multipleSelection);
+},
+
+      // 编辑成功后刷新列表（不变）
+      handleEditSuccess() {
+        this.handleImgList()
+        // 清空表格选中状态
+        this.$refs.imgTable.clearSelection()
+        this.multipleSelection = []
+      },
+    },
+  }
+</script>
+
+<style lang="scss" scoped>
+  .container {
+    padding: 20px;
+    background-color: #f5f7fa;
+  }
+
+  .filter {
+    display: flex;
+    align-items: center;
+    padding: 15px 20px;
+    margin-bottom: 15px;
+    gap: 10px;
+    border-radius: 5px;
+    box-shadow: 1px 1px 6px rgba(0, 0, 0, 0.1);
+    background: #fff;
+    flex-wrap: wrap;
+  }
+
+  .input_item {
+    width: 200px;
+  }
+
+  .list {
+    background: #fff;
+    padding: 20px;
+    display: flex;
+    flex-direction: column;
+    gap: 10px;
+    border-radius: 5px;
+    box-shadow: 1px 1px 6px rgba(0, 0, 0, 0.1);
+  }
+
+  .img-group {
+    position: relative;
+    display: inline-block;
+  }
+
+  .img-thumb {
+    width: 50px;
+    height: 50px;
+    cursor: pointer;
+    border-radius: 3px;
+  }
+
+  .text-ellipsis {
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+  }
+
+  .no-data {
+    color: #999;
+    font-size: 12px;
+  }
+
+  ::v-deep .el-table__cell {
+    vertical-align: middle !important;
+  }
+
+  ::v-deep .el-pagination {
+    margin-top: 10px;
+    text-align: right;
+  }
+</style>
diff --git a/src/views/settings/config/report.vue b/src/views/settings/config/report.vue
index 5d1f6f2..1025ae1 100644
--- a/src/views/settings/config/report.vue
+++ b/src/views/settings/config/report.vue
@@ -2,14 +2,14 @@
   <div class="report_container">
     <div class="filter">
       <el-input
-        v-model="filter.reportName"
+        v-model="filter.reporterNickname"
         class="input_item"
         clearable
-        placeholder="请输入举报人或举报人的手机号/ID/昵称"
+        placeholder="请输入举报人昵称"
         prefix-icon="el-icon-search"
       />
       <el-select
-        v-model="filter.state"
+        v-model="filter.processingStatus"
         clearable
         filterable
         placeholder="选择处理状态"
@@ -31,56 +31,109 @@
         ref="reportTable"
         :data="tableData"
         style="width: 100%"
+        border
+        stripe
       >
-        <el-table-column label="举报正文" prop="reportContent" width="180px"/>
-        <el-table-column label="举报凭证" prop="reportVerify">
+        
+        <el-table-column label="举报正文" prop="reportContent" width="180px">
           <template #default="scope">
-            <div v-if="scope.row.reportVerify && scope.row.reportVerify.length">
+            <div class="text-ellipsis" :title="scope.row.reportContent">
+              {{ scope.row.reportContent }}
+            </div>
+          </template>
+        </el-table-column>
+
+       
+        <el-table-column label="举报凭证" prop="reportVerify" width="180px">
+          <template #default="scope">
+            <div
+              v-if="scope.row.reportVerify && scope.row.reportVerify.length"
+              class="img-group"
+            >
               <el-image
                 v-for="(img, index) in scope.row.reportVerify"
                 :key="index"
                 :src="img.url"
-                :preview-src-list="scope.row.reportVerify.map(item => item.url)"
-                style="width: 50px; height: 50px; margin-right: 5px; cursor: pointer"
+                :preview-src-list="scope.row.reportVerify.map((item) => item.url)"
+                class="img-thumb"
                 fit="cover"
+                :title="img.description || `举报凭证${index + 1}`"
+                v-if="index < 3"
               />
+              <span v-if="scope.row.reportVerify.length > 3" class="img-count">
+                +{{ scope.row.reportVerify.length - 3 }}
+              </span>
             </div>
-            <span v-else>无凭证</span>
+            <span v-else class="no-data">无凭证</span>
           </template>
         </el-table-column>
-        <el-table-column label="举报人昵称" prop="reporterName" width="100" />
+        <el-table-column label="举报人昵称" prop="reporterNickname" width="120" />
         <el-table-column
-          label="举报人手机号码"
-          prop="reporterNumber"
-          width="120"
+          label="举报人手机号"
+          prop="reporterPhone"
+          width="130"
         />
-        <el-table-column label="举报时间" prop="reporterTime" />
-        <el-table-column label="状态" prop="state">
+        <el-table-column label="被举报人昵称" prop="reportedNickname" width="120" />
+        <el-table-column label="被举报人用户ID" prop="reportedUserId" width="140" />
+        <el-table-column label="举报时间" prop="reporterTime" width="180" />
+        <el-table-column label="状态" prop="processingStatus" width="110">
           <template #default="scope">
-            <el-tag 
-              :type="scope.row.state === '未处理' ? 'warning' : 'success'"
-            >
-              {{ scope.row.state }}
+            <el-tag :type="getStatusTagType(scope.row.processingStatus)">
+              {{ getStatusText(scope.row.processingStatus) }}
             </el-tag>
           </template>
         </el-table-column>
-        <el-table-column label="被举报人名称" prop="reportedName" width="120" />
-        <el-table-column
-          label="被举报人手机号"
-          prop="reportedNumber"
-          width="130"
-        />
-        <el-table-column label="被举报人用户ID" prop="reportedId" width="130" />
-        <el-table-column label="操作">
+        <!-- 处理凭证（后台上传） -->
+        <el-table-column label="处理凭证" prop="processingVerify" width="180px">
+          <template #default="scope">
+            <div
+              v-if="scope.row.processingVerify && scope.row.processingVerify.length"
+              class="img-group"
+            >
+              <el-image
+                v-for="(img, index) in scope.row.processingVerify"
+                :key="index"
+                :src="img.url"
+                :preview-src-list="scope.row.processingVerify.map((item) => item.url)"
+                class="img-thumb"
+                fit="cover"
+                :title="img.description || `处理凭证${index + 1}`"
+                v-if="index < 3"
+              />
+              <span v-if="scope.row.processingVerify.length > 3" class="img-count">
+                +{{ scope.row.processingVerify.length - 3 }}
+              </span>
+            </div>
+            <span v-else class="no-data">无处理凭证</span>
+          </template>
+        </el-table-column>
+        <!-- 处理结果 -->
+        <el-table-column label="处理结果" prop="processingResult" width="180px">
+          <template #default="scope">
+            <div class="text-ellipsis" :title="scope.row.processingResult">
+              {{ scope.row.processingResult || '未处理' }}
+            </div>
+          </template>
+        </el-table-column>
+        <el-table-column label="操作" width="200">
           <template #default="scope">
             <el-button
               plain
               size="mini"
               type="primary"
               @click="handleReport(scope.row)"
+              :disabled="scope.row.processingStatus === '处理完成'"
             >
               处理举报
             </el-button>
+            <el-button
+              plain
+              size="mini"
+              type="primary"
+              @click="handleDetail(scope.row)"
+            >
+              详情
+            </el-button>
           </template>
         </el-table-column>
       </el-table>
@@ -95,158 +148,216 @@
         @size-change="handleSizeChange"
       />
       <ReportDeal ref="handleReport" @success="handleSuccess" />
+      <ReportDetail ref="handleDetail" @success="handleSuccess" />
     </div>
   </div>
 </template>
+
 <script>
-import ReportDeal from './reportDeal.vue';
-import { getReportList } from '@/api/base/config';
+import ReportDeal from './reportDeal.vue'
+import ReportDetail from './reportDetail.vue'
+import { getReportList } from '@/api/base/config'
+
 export default {
   components: {
-    ReportDeal
+    ReportDeal,
+    ReportDetail,
   },
   data() {
     return {
       filter: {
-        reportName: '',
-        state: '',
+        reporterNickname: '',
+        processingStatus: '',
       },
-      // 处理状态下拉选项
       reportList: [
-        { report_id: 0, report_name: "未处理" },
-        { report_id: 1, report_name: "已驳回" },
-        {report_id:2,report_name:'处理完成'},
+        { report_id: 0, report_name: '未处理' },
+        { report_id: 1, report_name: '已受理' },
+        { report_id: 2, report_name: '已驳回' },
+        { report_id: 3, report_name: '处理完成' },
       ],
       tableData: [],
       pagination: {
         pageNum: 1,
         pageSize: 10,
         total: 0,
-        pages: 0
+        pages: 0,
       },
-      multipleSelection: []
+      multipleSelection: [],
     }
   },
   mounted() {
-    this.handleReportList();
+    this.handleReportList()
   },
   methods: {
-    // 处理举报
     handleReport(row) {
-      this.$refs.handleReport.open(row);
+      this.$refs.handleReport.open(row)
+    },
+    handleDetail(row) {
+      this.$refs.handleDetail.open(row)
     },
-    // 处理成功后刷新列表
     handleSuccess() {
-      this.handleReportList();
+      this.handleReportList()
     },
-    // 选择项变化
     handleSelectionChange(val) {
-      this.multipleSelection = val;
+      this.multipleSelection = val
     },
-    // 获取举报列表数据
     async handleReportList() {
       try {
         const params = {
           pageNum: this.pagination.pageNum,
           pageSize: this.pagination.pageSize,
-          reportName: this.filter.reportName,
-          state: this.filter.state
-        };
-        
-        let res = await getReportList(params);
-        
-        // 处理表格数据
-        this.tableData = (res.records || []).map(item => ({
+          reporterNickname: this.filter.reporterNickname,
+          processingStatus: this.filter.processingStatus,
+        }
+
+        const res = await getReportList(params)
+        console.log('ssssss', params)
+        this.tableData = (res.records || []).map((item) => ({
           id: item.id,
           reportContent: item.reportContent,
-          reportVerify: item.evidenceImages 
+          // 解析用户举报凭证
+          reportVerify: item.evidenceImages
             ? JSON.parse(item.evidenceImages)
             : [],
-          reporterName: item.reporterNickname,
-          reporterNumber: item.reporterPhone || '无',
+          // 解析后台处理凭证
+          processingVerify: item.processingEvidenceImages
+            ? JSON.parse(item.processingEvidenceImages)
+            : [],
+          // 处理结果
+          processingResult: item.processingResult || '',
+          reporterNickname: item.reporterNickname,
+          reporterPhone: item.reporterPhone || '无',
           reporterTime: item.createdAt,
-          state: this.getStatusText(item.processingStatus),
-          reportedName: item.reportedNickname,
-          reportedNumber: item.reportedPhone || '无',
-          reportedId: item.reportedUserId
-        }));
+          processingStatus: this.getStatusText(item.processingStatus),
+          reportedNickname: item.reportedNickname,
+          reportedUserId: item.reportedUserId || '无',
+          // 保留原始数据供弹窗使用
+          rawData: item,
+        }))
 
-        // 处理分页数据
-        this.pagination = {
-          ...this.pagination,
-          total: res.total || 0,
-          pageNum: res.current || 1,
-          pageSize: res.size || 10,
-          pages: res.pages || 0
-        };
-      } catch (error) {
-        console.error('获取举报列表失败:', error);
-        this.$message.error('获取数据失败，请重试');
-      }
-    },
-    // 分页页码变化
-    handleCurrentChange(val) {
-      this.pagination.pageNum = val;
-      this.handleReportList();
-    },
-    // 分页大小变化
-    handleSizeChange(val) {
-      this.pagination.pageSize = val;
-      this.pagination.pageNum = 1;
-      this.handleReportList();
-    },
-    // 搜索
-    handleSearch() {
-      this.pagination.pageNum = 1;
-      this.handleReportList();
-    },
-    //状态设置
-    getStatusText(status) {
-      switch (status) {
-        case 0:
-          return '未处理';
-        case 1:
-          return '已受理';
-        case 2:
-          return '已驳回';
-        case 3:
-          return '处理完成';
-        default:
-          return '未知状态';
-      }
+          this.pagination = {
+            ...this.pagination,
+            total: res.total || 0,
+            pageNum: res.current || 1,
+            pageSize: res.size || 10,
+            pages: res.pages || 0,
+          }
+        } catch (error) {
+          console.error('获取举报列表失败:', error)
+          this.$message.error('获取数据失败，请重试')
+        }
+      },
+      handleCurrentChange(val) {
+        this.pagination.pageNum = val
+        this.handleReportList()
+      },
+      handleSizeChange(val) {
+        this.pagination.pageSize = val
+        this.pagination.pageNum = 1
+        this.handleReportList()
+      },
+      handleSearch() {
+        this.pagination.pageNum = 1
+        this.handleReportList()
+      },
+      getStatusText(status) {
+        switch (status) {
+          case 0:
+            return '未处理'
+          case 1:
+            return '已受理'
+          case 2:
+            return '已驳回'
+          case 3:
+            return '处理完成'
+          default:
+            return '未知状态'
+        }
+      },
+      getStatusTagType(state) {
+        switch (state) {
+          case '未处理':
+            return 'warning'
+          case '已受理':
+            return 'info'
+          case '已驳回':
+            return 'danger'
+          case '处理完成':
+            return 'success'
+          default:
+            return 'default'
+        }
+      },
     },
   }
-}
 </script>
 <style lang="scss" scoped>
-.filter {
-  display: flex;
-  align-items: center;
-  padding: 20px;
-  margin-bottom: 15px;
-  gap: 10px;
-  border-radius: 5px;
-  box-shadow: 1px 1px 6px rgba(0, 0, 0, 0.1);
-  background: #fff;
+  .filter {
+    display: flex;
+    align-items: center;
+    padding: 20px;
+    margin-bottom: 15px;
+    gap: 10px;
+    border-radius: 5px;
+    box-shadow: 1px 1px 6px rgba(0, 0, 0, 0.1);
+    background: #fff;
 
-  .input_item {
-    width: 250px;
+    .input_item {
+      width: 250px;
+    }
   }
-}
-.list {
-  background: #fff;
-  padding: 20px;
-  display: flex;
-  flex-direction: column;
-  gap: 10px;
-  border-radius: 5px;
-  box-shadow: 1px 1px 6px rgba(0, 0, 0, 0.1);
-}
-.tool {
-  display: flex;
-  gap: 10px;
-  ::v-deep .el-button {
-    margin-left: 0 !important;
+  .list {
+    background: #fff;
+    padding: 20px;
+    display: flex;
+    flex-direction: column;
+    gap: 10px;
+    border-radius: 5px;
+    box-shadow: 1px 1px 6px rgba(0, 0, 0, 0.1);
+  }
+
+  // 图片样式
+  .img-group {
+    position: relative;
+    display: inline-flex;
+    gap: 5px;
+  }
+  .img-thumb {
+    width: 50px;
+    height: 50px;
+    cursor: pointer;
+    border-radius: 3px;
+  }
+  .img-count {
+    position: absolute;
+    right: 0;
+    bottom: 0;
+    background: rgba(0, 0, 0, 0.6);
+    color: white;
+    font-size: 12px;
+    width: 20px;
+    height: 20px;
+    border-radius: 50%;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+  }
+
+  // 文本省略样式
+  .text-ellipsis {
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+  }
+
+  // 无数据样式
+  .no-data {
+    color: #999;
+    font-size: 12px;
+  }
+
+  // 表格单元格垂直居中
+  ::v-deep .el-table__cell {
+    vertical-align: middle !important;
   }
-}
 </style>
diff --git a/src/views/settings/config/reportDeal.vue b/src/views/settings/config/reportDeal.vue
index a157e5a..20dfd29 100644
--- a/src/views/settings/config/reportDeal.vue
+++ b/src/views/settings/config/reportDeal.vue
@@ -1,22 +1,27 @@
 <template>
   <el-dialog
-    :visible.sync="visible"
+    append-to-body
     title="处理举报"
+    :visible.sync="visible"
     width="600px"
     :before-close="handleClose"
   >
     <el-form ref="form" :model="form" :rules="rules" label-width="100px">
+      <!-- 处理状态选择 -->
       <el-form-item label="处理状态" prop="processingStatus">
         <el-select
           v-model="form.processingStatus"
           placeholder="请选择处理状态"
           @change="handleStatusChange"
+          clearable
         >
           <el-option label="受理中" value="1" />
-          <el-option label="证据不足" value="2" />
+          <el-option label="证据不足（已驳回）" value="2" />
           <el-option label="已处理" value="3" />
         </el-select>
       </el-form-item>
+
+      <!-- 处理结果（状态2/3显示） -->
       <el-form-item
         label="处理结果"
         prop="processingResult"
@@ -26,150 +31,233 @@
           v-model="form.processingResult"
           type="textarea"
           rows="3"
-          placeholder="请输入处理结果"
+          placeholder="请输入处理结果（如：已核实违规，封禁账号7天）"
         />
       </el-form-item>
 
-      <!-- 处理佐证材料（仅状态3时显示） -->
-      <el-form-item label="佐证材料" v-if="form.processingStatus === '3'">
-        <PicUpload
-          :width="148"
-          :height="148"
-          :showFileList="true"
-          :fileList="uploadFiles"
-          @get-file="handleGetFile"
-          @remove-file="handleRemoveFile"
-        />
-        <div style="margin-top: 10px; font-size: 12px; color: #666">
-          支持上传图片作为处理佐证
+      <!-- 核心：上传区域（仅状态3显示，适配项目路由的OSS上传接口） -->
+      <el-form-item 
+        label="佐证材料" 
+        v-if="form.processingStatus === '3'"
+        prop="processingEvidenceImages"
+      >
+        <el-upload
+          ref="evidenceUpload"
+          :action="uploadUrl" 
+          :auto-upload="true"  
+          :data="uploadParams" 
+          :file-list="uploadFileList" 
+          :multiple="true"  
+          :on-success="handleUploadSuccess" 
+          :on-error="handleUploadError" 
+          :on-remove="handleFileRemove" 
+          list-type="picture-card" 
+          accept=".png,.jpg,.jpeg,.mp4,.avi" 
+        >
+          <i class="el-icon-plus"></i>
+          <div slot="tip" class="el-upload__tip">
+            支持上传 PNG/JPG/MP4/AVI 格式，单个文件不超过50MB
+          </div>
+        </el-upload>
+
+        <!-- 已上传文件预览 -->
+        <div v-if="uploadFileList.length > 0" style="margin-top: 15px;">
+          <span class="el-text--primary">已上传文件：</span>
+          <div style="display: flex; gap: 10px; margin-top: 8px; flex-wrap: wrap;">
+            <!-- 图片预览 -->
+            <div 
+              v-for="(file, index) in uploadFileList.filter(f => f.raw?.type.startsWith('image/'))"
+              :key="index"
+              style="position: relative; width: 80px; height: 80px;"
+            >
+              <el-image 
+                :src="file.url" 
+                style="width: 100%; height: 100%; object-fit: cover;"
+                :preview-src-list="[file.url]"
+              />
+              <el-button
+                type="text"
+                size="mini"
+                style="position: absolute; top: -5px; right: -5px; color: #f56c6c;"
+                @click.stop="handleFileRemove(file, index)"
+              >
+                <i class="el-icon-close"></i>
+              </el-button>
+            </div>
+
+            <!-- 视频预览 -->
+            <div 
+              v-for="(file, index) in uploadFileList.filter(f => f.raw?.type.startsWith('video/'))"
+              :key="index"
+              style="position: relative; width: 80px; height: 80px; background: #f5f7fa; display: flex; flex-direction: column; align-items: center; justify-content: center;"
+            >
+              <i class="el-icon-video-play" style="font-size: 24px; color: #409eff;"></i>
+              <span style="font-size: 12px; margin-top: 5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; width: 70px;">
+                {{ file.name }}
+              </span>
+              <el-button
+                type="text"
+                size="mini"
+                style="position: absolute; top: -5px; right: -5px; color: #f56c6c;"
+                @click.stop="handleFileRemove(file, index)"
+              >
+                <i class="el-icon-close"></i>
+              </el-button>
+            </div>
+          </div>
         </div>
       </el-form-item>
     </el-form>
+
     <div slot="footer">
       <el-button @click="handleClose">取消</el-button>
       <el-button type="primary" @click="handleSubmit">提交处理</el-button>
     </div>
   </el-dialog>
 </template>
+
 <script>
-import { dealReport } from '@/api/base/config';
-import PicUpload from '@/components/material/PicUpload.vue';
+import { URL } from '@/config'; 
+import { dealReport } from '@/api/base/config'; 
+import { getToken } from '@/utils/token'; 
 
 export default {
-  components: {
-    PicUpload,
-  },
+  name: 'ReportDeal',
   data() {
     return {
       visible: false,
       form: {
-        id: null, // 举报记录ID
-        processingStatus: '', // 处理状态（1/2/3）
-        processingResult: '', // 处理结果（状态2/3需传）
-        processingEvidenceImages: [], // 佐证材料（状态3需传）
+        id: null, 
+        processingStatus: '', 
+        processingResult: '', 
+        processingEvidenceImages: [] // 佐证材料（传给后端的格式）
       },
+      // 表单验证规则
       rules: {
         processingStatus: [
-          { required: true, message: '请选择处理状态', trigger: 'change' },
+          { required: true, message: '请选择处理状态', trigger: 'change' }
         ],
         processingResult: [
           { required: true, message: '请输入处理结果', trigger: 'blur' },
+          { min: 10, message: '处理结果至少10个字符', trigger: 'blur' }
         ],
+        processingEvidenceImages: [
+          { required: true, message: '请上传佐证材料', trigger: 'change' }
+        ]
       },
-      uploadFiles: [], // 上传的图片列表（临时存储）
+      // 上传配置（完全适配项目路由）
+      uploadUrl: URL.upload, // 从路由取OSS上传地址：api_url + '/admin/oss/upload'
+      uploadParams: {
+        authorization: getToken(), 
+        gallery_type: 'image' // 
+      },
+      uploadFileList: [] // 上传文件列表
     };
   },
   methods: {
+    // 父组件调用：打开处理弹窗，传入举报记录
     open(row) {
-      this.visible = true;
       this.form = {
         ...this.form,
-        id: row.id,
-        processingStatus: '',
-        processingResult: '',
-        processingEvidenceImages: [],
+        id: row.id, // 绑定举报ID
+        processingStatus: '', 
+        processingResult: '', 
+        processingEvidenceImages: [] 
       };
-      this.uploadFiles = []; // 清空历史上传图片
+      this.uploadFileList = []; // 清空历史上传
+      this.visible = true;
     },
 
-    // 处理状态变化时触发（重置相关字段）
+    // 处理状态变化：非"已处理"时清空上传文件
     handleStatusChange(val) {
-      if (val === '1') {
-        this.form.processingResult = '';
-        this.uploadFiles = [];
-        this.form.processingEvidenceImages = [];
-      } else if (val === '2') {
-        this.uploadFiles = [];
+      if (val !== '3') {
+        this.uploadFileList = [];
         this.form.processingEvidenceImages = [];
+      } else {
+        // 切换到"已处理"时，动态调整上传参数（如视频上传需改gallery_type）
+        this.uploadParams.gallery_type = 'image';
       }
     },
 
-    // 图片上传组件的回调：获取文件
-    handleGetFile(files) {
-      this.uploadFiles = files;
-      this.form.processingEvidenceImages = files.map(file => ({
-        url: file,
-        description: '处理佐证材料'
-      }));
-    },
-
-    // 图片上传组件的回调：移除文件
-    handleRemoveFile(files) {
-      this.uploadFiles = files;
-      this.form.processingEvidenceImages = files.map(file => ({
-        url: file,
-        description: '处理佐证材料'
+    // 上传成功回调
+    handleUploadSuccess(response, file, fileList) {
+      if (response.code == 0) {
+        file.url = response.data.media_url; // 绑定后端返回的文件URL
+        this.form.processingEvidenceImages = fileList.map(item => ({
+          url: item.url,
+          description: `佐证材料_${item.name}` 
+        }));
+        this.$message.success(`文件 ${file.name} 上传成功`);
+      } else {
+        this.$message.error(`文件 ${file.name} 上传失败：${response.msg || '未知错误'}`);
+        // 上传失败移除无效文件
+        this.uploadFileList = this.uploadFileList.filter(item => item.uid !== file.uid);
+      }
+    },
+
+    // 上传失败回调
+    handleUploadError(error, file) {
+      this.$message.error(`文件 ${file.name} 上传失败：网络错误或接口异常`);
+      this.uploadFileList = this.uploadFileList.filter(item => item.uid !== file.uid);
+    },
+
+    // 移除文件回调
+    handleFileRemove(file, index) {
+      this.uploadFileList.splice(index, 1);
+      // 同步更新佐证材料
+      this.form.processingEvidenceImages = this.uploadFileList.map(item => ({
+        url: item.url,
+        description: `佐证材料_${item.name}`
       }));
     },
 
+    // 提交处理结果
     async handleSubmit() {
       this.$refs.form.validate(async (valid) => {
         if (!valid) return;
 
-        // 根据状态整理提交参数（只保留必要字段）
+        // 整理提交参数
         const submitData = {
           id: this.form.id,
           processingStatus: this.form.processingStatus,
+          processingResult: this.form.processingResult
         };
 
-        // 状态2或3：添加处理结果
-        if (['2', '3'].includes(this.form.processingStatus)) {
-          submitData.processingResult = this.form.processingResult;
-        }
-
-        // 状态3：添加佐证材料
+        // 状态3时添加佐证材料（转JSON字符串）
         if (this.form.processingStatus === '3') {
-          if (this.form.processingEvidenceImages.length === 0) {
-            return this.$message.warning('请上传佐证材料');
-          }
-          // 将数组转换为 JSON 字符串
           submitData.processingEvidenceImages = JSON.stringify(this.form.processingEvidenceImages);
         }
 
-        // 调用提交接口
         try {
-          await dealReport(submitData); // 提交处理结果的接口
-          this.$message.success('处理成功');
+          await dealReport(submitData);
+          this.$message.success('处理成功！');
           this.visible = false;
-          this.$emit('success'); // 通知父组件刷新列表
+          this.$emit('success'); // 通知父组件刷新举报列表
         } catch (err) {
-          this.$message.error('处理失败：' + (err.message || '未知错误'));
+          this.$message.error(`处理失败：${err.message || '未知错误'}`);
         }
       });
     },
 
-    // 关闭弹窗
     handleClose() {
       this.visible = false;
-      this.$refs.form.resetFields(); // 重置表单
-      this.uploadFiles = []; // 清空上传文件
-    },
-  },
+      this.$refs.form?.resetFields();
+      this.uploadFileList = [];
+      this.form.processingEvidenceImages = [];
+    }
+  }
 };
 </script>
 
 <style scoped>
-.upload-demo {
-  margin-top: 10px;
+::v-deep .el-upload {
+  margin-bottom: 10px;
 }
-</style>
+::v-deep .el-image-viewer__mask {
+  background: rgba(0, 0, 0, 0.7) !important;
+}
+.el-upload__tip {
+  color: #666 !important;
+  font-size: 12px !important;
+}
+</style>
\ No newline at end of file
diff --git a/src/views/settings/config/reportDetail.vue b/src/views/settings/config/reportDetail.vue
new file mode 100644
index 0000000..7eef059
--- /dev/null
+++ b/src/views/settings/config/reportDetail.vue
@@ -0,0 +1,75 @@
+<template>
+  <el-dialog
+    :visible.sync="visible"
+    title="举报详情"
+    width="600px"
+    :before-close="handleClose"
+  >
+    <div>
+      <p>
+        <strong>举报正文：</strong>
+        {{ detailData.reportContent }}
+      </p>
+      <div>
+        <p><strong>举报凭证：</strong></p>
+        <div class="verify_container">
+          <div v-for="verify_item in detailData.reportVerify">
+            <img :src="verify_item.url" class="verify_img" />
+          </div>
+        </div>
+      </div>
+      <p>
+        <strong>举报人：</strong>
+        {{ detailData.reporterName }}
+      </p>
+      <p>
+        <strong>举报时间：</strong>
+        {{ detailData.reporterTime }}
+      </p>
+      <p>
+        <strong>状态：</strong>
+        <el-tag :type="detailData.state === '未处理' ? 'warning' : 'success'">
+          {{ detailData.state }}
+        </el-tag>
+      </p>
+    </div>
+  </el-dialog>
+</template>
+
+<script>
+  export default {
+    name: 'ReportDetail', 
+    data() {
+      return {
+        visible: false,
+        detailData: {},
+      }
+    },
+    methods: {
+      // 打开对话框并接收数据
+      open(row) {
+        this.detailData = row
+        this.visible = true // 显示对话框
+      },
+      // 关闭对话框
+      handleClose() {
+        this.visible = false
+      },
+    },
+  }
+</script>
+
+<style scoped>
+  .verify_container {
+    display: flex;
+    flex-direction: row; 
+    gap: 10px; 
+    flex-wrap: wrap; 
+    margin: 10px 0; 
+  }
+
+  .verify_img {
+    width: 100px;
+    height: 100px;
+  }
+</style>