generated from VLADIMIR/template_frontend
117 lines
2.9 KiB
Vue
117 lines
2.9 KiB
Vue
<script setup lang="ts">
|
|
import { NButton, NCard, NQrCode } from 'naive-ui'
|
|
import { computed, onMounted, ref } from 'vue'
|
|
import { useRoute } from 'vue-router'
|
|
|
|
import type { TicketPage as TicketData } from '@/api/generated/crabs/evening_detective_server'
|
|
import { buildClient } from '@/api/generated/crabs/evening_detective_server/client'
|
|
import { formatGameDateTime } from '@/utils/datetime'
|
|
|
|
const route = useRoute()
|
|
const client = buildClient()
|
|
const token = computed(() => String(route.params.token || ''))
|
|
const ticket = ref<TicketData>()
|
|
const loading = ref(false)
|
|
const error = ref('')
|
|
const ticketURL = computed(() => window.location.href)
|
|
|
|
async function load() {
|
|
loading.value = true
|
|
error.value = ''
|
|
try {
|
|
const result = await client.GetTicket({ token: token.value })
|
|
if (result.error || !result.ticket) {
|
|
error.value = result.error || 'Билет не найден'
|
|
return
|
|
}
|
|
ticket.value = result.ticket
|
|
} catch {
|
|
error.value = 'Не удалось загрузить билет. Попробуйте ещё раз.'
|
|
} finally {
|
|
loading.value = false
|
|
}
|
|
}
|
|
|
|
onMounted(load)
|
|
</script>
|
|
|
|
<template>
|
|
<div class="ticket-page center-block-custom">
|
|
<div class="width700">
|
|
<n-card class="ticket-card" title="Билет на игру">
|
|
<p v-if="error" class="error" role="alert">{{ error }}</p>
|
|
<template v-else-if="ticket">
|
|
<h2>{{ ticket.gameName }}</h2>
|
|
<dl>
|
|
<div>
|
|
<dt>Начало</dt>
|
|
<dd>{{ formatGameDateTime(ticket.startAt) }}</dd>
|
|
</div>
|
|
<div>
|
|
<dt>Место</dt>
|
|
<dd>{{ ticket.location || 'Онлайн' }}</dd>
|
|
</div>
|
|
</dl>
|
|
|
|
<div class="qr-block">
|
|
<n-qr-code :value="ticketURL" :size="240" />
|
|
<p>Покажите этот QR-код организатору на входе.</p>
|
|
</div>
|
|
|
|
<p v-if="ticket.status === 'used'" class="used" role="status">
|
|
Билет уже использован{{ ticket.usedAt ? ` ${formatGameDateTime(ticket.usedAt)}` : '' }}.
|
|
</p>
|
|
<p v-else-if="ticket.gameStatus === 'finish'" class="used" role="status">
|
|
Игра уже завершена.
|
|
</p>
|
|
<p v-else class="active" role="status">Билет действителен.</p>
|
|
</template>
|
|
<n-button v-else :loading="loading" @click="load">
|
|
{{ loading ? 'Загрузка' : 'Повторить' }}
|
|
</n-button>
|
|
</n-card>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<style scoped>
|
|
.ticket-card {
|
|
margin-top: 10px;
|
|
}
|
|
|
|
h2 {
|
|
margin-bottom: 20px;
|
|
}
|
|
|
|
dl {
|
|
display: grid;
|
|
gap: 12px;
|
|
}
|
|
|
|
dt {
|
|
color: #aaa;
|
|
font-size: 13px;
|
|
}
|
|
|
|
dd {
|
|
margin: 0;
|
|
}
|
|
|
|
.qr-block {
|
|
display: grid;
|
|
gap: 12px;
|
|
justify-items: center;
|
|
margin: 28px 0;
|
|
text-align: center;
|
|
}
|
|
|
|
.error,
|
|
.used {
|
|
color: #aaa;
|
|
}
|
|
|
|
.active {
|
|
color: #63e2b7;
|
|
}
|
|
</style>
|