cfc/cfc-web/src/views/admin/ProductManage.vue

<template>
  <div class="product-manage admin-page">
    <div class="header">
      <h2>商品管理</h2>
      <div class="filters">
        <el-input
          v-model="filters.keyword"
          placeholder="搜索商品名称"
          prefix-icon="el-icon-search"
          clearable
          style="width: 180px;"
          @clear="loadList"
          @keyup.enter.native="loadList"
        />
        <el-select v-model="filters.status" placeholder="商品状态" @change="loadList" style="width: 130px;" clearable>
          <el-option label="全部" value="" />
          <el-option label="待审核" value="pending" />
          <el-option label="待上架" value="approved" />
          <el-option label="已上架" value="on_shelf" />
          <el-option label="已下架" value="off_shelf" />
          <el-option label="已拒绝" value="rejected" />
        </el-select>
        <el-select v-model="filters.productType" placeholder="商品类型" @change="loadList" style="width: 140px;" clearable>
          <el-option label="全部类型" value="" />
          <el-option label="实物商品" value="physical" />
          <el-option label="虚拟商品" value="virtual" />
          <el-option label="优惠券" value="coupon" />
        </el-select>
        <el-button type="primary" size="mini" @click="loadList">查询</el-button>
        <el-button type="success" size="mini" icon="el-icon-plus" @click="$router.push('/product-edit')">新增商品</el-button>
      </div>
    </div>

    <div style="overflow:auto;max-height:calc(100vh - 300px);">
      <el-table :data="list" v-loading="loading" border stripe style="max-height:calc(100vh - 300px);">
      <el-table-column prop="id" label="ID" width="70" />
      <el-table-column label="商品图片" width="80">
        <template slot-scope="{ row }">
          <img
            v-if="row.coverImage"
            :src="row.coverImage"
            class="product-thumb"
            @click="previewImage(row.coverImage)"
          />
          <span v-else style="color:#999">-</span>
        </template>
      </el-table-column>
      <el-table-column prop="name" label="商品名称" min-width="150" show-overflow-tooltip />
      <el-table-column label="类型" width="90">
        <template slot-scope="{ row }">
          {{ typeLabel(row.productType) }}
        </template>
      </el-table-column>
      <el-table-column label="售价(元)" width="90">
        <template slot-scope="{ row }">
          {{ formatPriceWithSymbol(row.price || 0) }}
        </template>
      </el-table-column>
      <el-table-column prop="stock" label="库存" width="80">
        <template slot-scope="{ row }">
          <span :class="{ 'stock-warning': row.stock !== null && row.stock < 10 }">
            {{ row.stock }}
          </span>
        </template>
      </el-table-column>
      <el-table-column prop="salesCount" label="销量" width="70" />
      <el-table-column label="供应商" width="120" show-overflow-tooltip>
        <template slot-scope="{ row }">
          {{ row.vendorName || '-' }}
        </template>
      </el-table-column>
      <el-table-column label="状态" width="90">
        <template slot-scope="{ row }">
          <el-tag :type="statusType(row.status)" size="mini">{{ statusLabel(row.status) }}</el-tag>
        </template>
      </el-table-column>
      <el-table-column prop="createdAt" label="创建时间" width="160">
        <template slot-scope="{ row }">
          {{ formatTime(row.createdAt) }}
        </template>
      </el-table-column>
      <el-table-column label="操作" width="200" fixed="right">
        <template slot-scope="{ row }">
          <el-button size="mini" type="primary" @click="$router.push('/product-edit?id=' + row.id)">编辑</el-button>
          <el-dropdown trigger="hover" @command="(cmd) => handleActionCmd(row, cmd)">
            <el-button size="mini">
              更多<i class="el-icon-arrow-down el-icon--right"></i>
            </el-button>
            <el-dropdown-menu slot="dropdown">
              <el-dropdown-item v-if="row.status === 'pending'" command="approve" icon="el-icon-circle-check">通过</el-dropdown-item>
              <el-dropdown-item v-if="row.status === 'pending'" command="reject" icon="el-icon-circle-close">拒绝</el-dropdown-item>
              <el-dropdown-item v-if="row.status === 'on_shelf'" command="offShelf" icon="el-icon-download">下架</el-dropdown-item>
              <el-dropdown-item v-if="row.status === 'off_shelf'" command="onShelf" icon="el-icon-upload2">上架</el-dropdown-item>
            </el-dropdown-menu>
          </el-dropdown>
        </template>
      </el-table-column>
    </el-table>
    </div>

    <el-pagination
      @size-change="handleSizeChange"
      @current-change="handlePageChange"
      :current-page="pagination.page"
      :page-sizes="[10, 20, 50]"
      :page-size="pagination.size"
      :total="pagination.total"
      layout="total, sizes, prev, pager, next, jumper"
      style="margin-top: 16px; text-align: right;"
    />

    <el-dialog title="拒绝原因" :visible.sync="rejectDialogVisible" width="420px">
      <el-input v-model="rejectReason" type="textarea" :rows="3" placeholder="请输入拒绝原因" />
      <span slot="footer">
        <el-button @click="rejectDialogVisible = false">取消</el-button>
        <el-button type="danger" @click="confirmReject">确认拒绝</el-button>
      </span>
    </el-dialog>

    <el-dialog title="商品详情" :visible.sync="detailDialogVisible" width="600px">
      <el-descriptions :column="2" border v-if="detail">
        <el-descriptions-item label="商品名称">{{ detail.name }}</el-descriptions-item>
        <el-descriptions-item label="商品类型">{{ typeLabel(detail.productType) }}</el-descriptions-item>
        <el-descriptions-item label="售价">{{ formatPriceWithSymbol(detail.price || 0) }}</el-descriptions-item>
        <el-descriptions-item label="会员价">{{ detail.memberPrice ? formatPriceWithSymbol(detail.memberPrice) : '-' }}</el-descriptions-item>
        <el-descriptions-item label="库存">{{ detail.stock }}</el-descriptions-item>
        <el-descriptions-item label="销量">{{ detail.salesCount || 0 }}</el-descriptions-item>
        <el-descriptions-item label="供应商">{{ detail.vendorName || '-' }}</el-descriptions-item>
        <el-descriptions-item label="状态">
          <el-tag :type="statusType(detail.status)" size="mini">{{ statusLabel(detail.status) }}</el-tag>
        </el-descriptions-item>
        <el-descriptions-item label="拒绝原因" v-if="detail.rejectReason">{{ detail.rejectReason }}</el-descriptions-item>
        <el-descriptions-item label="商品描述" :span="2">{{ detail.description || '-' }}</el-descriptions-item>
        <el-descriptions-item label="创建时间" :span="2">{{ formatTime(detail.createdAt) }}</el-descriptions-item>
      </el-descriptions>
      <div v-else style="text-align:center;color:#999;">加载中...</div>
    </el-dialog>
  </div>
