danyang-match/h5-demo/src/pages/activity/ActivityCheckinPage.vue

<template>
  <PageLayout title="活动签到">
    <UiLoading v-if="loading" text="生成签到码中…" />
    <UiErrorState v-else-if="error" :message="errorMessage" @retry="load" />
    <template v-else>
      <div class="ck">
        <div class="ck__card">
          <div class="ck__activity">
            <div class="ck__title">{{ token.activityTitle || '活动签到' }}</div>
            <div v-if="token.locationName" class="ck__location">📍 {{ token.locationName }}</div>
          </div>

          <div class="ck__qr">
            <div class="ck__qr-icon">▣</div>
            <div class="ck__qr-hint">请向工作人员展示此签到码</div>
          </div>

          <div class="ck__token">
            <div class="ck__token-label">签到码</div>
            <div class="ck__token-value">{{ token.token }}</div>
          </div>

          <div class="ck__expire">有效期至 {{ formatDateTime(token.expiresAt) || '—' }}</div>
        </div>

        <van-button type="primary" block round @click="copyToken">复制签到码</van-button>
        <van-button class="ck__refresh" plain block round :loading="refreshing" @click="refresh">
          刷新签到码
        </van-button>
      </div>
    </template>
  </PageLayout>
</template>

<script setup lang="ts">
import { computed, onMounted, ref } from 'vue'
import { useRoute } from 'vue-router'
import { activityService } from '@/api/services'
import { useAppStore } from '@/stores/app'
import { formatDateTime } from '@/utils/datetime'
import PageLayout from '@/layouts/PageLayout.vue'
import UiLoading from '@/components/UiLoading.vue'
import UiErrorState from '@/components/UiErrorState.vue'

const route = useRoute()
const appStore = useAppStore()

const activityId = computed(() => String(route.query.id || ''))
const token = ref<Record<string, any>>({})
const loading = ref(true)
const refreshing = ref(false)
const error = ref(false)
const errorMessage = ref('生成签到码失败')

async function fetchToken(isRefresh: boolean) {
  if (isRefresh) refreshing.value = true
  else loading.value = true
  error.value = false
  try {
    if (!activityId.value) {
      error.value = true
      errorMessage.value = '缺少活动信息'
      return
    }
    token.value = (await activityService.generateCheckinToken(activityId.value)) || {}
  } catch (err: any) {
    error.value = true
    errorMessage.value = err?.message || '生成签到码失败'
    if (isRefresh) appStore.toastError(errorMessage.value)
  } finally {
    loading.value = false
    refreshing.value = false
  }
}

function load() {
  fetchToken(false)
}
function refresh() {
  fetchToken(true)
}

async function copyToken() {
  const value = token.value?.token
  if (!value) return
  try {
    if (navigator.clipboard?.writeText) {
      await navigator.clipboard.writeText(value)
    } else {
      const el = document.createElement('textarea')
      el.value = value
      document.body.appendChild(el)
      el.select()
      document.execCommand('copy')
      document.body.removeChild(el)
    }
    appStore.toastSuccess('签到码已复制')
  } catch {
    appStore.toastError('复制失败，请长按手动复制')
  }
}

onMounted(load)
</script>

<style scoped>
.ck {
  padding: 16px 16px 24px;
}
.ck__card {
  background: var(--mini-surface);
  border-radius: var(--mini-radius);
  padding: 18px;
  box-shadow: var(--mini-shadow);
  margin-bottom: 16px;
}
.ck__activity {
  text-align: center;
  margin-bottom: 16px;
}
.ck__title {
  font-size: 16px;
  font-weight: 600;
  color: var(--mini-text-strong);
}
.ck__location {
  font-size: 12px;
  color: var(--mini-text-secondary);
  margin-top: 4px;
}
.ck__qr {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  padding: 12px 0;
}
.ck__qr-icon {
  width: 140px;
  height: 140px;
  border-radius: 12px;
  background: var(--mini-bg);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 64px;
  color: var(--mini-text-muted);
}
.ck__qr-hint {
  font-size: 12px;
  color: var(--mini-text-secondary);
}
.ck__token {
  text-align: center;
  padding: 12px;
  background: var(--mini-bg);
  border-radius: var(--mini-radius);
}
.ck__token-label {
  font-size: 12px;
  color: var(--mini-text-secondary);
}
.ck__token-value {
  font-size: 14px;
  font-weight: 600;
  color: var(--mini-text-strong);
  word-break: break-all;
  margin-top: 6px;
  -webkit-user-select: all;
  user-select: all;
}
.ck__expire {
  text-align: center;
  font-size: 12px;
  color: var(--mini-text-muted);
  margin-top: 12px;
}
.ck__refresh {
  margin-top: 10px;
}
</style>