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.
319 lines
19 KiB
319 lines
19 KiB
<template>
|
|
<form action="#" method="POST" @submit.prevent="submit" class="px-3 transition-all duration-300 mx-auto w-[960px]">
|
|
<carousel :per-page="1" :mouse-drag="false" :navigate-to="innerStep" :pagination-enabled="false" class="flex gap-8 shadow-xl my-10 border-2 border-primary rounded-xl overflow-auto max-w-[1260px] mx-auto">
|
|
<slide class="py-16 px-8">
|
|
<div class="text-center font-semibold text-gray-700 text-sm">Frage 1</div>
|
|
<heading>Welche <span class="text-primary">Immobilie</span><br />möchten Sie verkaufen?</heading>
|
|
<radio-grid v-model="value.category_id" class="mt-8" :options="categories"></radio-grid>
|
|
<pagination v-model="innerStep" class="mt-5" :prev="false" :nextable="value.category_id !== null"></pagination>
|
|
</slide>
|
|
|
|
<!-- ********************************* Haus ********************************** -->
|
|
<slide class="py-16 px-8" v-if="value.category_id == 'Haus'">
|
|
<div class="text-center font-semibold text-gray-700 text-sm">Frage 2</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" class="mt-8" :options="plotAreas"></radio-grid>
|
|
<pagination v-model="innerStep" class="mt-5" :nextable="value.plot_area !== null"></pagination>
|
|
</slide>
|
|
<slide class="py-16 px-8" v-if="value.category_id == 'Haus'">
|
|
<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" class="mt-8" :options="livingAreas"></radio-grid>
|
|
<pagination v-model="innerStep" class="mt-5" :nextable="value.living_area !== null"></pagination>
|
|
</slide>
|
|
<slide class="py-16 px-8" v-if="value.category_id == 'Haus'">
|
|
<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 das Haus?</heading>
|
|
<radio-grid v-model="value.number_of_floors" class="mt-8" :options="numbersOfRooms"></radio-grid>
|
|
<pagination v-model="innerStep" class="mt-5" :nextable="value.number_of_floors !== null"></pagination>
|
|
</slide>
|
|
<slide class="py-16 px-8" v-if="value.category_id == 'Haus'">
|
|
<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="1" :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 class="py-16 px-8" v-if="value.category_id == 'Haus'">
|
|
<div class="text-center font-semibold text-gray-700 text-sm">Frage 6</div>
|
|
<heading>Wie ist der<br /><span class="text-primary">Zustand</span> des Hauses?</heading>
|
|
<radio-grid v-model="value.condition" class="mt-8" :options="conditions"></radio-grid>
|
|
<pagination v-model="innerStep" class="mt-5" :nextable="value.condition !== null"></pagination>
|
|
</slide>
|
|
|
|
<!-- ********************************* Gewerbe ********************************** -->
|
|
<slide class="py-16 px-8" v-if="value.category_id == 'Gewerbe'">
|
|
<div class="text-center font-semibold text-gray-700 text-sm">Frage 2</div>
|
|
<heading>Wie ist die gesamte<br /><span class="text-primary">Grundstücksfläche</span> des Gewerbes?</heading>
|
|
<radio-grid v-model="value.plot_area" class="mt-8" :options="plotAreas"></radio-grid>
|
|
<pagination v-model="innerStep" class="mt-5" :nextable="value.plot_area !== null"></pagination>
|
|
</slide>
|
|
<slide class="py-16 px-8" v-if="value.category_id == 'Gewerbe'">
|
|
<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 Gewerbes?</heading>
|
|
<radio-grid v-model="value.living_area" class="mt-8" :options="livingAreas"></radio-grid>
|
|
<pagination v-model="innerStep" class="mt-5" :nextable="value.living_area !== null"></pagination>
|
|
</slide>
|
|
<slide class="py-16 px-8" v-if="value.category_id == 'Gewerbe'">
|
|
<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 das Gewerbe?</heading>
|
|
<radio-grid v-model="value.number_of_floors" class="mt-8" :options="numbersOfRooms"></radio-grid>
|
|
<pagination v-model="innerStep" class="mt-5" :nextable="value.number_of_floors !== null"></pagination>
|
|
</slide>
|
|
<slide class="py-16 px-8" v-if="value.category_id == 'Gewerbe'">
|
|
<div class="text-center font-semibold text-gray-700 text-sm">Frage 5</div>
|
|
<heading>Wann wurde das<br />Gewerbe <span class="text-primary">erbaut?</span></heading>
|
|
<veeno :pipsy="pipsy" :tooltips="tooltips" :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 class="py-16 px-8" v-if="value.category_id == 'Gewerbe'">
|
|
<div class="text-center font-semibold text-gray-700 text-sm">Frage 6</div>
|
|
<heading>Wie ist der<br /><span class="text-primary">Zustand</span> des Gewerbes?</heading>
|
|
<radio-grid v-model="value.condition" class="mt-8" :options="conditions"></radio-grid>
|
|
<pagination v-model="innerStep" class="mt-5" :nextable="value.condition !== null"></pagination>
|
|
</slide>
|
|
|
|
<!-- ******************************** Wohnung ******************************** -->
|
|
<slide class="py-16 px-8" v-if="value.category_id == 'Wohnung'">
|
|
<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" class="mt-8" :options="livingAreas"></radio-grid>
|
|
<pagination v-model="innerStep" class="mt-5" :nextable="value.living_area !== null"></pagination>
|
|
</slide>
|
|
<slide class="py-16 px-8" v-if="value.category_id == 'Wohnung'">
|
|
<div class="text-center font-semibold text-gray-700 text-sm">Frage 3</div>
|
|
<heading>Wie viele<br /><span class="text-primary">Zimmer</span> hat die Wohnung?</heading>
|
|
<radio-grid v-model="value.number_of_floors" class="mt-8" :options="numbersOfRooms"></radio-grid>
|
|
<pagination v-model="innerStep" class="mt-5" :nextable="value.number_of_floors !== null"></pagination>
|
|
</slide>
|
|
<slide class="py-16 px-8" v-if="value.category_id == 'Wohnung'">
|
|
<div class="text-center font-semibold text-gray-700 text-sm">Frage 4</div>
|
|
<heading>Wann wurde die<br />Wohnung <span class="text-primary">erbaut?</span></heading>
|
|
<veeno :pipsy="pipsy" :tooltips="tooltips" :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 class="py-16 px-8" v-if="value.category_id == 'Wohnung'">
|
|
<div class="text-center font-semibold text-gray-700 text-sm">Frage 5</div>
|
|
<heading>Wie ist der<br /><span class="text-primary">Zustand</span> der Wohnung?</heading>
|
|
<radio-grid v-model="value.condition" class="mt-8" :options="conditions"></radio-grid>
|
|
<pagination v-model="innerStep" class="mt-5" :nextable="value.condition !== null"></pagination>
|
|
</slide>
|
|
|
|
<!-- ******************************** Grundstueck ******************************** -->
|
|
<slide class="py-16 px-8" v-if="value.category_id == 'Grundstück'">
|
|
<div class="text-center font-semibold text-gray-700 text-sm">Frage 2</div>
|
|
<heading>Wie ist die <span class="text-primary">Fläche</span><br />des Grundstücks?</heading>
|
|
<radio-grid v-model="value.plot_area" class="mt-8" :options="plotAreas"></radio-grid>
|
|
<pagination v-model="innerStep" class="mt-5" :nextable="value.plot_area !== null"></pagination>
|
|
</slide>
|
|
<slide class="py-16 px-8" v-if="value.category_id == 'Grundstück'">
|
|
<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 Grundstücks?</heading>
|
|
<radio-grid v-model="value.living_area" class="mt-8" :options="livingAreas"></radio-grid>
|
|
<pagination v-model="innerStep" class="mt-5" :nextable="value.living_area !== null"></pagination>
|
|
</slide>
|
|
<slide class="py-16 px-8" v-if="value.category_id == 'Grundstück'">
|
|
<div class="text-center font-semibold text-gray-700 text-sm">Frage 4</div>
|
|
<heading>Wie ist der<br /><span class="text-primary">Zustand</span> des Grundstücks?</heading>
|
|
<radio-grid v-model="value.condition" class="mt-8" :options="conditions"></radio-grid>
|
|
<pagination v-model="innerStep" class="mt-5" :nextable="value.condition !== null"></pagination>
|
|
</slide>
|
|
|
|
<slide class="py-16 px-8">
|
|
<heading>Bitte geben Sie Ihre Daten ein</heading>
|
|
<div class="grid grid-cols-2 gap-4">
|
|
<v-text v-model="value.object_address" name="object_address" label="Straße & Hausnr des Objekts" />
|
|
<v-text v-model="value.object_zip" name="object_zip" label="PLZ des Objekts" />
|
|
<v-text v-model="value.object_location" name="object_location" label="Ort des Objekts" />
|
|
<v-text v-model="value.firstname" name="firstname" label="Ihr Vorname" />
|
|
<v-text v-model="value.lastname" name="lastname" label="Ihr Nachname" />
|
|
<v-text v-model="value.email" name="email" label="Ihre E-Mail-Adresse" />
|
|
<v-text v-model="value.phone" name="phone" label="Ihre Telefonnummer" />
|
|
</div>
|
|
<pagination
|
|
v-model="innerStep"
|
|
class="mt-6"
|
|
:nextable="
|
|
value.object_address.length > 0 &&
|
|
value.object_zip.length > 0 &&
|
|
value.object_location.length > 0 &&
|
|
value.firstname.length !== 0 &&
|
|
value.lastname.length !== 0 &&
|
|
value.email.length !== 0 &&
|
|
value.phone.length !== 0
|
|
"
|
|
submit
|
|
></pagination>
|
|
</slide>
|
|
|
|
<slide>
|
|
<div class="w-full h-full bg-white shadow-2xl ring-1 ring-gray-900/5 rounded-xl grid grid-cols-1 sm:grid-cols-[1fr_250px] grid-rows-[10rem_1fr] gap-6 overflow-hidden bg-gradient-to-bl from-white via-white to-black/10">
|
|
<div class="bg-green-200 w-40 h-40 flex justify-center items-center [clip-path:circle(70%_at_30%_30%)]">
|
|
<svg class="w-24 h-24 text-green-400 relative -left-3 -top-3" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor">
|
|
<path fill-rule="evenodd" d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z" clip-rule="evenodd" />
|
|
</svg>
|
|
</div>
|
|
<div class="isolate self-center justify-self-end row-span-2 sm:pt-8 sm:pb-8 relative -right-3">
|
|
<div class="absolute right-0 top-0 h-full flex items-center justify-end">
|
|
<div class="bg-green-200 w-96 h-96 flex [clip-path:circle(50%_at_110%_50%)] sm:[clip-path:circle(50%_at_80%_50%)]"></div>
|
|
</div>
|
|
<div class="overflow-hidden rounded-l-lg rotate-2 shadow relative z-10 -left-2">
|
|
<img class="w-64 h-32 object-cover" src="https://deine-immobilienbewertung.de/wp-content/uploads/2022/05/haus-2.jpg" />
|
|
</div>
|
|
<div class="overflow-hidden rounded-l-lg -rotate-2 shadow relative left-2">
|
|
<img class="w-64 h-32 object-cover" src="https://deine-immobilienbewertung.de/wp-content/uploads/2022/05/haus-1.jpg" />
|
|
</div>
|
|
</div>
|
|
<div class="self-end flex-grow pb-8 pl-8 pr-8 sm:pr-0">
|
|
<div class="font-bold text-xl md:text-3xl">Vielen Dank für Ihre Anfrage</div>
|
|
<div class="text-sm mt-4 md:text-lg">In Kürze erhalten Sie eine Bestätigung per E-Mail.<br />Ein Mitarbeiter wird sich zeitnah bei Ihnen melden.</div>
|
|
<div class="flex justify-between mt-3 items-end">
|
|
<span class="text-sm font-semibold text-neutral-700">Viele Grüße<br />Deine Immobilienbewertung</span>
|
|
<div class="flex-none ml-3">
|
|
<img src="https://deine-immobilienbewertung.de/wp-content/uploads/2022/05/logo-slider.png" />
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</slide>
|
|
</carousel>
|
|
</form>
|
|
</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';
|
|
import axios from 'axios';
|
|
import dayjs from 'dayjs';
|
|
|
|
export default {
|
|
data: function() {
|
|
return {
|
|
finished: true,
|
|
tooltips: [wNumb({decimals: 0})],
|
|
pipsy: {
|
|
mode: 'steps',
|
|
density: 1,
|
|
filter: function(value) {
|
|
return value % 50 === 0 ? 1 : 0;
|
|
},
|
|
format: wNumb({
|
|
decimals: 0
|
|
})
|
|
},
|
|
range: {min: [1800, 1], max: [dayjs().year(), 1]},
|
|
value: {
|
|
category_id: null,
|
|
living_area: null,
|
|
plot_area: null,
|
|
construction_year: null,
|
|
number_of_floors: null,
|
|
condition: null,
|
|
object_address: '',
|
|
object_zip: '',
|
|
object_location: '',
|
|
firstname: '',
|
|
lastname: '',
|
|
phone: '',
|
|
email: ''
|
|
},
|
|
innerStep: 0,
|
|
categories: [
|
|
{key: 'Haus', label: 'Haus', icon: 'category-house'},
|
|
{key: 'Grundstück', label: 'Grundstück', icon: 'category-plot'},
|
|
{key: 'Wohnung', 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'
|
|
}
|
|
]
|
|
},
|
|
livingAreas: [
|
|
{key: 'bis 100 m²', label: 'bis 100 m²', icon: 'living-area-sm'},
|
|
{key: '101 - 200 m²', label: 'bis 101 - 200 m²', icon: 'living-area-md'},
|
|
{key: 'mehr als 200 m²', label: 'mehr als 200 m²', icon: 'living-area-lg'},
|
|
{key: 'nicht bekannt', label: 'nicht bekannt', icon: 'unknown'}
|
|
],
|
|
conditions: [
|
|
{key: 'Renovierungsbedürftig', label: 'Renovierungsbedürftig', icon: 'living-area-sm'},
|
|
{key: 'Sanierungsbedürftig', label: 'Sanierungsbedürftig', icon: 'living-area-md'},
|
|
{key: 'Gepflegt', label: 'Gepflegt', icon: 'living-area-lg'},
|
|
{key: 'Gehoben', label: 'Gehoben', icon: 'living-area-lg'},
|
|
{key: 'Luxuroiös', label: 'Luxuriös', icon: 'living-area-lg'}
|
|
],
|
|
plotAreas: [
|
|
{key: 'bis 200 m²', label: 'bis 200 m²', icon: 'plot-area-sm'},
|
|
{key: '201 - 800 m²', label: '201 - 800 m²', icon: 'plot-area-md'},
|
|
{key: 'mehr als 800 m²', label: 'mehr als 800 m²', icon: 'plot-area-lg'},
|
|
{key: 'nicht bekannt', label: 'nicht bekannt', icon: 'unknown'}
|
|
],
|
|
numbersOfFloors: [
|
|
{key: '1', label: '1', icon: 'plot-area-sm'},
|
|
{key: '2', label: '2', icon: 'plot-area-md'},
|
|
{key: '3', label: '3', icon: 'plot-area-lg'},
|
|
{key: 'mehr als 3', label: 'mehr als 3', icon: 'plot-area-lg'}
|
|
],
|
|
numbersOfRooms: [
|
|
{key: '1-2', label: '1-2', icon: 'plot-area-sm'},
|
|
{key: '3-5', label: '3-5', icon: 'plot-area-md'},
|
|
{key: '5-8', label: '5-8', icon: 'plot-area-lg'},
|
|
{key: 'mehr als 8', label: 'mehr als 8', 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'}]
|
|
};
|
|
},
|
|
methods: {
|
|
setCategoryId(id) {
|
|
this.value.category_id = id;
|
|
this.innerStep++;
|
|
},
|
|
back() {
|
|
this.innerStep--;
|
|
},
|
|
async submit() {
|
|
await axios.post('/wp-admin/admin-ajax.php?action=stepper_submit', this.value);
|
|
|
|
this.innerStep++;
|
|
this.finished = true;
|
|
}
|
|
},
|
|
components: {
|
|
Carousel,
|
|
Slide,
|
|
Heading,
|
|
veeno
|
|
}
|
|
};
|
|
</script>
|
|
|
|
<style scoped>
|
|
.radio-grid {
|
|
display: grid;
|
|
grid-gap: 1rem;
|
|
}
|
|
</style>
|