46 lines
2.3 KiB
Vue
46 lines
2.3 KiB
Vue
<script setup>
|
|
const props = defineProps({ formData: Object, event: Object, selectedAddons: Object })
|
|
const emit = defineEmits(['next', 'back'])
|
|
</script>
|
|
|
|
<template>
|
|
<div>
|
|
<!-- Solidarbeitrag-Auswahl -->
|
|
<div v-if="event.solidarityPayment" style="margin-bottom: 20px;">
|
|
<h3>Beitrag</h3>
|
|
<label v-if="event.participationFee_1?.active" style="display: block; margin-bottom: 8px;">
|
|
<input type="radio" v-model="formData.beitrag" value="reduced" />
|
|
{{ event.participationFee_1.name }} ({{ event.participationFee_1.amount }} €)
|
|
</label>
|
|
<label style="display: block; margin-bottom: 8px;">
|
|
<input type="radio" v-model="formData.beitrag" value="regular" />
|
|
{{ event.participationFee_2?.name ?? 'Regulärer Beitrag' }} ({{ event.participationFee_2?.amount }} €)
|
|
</label>
|
|
<label v-if="event.participationFee_3?.active" style="display: block; margin-bottom: 8px;">
|
|
<input type="radio" v-model="formData.beitrag" value="social" />
|
|
{{ event.participationFee_3.name }} ({{ event.participationFee_3.amount }} €)
|
|
</label>
|
|
</div>
|
|
|
|
<!-- Addons -->
|
|
<div v-if="event.addons?.length > 0">
|
|
<h3>Zusatzoptionen</h3>
|
|
<div v-for="addon in event.addons" :key="addon.id" style="margin-bottom: 16px; padding: 12px; background: #f8fafc; border-radius: 8px;">
|
|
<label style="display: flex; gap: 12px; cursor: pointer;">
|
|
<input type="checkbox" v-model="selectedAddons[addon.id]" style="margin-top: 4px;" />
|
|
<span>
|
|
<strong>{{ addon.name }}</strong>
|
|
<span style="display: block; color: #6b7280; font-size: 0.875rem;">Betrag: {{ addon.amount }}</span>
|
|
<span style="display: block; color: #374151; font-size: 0.875rem; margin-top: 4px;">{{ addon.description }}</span>
|
|
</span>
|
|
</label>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="btn-row">
|
|
<button type="button" class="btn-secondary" @click="emit('back', 5)">← Zurück</button>
|
|
<button type="button" class="btn-primary" @click="emit('next', 7)">Weiter →</button>
|
|
</div>
|
|
</div>
|
|
</template>
|