generated from VLADIMIR/template_frontend
156 lines
3.7 KiB
Vue
156 lines
3.7 KiB
Vue
<script setup lang="ts">
|
|
import { NButton, 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 MessagePaper from '@/components/MessagePaper.vue'
|
|
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">
|
|
<MessagePaper>
|
|
<div class="ticket-card">
|
|
<p class="ticket-kicker">ВЕЧЕРНИЙ ДЕТЕКТИВ · ПРОПУСК</p>
|
|
<h1>Билет на игру</h1>
|
|
<p v-if="error" class="error" role="alert">{{ error }}</p>
|
|
<template v-else-if="ticket">
|
|
<h2>{{ ticket.gameName }}</h2>
|
|
<hr />
|
|
<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="300" :padding="0" />
|
|
</div>
|
|
<p>Покажите этот QR-код организатору.</p>
|
|
|
|
<p v-if="ticket.status === 'used'" class="used" role="status">
|
|
Билет уже использован{{ ticket.usedAt ? ` ${formatGameDateTime(ticket.usedAt)}` : '' }}{{
|
|
ticket.usedBy ? ` организатором ${ticket.usedBy}` : ''
|
|
}}.
|
|
</p>
|
|
<p v-else-if="ticket.gameStatus === 'finish'" class="used" role="status">
|
|
Игра уже завершена.
|
|
</p>
|
|
<template v-else>
|
|
<hr />
|
|
<p class="active" role="status">Билет действителен.</p>
|
|
</template>
|
|
</template>
|
|
<n-button v-else :loading="loading" @click="load">
|
|
{{ loading ? 'Загрузка' : 'Повторить' }}
|
|
</n-button>
|
|
</div>
|
|
</MessagePaper>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<style scoped>
|
|
.ticket-page.center-block-custom {
|
|
height: 100dvh;
|
|
margin-top: 0;
|
|
}
|
|
|
|
.ticket-card {
|
|
margin: 15px 0;
|
|
}
|
|
|
|
.ticket-kicker {
|
|
font-size: 12px;
|
|
letter-spacing: 1px;
|
|
margin-bottom: 14px;
|
|
}
|
|
|
|
h1,
|
|
h2 {
|
|
font-weight: 400;
|
|
}
|
|
|
|
h1 {
|
|
font-size: 26px;
|
|
margin-bottom: 24px;
|
|
}
|
|
|
|
h2 {
|
|
margin-bottom: 20px;
|
|
}
|
|
|
|
hr {
|
|
border: 0;
|
|
border-top: 1px dashed;
|
|
margin: 18px 0;
|
|
}
|
|
|
|
dl {
|
|
display: grid;
|
|
gap: 12px;
|
|
}
|
|
|
|
dt {
|
|
color: var(--second-color);
|
|
font-size: 13px;
|
|
}
|
|
|
|
dd {
|
|
margin: 0;
|
|
}
|
|
|
|
.qr-block {
|
|
background-color: white;
|
|
display: block;
|
|
line-height: 0;
|
|
margin: 28px auto;
|
|
padding: 12px;
|
|
width: fit-content;
|
|
}
|
|
|
|
.error,
|
|
.used {
|
|
color: var(--second-color);
|
|
}
|
|
|
|
.active {
|
|
color: black;
|
|
}
|
|
</style>
|