|
|
|
@ -1,117 +1,84 @@ |
|
|
|
<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> |
|
|
|
<carousel :per-page="1" :navigate-to="innerStep" class="flex gap-8 overflow-auto max-w-[1260px] py-16 px-8 mx-auto"> |
|
|
|
<slide> |
|
|
|
<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> |
|
|
|
<heading>Welche <span class="text-primary">Immobilie</span><br />möchten Sie verkaufen?</heading> |
|
|
|
<radio-grid v-model="value.category_id" @input="innerStep++" class="mt-8" :options="categories"></radio-grid> |
|
|
|
</slide> |
|
|
|
|
|
|
|
<!-- ********************************* Haus ********************************** --> |
|
|
|
<slide v-if="value.category_id == 'house'"> |
|
|
|
<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> |
|
|
|
<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" @input="innerStep++" class="mt-8" :options="kinds[value.category_id]"></radio-grid> |
|
|
|
<pagination v-model="innerStep" class="mt-5" :next="false"></pagination> |
|
|
|
</slide> |
|
|
|
<slide v-if="value.category_id == 'house'"> |
|
|
|
<div class="text-center font-semibold text-gray-700 text-sm">Frage 3</div> |
|
|
|
<heading>Wie ist die gesamte<br /><span class="text-primary">Wohnfläche</span> des Hauses?</heading> |
|
|
|
<radio-grid v-model="value.living_area" @input="innerStep++" class="mt-8" :options="livingAreas"></radio-grid> |
|
|
|
<pagination v-model="innerStep" class="mt-5" :next="false"></pagination> |
|
|
|
</slide> |
|
|
|
<slide v-if="value.category_id == 'house'"> |
|
|
|
<div class="text-center font-semibold text-gray-700 text-sm">Frage 4</div> |
|
|
|
<heading>Wie ist die gesamte<br /><span class="text-primary">Grundstücksfläche</span> des Hauses?</heading> |
|
|
|
<radio-grid v-model="value.plot_area" @input="innerStep++" class="mt-8" :options="plotAreas"></radio-grid> |
|
|
|
<pagination v-model="innerStep" class="mt-5" :next="false"></pagination> |
|
|
|
</slide> |
|
|
|
<slide v-if="value.category_id == 'house'"> |
|
|
|
<div class="text-center font-semibold text-gray-700 text-sm">Frage 5</div> |
|
|
|
<heading>Wann wurde das<br />Haus <span class="text-primary">erbaut?</span></heading> |
|
|
|
<veeno :pipsy="pipsy" :tooltips="tooltips" :step="5" :handles="[1950]" class="w-4/5 mx-auto mt-10" :range="range" v-model="value.construction_year" /> |
|
|
|
<pagination v-model="innerStep" class="mt-24"></pagination> |
|
|
|
</slide> |
|
|
|
<slide v-if="value.category_id == 'house'"> |
|
|
|
<div class="text-center font-semibold text-gray-700 text-sm">Frage 6</div> |
|
|
|
<heading>Wie viele<br /><span class="text-primary">Etagen</span> hat das Haus?</heading> |
|
|
|
<radio-grid v-model="value.number_of_floors" @input="innerStep++" class="mt-8" :options="numbersOfFloors"></radio-grid> |
|
|
|
<pagination v-model="innerStep" class="mt-5" :next="false"></pagination> |
|
|
|
</slide> |
|
|
|
<slide v-if="value.category_id == 'house'"> |
|
|
|
<div class="text-center font-semibold text-gray-700 text-sm">Frage 7</div> |
|
|
|
<heading>Wie viele<br /><span class="text-primary">Zimmer</span> hat das Haus?</heading> |
|
|
|
<radio-grid v-model="value.number_of_rooms" @input="innerStep++" class="mt-8" :options="numbersOfRooms"></radio-grid> |
|
|
|
<pagination v-model="innerStep" class="mt-5" :next="false"></pagination> |
|
|
|
</slide> |
|
|
|
<slide v-if="value.category_id == 'house'"> |
|
|
|
<div class="text-center font-semibold text-gray-700 text-sm">Frage 8</div> |
|
|
|
<heading>Welche <span class="text-primary">Parkmöglichkeiten</span><br />sind am Haus vorhanden?</heading> |
|
|
|
<radio-grid v-model="value.parking_space_type" @input="innerStep++" class="mt-8" :options="parkingSpaceTypes"></radio-grid> |
|
|
|
<pagination v-model="innerStep" class="mt-5" :next="false"></pagination> |
|
|
|
</slide> |
|
|
|
|
|
|
|
<!-- ******************************** Wohnung ******************************** --> |
|
|
|
<slide v-if="value.category_id == 'apartment'"> |
|
|
|
<div class="text-center font-semibold text-gray-700 text-sm">Frage 2</div> |
|
|
|
<heading>Wie ist die gesamte<br /><span class="text-primary">Wohnfläche</span> der Wohnung?</heading> |
|
|
|
<radio-grid v-model="value.living_area" @input="innerStep++" class="mt-8" :options="livingAreas"></radio-grid> |
|
|
|
<pagination v-model="innerStep" class="mt-5" :next="false"></pagination> |
|
|
|
</slide> |
|
|
|
<slide v-if="value.category_id == 'apartment'"> |
|
|
|
<div class="text-center font-semibold text-gray-700 text-sm">Frage 3</div> |
|
|
|
<heading>Wann wurde das<br />Wohnhaus <span class="text-primary">erbaut?</span></heading> |
|
|
|
<veeno :pipsy="pipsy" :tooltips="tooltips" :step="5" :handles="[1950]" class="w-4/5 mx-auto mt-10" :range="range" v-model="value.construction_year" /> |
|
|
|
<pagination v-model="innerStep" class="mt-24"></pagination> |
|
|
|
</slide> |
|
|
|
<slide v-if="value.category_id == 'apartment'"> |
|
|
|
<div class="text-center font-semibold text-gray-700 text-sm">Frage 4</div> |
|
|
|
<heading>Wie viele<br /><span class="text-primary">Zimmer</span> hat die Wohnung?</heading> |
|
|
|
<radio-grid v-model="value.number_of_rooms" @input="innerStep++" class="mt-8" :options="numbersOfRooms"></radio-grid> |
|
|
|
<pagination v-model="innerStep" class="mt-5" :next="false"></pagination> |
|
|
|
</slide> |
|
|
|
|
|
|
|
<!-- ******************************** Grundstueck ******************************** --> |
|
|
|
<slide v-if="value.category_id == 'plot'"> |
|
|
|
<div class="text-center font-semibold text-gray-700 text-sm">Frage 2</div> |
|
|
|
<heading>Welche Fläche hat<br />das <span class="text-primary">Grundstück</span>?</heading> |
|
|
|
<radio-grid v-model="value.plot_area" @input="innerStep++" class="mt-8" :options="plotAreas"></radio-grid> |
|
|
|
<pagination v-model="innerStep" class="mt-5" :next="false"></pagination> |
|
|
|
</slide> |
|
|
|
<!-- |
|
|
|
<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 class="w-full flex-none "> |
|
|
|
<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"> |
|
|
|
@ -130,17 +97,38 @@ |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
--> |
|
|
|
</div> |
|
|
|
</carousel> |
|
|
|
</template> |
|
|
|
|
|
|
|
<script> |
|
|
|
import {Carousel, Slide} from 'vue-carousel'; |
|
|
|
import Heading from './components/Heading.vue'; |
|
|
|
import veeno from 'veeno'; |
|
|
|
import wNumb from 'wnumb'; |
|
|
|
import 'nouislider/distribute/nouislider.min.css'; |
|
|
|
|
|
|
|
export default { |
|
|
|
data: function() { |
|
|
|
return { |
|
|
|
tooltips: [wNumb({decimals: 0})], |
|
|
|
pipsy: { |
|
|
|
mode: 'range', |
|
|
|
density: 3, |
|
|
|
filter: () => 1, |
|
|
|
format: wNumb({ |
|
|
|
decimals: 0 |
|
|
|
}) |
|
|
|
}, |
|
|
|
range: {min: 1600, max: 2020}, |
|
|
|
value: { |
|
|
|
category_id: 'house', |
|
|
|
category_id: 'plot', |
|
|
|
kind_id: null, |
|
|
|
grundstuecksflaeche: null, |
|
|
|
living_area: null, |
|
|
|
plot_area: null, |
|
|
|
construction_year: null, |
|
|
|
number_of_floors: null, |
|
|
|
parking_space_type: null, |
|
|
|
|
|
|
|
wohnflaeche: null, |
|
|
|
rooms: 1, |
|
|
|
constructedAt: 1950, |
|
|
|
@ -154,73 +142,93 @@ export default { |
|
|
|
etagen: null, |
|
|
|
property_plz: '', |
|
|
|
sellable: null, |
|
|
|
furnishing: null, |
|
|
|
furnishing: null |
|
|
|
}, |
|
|
|
innerStep: 0, |
|
|
|
slideCount: 2, |
|
|
|
innerStep: 2, |
|
|
|
categories: [ |
|
|
|
{key: 'house', label: 'Haus', 'icon': 'category-house'}, |
|
|
|
{key: 'area', label: 'Grundstück', icon: 'category-plot'}, |
|
|
|
{key: 'house', label: 'Haus', icon: 'category-house'}, |
|
|
|
{key: 'plot', label: 'Grundstück', icon: 'category-plot'}, |
|
|
|
{key: 'apartment', label: 'Wohnung', icon: 'category-apartment'}, |
|
|
|
{key: 'gewerbe', label: 'Gewerbe', icon: 'category-business'}, |
|
|
|
{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' }, |
|
|
|
{ |
|
|
|
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' }, |
|
|
|
livingAreas: [ |
|
|
|
{key: 'sm', label: 'bis 100 m²', icon: 'living-area-sm'}, |
|
|
|
{key: 'md', label: 'bis 101 - 200 m²', icon: 'living-area-md'}, |
|
|
|
{key: 'lg', label: 'mehr als 200 m²', icon: 'living-area-lg'}, |
|
|
|
{key: 'unknown', label: 'nicht bekannt', icon: 'unknown'} |
|
|
|
], |
|
|
|
wohnflaechen: [ |
|
|
|
{ label: 'bis 50 m²' }, |
|
|
|
{ label: '51 - 150 m²' }, |
|
|
|
{ label: 'mehr als 151 m²' }, |
|
|
|
{ label: 'nicht bekannt' }, |
|
|
|
plotAreas: [ |
|
|
|
{key: 'sm', label: 'bis 200 m²', icon: 'plot-area-sm'}, |
|
|
|
{key: 'md', label: 'bis 201 - 800 m²', icon: 'plot-area-md'}, |
|
|
|
{key: 'lg', label: 'mehr als 800 m²', icon: 'plot-area-lg'}, |
|
|
|
{key: 'unknown', label: 'nicht bekannt', icon: 'unknown'} |
|
|
|
], |
|
|
|
etagen: [ |
|
|
|
{ label: '1' }, |
|
|
|
{ label: '2' }, |
|
|
|
{ label: '3' }, |
|
|
|
{ label: '4 oder mehr' }, |
|
|
|
numbersOfFloors: [ |
|
|
|
{key: 'sm', label: '1', icon: 'plot-area-sm'}, |
|
|
|
{key: 'md', label: '2', icon: 'plot-area-md'}, |
|
|
|
{key: 'lg', label: '3', icon: 'plot-area-lg'}, |
|
|
|
{key: 'xl', label: 'mehr als 3', icon: 'plot-area-lg'} |
|
|
|
], |
|
|
|
sellables: [ |
|
|
|
{ label: '3 Monate' }, |
|
|
|
{ label: '6 Monate' }, |
|
|
|
{ label: '12 Monate oder später' }, |
|
|
|
numbersOfRooms: [ |
|
|
|
{key: 'sm', label: '1-2', icon: 'plot-area-sm'}, |
|
|
|
{key: 'md', label: '3-5', icon: 'plot-area-md'}, |
|
|
|
{key: 'lg', label: '5-8', icon: 'plot-area-lg'}, |
|
|
|
{key: 'xl', label: 'mehr als 8', icon: 'plot-area-lg'} |
|
|
|
], |
|
|
|
furnishings: [ |
|
|
|
{ label: 'einfach' }, |
|
|
|
{ label: 'gepflegt' }, |
|
|
|
{ label: 'sehr gut' }, |
|
|
|
{ label: 'luxuriös' }, |
|
|
|
] |
|
|
|
parkingSpaceTypes: [ |
|
|
|
{key: 'garage', label: 'Garage', icon: 'plot-area-sm'}, |
|
|
|
{key: 'im-freien', label: 'im Freien', icon: 'plot-area-md'}, |
|
|
|
{key: 'carport', label: 'Carport', icon: 'plot-area-lg'}, |
|
|
|
{key: 'tiefgarage', label: 'Tiefgarage', icon: 'plot-area-lg'} |
|
|
|
], |
|
|
|
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; |
|
|
|
}); |
|
|
|
methods: { |
|
|
|
setCategoryId(id) { |
|
|
|
this.value.category_id = id; |
|
|
|
this.innerStep++; |
|
|
|
}, |
|
|
|
get() { |
|
|
|
return this.innerStep; |
|
|
|
} |
|
|
|
setKindId(id) { |
|
|
|
this.value.kind_id = id; |
|
|
|
this.innerStep++; |
|
|
|
}, |
|
|
|
back() { |
|
|
|
this.innerStep--; |
|
|
|
} |
|
|
|
}, |
|
|
|
mounted() { |
|
|
|
this.$refs.stepper.scrollLeft = this.$refs.stepper.scrollWidth / this.slideCount * this.innerStep; |
|
|
|
components: { |
|
|
|
Carousel, |
|
|
|
Slide, |
|
|
|
Heading, |
|
|
|
veeno |
|
|
|
} |
|
|
|
}; |
|
|
|
</script> |
|
|
|
|
philipp lang
4 years ago