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">
        <!-- 报名信息区 -->
        <div class="reg-main" @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) && (!item.works || item.works.length === 0)"
                type="primary"
                size="small"
                shape="round"
                @click.stop="goSubmit(item.contest?.id)"
              >
                提交作品
              </a-button>
            </div>
          </div>
        </div>

        <!-- 参赛作品区 -->
        <div v-if="item.works && item.works.length > 0" class="work-section">
          <div class="work-section-title">
            <picture-outlined />
            <span>参赛作品</span>
          </div>
          <div
            v-for="work in item.works"
            :key="work.id"
            class="work-item"
            @click.stop="goDetail(item.contest?.id)"
          >
            <div class="work-thumb">
              <img v-if="work.previewUrl" :src="work.previewUrl" />
              <div v-else-if="work.attachments?.[0]?.fileUrl" class="thumb-file">
                <file-image-outlined />
              </div>
              <div v-else class="thumb-empty">
                <picture-outlined />
              </div>
            </div>
            <div class="work-detail">
              <span class="work-title">{{ work.title || '未命名作品' }}</span>
              <span class="work-time">提交于 {{ formatDate(work.createTime) }}</span>
            </div>
          </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 { PictureOutlined, FileImageOutlined } from '@ant-design/icons-vue'
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 {
  background: #fff;
  border-radius: 16px;
  border: 1px solid rgba($primary, 0.06);
  overflow: hidden;
  transition: all 0.2s;

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

.reg-main {
  display: flex;
  gap: 14px;
  padding: 16px;
  cursor: pointer;

  .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; }
  }
}

// ========== 参赛作品区 ==========
.work-section {
  border-top: 1px dashed rgba($primary, 0.08);
  padding: 12px 16px;
  background: rgba($primary, 0.015);

  .work-section-title {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 12px;
    font-weight: 600;
    color: #6b7280;
    margin-bottom: 10px;

    :deep(.anticon) {
      font-size: 13px;
      color: $primary;
    }
  }
}

.work-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 10px;
  background: #fff;
  border-radius: 10px;
  cursor: pointer;
  transition: background 0.2s;

  &:hover { background: rgba($primary, 0.04); }

  & + .work-item { margin-top: 8px; }

  .work-thumb {
    width: 44px; height: 44px; border-radius: 8px; overflow: hidden; flex-shrink: 0;
    background: #f5f3ff;

    img { width: 100%; height: 100%; object-fit: cover; }

    .thumb-file, .thumb-empty {
      width: 100%; height: 100%;
      display: flex; align-items: center; justify-content: center;
      font-size: 18px; color: #c7d2fe;
    }
  }

  .work-detail {
    flex: 1; min-width: 0;
    display: flex; flex-direction: column; gap: 2px;

    .work-title {
      font-size: 13px; font-weight: 500; color: #1e1b4b;
      white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
    }
    .work-time { font-size: 11px; color: #9ca3af; }
  }
}

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