588 lines
30 KiB
Vue
588 lines
30 KiB
Vue
<template>
|
|
<div class="hub hub-detail" id="detailToPrint" :style="[bckgrColor('divBgColor'), color('fontColor')]">
|
|
<nav>
|
|
<ul class="top-links">
|
|
<li class="list-item">
|
|
<a @click.prevent="$emit('backTolist')" class="top-link backToListeButton button primary" style="cursor: pointer;" :style="[bckgrColor('buttonColor'), color('buttonTextColor')]">
|
|
<span class="padding10">{{ $t('front_extern.detail_zurueck') }}</span>
|
|
</a>
|
|
</li>
|
|
<li v-if="false" class="list-item leftMarg10"><a href="" class="top-link advancedSearchButton button primary" style="cursor: pointer;" :style="[bckgrColor('buttonColor'), color('buttonTextColor')]"><span class="padding10"> Suche anpassen</span></a></li>
|
|
<li v-if="getNext" @click.prevent="$emit('gotoNext', getNext)" class="list-item next">
|
|
<a href="" class="top-link nextInserateButton button primary" data-id="2693330" style="cursor: pointer;" :style="[bckgrColor('buttonColor'), color('buttonTextColor')]">
|
|
<span class="padding10">{{ $t('front_extern.detail_naechstes') }} ></span>
|
|
</a>
|
|
</li>
|
|
<li v-if="getPrev" @click.prevent="$emit('gotoPrev', getPrev)" class="list-item prev">
|
|
<a href="" class="top-link prevInserateButton button primary" data-id="" style="cursor: pointer;" :style="[bckgrColor('buttonColor'), color('buttonTextColor')]">
|
|
<span class="padding10">< {{ $t('front_extern.detail_vorher') }}</span>
|
|
</a>
|
|
</li>
|
|
</ul>
|
|
</nav>
|
|
<header>
|
|
<div class="heading-container">
|
|
<p v-if="false" class="printHeader"><b>{{ $store.state.details.standort.firma_name }}</b> {{ $store.state.details.standort.kunde_strasse }} {{ $store.state.details.standort.kunde_plz }} {{ $store.state.details.standort.kunde_ort }} Telefon: {{ $store.state.details.standort.kunde_telefon }} Fax: {{ $store.state.details.standort.kunde_fax }} </p>
|
|
<hr style="margin-top: -10px;">
|
|
<p></p>
|
|
<h1 v-html="fahrzeug + ' - ' + $store.state.details.rel_category['bezeichnung_' + $store.state.settings.lang]" class="title-main" :style="color('titleColor')"></h1>
|
|
<div v-if="false" class="button-container printPdfContainer exportShowNormal">
|
|
<a href="javascript:;" class="printDetail" style="color: #000000!important;">
|
|
<span class="caption" styl="">Drucken | </span>
|
|
</a>
|
|
<a href="javascript:;" class="downloadPdfDetail" style="color: #000000!important;">
|
|
<span class="caption">Download PDF</span>
|
|
</a>
|
|
</div>
|
|
</div>
|
|
</header>
|
|
<div class="columns" id="divToPrint">
|
|
<div class="left">
|
|
<div data-gallery-closetext="Schliessen" class="my-gallery gallery">
|
|
<div ref="defaultDContainer" class="image-large-container" style="text-align: center;">
|
|
<a href="#" @click.prevent="picClicked(0)" rel="group1">
|
|
<detail-image
|
|
:details="details"
|
|
:imgOffset="0"
|
|
:prefix="''"
|
|
:container="'defaultDContainer'"
|
|
@imageClick="imageClick($event)"
|
|
/>
|
|
</a>
|
|
</div>
|
|
<div class="object-list-container">
|
|
<ul v-if="$store.state.details.pictures.length > 1" class="object-list thumb-list closed">
|
|
<template v-for="(pic, ndx) in $store.state.details.pictures">
|
|
<li v-if="ndx>0" v-bind:key="ndx" ref="dContainer" style="text-align: center;" class="imageGroup object-list-item">
|
|
<a href="#" @click.prevent="picClicked(ndx)" class="object-thumb" rel="group1">
|
|
<detail-image
|
|
:details="details"
|
|
:imgOffset="ndx"
|
|
:prefix="''"
|
|
:container="'dContainer'"
|
|
@imageClick="imageClick($event)"
|
|
/>
|
|
</a>
|
|
</li>
|
|
</template>
|
|
</ul>
|
|
</div>
|
|
<photo-swipe-component
|
|
:options="options"
|
|
@open="$emit('open')"
|
|
@close="$emit('close')"
|
|
/>
|
|
|
|
</div>
|
|
<section>
|
|
<div class="vehicle-data greyBgAndBorderDetail">
|
|
<h2 class="title-secondary" :style="color('titleColor')">{{ $t('front_extern.detail_titel') }}</h2>
|
|
<table :style="color('fontColor')">
|
|
<tbody>
|
|
<tr v-if="$store.state.details.ident_nr_intern">
|
|
<th class="data-label">{{ $t('front_extern.inseratNr') }}</th>
|
|
<td class="data">{{ $store.state.details.ident_nr_intern}}</td>
|
|
</tr>
|
|
<tr>
|
|
<th class="data-label">{{ $t('front_extern.detail_kategorie') }}</th>
|
|
<td class="data">{{ $store.state.details.rel_category['bezeichnung_' + $store.state.settings.lang]}}</td>
|
|
</tr>
|
|
<tr v-if="$store.state.details.fzg_1iv">
|
|
<th class="data-label">{{ $t('front_extern.detail_invsetz') }}</th>
|
|
<td class="data">{{formatDate($store.state.details.fzg_1iv)}}</td>
|
|
</tr>
|
|
<tr>
|
|
<th class="data-label">{{ $t('front_extern.detail_modell') }}</th>
|
|
<td class="data">{{ fahrzeug }}</td>
|
|
</tr>
|
|
<tr>
|
|
<th class="data-label">{{ $t('front_extern.detail_fzg') }}</th>
|
|
<td class="data">{{ $store.state.details.rel_art['bezeichnung_' + $store.state.settings.lang] }}</td>
|
|
</tr>
|
|
<tr v-if="$store.state.details.fzg_farbe">
|
|
<th class="data-label">{{ $t('front_extern.detail_farbe') }}</th>
|
|
<td class="data">{{ $store.state.details.rel_farbe['bezeichnung_' + $store.state.settings.lang] }}</td>
|
|
</tr>
|
|
<tr v-if="$store.state.details.fzg_rubrik_vermietung == 0">
|
|
<th class="data-label">{{ $t('front_extern.detail_km') }}</th>
|
|
<td class="data">{{formatNum($store.state.details.fzg_km)}} km</td>
|
|
</tr>
|
|
<tr>
|
|
<th class="data-label">{{ $t('front_extern.detail_hubraum') }}</th>
|
|
<td class="data">{{ $store.state.details.modell_ccm!=0 ? formatNum($store.state.details.modell_ccm) : '-'}} ccm</td>
|
|
</tr>
|
|
<tr>
|
|
<th class="data-label">{{ $t('front_extern.detail_zustand') }}</th>
|
|
<td class="data">{{ $store.state.details.zustand }}</td>
|
|
</tr>
|
|
<tr>
|
|
<th class="data-label">{{ $t('front_extern.detail_leistung') }}</th>
|
|
<td class="data">
|
|
{{$store.state.details.fzg_leistung ? formatNum($store.state.details.fzg_leistung, 1) : '-'}} kW /
|
|
{{$store.state.details.fzg_leistung ? formatNum($store.state.details.fzg_leistung*1.35962) : '-'}} PS
|
|
</td>
|
|
</tr>
|
|
<tr>
|
|
<th class="data-label" v-if="$store.state.details.garantie_typ == 3">
|
|
{{ $t('front_extern.detail_warranty_manufacturer') }}
|
|
</th>
|
|
<th class="data-label" v-else>
|
|
{{ $t('front_extern.detail_warranty') }}
|
|
</th>
|
|
<td v-html="getWarranty()" class="data"></td>
|
|
</tr>
|
|
<template v-if="$store.state.details.fzg_rubrik_vermietung == 0 || ($store.state.details.fzg_rubrik_vermietung == 1 && $store.state.details.inserat_status_vermietet_anzeigen == 1)" class="price beschNormal">
|
|
<template v-if="$store.state.details.actualprice != $store.state.details.fzg_preis">
|
|
<tr>
|
|
<th class="data-label"><b>{{ $t('front_extern.detail_preis_special') }}</b></th>
|
|
<td class="data"><b>{{formatPrice($store.state.details.actualprice, 0)}}</b></td>
|
|
</tr>
|
|
<tr>
|
|
<th class="data-label">{{ $t('front_extern.detail_preis_normal') }}</th>
|
|
<td class="data"><span class="strikethrough">{{formatPrice($store.state.details.fzg_preis, 0)}}</span></td>
|
|
</tr>
|
|
<tr>
|
|
<th class="data-label">{{ $t('front_extern.detail_aktion_bis') }}</th>
|
|
<td class="data">{{formatDate($store.state.details.fzg_preis_aktion_bis)}}</td>
|
|
</tr>
|
|
</template>
|
|
<template v-else>
|
|
<tr>
|
|
<th class="data-label">{{ $t('front_extern.detail_preis') }}</th>
|
|
<td v-if="$store.state.details.actualprice == 0" class="data">{{ $t('front_extern.price_on_request') }}</td>
|
|
<td v-else class="data">{{formatPrice($store.state.details.actualprice, 0)}}</td>
|
|
</tr>
|
|
</template>
|
|
</template>
|
|
<tr v-if="$store.state.details.inserat_status_verfuegbar_ab">
|
|
<th class="data-label">
|
|
{{ $t('front_extern.detail_verfuegbar_ab') }}
|
|
</th>
|
|
<td class="data">{{ formatDate($store.state.details.inserat_status_verfuegbar_ab) }}</td>
|
|
</tr>
|
|
<template v-if="$store.state.details.fzg_text && $store.state.details.fzg_text.length > 0">
|
|
<tr class="beschNormal">
|
|
<th class="data-label "><b>{{ $t('front_extern.detail_bemerkung') }}</b></th>
|
|
<td class="data"></td>
|
|
</tr>
|
|
<tr class="beschNormal">
|
|
<td v-html="$store.state.details.fzg_text" colspan="2"></td>
|
|
</tr>
|
|
</template>
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
<div v-if="$store.state.details.fzg_rubrik_vermietung == 1" :style="color('fontColor')" class="vehicle-data greyBgAndBorderDetail">
|
|
<h2 class="title-secondary" :style="color('titleColor')">{{ $t('front_extern.rental_titel') }}</h2>
|
|
<table style="border-collapse: collapse;">
|
|
<template v-if="$store.state.details.mietkonditionen.miete_tag_1 > 0">
|
|
<tr :style="[bckgrColor('buttonColor'), color('buttonTextColor')]">
|
|
<th colspan="2" class="data-label">{{ $t('front_extern.detail_miet_tage1') }}</th>
|
|
</tr>
|
|
<tr>
|
|
<th class="data-label">{{ $t('front_extern.detail_miet_price') }}</th>
|
|
<td class="data">{{formatPrice($store.state.details.mietkonditionen.miete_tag_1, 0)}}</td>
|
|
</tr>
|
|
</template>
|
|
<tr :style="[bckgrColor('buttonColor'), color('buttonTextColor')]">
|
|
<th colspan="2" class="data-label">{{ $t('front_extern.detail_miet_pro_tag_title') }}</th>
|
|
</tr>
|
|
<tr>
|
|
<th class="data-label">{{ $t('front_extern.detail_miet_price') }}</th>
|
|
<td class="data">{{formatPrice($store.state.details.mietkonditionen.miete_tag, 0)}} {{ $t('front_extern.detail_miet_pro_tag') }}</td>
|
|
</tr>
|
|
<tr>
|
|
<th class="data-label">{{ $t('front_extern.detail_miet_free_km') }}</th>
|
|
<td class="data">{{formatNum($store.state.details.mietkonditionen.km_tag, 0)}}</td>
|
|
</tr>
|
|
<tr>
|
|
<th class="data-label">{{ $t('front_extern.detail_miet_add_km') }}</th>
|
|
<td class="data">{{formatPrice($store.state.details.mietkonditionen.km_zuschlag_tag, 2)}} {{ $t('front_extern.detail_miet_pro_km') }}</td>
|
|
</tr>
|
|
<tr :style="[bckgrColor('buttonColor'), color('buttonTextColor')]">
|
|
<th colspan="2" class="data-label">{{ $t('front_extern.detail_miet_pro_weekend_title') }}</th>
|
|
</tr>
|
|
<tr>
|
|
<th class="data-label">{{ $t('front_extern.detail_miet_price') }}</th>
|
|
<td class="data">{{formatPrice($store.state.details.mietkonditionen.miete_we, 0)}} {{ $t('front_extern.detail_miet_pro_weekend') }}</td>
|
|
</tr>
|
|
<tr>
|
|
<th class="data-label">{{ $t('front_extern.detail_miet_free_km') }}</th>
|
|
<td class="data">{{formatNum($store.state.details.mietkonditionen.km_we, 0)}}</td>
|
|
</tr>
|
|
<tr>
|
|
<th class="data-label">{{ $t('front_extern.detail_miet_add_km') }}</th>
|
|
<td class="data">{{formatPrice($store.state.details.mietkonditionen.km_zuschlag_we, 2)}} {{ $t('front_extern.detail_miet_pro_km') }}</td>
|
|
</tr>
|
|
<tr :style="[bckgrColor('buttonColor'), color('buttonTextColor')]">
|
|
<th colspan="2" class="data-label">{{ $t('front_extern.detail_miet_pro_woche_title') }}</th>
|
|
</tr>
|
|
<template v-if="$store.state.details.mietkonditionen.miete_woche > 0">
|
|
<tr>
|
|
<th class="data-label">{{ $t('front_extern.detail_miet_price') }}</th>
|
|
<td class="data">{{formatPrice($store.state.details.mietkonditionen.miete_woche, 0)}} {{ $t('front_extern.detail_miet_pro_woche') }}</td>
|
|
</tr>
|
|
<tr>
|
|
<th class="data-label">{{ $t('front_extern.detail_miet_free_km') }}</th>
|
|
<td class="data">{{formatNum($store.state.details.mietkonditionen.km_woche, 0)}}</td>
|
|
</tr>
|
|
<tr>
|
|
<th class="data-label">{{ $t('front_extern.detail_miet_add_km') }}</th>
|
|
<td class="data">{{formatPrice($store.state.details.mietkonditionen.km_zuschlag_woche, 2)}} {{ $t('front_extern.detail_miet_pro_km') }}</td>
|
|
</tr>
|
|
</template>
|
|
<tr>
|
|
<th class="data-label">{{ $t('front_extern.detail_miet_kaution') }}</th>
|
|
<td class="data">{{formatPrice($store.state.details.mietkonditionen.kaution, 0)}}</td>
|
|
</tr>
|
|
<tr>
|
|
<th class="data-label">{{ $t('front_extern.detail_miet_selbst') }}</th>
|
|
<td class="data">{{formatPrice($store.state.details.mietkonditionen.selbsbehalt, 0)}}</td>
|
|
</tr>
|
|
<tr>
|
|
<th class="data-label">{{ $t('front_extern.detail_miet_versicherung') }}</th>
|
|
<td class="data">{{ $store.state.details.mietkonditionen.versicherung['bezeichnung_' + $store.state.settings.lang] }}</td>
|
|
</tr>
|
|
<template v-if="$store.state.details.mietkonditionen.bemerkung && $store.state.details.mietkonditionen.bemerkung.length > 0">
|
|
<tr class="beschNormal">
|
|
<th class="data-label "><b>{{ $t('front_extern.detail_bemerkung') }}</b></th>
|
|
<td class="data"></td>
|
|
</tr>
|
|
<tr class="beschNormal">
|
|
<td v-html="$store.state.details.mietkonditionen.bemerkung" colspan="2"></td>
|
|
</tr>
|
|
</template>
|
|
|
|
</table>
|
|
</div>
|
|
|
|
</section>
|
|
<div class="beschPrint">
|
|
<h2 class="title-secondary">{{ $t('front_extern.detail_bemerkung') }}</h2>
|
|
<p v-html="$store.state.details.fzg_text"></p>
|
|
</div>
|
|
<div class="beschPreis">{{ $t('front_extern.detail_preis') }} {{formatPrice($store.state.details.actualprice, 0)}} </div>
|
|
</div>
|
|
<div class="right">
|
|
<div class="padding">
|
|
<div class="chapters">
|
|
<section>
|
|
<div class="chapter dealer">
|
|
<div class="chapter-content greyBgAndBorder">
|
|
<div style="width: 220px; float: left;">
|
|
<h2 class="title-secondary" :style="color('titleColor')">{{ $t('front_extern.detail_anbieter') }}</h2>
|
|
<div class="vcard">
|
|
<span v-html="$store.state.details.standort.firma_name" class="org fn"></span>
|
|
<span class="adr">
|
|
<span class="street-address">{{ $store.state.details.standort.kunde_strasse }}</span>
|
|
<span class="postal-code">{{ $store.state.details.standort.kunde_plz }}</span>
|
|
<span class="locality">{{ $store.state.details.standort.kunde_ort }}</span>
|
|
</span>
|
|
</div>
|
|
<a :href="googleMapsLink" target="_blank" class="geo" style="color: #000000;!important">{{ $t('front_extern.detail_googlemap')}} </a>
|
|
</div>
|
|
<div v-if="standortLogo" style="float: right; padding: 0px; padding-top: 25px;"><img :src="standortLogo" :alt="$store.state.details.standort.firma_name + ' ' + $store.state.details.standort.kunde_ort" style="max-width: 200px;"></div>
|
|
<address class="phone-container">
|
|
<table style="margin-left: -2px;">
|
|
<tbody>
|
|
<tr v-if="$store.state.details.standort.kunde_telefon || $store.state.details.standort.kunde_mobile" class="primary">
|
|
<th class="header">{{ $t('front_extern.details_telefon') }}</th>
|
|
<td class="data">
|
|
<span class="phone">
|
|
<a :style="color('fontColor')" id="lnkPhoneCall_1" :href="'tel:' + ($store.state.details.standort.kunde_telefon ? $store.state.details.standort.kunde_telefon.replace(/ /g, '') : $store.state.details.standort.kunde_mobile.replace(/ /g, ''))" class="tel call-on-me">{{ $store.state.details.standort.kunde_telefon ? $store.state.details.standort.kunde_telefon : $store.state.details.standort.kunde_mobile }}</a>
|
|
</span>
|
|
</td>
|
|
</tr>
|
|
<tr v-if="$store.state.details.standort.kunde_telefon">
|
|
<th class="header">{{ $t('front_extern.details_fax') }}</th>
|
|
<td class="data"><span class="phone"><span class="tel">{{ $store.state.details.standort.kunde_telefon }}</span></span></td>
|
|
</tr>
|
|
</tbody>
|
|
</table>
|
|
</address>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
<section>
|
|
<div class="kontaktDiv">
|
|
<div class="DetailContact">
|
|
<div id="kontaktArea">
|
|
<form v-if="!contactSent" id="kontaktdaten" name="kontaktdaten" method="post" onsubmit="return false;" novalidate="novalidate">
|
|
<div class="kontaktDiv1">
|
|
<span class="DCTitle" :style="color('titleColor')">{{ $t('front_extern.form_kontakt') }}</span>
|
|
<label class="inpLabel">{{ $t('front_extern.form_anrede') }}</label>
|
|
<input id="anrede0" name="anrede" type="radio" value="1" v-model="form.anrede">
|
|
<label for="anrede0" class="labelFrau">{{ $t('front_extern.form_frau') }}</label>
|
|
<input id="anrede1" name="anrede" type="radio" value="2" v-model="form.anrede">
|
|
<label for="anrede1">{{ $t('front_extern.form_herr') }}</label>
|
|
<input id="anrede2" name="anrede" type="radio" value="3" v-model="form.anrede">
|
|
<label for="anrede2">{{ $t('front_extern.form_firma') }}</label>
|
|
<label ref="vorname" class="inpLabel">{{ $t('front_extern.form_vorname') }} * </label>
|
|
<input id="vorname" name="vorname" type="text" v-model="form.vorname" class="DetailInputText" :style="errorClass('vorname')" title="">
|
|
<label ref="name" class="inpLabel">{{ $t('front_extern.form_name') }} *</label>
|
|
<input id="name" name="name" type="text" v-model="form.name" class="DetailInputText" :style="errorClass('name')" title="">
|
|
<label ref="telefon" class="inpLabel">{{ $t('front_extern.form_telefon') }} *</label>
|
|
<input id="telefon" name="telefon" type="text" v-model="form.telefon" class="DetailInputText" :style="errorClass('telefon')" title="">
|
|
<label ref="email" class="inpLabel">{{ $t('front_extern.form_email') }} *</label>
|
|
<input id="email" name="email" type="text" v-model="form.email" class="DetailInputText" :style="errorClass('email')" title="">
|
|
<div class="contactOptions">
|
|
<input id="chkCopy" type="checkbox" value="1" v-model="form.sendCopy">
|
|
<label for="chkCopy">{{ $t('front_extern.form_kopie') }}</label>
|
|
</div>
|
|
<div class="dieMitInfo">{{ $t('front_extern.form_required') }}<br> </div>
|
|
<span class="DCTitle" style="color: #DE182E!important;"></span>
|
|
<label class="inpLabel" style="width:200px;">{{ $t('front_extern.form_interested_in') }}</label>
|
|
<div class="contactRightOptions">
|
|
<input id="chkBesichtigung" type="checkbox" v-model="form.chkBesichtigung">
|
|
<label for="chkBesichtigung">{{ $t('front_extern.form_interested_in_visit') }}</label>
|
|
<input id="chkProbefahrt" type="checkbox" v-model="form.chkProbefahrt">
|
|
<label for="chkProbefahrt">{{ $t('front_extern.form_interested_in_testdrive') }}</label>
|
|
</div>
|
|
<label class="inpLabel" style0="width:200px;">{{ $t('front_extern.form_bemerkung') }}</label>
|
|
<textarea id="bemerkungen" v-model="form.bemerkungen" name="bemerkungen" class="contactTextarea"></textarea>
|
|
<div class="smsSumbitPart">
|
|
<input type="submit" @click.prevent="sendContact" class="button primary submit advSearchBtn submitKontaktForm" :value="$t('front_extern.form_absenden')" style="cursor: pointer; height: 32px;" :style="[bckgrColor('buttonColor'), color('buttonTextColor')]">
|
|
</div>
|
|
</div>
|
|
</form>
|
|
<div v-else>
|
|
<span v-html="$t('front_extern.contact_sent')" class="DCTitle" :style="color('titleColor')"></span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
<script>
|
|
import axios from 'axios'
|
|
|
|
import DetailImage from './DetailImage.vue'
|
|
|
|
import PathMixin from '../mixins/PathMixin.js'
|
|
import Numberformatting from '../mixins/Numberformatting.js'
|
|
import defaultImageMixin from '../mixins/defaultImageMixin.js'
|
|
// import PhotoSwipeLightbox from 'photoswipe';
|
|
// import 'photoswipe/style.css';
|
|
import PhotoSwipeComponent from './vue3-picture-swipe/PhotoSwipeComponent.vue';
|
|
|
|
export default {
|
|
// props: ['list', 'details', '$store.state.settings.lang', 'settings', 'url'],
|
|
props: ['url'],
|
|
mixins: [PathMixin, Numberformatting, defaultImageMixin],
|
|
components: {
|
|
'detail-image': DetailImage,
|
|
PhotoSwipeComponent,
|
|
},
|
|
data() {
|
|
return {
|
|
isLoading: false,
|
|
contactSent: false,
|
|
form: {
|
|
rowID: 0,
|
|
adID: 0,
|
|
anrede: 1,
|
|
vorname: '',
|
|
name: '',
|
|
telefon: '',
|
|
email: '',
|
|
sendCopy: false,
|
|
chkBesichtigung: false,
|
|
chkProbefahrt: false,
|
|
bemerkungen: '',
|
|
},
|
|
formErrors: {
|
|
name: false,
|
|
vorname: false,
|
|
email: false,
|
|
teleforn: false,
|
|
},
|
|
}
|
|
},
|
|
methods: {
|
|
imageClick: function(e) {
|
|
// console.log(e);
|
|
// this.$store.state.details.pictures
|
|
},
|
|
picClicked: function() {
|
|
},
|
|
defaultPic: function() {
|
|
if(!this.$store.state.details.pictures) {
|
|
return this.getDefaultImage();
|
|
// return '/front/v30/images/J56420132201.jpg';
|
|
}
|
|
if(this.$store.state.details.pictures.length == 0) {
|
|
return this.getDefaultImage();
|
|
// return '/front/v30/images/J56420132201.jpg';
|
|
}
|
|
return this.adCDNPath(this.$store.state.details.ident_nr_kunde, this.$store.state.details.ident_nr_standort) + this.$store.state.details.pictures[0].datei;
|
|
},
|
|
getPic: function(pic) {
|
|
return this.adCDNPath(this.$store.state.details.ident_nr_kunde, this.$store.state.details.ident_nr_standort) + pic;
|
|
},
|
|
getWarranty: function() {
|
|
var ret = '';
|
|
switch(this.$store.state.details.garantie_typ){
|
|
case 1:
|
|
return '-';
|
|
break;
|
|
case 2:
|
|
if(this.$store.state.details.garantie_monate) {
|
|
ret += this.$store.state.details.garantie_monate + ' ' + this.$t('front_extern.detail_months');
|
|
}
|
|
if(this.$store.state.details.garantie_km && this.$store.state.details.garantie_km * 1 != 0 && !isNaN(this.$store.state.details.garantie_km)) {
|
|
if(ret != '') {
|
|
ret += ' ' + this.$t('front_extern.detail_or') + '<br>';
|
|
}
|
|
ret += this.formatNum(this.$store.state.details.garantie_km) + ' ' + this.$t('front_extern.detail_kilometer');
|
|
}
|
|
break;
|
|
case 3:
|
|
if(this.$store.state.details.garantie_datum) {
|
|
ret += this.$t('front_extern.detail_until') + ' ' + this.formatDate(this.$store.state.details.garantie_datum);
|
|
}
|
|
if(this.$store.state.details.garantie_km && this.$store.state.details.garantie_km * 1 != 0 && !isNaN(this.$store.state.details.garantie_km)) {
|
|
if(ret != '') {
|
|
ret += ' ' + this.$t('front_extern.detail_or') + '<br>';
|
|
}
|
|
ret += this.$t('front_extern.detail_until') + ' ' + this.formatNum(this.$store.state.details.garantie_km) + ' ' + this.$t('front_extern.detail_kilometer');
|
|
}
|
|
break;
|
|
case 4:
|
|
if(this.$store.state.details.garantie_datum) {
|
|
ret += this.$t('front_extern.detail_until') + ' ' + this.formatDate(this.$store.state.details.garantie_datum);
|
|
}
|
|
if(this.$store.state.details.garantie_km && this.$store.state.details.garantie_km * 1 != 0 && !isNaN(this.$store.state.details.garantie_km)) {
|
|
if(ret != '') {
|
|
ret += ' ' + '<br>' + this.$t('front_extern.detail_or') + ' ';
|
|
}
|
|
ret += this.$t('front_extern.detail_until') + " 3'000 " + this.$t('front_extern.detail_kilometer');
|
|
}
|
|
if(this.$store.state.details.garantie_vers_anbieter && this.$store.state.details.garantie_vers_anbieter != 1) {
|
|
if(ret != '') {
|
|
ret += '<br/>';
|
|
}
|
|
ret += this.$t('front_extern.detail_provider') + ': ' + this.$store.state.details.garantieAnbieter;
|
|
}
|
|
if(this.$store.state.details.garantie_vers_kosten && this.$store.state.details.garantie_vers_kosten > 0) {
|
|
if(ret != '') {
|
|
ret += '<br>';
|
|
}
|
|
ret += this.$t('front_extern.detail_insurance_cost') + ': ' + this.formatPrice(this.$store.state.details.garantie_vers_kosten, 0);
|
|
}
|
|
break;
|
|
}
|
|
return ret;
|
|
},
|
|
errorClass(name) {
|
|
if(this.formErrors[name]) {
|
|
return "border: 2px solid red;"
|
|
}
|
|
return '';
|
|
},
|
|
resetFormErrors() {
|
|
this.formErrors = {
|
|
name: false,
|
|
vorname: false,
|
|
email: false,
|
|
teleforn: false,
|
|
}
|
|
},
|
|
sendContact() {
|
|
this.isLoading = true;
|
|
this.form.rowID = this.$store.state.settings.id;
|
|
this.form.adID = this.$store.state.details.id;
|
|
axios
|
|
.get(this.url + "/api/ext/sendContact", {
|
|
params: this.form
|
|
})
|
|
.then(response => {
|
|
this.resetFormErrors();
|
|
this.contactSent = true;
|
|
})
|
|
.catch(error => {
|
|
this.resetFormErrors();
|
|
if(error.response.status == 422){
|
|
var errList = error.response.data.errors;
|
|
var listKeys = Object.keys(errList);
|
|
if(listKeys.length > 0) {
|
|
listKeys.forEach(element => {
|
|
this.formErrors[element] = true;
|
|
});
|
|
}
|
|
}else{
|
|
console.log('Error: ', error.response.data)
|
|
}
|
|
})
|
|
.finally(() => {
|
|
this.isLoading = false;
|
|
})
|
|
},
|
|
},
|
|
computed: {
|
|
axiosParams() {
|
|
const params = new URLSearchParams();
|
|
params.append('param1', 'value1');
|
|
params.append('param2', 'value2');
|
|
return params;
|
|
},
|
|
getPrev: function() {
|
|
var id = this.$store.state.details.id;
|
|
var ndx = this.$store.state.list.findIndex(i => i.id === id);
|
|
if(ndx > 0) {
|
|
return this.$store.state.list[ndx-1].id;
|
|
}
|
|
return false;
|
|
},
|
|
getNext: function() {
|
|
var id = this.$store.state.details.id;
|
|
var ndx = this.$store.state.list.findIndex(i => i.id === id);
|
|
if(ndx < this.$store.state.list.length-1) {
|
|
return this.$store.state.list[ndx+1].id;
|
|
}
|
|
return false;
|
|
},
|
|
fahrzeug() {
|
|
if(this.$store.state.details.modell_zusatz && this.$store.state.details.modell_zusatz.length > 0) {
|
|
return this.$store.state.details.rel_marke.Markenbezeichnung + ' ' + this.$store.state.details.rel_modelle.Modellbezeichnung + ' ' + this.$store.state.details.modell_zusatz;
|
|
}else{
|
|
return this.$store.state.details.rel_marke.Markenbezeichnung + ' ' + this.$store.state.details.rel_modelle.Modellbezeichnung;
|
|
}
|
|
},
|
|
googleMapsLink: function() {
|
|
return '//maps.google.ch/maps?q=' + this.$store.state.details.standort.kunde_strasse + ',' + this.$store.state.details.standort.kunde_plz + '+' + this.$store.state.details.standort.kunde_ort;
|
|
},
|
|
standortLogo: function() {
|
|
var logo = this.$store.state.details.standort.images.find(b => b.medientyp_id == 1);
|
|
if(logo) {
|
|
return this.clientCDNPath(this.$store.state.details.ident_nr_kunde, this.$store.state.details.ident_nr_standort) + '/logos/' + logo.media;
|
|
}
|
|
return false;
|
|
},
|
|
},
|
|
}
|
|
</script>
|
|
<style scoped>
|
|
.strikethrough {
|
|
position: relative;
|
|
}
|
|
.strikethrough:before {
|
|
position: absolute;
|
|
content: "";
|
|
left: 0;
|
|
top: 50%;
|
|
right: 0;
|
|
border-top: 1px solid;
|
|
border-color: inherit;
|
|
|
|
-webkit-transform:rotate(-5deg);
|
|
-moz-transform:rotate(-5deg);
|
|
-ms-transform:rotate(-5deg);
|
|
-o-transform:rotate(-5deg);
|
|
transform:rotate(-5deg);
|
|
}
|
|
</style> |