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

<template>
  <div class="review-center">
    <!-- 概览统计卡片 -->
    <el-row :gutter="16" class="summary-row">
      <el-col v-for="card in summaryCards" :key="card.key" :span="4">
        <el-card :class="['summary-card', { active: activeTab === card.key }]" shadow="hover" @click.native="activeTab = card.key">
          <div class="summary-inner">
            <span class="summary-icon">{{ card.icon }}</span>
            <span class="summary-count">{{ card.count }}</span>
            <span class="summary-label">{{ card.label }}</span>
          </div>
        </el-card>
      </el-col>
    </el-row>

    <!-- 详情 Tab -->
    <el-card class="detail-card">
      <el-tabs v-model="activeTab" @tab-click="onTabClick">
        <el-tab-pane label="文章审核" name="article">
          <article-audit ref="article" />
        </el-tab-pane>
        <el-tab-pane label="商品审核" name="product">
          <product-audit ref="product" />
        </el-tab-pane>
        <el-tab-pane label="规划师审核" name="guide">
          <guide-audit ref="guide" />
        </el-tab-pane>
        <el-tab-pane label="营养师审核" name="nutritionist">
          <nutritionist-audit ref="nutritionist" />
        </el-tab-pane>
        <el-tab-pane label="服务商审核" name="vendor">
          <vendor-audit ref="vendor" />
        </el-tab-pane>
        <el-tab-pane label="管家审核" name="butler">
          <butler-audit ref="butler" />
        </el-tab-pane>
        <el-tab-pane label="任务模板审核" name="package">
          <package-audit ref="package" />
        </el-tab-pane>
        <el-tab-pane label="活动审核" name="activity">
          <activity-audit ref="activity" />
        </el-tab-pane>
        <el-tab-pane label="活动报名审核" name="activityRegistration">
          <activity-registration-audit ref="activityRegistration" />
        </el-tab-pane>
        <el-tab-pane label="提现审核" name="withdraw">
          <withdraw-audit ref="withdraw" />
        </el-tab-pane>
        <el-tab-pane label="更换上级审核" name="hierarchy">
          <hierarchy-audit ref="hierarchy" />
        </el-tab-pane>
      </el-tabs>
    </el-card>
  </div>
</template>

<script>
import request from '@/utils/request'
import ArticleAudit from './review/ArticleAudit.vue'
import ProductAudit from './review/ProductAudit.vue'
import GuideAudit from './review/GuideAudit.vue'
import VendorAudit from './review/VendorAudit.vue'
import ButlerAudit from './review/ButlerAudit.vue'
import PackageAudit from './review/PackageAudit.vue'
import ActivityAudit from './review/ActivityAudit.vue'
import ActivityRegistrationAudit from './review/ActivityRegistrationAudit.vue'
import WithdrawAudit from './review/WithdrawAudit.vue'
import HierarchyAudit from './review/HierarchyAudit.vue'
import NutritionistAudit from './review/NutritionistAudit.vue'

export default {
  name: 'ReviewCenter',
  components: {
    ArticleAudit, ProductAudit, GuideAudit, VendorAudit, ButlerAudit,
    PackageAudit, ActivityAudit, ActivityRegistrationAudit, WithdrawAudit, HierarchyAudit,
    NutritionistAudit
  },
  data() {
    return {
      activeTab: 'article',
      summaryData: {},
      summaryCards: [
        { key: 'article', label: '文章审核', icon: '📄', count: 0 },
        { key: 'product', label: '商品审核', icon: '📦', count: 0 },
        { key: 'guide', label: '规划师审核', icon: '👤', count: 0 },
        { key: 'vendor', label: '服务商审核', icon: '🏪', count: 0 },
        { key: 'butler', label: '管家审核', icon: '🤵', count: 0 },
        { key: 'package', label: '任务模板审核', icon: '📋', count: 0 },
        { key: 'activity', label: '活动审核', icon: '🎯', count: 0 },
        { key: 'activityRegistration', label: '报名审核', icon: '📝', count: 0 },
        { key: 'withdraw', label: '提现审核', icon: '💰', count: 0 },
        { key: 'hierarchy', label: '更换上级', icon: '🔗', count: 0 },
        { key: 'nutritionist', label: '营养师审核', icon: '🥗', count: 0 },
      ]
    }
  },
  created() {
    if (this.$route.query.tab && this.summaryCards.some(c => c.key === this.$route.query.tab)) {
      this.activeTab = this.$route.query.tab
    }
    this.loadSummary()
  },
  methods: {
    async loadSummary() {
      try {
        const res = await request({ url: '/api/admin/review-center/summary', method: 'post', data: {} })
        if (res.code === 200 && res.data) {
          this.summaryData = res.data
          this.summaryCards.forEach(c => {
            const keyMap = {
              article: 'articlePending', product: 'productPending', guide: 'guidePending',
              vendor: 'vendorPending', butler: 'butlerPending', package: 'packagePending',
              nutritionist: 'nutritionistPending',
              activity: 'activityPending', activityRegistration: 'activityRegistrationPending',
              withdraw: 'withdrawPending', hierarchy: 'hierarchyChangePending'
            }
            c.count = res.data[keyMap[c.key]] || 0
          })
        }
      } catch (e) {
        console.error('加载审核概览失败', e)
      }
    },
    onTabClick(tab) {
      var ref = tab.name
      if (this.$refs[ref] && this.$refs[ref].loadData) {
        this.$refs[ref].loadData()
      }
    }
  }
}
</script>

<style scoped>
.review-center { padding: 16px; }
.summary-row { margin-bottom: 16px; }
.summary-card { cursor: pointer; text-align: center; }
.summary-card.active { border-color: #409EFF; }
.summary-inner { display: flex; flex-direction: column; align-items: center; gap: 4px; }
.summary-icon { font-size: 28px; }
.summary-count { font-size: 24px; font-weight: bold; color: #409EFF; }
.summary-label { font-size: 12px; color: #666; }
.detail-card { min-height: 400px; }
</style>