You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
189 lines
8.2 KiB
189 lines
8.2 KiB
<template>
|
|
<div class="slider" ref="stepper">
|
|
<div class="px-3 w-full">
|
|
<div v-show="innerStep === 0">
|
|
<h2 class="text-xl font-bold text-primary text-center">Welche Immobilie möchten Sie verkaufen?</h2>
|
|
<div class="radio-grid grid-cols-4">
|
|
<label :key="index" v-for="category, index in categories" class="option-box">
|
|
<input class="invisible absolute left-0 top-0" v-model="value.category_id" :value="index" @change="step++" type="radio" name="category">
|
|
<span>
|
|
<span v-html="svg('home')"></span>
|
|
<span v-text="category.label"></span>
|
|
</span>
|
|
</label>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="px-3 w-full">
|
|
<div v-show="innerStep === 1">
|
|
<h2 class="text-xl font-bold text-primary text-center">Bitte wählen Sie die Art des Hauses</h2>
|
|
<div v-if="value.category_id !== null" class="radio-grid grid-cols-2">
|
|
<label :key="index" v-for="kind, index in categories[value.category_id].kinds" class="option-box">
|
|
<input class="invisible absolute left-0 top-0" @change="step++" type="radio" name="kind" :value="index" v-model="value.kind_id">
|
|
<span>
|
|
<span v-html="svg('home')"></span>
|
|
<span v-text="kind.label"></span>
|
|
</span>
|
|
</label>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="px-3 w-full">
|
|
<div v-show="innerStep === 2">
|
|
<h2 class="text-xl font-bold text-primary text-center">Wählen Sie die Grundstücksfläche</h2>
|
|
<div class="radio-grid grid-cols-4">
|
|
<label :key="index" v-for="gf, index in grundstuecksflaechen" class="option-box">
|
|
<input class="invisible absolute left-0 top-0" @change="step++" type="radio" name="kind" :value="index" v-model="value.grundstuecksflaeche">
|
|
<span>
|
|
<span v-html="svg('home')"></span>
|
|
<span v-text="gf.label"></span>
|
|
</span>
|
|
</label>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="px-3 w-full">
|
|
<div v-show="innerStep === 3">
|
|
<h2 class="text-xl font-bold text-primary text-center">Wählen Sie die Wohnfläche</h2>
|
|
<div class="radio-grid grid-cols-4">
|
|
<label :key="index" v-for="gf, index in wohnflaechen" class="option-box">
|
|
<input class="invisible absolute left-0 top-0" @change="step++" type="radio" name="kind" :value="index" v-model="value.wohnflaeche">
|
|
<span>
|
|
<span v-html="svg('home')"></span>
|
|
<span v-text="gf.label"></span>
|
|
</span>
|
|
</label>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="px-3 w-full">
|
|
<div v-show="innerStep === 4">
|
|
<h2 class="text-xl font-bold text-primary text-center">Wie viele Etagen hat das Haus?</h2>
|
|
<div class="radio-grid grid-cols-4">
|
|
<label :key="index" v-for="etage, index in etagen" class="option-box">
|
|
<input class="invisible absolute left-0 top-0" @change="step++" type="radio" name="kind" :value="index" v-model="value.etagen">
|
|
<span>
|
|
<span v-html="svg('home')"></span>
|
|
<span v-text="etage.label"></span>
|
|
</span>
|
|
</label>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="px-3 w-full">
|
|
<div v-show="innerStep === 5">
|
|
<h2 class="text-xl font-bold text-primary text-center">Wie viele Zimmer hat das Haus</h2>
|
|
<div class="flex flex-col">
|
|
<input type="range" min="1" max="10" v-model="value.rooms">
|
|
<input type="text" class="mt-10" v-model="value.rooms" name="rooms">
|
|
<a href="#" @click.prevent="step++">Weiter</a>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="px-3 w-full">
|
|
<div v-show="innerStep === 6">
|
|
<h2 class="text-xl font-bold text-primary text-center">Wann wurde das Haus gebaut?</h2>
|
|
<div class="flex flex-col">
|
|
<input type="range" min="1900" max="2021" v-model="value.constructedAt">
|
|
<input type="text" class="mt-10" v-model="value.constructedAt" name="constructed_at">
|
|
<a href="#" @click.prevent="step++">Weiter</a>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="px-3 w-full">
|
|
<div v-show="innerStep === 7">
|
|
<h2 class="text-xl font-bold text-primary text-center">Bitte geben Sie ihre Daten ein</h2>
|
|
<div class="grid grid-cols-2 gap-6">
|
|
<input type="text" v-model="value.firstname" name="firstname" placeholder="Vorname">
|
|
<input type="text" v-model="value.lastname" name="lastname" placeholder="Nachname">
|
|
<input type="text" v-model="value.address" name="address" placeholder="Adresse">
|
|
<input type="text" v-model="value.plz" name="plz" placeholder="PLZ">
|
|
<input type="text" v-model="value.location" name="location" placeholder="Ort">
|
|
<input type="text" v-model="value.phone" name="phone" placeholder="Telefonnummer">
|
|
<input type="text" v-model="value.email" name="email" placeholder="E-Mail-Adresse">
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<script>
|
|
export default {
|
|
data: function() {
|
|
return {
|
|
value: {
|
|
category_id: null,
|
|
kind_id: null,
|
|
grundstuecksflaeche: null,
|
|
wohnflaeche: null,
|
|
rooms: 1,
|
|
constructedAt: 1950,
|
|
firstname: '',
|
|
lastname: '',
|
|
address: '',
|
|
zip: '',
|
|
location: '',
|
|
phone: '',
|
|
email: '',
|
|
etagen: null,
|
|
},
|
|
innerStep: 0,
|
|
slideCount: 8,
|
|
categories: [
|
|
{ key: 'house', label: 'Haus', kinds: [
|
|
{ label: 'Einfamilienhaus' },
|
|
{ label: 'Mehrfamilienhaus' },
|
|
{ label: 'Reihenhaus' },
|
|
{ label: 'Doppelhaushälfte' },
|
|
] },
|
|
{ key: 'area', label: 'Grundstück', kinds: [] },
|
|
{ key: 'apartment', label: 'Wohnung', kinds: [] },
|
|
{ key: 'gewerbe', label: 'Gewerbe', kinds: [] },
|
|
],
|
|
grundstuecksflaechen: [
|
|
{ label: 'bis 300 m²' },
|
|
{ label: 'bis 301 - 1000 m²' },
|
|
{ label: 'über 1000 m²' },
|
|
{ label: 'weiß nicht' },
|
|
],
|
|
wohnflaechen: [
|
|
{ label: 'bis 100 m²' },
|
|
{ label: '101 - 200 m²' },
|
|
{ label: 'über 200 m²' },
|
|
{ label: 'weiß nicht' },
|
|
],
|
|
etagen: [
|
|
{ label: '1' },
|
|
{ label: '2' },
|
|
{ label: '3' },
|
|
{ label: '4 oder mehr' },
|
|
]
|
|
};
|
|
},
|
|
computed: {
|
|
step: {
|
|
set(index) {
|
|
var _self = this;
|
|
this.innerStep = index;
|
|
|
|
this.$nextTick(function() {
|
|
_self.$refs.stepper.scrollLeft = _self.$refs.stepper.scrollWidth / _self.slideCount * index;
|
|
});
|
|
},
|
|
get() {
|
|
return this.innerStep;
|
|
}
|
|
},
|
|
},
|
|
mounted() {
|
|
this.$refs.stepper.scrollLeft = this.$refs.stepper.scrollWidth / this.slideCount * this.innerStep;
|
|
}
|
|
};
|
|
</script>
|
|
|
|
<style scoped>
|
|
.radio-grid {
|
|
display: grid;
|
|
grid-gap: 1rem;
|
|
}
|
|
</style>
|