cfc/cfc-frontend/pages/activity/registrations.vue

<template>
  <view class="container">
    <!-- 活动标题 -->
    <view class="header">
      <text class="header-title">{{ activityTitle || '报名管理' }}</text>
    </view>

    <!-- 状态筛选 chips -->
    <scroll-view class="filter-scroll" scroll-x enable-flex>
      <view class="filter-chips">
        <view
          class="filter-chip"
          :class="{ active: currentFilter === filter.value }"
          v-for="filter in statusFilters"
          :key="filter.value"
          @click="onFilterChange(filter.value)"
        >
          <text class="filter-label">{{ filter.label }}</text>
        </view>
      </view>
    </scroll-view>

    <!-- 报名列表 -->
    <view class="reg-list" v-if="registrations.length > 0">
      <view
        class="reg-card"
        v-for="row in registrations"
        :key="row.id"
      >
        <view class="reg-info">
          <view class="reg-name-row">
            <text class="reg-name">{{ row.registrantName || '未填写姓名' }}</text>
            <text class="reg-tag" :class="'reg-tag-' + row.status">{{ statusText(row.status) }}</text>
          </view>
          <text class="reg-meta" v-if="row.registrantPhone">联系电话：{{ row.registrantPhone }}</text>
          <text class="reg-meta">报名时间：{{ formatDateTime(row.registeredAt) }}</text>
        </view>
        <view class="reg-actions" v-if="row.status === 'pending'">
          <button class="btn-approve" @click="onApprove(row)">通过</button>
          <button class="btn-reject" @click="onReject(row)">拒绝</button>
        </view>
      </view>
    </view>

    <!-- 空状态 -->
    <view class="empty-state" v-else-if="!loading">
      <text class="empty-icon">📋</text>
      <text class="empty-title">暂无报名记录</text>
      <text class="empty-desc">当前状态下没有报名申请</text>
    </view>

    <!-- 加载状态 -->
    <view class="loading-state" v-if="loading">
      <view class="loading-spinner"></view>
      <text class="loading-text">加载中...</text>
    </view>
  </view>
</template>

<script>
import { adminActivityRegistrationList, adminApproveRegistration, adminRejectRegistration, getActivityDetail } from '@/utils/api.js'

export default {
  data() {
    return {
      activityId: null,
      activityTitle: '',
      currentFilter: 'all',
      statusFilters: [
        { label: '全部', value: 'all' },
        { label: '待审核', value: 'pending' },
        { label: '已通过', value: 'approved' },
        { label: '已拒绝', value: 'rejected' }
      ],
      registrations: [],
      loading: false
    }
  },
  onLoad: function(options) {
    if (options && options.activityId) {
      this.activityId = options.activityId
    }
    if (options && options.title) {
      this.activityTitle = decodeURIComponent(options.title)
    }
    this.loadDetail()
    this.loadList()
  },
  methods: {
    loadDetail: function() {
      var self = this
      if (!this.activityId || this.activityTitle) return
      getActivityDetail(this.activityId).then(function(res) {
        if (res && res.code === 200 && res.data) {
          self.activityTitle = res.data.title || ''
        }
      }).catch(function() {})
    },
    loadList: function() {
      var self = this
      this.loading = true
      var params = {
        activityId: this.activityId,
        page: 1,
        size: 100
      }
      if (this.currentFilter !== 'all') {
        params.status = this.currentFilter
      }
      adminActivityRegistrationList(params).then(function(res) {
        self.loading = false
        if (res && res.code === 200 && res.data) {
          var list = Array.isArray(res.data) ? res.data : (res.data.records || [])
          self.registrations = list
        } else {
          self.registrations = []
        }
      }).catch(function() {
        self.loading = false
        self.registrations = []
      })
    },
    onFilterChange: function(value) {
      this.currentFilter = value
      this.loadList()
    },
    onApprove: function(row) {
      var self = this
      uni.showModal({
        title: '提示',
        content: '确认通过该报名吗？',
        success: function(res) {
          if (res.confirm) {
            adminApproveRegistration({ registrationId: row.id, activityId: self.activityId }).then(function(r) {
              if (r && r.code === 200) {
                uni.showToast({ title: '已通过', icon: 'success' })
                self.loadList()
              } else {
                uni.showToast({ title: (r && r.message) || '操作失败', icon: 'none' })
              }
            }).catch(function() {
              uni.showToast({ title: '网络异常', icon: 'none' })
            })
          }
        }
      })
    },
    onReject: function(row) {
      var self = this
      uni.showModal({
        title: '提示',
        content: '确认拒绝该报名吗？',
        success: function(res) {
          if (res.confirm) {
            adminRejectRegistration({ registrationId: row.id, activityId: self.activityId }).then(function(r) {
              if (r && r.code === 200) {
                uni.showToast({ title: '已拒绝', icon: 'success' })
                self.loadList()
              } else {
                uni.showToast({ title: (r && r.message) || '操作失败', icon: 'none' })
              }
            }).catch(function() {
              uni.showToast({ title: '网络异常', icon: 'none' })
            })
          }
        }
      })
    },
    statusText: function(status) {
      var map = { pending: '待审核', approved: '已通过', rejected: '已拒绝', cancelled: '已取消' }
      return map[status] || status || '未知'
    },
    formatDateTime: function(v) {
      if (!v) return ''
      var s = String(v)
      if (s.indexOf('-') < 0 && s.indexOf('/') < 0) return s
      var d = new Date(s.replace(/-/g, '/'))
      if (isNaN(d.getTime())) return s
      var pad = function(n) { return n < 10 ? '0' + n : '' + n }
      return d.getFullYear() + '-' + pad(d.getMonth() + 1) + '-' + pad(d.getDate()) + ' ' + pad(d.getHours()) + ':' + pad(d.getMinutes())
    }
  }
}
</script>

