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" class="px-3 transition-all duration-300 mx-auto max-w-[960px]" @submit.prevent="submit">
|
|
<carousel ref="carousel" v-model="innerStep" :per-page="1" :mouse-drag="false" :pagination-enabled="false">
|
|
<slide :key="0" class="py-8 sm:py-16 px-3 sm:px-6">
|
|
<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 id="category" :model-value="value.category" :options="categories"
|
|
@update:modelValue="onUpdateCategory"></radio-grid>
|
|
<pagination v-model="innerStep" class="mt-5" :prev="false" :nextable="value.category !== null">
|
|
</pagination>
|
|
</slide>
|
|
|
|
<!-- ********************************* Haus ********************************** -->
|
|
<slide v-if="value.category == 'Haus'" :key="1" class="py-8 sm:py-16 px-3 sm:px-6">
|
|
<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 id="house_plot_area" v-model="value.plot_area" :options="plotAreas"></radio-grid>
|
|
<pagination v-model="innerStep" class="mt-5" :nextable="value.plot_area !== null"></pagination>
|
|
</slide>
|
|
<slide v-if="value.category == 'Haus'" :key="2" class="py-8 sm:py-16 px-3 sm:px-6">
|
|
<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 id="house_living_area" v-model="value.living_area" :options="livingAreas"></radio-grid>
|
|
<pagination v-model="innerStep" class="mt-5" :nextable="value.living_area !== null"></pagination>
|
|
</slide>
|
|
<slide v-if="value.category == 'Haus'" :key="3" class="py-8 sm:py-16 px-3 sm:px-6">
|
|
<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 id="house_number_of_rooms" v-model="value.number_of_floors"
|
|
:options="numbersOfRooms"></radio-grid>
|
|
<pagination v-model="innerStep" class="mt-5" :nextable="value.number_of_floors !== null"></pagination>
|
|
</slide>
|
|
<slide v-if="value.category == 'Haus'" :key="4" class="py-8 sm:py-16 px-3 sm:px-6">
|
|
<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>
|
|
<v-slider v-model="value.construction_year" :min="1900" :max="maxYear"></v-slider>
|
|
<pagination v-model="innerStep" class="mt-24"></pagination>
|
|
</slide>
|
|
<slide v-if="value.category == 'Haus'" :key="5" class="py-8 sm:py-16 px-3 sm:px-6">
|
|
<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 id="house_condition" v-model="value.condition" :options="conditions"></radio-grid>
|
|
<pagination v-model="innerStep" class="mt-5" :nextable="value.condition !== null"></pagination>
|
|
</slide>
|
|
|
|
<!-- ********************************* Gewerbe ********************************** -->
|
|
<slide v-if="value.category == 'Gewerbe'" :key="1" class="py-8 sm:py-16 px-3 sm:px-6">
|
|
<div class="text-center font-semibold text-gray-700 text-sm">Frage 2</div>
|
|
<heading>Wie ist die gesamte<br /><span class="text-primary">Gewerbefläche</span> des Gewerbes?</heading>
|
|
<radio-grid id="gewerbe_living_area" v-model="value.living_area" :options="gewerbeLivingAreas"></radio-grid>
|
|
<pagination v-model="innerStep" class="mt-5" :nextable="value.living_area !== null"></pagination>
|
|
</slide>
|
|
<slide v-if="value.category == 'Gewerbe'" :key="2" class="py-8 sm:py-16 px-3 sm:px-6">
|
|
<div class="text-center font-semibold text-gray-700 text-sm">Frage 3</div>
|
|
<heading>Wie ist die gesamte<br /><span class="text-primary">Grundstücksfläche</span> des Gewerbes?
|
|
</heading>
|
|
<radio-grid id="gewerbe_plot_area" v-model="value.plot_area" :options="plotPlotAreas"></radio-grid>
|
|
<pagination v-model="innerStep" class="mt-5" :nextable="value.plot_area !== null"></pagination>
|
|
</slide>
|
|
<slide v-if="value.category == 'Gewerbe'" :key="3" class="py-8 sm:py-16 px-3 sm:px-6">
|
|
<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 id="gewerbe_number_of_rooms" v-model="value.number_of_floors"
|
|
:options="apartmentNumbersOfRooms"></radio-grid>
|
|
<pagination v-model="innerStep" class="mt-5" :nextable="value.number_of_floors !== null"></pagination>
|
|
</slide>
|
|
<slide v-if="value.category == 'Gewerbe'" :key="4" class="py-8 sm:py-16 px-3 sm:px-6">
|
|
<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>
|
|
<v-slider v-model="value.construction_year" :min="1900" :max="maxYear"></v-slider>
|
|
<pagination v-model="innerStep" class="mt-24"></pagination>
|
|
</slide>
|
|
<slide v-if="value.category == 'Gewerbe'" :key="5" class="py-8 sm:py-16 px-3 sm:px-6">
|
|
<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 id="gewerbe_condition" v-model="value.condition" :options="conditions"></radio-grid>
|
|
<pagination v-model="innerStep" class="mt-5" :nextable="value.condition !== null"></pagination>
|
|
</slide>
|
|
|
|
<!-- ******************************** Wohnung ******************************** -->
|
|
<slide v-if="value.category == 'Wohnung'" :key="2" class="py-8 sm:py-16 px-3 sm:px-6">
|
|
<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 id="apartment_living_area" v-model="value.living_area"
|
|
:options="apartmentLivingAreas"></radio-grid>
|
|
<pagination v-model="innerStep" class="mt-5" :nextable="value.living_area !== null"></pagination>
|
|
</slide>
|
|
<slide v-if="value.category == 'Wohnung'" :key="3" class="py-8 sm:py-16 px-3 sm:px-6">
|
|
<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 id="apartment_number_of_rooms" v-model="value.number_of_floors"
|
|
:options="apartmentNumbersOfRooms"></radio-grid>
|
|
<pagination v-model="innerStep" class="mt-5" :nextable="value.number_of_floors !== null"></pagination>
|
|
</slide>
|
|
<slide v-if="value.category == 'Wohnung'" :key="4" class="py-8 sm:py-16 px-3 sm:px-6">
|
|
<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>
|
|
<v-slider v-model="value.construction_year" :min="1900" :max="maxYear"></v-slider>
|
|
<pagination v-model="innerStep" class="mt-24"></pagination>
|
|
</slide>
|
|
<slide v-if="value.category == 'Wohnung'" :key="5" class="py-8 sm:py-16 px-3 sm:px-6">
|
|
<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 id="apartment_condition" v-model="value.condition" :options="conditions"></radio-grid>
|
|
<pagination v-model="innerStep" class="mt-5" :nextable="value.condition !== null"></pagination>
|
|
</slide>
|
|
|
|
<!-- ******************************** Grundstueck ******************************** -->
|
|
<slide v-if="value.category == 'Grundstück'" :key="2" class="py-8 sm:py-16 px-3 sm:px-6">
|
|
<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 id="plot_plot_area" v-model="value.plot_area" :options="plotPlotAreas"></radio-grid>
|
|
<pagination v-model="innerStep" class="mt-5" :nextable="value.plot_area !== null"></pagination>
|
|
</slide>
|
|
<slide v-if="value.category == 'Grundstück'" :key="3" class="py-8 sm:py-16 px-3 sm:px-6">
|
|
<div class="text-center font-semibold text-gray-700 text-sm">Frage 3</div>
|
|
<heading>Wie ist der<br /><span class="text-primary">Zustand</span> des Grundstücks?</heading>
|
|
<radio-grid id="plot_condition" v-model="value.condition" :options="conditions"></radio-grid>
|
|
<pagination v-model="innerStep" class="mt-5" :nextable="value.condition !== null"></pagination>
|
|
</slide>
|
|
|
|
<slide v-if="value.category !== null" :key="slideCount[value.category]" class="py-8 sm:py-16 px-3 sm:px-6">
|
|
<heading>Bitte geben Sie Ihre <span class="text-primary">Daten</span> 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" />
|
|
<v-checkbox id="datenschutz" v-model="value.datenschutz" class="col-span-2" name="datenschutz"
|
|
label='Ich habe die <a href="/datenschutzerklaerung" class="text-primary" target="_BLANK">Datenschutzerklärung</a> zur Kenntnis genommen. <span class="text-red-800 ml-1">*</span>' />
|
|
</div>
|
|
<pagination v-model="innerStep" class="mt-6" nextable submit></pagination>
|
|
</slide>
|
|
|
|
<slide v-if="value.category" :key="slideCount[value.category] + 1">
|
|
<div class="w-full h-full p-3 flex flex-col items-center justify-center">
|
|
<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>
|
|
</slide>
|
|
</carousel>
|
|
</form>
|
|
</template>
|
|
|
|
<script>
|
|
import { nextTick } from 'vue';
|
|
import Heading from './components/Heading.vue';
|
|
import VSlider from './components/VSlider.vue';
|
|
import axios from 'axios';
|
|
import dayjs from 'dayjs';
|
|
import { toast } from 'vue3-toastify';
|
|
import 'vue3-toastify/dist/index.css';
|
|
|
|
export default {
|
|
components: {
|
|
Heading,
|
|
VSlider,
|
|
},
|
|
data: function () {
|
|
return {
|
|
slideCount: {
|
|
Haus: 6,
|
|
Gewerbe: 6,
|
|
Wohnung: 6,
|
|
Grundstück: 3,
|
|
},
|
|
value: {
|
|
category: 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: '',
|
|
source: window.location.host,
|
|
datenschutz: false,
|
|
},
|
|
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' },
|
|
],
|
|
apartmentLivingAreas: [
|
|
{ key: 'bis 65 m²', label: 'bis 65 m²', icon: 'living-area-sm' },
|
|
{ key: '66 - 150 m²', label: 'bis 66 - 150 m²', icon: 'living-area-md' },
|
|
{ key: 'mehr als 150 m²', label: 'mehr als 150 m²', icon: 'living-area-lg' },
|
|
{ key: 'nicht bekannt', label: 'nicht bekannt', icon: 'unknown' },
|
|
],
|
|
gewerbeLivingAreas: [
|
|
{ key: 'bis 150 m²', label: 'bis 150 m²', icon: 'living-area-sm' },
|
|
{ key: '151 - 350 m²', label: 'bis 151 - 350 m²', icon: 'living-area-md' },
|
|
{ key: '351 - 1000 m²', label: '351 - 1000 m²', icon: 'living-area-lg' },
|
|
{ key: 'mehr als 1000 m²', label: 'mehr als 1000 m²', icon: 'living-area-lg' },
|
|
{ key: 'nicht bekannt', label: 'nicht bekannt', icon: 'unknown' },
|
|
],
|
|
conditions: [
|
|
{ key: 'Sanierungsbedürftig', label: 'Sanierungsbedürftig', icon: 'living-area-md' },
|
|
{ key: 'Renovierungsbedürftig', label: 'Renovierungsbedürftig', icon: 'living-area-sm' },
|
|
{ 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' },
|
|
],
|
|
plotPlotAreas: [
|
|
{ key: 'bis 350 m²', label: 'bis 350 m²', icon: 'plot-area-sm' },
|
|
{ key: '351 - 1000 m²', label: '351 - 1000 m²', icon: 'plot-area-md' },
|
|
{ key: 'mehr als 1000 m²', label: 'mehr als 1000 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' },
|
|
],
|
|
apartmentNumbersOfRooms: [
|
|
{ key: '1-2', label: '1-2', icon: 'plot-area-sm' },
|
|
{ key: '3-5', label: '3-5', icon: 'plot-area-md' },
|
|
{ key: '6-8', label: '6-8', icon: 'plot-area-lg' },
|
|
{ key: 'nicht bekannt', label: 'nicht bekannt', icon: 'unknown' },
|
|
],
|
|
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: {
|
|
maxYear() {
|
|
return dayjs().add(1, 'year').get('year');
|
|
},
|
|
},
|
|
methods: {
|
|
onUpdateCategory(categoryId) {
|
|
this.value.category = categoryId;
|
|
nextTick(() => {
|
|
this.$refs.carousel.updateSlideWidth();
|
|
});
|
|
},
|
|
back() {
|
|
this.innerStep--;
|
|
},
|
|
async submit() {
|
|
try {
|
|
await axios.post('/wp-admin/admin-ajax.php?action=stepper_submit', this.value);
|
|
|
|
this.innerStep++;
|
|
} catch (e) {
|
|
if (!e.response || !e.response.status) {
|
|
throw e;
|
|
}
|
|
|
|
if (e.response.status === 422) {
|
|
Object.keys(e.response.data.errors).forEach((key) => {
|
|
e.response.data.errors[key].forEach((error) => {
|
|
toast.error(error);
|
|
});
|
|
});
|
|
}
|
|
}
|
|
},
|
|
},
|
|
};
|
|
</script>
|