hms/apps/miniprogram-uniapp/src/pages-sub/events/index.vue

<template>
  <scroll-view scroll-y :class="['events-page', elderClass]">
    <view class="events-header">
      <text class="events-header__title">线下活动</text>
      <text class="events-header__subtitle">参加活动赢取积分</text>
    </view>

    <view v-if="events.length === 0 && !loading" class="empty-wrap">
      <EmptyState icon="" title="暂无可报名的活动" />
    </view>

    <view v-else class="event-list">
      <view v-for="event in events" :key="event.id" class="event-card">
        <view class="event-card__header">
          <view :class="['event-card__status', (STATUS_MAP[event.status] || { className: '' }).className]">
            <text>{{ (STATUS_MAP[event.status] || { label: event.status }).label }}</text>
          </view>
          <text class="event-card__points">+{{ event.points_reward }} 积分</text>
        </view>
        <text class="event-card__title">{{ event.title }}</text>
        <text v-if="event.description" class="event-card__desc">{{ event.description }}</text>
        <view class="event-card__info">
          <text class="event-card__date">{{ formatDate(event.event_date) }}</text>
          <text v-if="event.location" class="event-card__location">{{ event.location }}</text>
        </view>
        <view class="event-card__footer">
          <text class="event-card__participants">
            {{ event.current_participants }}{{ event.max_participants ? `/${event.max_participants}` : '' }} 人已报名
          </text>
          <view :class="['event-card__btn', isFull(event) ? 'event-card__btn--disabled' : '']" @tap="handleRegister(event)">
            <text class="event-card__btn-text">
              {{ registering === event.id ? '报名中...' : isFull(event) ? '已满' : '立即报名' }}
            </text>
          </view>
        </view>
      </view>
    </view>
    <Loading v-if="loading" text="加载中..." />
  </scroll-view>
</template>

<script setup lang="ts">
import { ref } from 'vue'
import { onMounted } from 'vue'
import { listOfflineEvents, registerEvent, type OfflineEvent } from '@/services/points'
import EmptyState from '@/components/EmptyState.vue'
import Loading from '@/components/Loading.vue'
import { useElderClass } from '@/composables/useElderClass'

const STATUS_MAP: Record<string, { label: string; className: string }> = {
  published: { label: '报名中', className: 'event-card__status--published' },
  ongoing: { label: '进行中', className: 'event-card__status--ongoing' },
  completed: { label: '已结束', className: 'event-card__status--completed' },
  cancelled: { label: '已取消', className: 'event-card__status--cancelled' },
}

const { elderClass } = useElderClass()
const events = ref<OfflineEvent[]>([])
const loading = ref(true)
const registering = ref<string | null>(null)

const isFull = (event: OfflineEvent) => event.max_participants != null && event.current_participants >= event.max_participants
const formatDate = (d: string) => new Date(d).toLocaleDateString('zh-CN', { year: 'numeric', month: 'long', day: 'numeric' })

const loadEvents = async () => {
  loading.value = true
  try {
    const res = await listOfflineEvents({ page: 1, page_size: 50, status: 'published' })
    events.value = res.data || []
  } catch { uni.showToast({ title: '加载失败', icon: 'none' }) }
  finally { loading.value = false }
}

const handleRegister = async (event: OfflineEvent) => {
  if (isFull(event) || registering.value) return
  registering.value = event.id
  try {
    await registerEvent(event.id)
    uni.showToast({ title: '报名成功', icon: 'success' })
    loadEvents()
  } catch (err: any) {
    const msg = err?.message || '报名失败'
    uni.showToast({ title: msg.substring(0, 20), icon: 'none' })
  } finally { registering.value = null }
}

onMounted(loadEvents)
</script>

<style lang="scss" scoped>
.events-page { min-height: 100vh; background: $bg; }
.events-header { padding: 32px 24px 16px; }
.events-header__title { font-size: var(--tk-font-title); font-weight: 600; color: $tx; display: block; }
.events-header__subtitle { font-size: var(--tk-font-caption); color: $tx3; margin-top: 4px; display: block; }
.event-list { padding: 0 24px; }
.event-card { @include card; margin-bottom: 16px; }
.event-card__header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 10px; }
.event-card__status { padding: 2px 10px; border-radius: 4px; }
.event-card__status--published { background: rgba($pri, 0.1); }
.event-card__status--ongoing { background: rgba(250,173,20,0.15); }
.event-card__status--completed { background: rgba(0,0,0,0.05); }
.event-card__status--cancelled { background: rgba(0,0,0,0.05); }
.event-card__points { font-size: var(--tk-font-cap); color: $wrn; font-weight: 500; }
.event-card__title { font-size: var(--tk-font-body); font-weight: 500; color: $tx; display: block; }
.event-card__desc { font-size: var(--tk-font-cap); color: $tx2; display: block; margin-top: 6px; line-height: 1.5; }
.event-card__info { display: flex; gap: 16px; margin-top: 10px; }
.event-card__date, .event-card__location { font-size: var(--tk-font-cap); color: $tx3; }
.event-card__footer { display: flex; justify-content: space-between; align-items: center; margin-top: 14px; padding-top: 12px; border-top: 1px solid rgba(0,0,0,0.05); }
.event-card__participants { font-size: var(--tk-font-cap); color: $tx3; }
.event-card__btn { padding: 6px 20px; min-height: $touch-min; display: flex; align-items: center; background: $pri; border-radius: $r; }
.event-card__btn--disabled { background: rgba(0,0,0,0.1); }
.event-card__btn-text { font-size: var(--tk-font-cap); color: $white; }
.event-card__btn--disabled .event-card__btn-text { color: $tx3; }
.empty-wrap { padding-top: 80px; }
</style>