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

<template>
  <div class="registration-review admin-page">
    <div class="header">
      <h2>活动报名审核</h2>
      <div class="filters">
        <el-select v-model="activityId" placeholder="选择活动" @change="loadList" style="width: 200px;" clearable>
          <el-option v-for="a in activityList" :key="a.id" :label="a.title" :value="a.id" />
        </el-select>
         <el-input v-model="keyword" placeholder="搜索用户/孩子ID..." prefix-icon="el-icon-search" style="width:200px" clearable @keyup.enter.native="loadList" @clear="loadList" />
         <el-select v-model="statusFilter" 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="rejected" />
        </el-select>
      </div>
    </div>

    <div class="table-scroll-wrap-sm">
      <el-table :max-height="tableHeight" :data="filteredList" v-loading="loading" border stripe>
      <el-table-column prop="id" label="ID" width="60" />
      <el-table-column prop="userId" label="用户ID" width="70" />
      <el-table-column prop="childId" label="孩子ID" width="70" />
      <el-table-column prop="status" label="状态" width="90">
        <template slot-scope="{ row }">
          <el-tag :type="row.status === 'approved' ? 'success' : row.status === 'rejected' ? 'danger' : 'warning'">
            {{ row.status === 'approved' ? '已通过' : row.status === 'rejected' ? '已拒绝' : '待审核' }}
          </el-tag>
        </template>
      </el-table-column>
      <el-table-column prop="registeredAt" label="报名时间" width="160">
        <template slot-scope="{ row }">
          {{ formatTime(row.registeredAt || row.createdAt) }}
        </template>
      </el-table-column>
      <el-table-column label="操作" width="200" fixed="right">
        <template slot-scope="{ row }">
          <el-button v-if="row.status === 'pending'" type="success" size="mini" @click="handleApprove(row)">通过</el-button>
          <el-button v-if="row.status === 'pending'" type="danger" size="mini" @click="showRejectDialog(row)">拒绝</el-button>
          <span v-else style="color: #999;">已处理</span>
        </template>
      </el-table-column>
      </el-table>
    </div>

    <el-dialog title="拒绝原因" :visible.sync="rejectDialogVisible" width="400px">
      <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="handleReject">确认拒绝</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import { getActivityList } from '@/api/activity'
import { getRegistrationList, approveRegistration, rejectRegistration } from '@/api/activity'

export default {
  name: 'ActivityRegistrationReview',
  data() {
    return {
      activityList: [],
      list: [],
      loading: false,
      keyword: '',
      activityId: null,
      statusFilter: '',
      rejectDialogVisible: false,
      rejectReason: '',
      currentRow: null
    }
  },
  computed: {
    tableHeight() {
      return window.innerHeight - 300
    },
    filteredList() {
      if (!this.keyword) return this.list
      var kw = this.keyword.toLowerCase()
      return this.list.filter(function(item) {
        return (item.userId && String(item.userId).includes(kw)) ||
               (item.childId && String(item.childId).includes(kw))
      })
    }
  },
  mounted() {
    this.loadActivities()
  },
  methods: {
    formatTime(t) {
      if (!t) return '-'
      return t.replace ? t.replace('T', ' ').substring(0, 19) : t
    },
    async loadActivities() {
      try {
        const res = await getActivityList({ page: 1, size: 100 })
        if (res.code === 200) this.activityList = (res.data && res.data.records) || res.data || []
      } catch (e) { console.error(e) }
    },
    async loadList() {
      if (!this.activityId) return this.$message.warning('请先选择活动')
      this.loading = true
      try {
        const params = { activityId: this.activityId }
        if (this.statusFilter) params.status = this.statusFilter
        const res = await getRegistrationList(params)
        if (res.code === 200) this.list = res.data || []
      } catch (e) { console.error(e) }
      this.loading = false
    },
    async handleApprove(row) {
      try {
        const res = await approveRegistration({ registrationId: row.id })
        if (res.code === 200) {
          this.$message.success('已通过')
          this.loadList()
        } else {
          this.$message.error(res.message || '操作失败')
        }
      } catch (e) { this.$message.error('操作失败') }
    },
    showRejectDialog(row) {
      this.currentRow = row
      this.rejectReason = ''
      this.rejectDialogVisible = true
    },
    async handleReject() {
      try {
        const res = await rejectRegistration({ registrationId: this.currentRow.id, rejectReason: this.rejectReason })
        if (res.code === 200) {
          this.$message.success('已拒绝')
          this.rejectDialogVisible = false
          this.loadList()
        } else {
          this.$message.error(res.message || '操作失败')
        }
      } catch (e) { this.$message.error('操作失败') }
    }
  }
}
</script>

<style scoped>
.header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 16px; }
.header h2 { margin: 0; }
.filters { display: flex; align-items: center; gap: 12px; }
</style>