library-picturebook-activity/frontend/src/views/public/mine/Registrations.vue

<template>
  <div class="registrations-page">
    <div class="page-header">
      <h2>我的报名</h2>
    </div>

    <div v-if="loading" class="loading-wrap"><a-spin /></div>

    <div v-else-if="list.length === 0" class="empty-wrap">
      <a-empty description="还没有报名任何活动">
        <a-button type="primary" shape="round" @click="$router.push('/p/activities')">
          去看看活动
        </a-button>
      </a-empty>
    </div>

    <div v-else class="reg-list">
      <div v-for="item in list" :key="item.id" class="reg-card" @click="goDetail(item.contest?.id)">
        <div class="reg-cover">
          <img v-if="item.contest?.coverUrl" :src="item.contest.coverUrl" />
          <div v-else class="cover-placeholder">
            {{ item.contest?.contestName?.charAt(0) }}
          </div>
        </div>
        <div class="reg-info">
          <h3>{{ item.contest?.contestName }}</h3>
          <div class="reg-meta">
            <a-tag :color="statusColor(item.registrationState)">
              {{ statusLabel(item.registrationState) }}
            </a-tag>
            <span class="participant-label">
              {{ item.participantType === 'child' ? `子女：${item.child?.name}` : '本人参与' }}
            </span>
          </div>
          <div class="reg-bottom">
            <span class="reg-time">{{ formatDate(item.registrationTime) }}</span>
            <a-button
              v-if="item.registrationState === 'passed' && isInSubmitPhase(item.contest)"
              type="primary"
              size="small"
              shape="round"
              @click.stop="goSubmit(item.contest?.id)"
            >
              提交作品
            </a-button>
          </div>
        </div>
      </div>
    </div>

    <div v-if="total > pageSize" class="pagination-wrap">
      <a-pagination
        v-model:current="page"
        :total="total"
        :page-size="pageSize"
        size="small"
        @change="fetchList"
      />
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref, onMounted } from 'vue'
import { useRouter } from 'vue-router'
import { publicMineApi } from '@/api/public'
import dayjs from 'dayjs'

const router = useRouter()
const list = ref<any[]>([])
const loading = ref(true)
const page = ref(1)
const pageSize = ref(10)
const total = ref(0)

const formatDate = (d: string) => dayjs(d).format('YYYY-MM-DD HH:mm')

const statusLabel = (s: string) => {
  const map: Record<string, string> = { pending: '待审核', passed: '已通过', rejected: '已拒绝', withdrawn: '已撤回' }
  return map[s] || s
}

const statusColor = (s: string) => {
  const map: Record<string, string> = { pending: 'orange', passed: 'green', rejected: 'red', withdrawn: 'default' }
  return map[s] || 'default'
}

const fetchList = async () => {
  loading.value = true
  try {
    const res = await publicMineApi.registrations({ page: page.value, pageSize: pageSize.value })
    list.value = res.list
    total.value = res.total
  } catch { /* */ } finally {
    loading.value = false
  }
}

const goDetail = (id: number) => {
  if (id) router.push(`/p/activities/${id}`)
}

const goSubmit = (contestId: number) => {
  if (contestId) router.push(`/p/activities/${contestId}`)
}

const isInSubmitPhase = (contest: any) => {
  if (!contest?.submitStartTime || !contest?.submitEndTime) return false
  const now = dayjs()
  return now.isAfter(contest.submitStartTime) && now.isBefore(contest.submitEndTime)
}

onMounted(fetchList)
</script>

<style scoped lang="scss">
$primary: #6366f1;

.registrations-page { max-width: 600px; margin: 0 auto; }

.page-header {
  margin-bottom: 20px;
  h2 { font-size: 20px; font-weight: 700; color: #1e1b4b; margin: 0; }
}

.loading-wrap, .empty-wrap { padding: 60px 0; display: flex; justify-content: center; }

.reg-list { display: flex; flex-direction: column; gap: 12px; }

.reg-card {
  display: flex;
  gap: 14px;
  padding: 16px;
  background: #fff;
  border-radius: 16px;
  border: 1px solid rgba($primary, 0.06);
  cursor: pointer;
  transition: all 0.2s;

  &:hover { box-shadow: 0 4px 16px rgba($primary, 0.08); transform: translateY(-1px); }

  .reg-cover {
    width: 80px; height: 60px; border-radius: 10px; overflow: hidden; flex-shrink: 0;
    img { width: 100%; height: 100%; object-fit: cover; }
    .cover-placeholder {
      width: 100%; height: 100%;
      background: linear-gradient(135deg, #c7d2fe, #fbcfe8);
      display: flex; align-items: center; justify-content: center;
      font-size: 20px; font-weight: 700; color: rgba(255,255,255,0.7);
    }
  }

  .reg-info {
    flex: 1; min-width: 0;
    h3 { font-size: 14px; font-weight: 600; color: #1e1b4b; margin: 0 0 6px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
    .reg-meta { display: flex; align-items: center; gap: 8px; margin-bottom: 4px; }
    .participant-label { font-size: 12px; color: #6b7280; }
    .reg-bottom { display: flex; justify-content: space-between; align-items: center; margin-top: 4px; }
    .reg-time { font-size: 11px; color: #9ca3af; }
  }
}

.pagination-wrap { display: flex; justify-content: center; margin-top: 24px; }
</style>