86 lines
3.3 KiB
Vue
86 lines
3.3 KiB
Vue
<template>
|
|
<div class="p-3">
|
|
|
|
|
|
|
|
<div>
|
|
<div><span class="text-red-500">*</span> Autó használata:</div>
|
|
<div class="flex flex-col gap-4 p-3">
|
|
<div class="flex items-center gap-2">
|
|
<RadioButton v-model="rent.hasznalat" inputId="hasznalat-belfold" name="hasznalat" value="belfold" />
|
|
<label for="hasznalat-belfold" class="text-sm">Belföld</label>
|
|
</div>
|
|
<div class="flex items-center gap-2">
|
|
<RadioButton v-model="rent.hasznalat" inputId="hasznalat-kulfold" name="hasznalat" value="kulfold" />
|
|
<label for="hasznalat-kulfold" class="text-sm">Belföld és külföld</label>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<Divider />
|
|
<div class="flex items-center gap-2 text-small">
|
|
<ToggleSwitch name="matrica" v-model="rent.palyamatrica" input-id="palyamatrica" />
|
|
<label for="palyamatrica">Magyar autópálya matrica</label>
|
|
</div>
|
|
<Divider />
|
|
<div>
|
|
<div>Opcionálisan bérelhető tartozékok:</div>
|
|
<div class="flex flex-col gap-4 p-3">
|
|
<div class="flex items-center gap-2">
|
|
<Checkbox v-model="rent.tartozekok" inputId="tartozekok-snowchain" name="tartozekok[]" value="snowchain" />
|
|
<label for="tartozekok-snowchain" class="text-sm">Hólánc</label>
|
|
</div>
|
|
<div class="flex items-center gap-2">
|
|
<Checkbox v-model="rent.tartozekok" inputId="tartozekok-childsheat" name="tartozekok[]" value="childsheat" />
|
|
<label for="tartozekok-childsheat" class="text-sm">Gyerekülés</label>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<Divider />
|
|
<div>
|
|
<div><span class="text-red-500">*</span> Fizetési mód:</div>
|
|
<div class="flex flex-col gap-4 p-3">
|
|
<div class="flex items-center gap-2">
|
|
<RadioButton v-model="rent.fizetesi_mod" inputId="fizetesi_mod-1" name="payment" value="1" />
|
|
<label for="fizetesi_mod-1" class="text-sm">Készpénzzel a helyszínen</label>
|
|
</div>
|
|
<div class="flex items-center gap-2">
|
|
<RadioButton v-model="rent.fizetesi_mod" inputId="fizetesi_mod-2" name="payment" value="2" />
|
|
<label for="fizetesi_mod-2" class="text-sm">Banki előre utalás</label>
|
|
</div>
|
|
<div class="flex items-center gap-2">
|
|
<RadioButton v-model="rent.fizetesi_mod" inputId="fizetesi_mod-3" name="payment" value="3" />
|
|
<label for="fizetesi_mod-3" class="text-sm">Bankkártyával a helyszínen</label>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<Divider />
|
|
<div>
|
|
<div>Üzenet:</div>
|
|
<Textarea rows="4" class="w-full text-sm" placeholder="Ha szeretnél nekünk üzenni az autóbérléssel kapcsolatosan, akkor itt megteheted."></Textarea>
|
|
</div>
|
|
<div class="py-3">
|
|
<Button @click="next()" class="w-full" :disabled="isValid">Tovább</Button>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<script lang="ts" setup>
|
|
const { rent } = storeToRefs(useAuthStore())
|
|
|
|
definePageMeta({
|
|
rentStep:5,
|
|
title: ''
|
|
})
|
|
const hasznalatOptions = ref([{ value: 'belfold', label: 'Belföld' }, { value: 'kulfold', label: 'Belföld és külföld' }])
|
|
function next() {
|
|
navigateTo('/rent/category')
|
|
}
|
|
|
|
const isValid = computed(()=>{
|
|
if(!rent.value?.hasznalat) return true
|
|
if(!rent.value?.fizetesi_mod) return true
|
|
return false
|
|
})
|
|
</script>
|
|
|
|
<style></style> |