58 lines
2.8 KiB
Vue
58 lines
2.8 KiB
Vue
<script setup>
|
|
import {nextVisibleFrom, STEP_ADDONS} from "../composables/stepFlow.js";
|
|
|
|
const props = defineProps({ formData: Object, event: Object, selectedAddons: Object })
|
|
const emit = defineEmits(['next', 'back'])
|
|
|
|
const next = () => emit('next', nextVisibleFrom(props.event, STEP_ADDONS))
|
|
</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.key"
|
|
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.key]" style="margin-top: 4px;"/>
|
|
<span>
|
|
<strong>{{ addon.title }}</strong>
|
|
<span style="display: block; color: #6b7280; font-size: 0.875rem;">
|
|
<template v-if="addon.free">Kostenfrei</template>
|
|
<template v-else>{{ addon.priceReadable }}<template
|
|
v-if="!addon.flat"> / Tag</template></template>
|
|
</span>
|
|
<span v-if="addon.description"
|
|
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="next">Weiter →</button>
|
|
</div>
|
|
</div>
|
|
</template>
|