131 lines
5.6 KiB
Vue
131 lines
5.6 KiB
Vue
<script setup>
|
||
import { watch } from "vue";
|
||
|
||
const props = defineProps({ formData: Object, event: Object })
|
||
const emit = defineEmits(['next', 'back'])
|
||
|
||
watch(
|
||
() => props.formData.participationType,
|
||
(value) => {
|
||
if (!value) {
|
||
props.formData.beitrag = 'standard'
|
||
return
|
||
}
|
||
|
||
props.formData.beitrag = 'standard'
|
||
}
|
||
)
|
||
|
||
const nextStep = () => {
|
||
const hasAddons = (props.event.addons?.length ?? 0) > 0
|
||
emit('next', hasAddons ? 6 : 7)
|
||
}
|
||
</script>
|
||
|
||
<template>
|
||
<div>
|
||
<h3 v-if="event.solidarityPayment">Solidarbeitrag – Teilnahmegruppe</h3>
|
||
<h3 v-else>Ich nehme teil als ...</h3>
|
||
|
||
<table style="width: 100%;">
|
||
<tr
|
||
v-for="participationType in props.event.participationTypes"
|
||
:key="participationType.type.slug"
|
||
style="vertical-align: top;"
|
||
>
|
||
<td style="width: 50px; padding-top: 6px;">
|
||
<input
|
||
:id="participationType.type.slug"
|
||
v-model="props.formData.participationType"
|
||
type="radio"
|
||
:value="participationType.type.slug"
|
||
/>
|
||
</td>
|
||
<td style="padding-bottom: 16px;">
|
||
<label :for="participationType.type.slug" style="line-height: 1.5; font-weight: 600; cursor: pointer;">
|
||
{{ participationType.type.name }}
|
||
</label><br />
|
||
|
||
<label
|
||
:for="participationType.type.slug"
|
||
style="line-height: 1.5; padding-left: 15px; font-style: italic; color: #606060; cursor: pointer;"
|
||
>
|
||
{{ participationType.description }}
|
||
</label>
|
||
|
||
<div
|
||
v-if="props.formData.participationType === participationType.type.slug"
|
||
style="margin-top: 10px; margin-left: 15px; padding: 12px 14px; background: #f8fafc; border-left: 3px solid #2563eb; border-radius: 6px;"
|
||
>
|
||
<template
|
||
v-if="participationType.amount_reduced !== null || participationType.amount_solidarity !== null"
|
||
>
|
||
<div style="margin-bottom: 8px; font-size: 0.95rem; font-weight: 600; color: #374151;">
|
||
Beitrag auswählen
|
||
</div>
|
||
|
||
<label style="display: block; margin-bottom: 8px; cursor: pointer;">
|
||
<input type="radio" v-model="props.formData.beitrag" value="standard" />
|
||
Standardbeitrag
|
||
<span style="color: #606060;">
|
||
({{ participationType.amount_standard.readable }}
|
||
<template v-if="props.event.payPerDay">/ Tag</template>
|
||
<template v-else>Gesamt</template>)
|
||
</span>
|
||
</label>
|
||
|
||
<label
|
||
v-if="participationType.amount_reduced !== null"
|
||
style="display: block; margin-bottom: 8px; cursor: pointer;"
|
||
>
|
||
<input type="radio" v-model="props.formData.beitrag" value="reduced" />
|
||
Reduzierter Beitrag
|
||
<span style="color: #606060;">
|
||
({{ participationType.amount_reduced.readable }}
|
||
<template v-if="props.event.payPerDay">/ Tag</template>
|
||
<template v-else>Gesamt</template>)
|
||
</span>
|
||
</label>
|
||
|
||
<label
|
||
v-if="participationType.amount_solidarity !== null"
|
||
style="display: block; margin-bottom: 0; cursor: pointer;"
|
||
>
|
||
<input type="radio" v-model="props.formData.beitrag" value="solidarity" />
|
||
Solidaritätsbeitrag
|
||
<span style="color: #606060;">
|
||
({{ participationType.amount_solidarity.readable }}
|
||
<template v-if="props.event.payPerDay">/ Tag</template>
|
||
<template v-else>Gesamt</template>)
|
||
</span>
|
||
</label>
|
||
</template>
|
||
|
||
<template v-else>
|
||
<div style="font-size: 0.9rem; color: #606060;">
|
||
Standardbeitrag:
|
||
<strong>{{ participationType.amount_standard.readable }}</strong>
|
||
<template v-if="props.event.payPerDay">/ Tag</template>
|
||
<template v-else>Gesamt</template>
|
||
</div>
|
||
</template>
|
||
</div>
|
||
</td>
|
||
</tr>
|
||
</table>
|
||
|
||
<div class="btn-row">
|
||
<button type="button" class="btn-secondary" @click="emit('back', 3)">← Zurück</button>
|
||
<button
|
||
type="button"
|
||
v-if="props.formData.participationType"
|
||
class="btn-primary"
|
||
@click="nextStep"
|
||
>
|
||
Weiter →
|
||
</button>
|
||
</div>
|
||
</div>
|
||
</template>
|
||
|