</template>

<script>
import { getProductList, reviewProduct, shelveProduct } from '@/api/admin'

export default {
  name: 'ProductManage',
  data() {
    return {
      list: [],
      loading: false,
      filters: {
        keyword: '',
        status: '',
        productType: ''
      },
      pagination: {
        page: 1,
        size: 20,
        total: 0
      },
      rejectDialogVisible: false,
      rejectTarget: null,
      rejectReason: '',
      detailDialogVisible: false,
      detail: null
    }
  },
  mounted() {
    this.loadList()
  },
  methods: {
    async loadList() {
      this.loading = true
      try {
        const params = {
          page: this.pagination.page,
          size: this.pagination.size,
          status: this.filters.status || null,
          productType: this.filters.productType || null,
          keyword: this.filters.keyword || null
        }
        const res = await getProductList(params)
        this.list = res.data.records || []
        this.pagination.total = res.data.total || 0
      } catch (e) {
        this.$message.error('加载失败')
      } finally {
        this.loading = false
      }
    },
    handleSizeChange(size) {
      this.pagination.size = size
      this.pagination.page = 1
      this.loadList()
    },
    handlePageChange(page) {
      this.pagination.page = page
      this.loadList()
    },
    statusType(status) {
      const map = {
        pending: 'warning',
        approved: 'success',
        on_shelf: 'success',
        off_shelf: 'info',
        rejected: 'danger'
      }
      return map[status] || 'info'
    },
    statusLabel(status) {
      const map = {
        pending: '待审核',
        approved: '待上架',
        on_shelf: '已上架',
        off_shelf: '已下架',
        rejected: '已拒绝'
      }
      return map[status] || status
    },
    typeLabel(type) {
      const map = { physical: '实物商品', virtual: '虚拟商品', coupon: '优惠券' }
      return map[type] || type
    },
    formatTime(time) {
      if (!time) return '-'
      return new Date(time).toLocaleString()
    },
    formatPriceWithSymbol(price) {
      if (price === 0) return '免费'
      return '¥' + (price / 100).toFixed(2)
    },
    async handleReview(row, action) {
      try {
        await this.$confirm('确认通过该商品审核？', '提示')
        await reviewProduct(row.id, { action })
        this.$message.success('操作成功')
        this.loadList()
      } catch (e) {
        if (e !== 'cancel') this.$message.error('操作失败')
      }
    },
    showRejectDialog(row) {
      this.rejectTarget = row
      this.rejectReason = ''
      this.rejectDialogVisible = true
    },
    async confirmReject() {
      if (!this.rejectReason.trim()) {
        return this.$message.warning('请填写拒绝原因')
      }
      try {
        await reviewProduct(this.rejectTarget.id, { action: 'reject', reason: this.rejectReason })
        this.$message.success('已拒绝')
        this.rejectDialogVisible = false
        this.loadList()
      } catch (e) {
        this.$message.error('操作失败')
      }
    },
    async handleShelve(row, shelve) {
      try {
        await this.$confirm('确认' + (shelve ? '上架' : '下架') + '该商品？', '提示')
        await shelveProduct(row.id, { shelve })
        this.$message.success('操作成功')
        this.loadList()
      } catch (e) {
        if (e !== 'cancel') this.$message.error('操作失败')
      }
    },
    previewImage(url) {
      if (!url) return
      this.$alert('<img src="' + url + '" style="max-width:100%;" />', '商品图片', {
        dangerouslyUseHTMLString: true,
        closeOnClickModal: true
      })
    },
    handleActionCmd(row, cmd) {
      switch (cmd) {
        case 'approve': this.handleReview(row, 'approve'); break;
        case 'reject': this.showRejectDialog(row); break;
        case 'offShelf': this.handleShelve(row, false); break;
        case 'onShelf': this.handleShelve(row, true); break;
      }
    }
  }
}
</script>

<style scoped>
.product-manage {
  padding: 20px;
}
.header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20px;
  flex-wrap: wrap;
  gap: 12px;
}
.header h2 {
  margin: 0;
  font-size: 18px;
}
.filters {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  align-items: center;
}
.product-thumb {
  width: 50px;
  height: 50px;
  object-fit: cover;
  border-radius: 4px;
  cursor: pointer;
}
.stock-warning {
  color: #f56c6c;
  font-weight: bold;
}
</style>