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.
233 lines
11 KiB
233 lines
11 KiB
<template>
|
|
<div class="flex gap-8 scroll-smooth snap-mandatory overflow-auto snap-x max-w-[1260px] py-16 px-8 mx-auto" ref="stepper">
|
|
<div class="w-full flex-none snap-always snap-center">
|
|
<div>
|
|
<div class="text-center font-semibold text-gray-700 text-sm">Frage 1</div>
|
|
<h2 class="text-4xl font-bold text-gray-700 text-center mt-2">
|
|
Welche <span class="text-primary">Immobilie</span><br>möchten Sie verkaufen?
|
|
</h2>
|
|
<radio-grid v-model="value.category_id" class="mt-8" :options="categories"></radio-grid>
|
|
<pagination v-model="innerStep" @next="step++" @prev="step--" class="mt-5"></pagination>
|
|
</div>
|
|
</div>
|
|
<div class="w-full flex-none snap-always snap-center">
|
|
<div>
|
|
<div class="text-center font-semibold text-gray-700 text-sm">Frage 2</div>
|
|
<h2 class="text-4xl font-bold text-gray-700 text-center mt-2">
|
|
Bitte wählen Sie<br>die <span class="text-primary">Art</span> des Hauses
|
|
</h2>
|
|
<radio-grid v-model="value.kind_id" class="mt-8" :options="kinds[value.category_id]"></radio-grid>
|
|
<pagination v-model="innerStep" @next="step++" @prev="step--" class="mt-5"></pagination>
|
|
</div>
|
|
</div>
|
|
<!--
|
|
<div class="w-full flex-none snap-always snap-center">
|
|
<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="w-full flex-none snap-always snap-center">
|
|
<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="w-full flex-none snap-always snap-center">
|
|
<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="w-full flex-none snap-always snap-center">
|
|
<div v-show="innerStep === 5">
|
|
<h2 class="text-xl font-bold text-primary text-center">Wie ist die Ausstattung des Hauses</h2>
|
|
<div class="radio-grid grid-cols-4">
|
|
<label :key="index" v-for="furnishing, index in furnishings" class="option-box">
|
|
<input class="invisible absolute left-0 top-0" @change="step++" type="radio" name="furnishing" :value="index" v-model="value.furnishing">
|
|
<span>
|
|
<span v-html="svg('home')"></span>
|
|
<span v-text="furnishing.label"></span>
|
|
</span>
|
|
</label>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="w-full flex-none snap-always snap-center">
|
|
<div v-show="innerStep === 6">
|
|
<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="w-full flex-none snap-always snap-center">
|
|
<div v-show="innerStep === 7">
|
|
<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="1880" 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="w-full flex-none snap-always snap-center">
|
|
<div v-show="innerStep === 8">
|
|
<h2 class="text-xl font-bold text-primary text-center">Wann wollen Sie die Immobilie verkaufen?</h2>
|
|
<div class="radio-grid grid-cols-3">
|
|
<label :key="index" v-for="sellable, index in sellables" class="option-box">
|
|
<input class="invisible absolute left-0 top-0" @change="step++" type="radio" name="sellable" :value="index" v-model="value.sellable">
|
|
<span>
|
|
<span v-html="svg('home')"></span>
|
|
<span v-text="sellable.label"></span>
|
|
</span>
|
|
</label>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="w-full flex-none snap-always snap-center">
|
|
<div v-show="innerStep === 9">
|
|
<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>
|
|
<h2 class="text-xl font-bold text-primary text-center">Daten des Objekts</h2>
|
|
<div class="grid grid-cols-2 gap-6">
|
|
<input type="text" v-model="value.property_plz" name="property_plz" placeholder="PLZ der Immobilie">
|
|
</div>
|
|
</div>
|
|
</div>
|
|
-->
|
|
</div>
|
|
</template>
|
|
|
|
<script>
|
|
export default {
|
|
data: function() {
|
|
return {
|
|
value: {
|
|
category_id: 'house',
|
|
kind_id: null,
|
|
grundstuecksflaeche: null,
|
|
wohnflaeche: null,
|
|
rooms: 1,
|
|
constructedAt: 1950,
|
|
firstname: '',
|
|
lastname: '',
|
|
address: '',
|
|
zip: '',
|
|
location: '',
|
|
phone: '',
|
|
email: '',
|
|
etagen: null,
|
|
property_plz: '',
|
|
sellable: null,
|
|
furnishing: null,
|
|
},
|
|
innerStep: 0,
|
|
slideCount: 2,
|
|
categories: [
|
|
{key: 'house', label: 'Haus', 'icon': 'category-house'},
|
|
{key: 'area', label: 'Grundstück', icon: 'category-plot'},
|
|
{key: 'apartment', label: 'Wohnung', icon: 'category-apartment'},
|
|
{key: 'gewerbe', label: 'Gewerbe', icon: 'category-business'},
|
|
],
|
|
kinds: {
|
|
house: [
|
|
{ kind: 'singleFamily', label: 'Einfamilienhaus', 'icon' : 'kind-house-einfamilie' },
|
|
{ kind: 'multiFamily', label: 'Mehrfamilienhaus', 'icon' : 'kind-house-mehrfamilie' },
|
|
{ kind: 'rowHouse', label: 'Reihenhaus', 'icon' : 'kind-house-reihenhaus' },
|
|
{ kind: 'semiDetached', label: 'Doppelhaushälfte', 'icon' : 'kind-house-doppelhaus' },
|
|
]
|
|
},
|
|
grundstuecksflaechen: [
|
|
{ label: 'bis 200 m²' },
|
|
{ label: 'bis 201 - 800 m²' },
|
|
{ label: 'mehr als 800 m²' },
|
|
{ label: 'nicht bekannt' },
|
|
],
|
|
wohnflaechen: [
|
|
{ label: 'bis 50 m²' },
|
|
{ label: '51 - 150 m²' },
|
|
{ label: 'mehr als 151 m²' },
|
|
{ label: 'nicht bekannt' },
|
|
],
|
|
etagen: [
|
|
{ label: '1' },
|
|
{ label: '2' },
|
|
{ label: '3' },
|
|
{ label: '4 oder mehr' },
|
|
],
|
|
sellables: [
|
|
{ label: '3 Monate' },
|
|
{ label: '6 Monate' },
|
|
{ label: '12 Monate oder später' },
|
|
],
|
|
furnishings: [
|
|
{ label: 'einfach' },
|
|
{ label: 'gepflegt' },
|
|
{ label: 'sehr gut' },
|
|
{ label: 'luxuriös' },
|
|
]
|
|
};
|
|
},
|
|
computed: {
|
|
step: {
|
|
set(index) {
|
|
console.log(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>
|