<style scoped>
.container {
  min-height: 100vh;
  background: #F5F5F5;
  display: flex;
  flex-direction: column;
}

.header {
  background: #1A0F00;
  padding: 20rpx 24rpx;
  text-align: center;
}

.header-title {
  color: #fff;
  font-size: 30rpx;
  font-weight: 600;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.filter-scroll {
  padding: 20rpx 24rpx;
  background: #fff;
}

.filter-chips {
  display: flex;
  flex-direction: row;
  gap: 16rpx;
}

.filter-chip {
  padding: 12rpx 24rpx;
  border-radius: 16px;
  background: #fff;
  border: 1rpx solid #ddd;
  flex-shrink: 0;
}

.filter-chip.active {
  background: #FFF7ED;
  border-color: #F97316;
}

.filter-label {
  font-size: 24rpx;
  color: #666;
}

.filter-chip.active .filter-label {
  color: #F97316;
  font-weight: 500;
}

.reg-list {
  padding: 20rpx 24rpx;
  display: flex;
  flex-direction: column;
  gap: 20rpx;
}

.reg-card {
  background: #fff;
  border-radius: 12rpx;
  padding: 24rpx;
  display: flex;
  flex-direction: row;
  align-items: center;
  box-shadow: 0 2rpx 12rpx rgba(0, 0, 0, 0.06);
}

.reg-info {
  flex: 1;
  display: flex;
  flex-direction: column;
}

.reg-name-row {
  display: flex;
  flex-direction: row;
  align-items: center;
}

.reg-name {
  font-size: 30rpx;
  font-weight: 600;
  color: #333;
}

.reg-tag {
  margin-left: 16rpx;
  font-size: 20rpx;
  padding: 2rpx 12rpx;
  border-radius: 6rpx;
}

.reg-tag-pending {
  background: #FFF7ED;
  color: #F59E0B;
}

.reg-tag-approved {
  background: #F0FDF4;
  color: #10B981;
}

.reg-tag-rejected {
  background: #F5F5F5;
  color: #9CA3AF;
}

.reg-tag-cancelled {
  background: #F5F5F5;
  color: #9CA3AF;
}

.reg-meta {
  font-size: 24rpx;
  color: #999;
  margin-top: 8rpx;
}

.reg-actions {
  display: flex;
  flex-direction: row;
  gap: 16rpx;
  margin-left: 20rpx;
  flex-shrink: 0;
}

.btn-approve {
  padding: 8rpx 24rpx;
  font-size: 24rpx;
  color: #fff;
  background: linear-gradient(135deg, #F97316, #FB923C);
  border: none;
  border-radius: 20rpx;
  line-height: 1.5;
}

.btn-reject {
  padding: 8rpx 24rpx;
  font-size: 24rpx;
  color: #999;
  background: #fff;
  border: 1rpx solid #ddd;
  border-radius: 20rpx;
  line-height: 1.5;
}

.empty-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 120rpx 40rpx;
}

.empty-icon {
  font-size: 80rpx;
  margin-bottom: 20rpx;
}

.empty-title {
  font-size: 32rpx;
  font-weight: 600;
  color: #333;
  margin-bottom: 12rpx;
}

.empty-desc {
  font-size: 26rpx;
  color: #999;
}

.loading-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 80rpx 40rpx;
}

.loading-spinner {
  width: 60rpx;
  height: 60rpx;
  border: 4rpx solid #FDE68A;
  border-top-color: #F97316;
  border-radius: 50%;
  animation: spin 0.8s linear infinite;
  margin-bottom: 20rpx;
}

@keyframes spin {
  to { transform: rotate(360deg); }
}

.loading-text {
  font-size: 26rpx;
  color: #999;
}
</style>