64 lines
2.6 KiB
Vue
64 lines
2.6 KiB
Vue
<script setup>
|
|
import {format, parseISO} from "date-fns";
|
|
|
|
const props = defineProps({
|
|
formData: Object,
|
|
event: Object,
|
|
summaryAmount: String,
|
|
summaryLoading: Boolean,
|
|
submitting: Boolean,
|
|
})
|
|
const emit = defineEmits(['back', 'submit'])
|
|
|
|
function formatDate(dateString) {
|
|
if (!dateString) return ''
|
|
return format(parseISO(dateString), 'dd.MM.yyyy')
|
|
}
|
|
</script>
|
|
|
|
<template>
|
|
<div>
|
|
<h3>Zusammenfassung</h3>
|
|
|
|
<div v-if="summaryLoading" style="color: #6b7280; padding: 20px 0;">Wird geladen…</div>
|
|
<div v-else>
|
|
<table class="form-table" style="margin-bottom: 20px;">
|
|
<tr><td>Veranstaltung:</td><td><strong>{{ event.name }}</strong></td></tr>
|
|
<tr><td>Anreise:</td><td>{{ formatDate(formData.arrival) }}</td></tr>
|
|
<tr><td>Abreise:</td><td>{{ formatDate(formData.departure) }}</td></tr>
|
|
</table>
|
|
|
|
<div style="display: flex; flex-direction: column; gap: 10px; margin-bottom: 20px;">
|
|
<label style="display: flex; gap: 10px; cursor: pointer;">
|
|
<input type="checkbox" v-model="formData.summary_information_correct" />
|
|
Ich bestätige, dass alle Angaben korrekt sind.
|
|
</label>
|
|
<label style="display: flex; gap: 10px; cursor: pointer;">
|
|
<input type="checkbox" v-model="formData.summary_accept_terms" />
|
|
Ich akzeptiere die Teilnahmebedingungen.
|
|
</label>
|
|
<label style="display: flex; gap: 10px; cursor: pointer;">
|
|
<input type="checkbox" v-model="formData.legal_accepted" />
|
|
Ich stimme der Datenschutzerklärung zu.
|
|
</label>
|
|
<label style="display: flex; gap: 10px; cursor: pointer;">
|
|
<input type="checkbox" v-model="formData.payment" />
|
|
Ich bestätige, den Betrag von <strong>{{ summaryAmount }}</strong> zu überweisen.
|
|
</label>
|
|
</div>
|
|
|
|
<div class="btn-row">
|
|
<button type="button" class="btn-secondary" @click="emit('back', 8)">← Zurück</button>
|
|
<button
|
|
type="submit"
|
|
class="btn-primary"
|
|
:disabled="!formData.summary_information_correct || !formData.summary_accept_terms || !formData.legal_accepted || !formData.payment || submitting"
|
|
style="background: #059669;"
|
|
>
|
|
{{ submitting ? 'Wird gesendet…' : 'Jetzt anmelden ✓' }}
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</template>
|