initial commit
This commit is contained in:
@@ -0,0 +1,118 @@
|
||||
<template>
|
||||
<loader :active="isLoading"/>
|
||||
<div v-if="lngLoaded">
|
||||
<details-page v-if="detailsPage"
|
||||
:list="list.results"
|
||||
:details="details"
|
||||
:lang="settings.lang"
|
||||
:settings="settings"
|
||||
:url="url"
|
||||
@backTolist="detailsPage=false"
|
||||
@gotoPrev="gotoPrev"
|
||||
@gotoNext="gotoNext"
|
||||
/>
|
||||
<search-page v-else
|
||||
:data="list"
|
||||
:lang="settings.lang"
|
||||
:settings="settings"
|
||||
@detailClick="detailClick"
|
||||
/>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import axios from 'axios'
|
||||
|
||||
import PageSearch from './components/PageSearch.vue'
|
||||
import PageDetail from './components/PageDetail.vue'
|
||||
import {i18n, loadLanguage} from './modules/i18n'
|
||||
|
||||
export default {
|
||||
components: {
|
||||
'search-page': PageSearch,
|
||||
'details-page': PageDetail,
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
configParams: {
|
||||
clientID: 0,
|
||||
rowID: 0,
|
||||
},
|
||||
listParams: {
|
||||
arts: [],
|
||||
brands: [],
|
||||
categories: [],
|
||||
},
|
||||
list: {},
|
||||
settings: {},
|
||||
// url: 'https://motorradhandel.ch',
|
||||
// url: 'https://staging.motorradhandel.ch',
|
||||
url: 'http://mh3.com',
|
||||
isLoading: false,
|
||||
lngLoaded: false,
|
||||
detailsPage: false,
|
||||
details: {},
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
var t = document.getElementsByClassName('wrapperJSON');
|
||||
if(t.length) {
|
||||
this.configParams.clientID = t[0].dataset.ui;
|
||||
this.configParams.rowID = t[0].dataset.fzl;
|
||||
this.getSettings();
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
detailClick(id) {
|
||||
this.isLoading = true;
|
||||
// this.details = {};
|
||||
axios
|
||||
.get(this.url + "/api/ext/getDetails?id=" + id)
|
||||
.then(response => {
|
||||
this.details = response.data;
|
||||
this.detailsPage = true;
|
||||
})
|
||||
.catch(error => {
|
||||
console.log(error)
|
||||
})
|
||||
.finally(() => {
|
||||
this.isLoading = false;
|
||||
})
|
||||
},
|
||||
getSettings() {
|
||||
this.isLoading = true;
|
||||
var configParams = this.configParams;
|
||||
axios
|
||||
.get(this.url + "/api/ext/getSettings?clientID=" + configParams.clientID + '&rowID=' + configParams.rowID)
|
||||
.then(response => {
|
||||
this.settings = response.data.settings;
|
||||
this.settings.srchParObj = JSON.parse(this.settings.srchParams);
|
||||
this.listParams.arts = this.settings.fzart ? this.settings.fzart.split(",") : [];
|
||||
this.listParams.brands = this.settings.marken ? this.settings.marken.split(",") : [];
|
||||
this.listParams.categories = this.settings.kategorie ? this.settings.kategorie.split(",") : [];
|
||||
this.list = response.data.data;
|
||||
loadLanguage(i18n, this.settings.lang, response.data.trans);
|
||||
this.lngLoaded = true;
|
||||
})
|
||||
.catch(error => {
|
||||
console.log(error)
|
||||
})
|
||||
.finally(() => {
|
||||
this.isLoading = false;
|
||||
})
|
||||
},
|
||||
gotoPrev(id) {
|
||||
this.detailClick(id);
|
||||
},
|
||||
gotoNext(id) {
|
||||
this.detailClick(id);
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
},
|
||||
}
|
||||
</script>
|
||||
|
||||
<style>
|
||||
@import "https://motorradhandel.ch/extern/css/custom.css";
|
||||
</style>
|
||||
@@ -0,0 +1,71 @@
|
||||
<template>
|
||||
<img
|
||||
class=""
|
||||
:src="filename"
|
||||
:width="imgW"
|
||||
:height="imgH"
|
||||
@load="loadImage"
|
||||
@error="onImgError()"
|
||||
>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import PathMixin from '../mixins/PathMixin.js'
|
||||
import defaultImageMixin from '../mixins/defaultImageMixin.js'
|
||||
|
||||
export default {
|
||||
mixins: [PathMixin, defaultImageMixin],
|
||||
props: ['details', 'imgOffset', 'container'],
|
||||
|
||||
data: function () {
|
||||
return {
|
||||
imgWidth: 1,
|
||||
imgHeight: 1,
|
||||
imgError: false,
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
onImgError() {
|
||||
this.imgError = true;
|
||||
},
|
||||
loadImage(img) {
|
||||
var c = this.$parent.$refs[this.container];
|
||||
if(Array.isArray(c)) {
|
||||
c = c[0];
|
||||
}
|
||||
var maxH = c.clientHeight;
|
||||
var maxW = c.clientWidth;
|
||||
var imgW = img.srcElement.naturalWidth;
|
||||
var imgH = img.srcElement.naturalHeight;
|
||||
var t1 = maxW / imgW;
|
||||
var t2 = maxH / imgH;
|
||||
if(t1 > t2) {
|
||||
this.imgWidth = imgW * t2;
|
||||
this.imgHeight = imgH * t2;
|
||||
}else{
|
||||
this.imgWidth = imgW * t1;
|
||||
this.imgHeight = imgH * t1;
|
||||
}
|
||||
},
|
||||
},
|
||||
mounted() {
|
||||
},
|
||||
computed: {
|
||||
imgW: function() {
|
||||
return this.imgWidth;
|
||||
},
|
||||
imgH: function() {
|
||||
return this.imgHeight;
|
||||
},
|
||||
pSize() {
|
||||
},
|
||||
filename() {
|
||||
if(this.details.pictures[this.imgOffset]){
|
||||
return (this.imgError) ? this.getDefaultImage(this.details.modell_kategorie) : this.adCDNPath(this.details.ident_nr_kunde, this.details.ident_nr_standort) + this.details.pictures[this.imgOffset]['datei'];
|
||||
}else{
|
||||
return this.getDefaultImage(this.details.modell_kategorie);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
@@ -0,0 +1,465 @@
|
||||
<template>
|
||||
<div class="hub hub-detail" id="detailToPrint" style="color: #000000!important; background-color: #FFFFFF!important;">
|
||||
<nav>
|
||||
<ul class="top-links">
|
||||
<li class="list-item">
|
||||
<a @click.prevent="$emit('backTolist')" class="top-link backToListeButton button primary" style="cursor: pointer;" :style="[btnBgColor, btnFgColor]">
|
||||
<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="[btnBgColor, btnFgColor]"><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="[btnBgColor, btnFgColor]">
|
||||
<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="[btnBgColor, btnFgColor]">
|
||||
<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>{{ details.standort.firma_name }}</b> {{ details.standort.kunde_strasse }} {{ details.standort.kunde_plz }} {{ details.standort.kunde_ort }} Telefon: {{ details.standort.kunde_telefon }} Fax: {{ details.standort.kunde_fax }} </p>
|
||||
<hr style="margin-top: -10px;">
|
||||
<p></p>
|
||||
<h1 v-html="fahrzeug + ' - ' + details.rel_category['bezeichnung_' + lang]" class="title-main" :style="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="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"
|
||||
:container="'defaultDContainer'"
|
||||
/>
|
||||
</a>
|
||||
</div>
|
||||
<div class="object-list-container">
|
||||
<ul v-if="details.pictures.length > 1" class="object-list thumb-list closed">
|
||||
<template v-for="(pic, ndx) in 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"
|
||||
:container="'dContainer'"
|
||||
/>
|
||||
</a>
|
||||
</li>
|
||||
</template>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
<section>
|
||||
<div class="vehicle-data greyBgAndBorderDetail">
|
||||
<h2 class="title-secondary" :style="titleColor">{{ $t('front_extern.detail_titel') }}</h2>
|
||||
<table :style="fontColor">
|
||||
<tbody>
|
||||
<tr>
|
||||
<th class="data-label">{{ $t('front_extern.detail_kategorie') }}</th>
|
||||
<td class="data">{{ details.rel_category['bezeichnung_' + lang]}}</td>
|
||||
</tr>
|
||||
<tr v-if="details.fzg_1iv">
|
||||
<th class="data-label">{{ $t('front_extern.detail_invsetz') }}</th>
|
||||
<td class="data">{{formatDate(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">{{ details.rel_art['bezeichnung_' + lang] }}</td>
|
||||
</tr>
|
||||
<tr v-if="details.fzg_farbe">
|
||||
<th class="data-label">{{ $t('front_extern.detail_farbe') }}</th>
|
||||
<td class="data">{{ details.rel_farbe['bezeichnung_' + lang] }}</td>
|
||||
</tr>
|
||||
<tr v-if="details.fzg_rubrik_vermietung == 0">
|
||||
<th class="data-label">{{ $t('front_extern.detail_km') }}</th>
|
||||
<td class="data">{{formatNum(details.fzg_km)}} km</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<th class="data-label">{{ $t('front_extern.detail_hubraum') }}</th>
|
||||
<td class="data">{{ details.modell_ccm!=0 ? formatNum(details.modell_ccm) : '-'}} ccm</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<th class="data-label">{{ $t('front_extern.detail_zustand') }}</th>
|
||||
<td class="data">{{ details.zustand }}</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<th class="data-label">{{ $t('front_extern.detail_leistung') }}</th>
|
||||
<td class="data">
|
||||
{{details.fzg_leistung ? formatNum(details.fzg_leistung, 1) : '-'}} kW /
|
||||
{{details.fzg_leistung ? formatNum(details.fzg_leistung*1.35962) : '-'}} PS
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<th class="data-label" v-if="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="details.fzg_rubrik_vermietung == 1">
|
||||
<tr class="price beschNormal">
|
||||
<th class="data-label">{{ $t('front_extern.detail_preis') }}</th>
|
||||
<td class="data">{{ $t("front_extern.ab") }} {{formatPrice(details.mietkonditionen.miete_tag, 0)}} / {{ $t("front_extern.day") }}</td>
|
||||
</tr>
|
||||
</template>
|
||||
<template v-else>
|
||||
<tr v-if="details.actualprice > 0" class="price beschNormal">
|
||||
<th class="data-label">{{ $t('front_extern.detail_preis') }}</th>
|
||||
<td class="data">{{formatPrice(details.actualprice, 0)}}</td>
|
||||
</tr>
|
||||
</template>
|
||||
<template v-if="details.fzg_text && 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="details.fzg_text" colspan="2"></td>
|
||||
</tr>
|
||||
</template>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</section>
|
||||
<div class="beschPrint">
|
||||
<h2 class="title-secondary">{{ $t('front_extern.detail_bemerkung') }}</h2>
|
||||
<p v-html="details.fzg_text"></p>
|
||||
</div>
|
||||
<div class="beschPreis">{{ $t('front_extern.detail_preis') }} {{formatPrice(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="titleColor">{{ $t('front_extern.detail_anbieter') }}</h2>
|
||||
<div class="vcard">
|
||||
<span v-html="details.standort.firma_name" class="org fn"></span>
|
||||
<span class="adr">
|
||||
<span class="street-address">{{ details.standort.kunde_strasse }}</span>
|
||||
<span class="postal-code">{{ details.standort.kunde_plz }}</span>
|
||||
<span class="locality">{{ 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="details.standort.firma_name + ' ' + details.standort.kunde_ort" style="max-width: 200px;"></div>
|
||||
<address class="phone-container">
|
||||
<table style="margin-left: -2px;">
|
||||
<tbody>
|
||||
<tr v-if="details.standort.kunde_telefon || details.standort.kunde_mobile" class="primary">
|
||||
<th class="header">{{ $t('front_extern.details_telefon') }}</th>
|
||||
<td class="data">
|
||||
<span class="phone">
|
||||
<a id="lnkPhoneCall_1" :href="'tel:' + (details.standort.kunde_telefon ? details.standort.kunde_telefon.replace(/ /g, '') : details.standort.kunde_mobile.replace(/ /g, ''))" class="tel call-on-me" style="color: #000000!important;">{{ details.standort.kunde_telefon ? details.standort.kunde_telefon : details.standort.kunde_mobile }}</a>
|
||||
</span>
|
||||
</td>
|
||||
</tr>
|
||||
<tr v-if="details.standort.kunde_telefon">
|
||||
<th class="header">{{ $t('front_extern.details_fax') }}</th>
|
||||
<td class="data"><span class="phone"><span class="tel">{{ 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="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="[btnBgColor, btnFgColor]">
|
||||
</div>
|
||||
</div>
|
||||
</form>
|
||||
<div v-else>
|
||||
<span v-html="$t('front_extern.contact_sent')" class="DCTitle" :style="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'
|
||||
|
||||
export default {
|
||||
props: ['list', 'details', 'lang', 'settings', 'url'],
|
||||
mixins: [PathMixin, Numberformatting, defaultImageMixin],
|
||||
components: {
|
||||
'detail-image': DetailImage
|
||||
},
|
||||
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: {
|
||||
picClicked: function() {
|
||||
},
|
||||
defaultPic: function() {
|
||||
if(!this.details.pictures) {
|
||||
return this.getDefaultImage();
|
||||
// return '/front/v30/images/J56420132201.jpg';
|
||||
}
|
||||
if(this.details.pictures.length == 0) {
|
||||
return this.getDefaultImage();
|
||||
// return '/front/v30/images/J56420132201.jpg';
|
||||
}
|
||||
return this.adCDNPath(this.details.ident_nr_kunde, this.details.ident_nr_standort) + this.details.pictures[0].datei;
|
||||
},
|
||||
getPic: function(pic) {
|
||||
return this.adCDNPath(this.details.ident_nr_kunde, this.details.ident_nr_standort) + pic;
|
||||
},
|
||||
getWarranty: function() {
|
||||
var ret = '';
|
||||
switch(this.details.garantie_typ){
|
||||
case 1:
|
||||
return '-';
|
||||
break;
|
||||
case 2:
|
||||
if(this.details.garantie_monate) {
|
||||
ret += this.details.garantie_monate + ' ' + this.$t('front_extern.detail_months');
|
||||
}
|
||||
if(this.details.garantie_km && this.details.garantie_km * 1 != 0 && !isNaN(this.details.garantie_km)) {
|
||||
if(ret != '') {
|
||||
ret += ' ' + this.$t('front_extern.detail_or') + '<br>';
|
||||
}
|
||||
ret += this.formatNum(this.details.garantie_km) + ' ' + this.$t('front_extern.detail_kilometer');
|
||||
}
|
||||
break;
|
||||
case 3:
|
||||
if(this.details.garantie_datum) {
|
||||
ret += this.$t('front_extern.detail_until') + ' ' + this.formatDate(this.details.garantie_datum);
|
||||
}
|
||||
if(this.details.garantie_km && this.details.garantie_km * 1 != 0 && !isNaN(this.details.garantie_km)) {
|
||||
if(ret != '') {
|
||||
ret += ' ' + this.$t('front_extern.detail_or') + '<br>';
|
||||
}
|
||||
ret += this.$t('front_extern.detail_until') + ' ' + this.formatNum(this.details.garantie_km) + ' ' + this.$t('front_extern.detail_kilometer');
|
||||
}
|
||||
break;
|
||||
case 4:
|
||||
if(this.details.garantie_datum) {
|
||||
ret += this.$t('front_extern.detail_until') + ' ' + this.formatDate(this.details.garantie_datum);
|
||||
}
|
||||
if(this.details.garantie_km && this.details.garantie_km * 1 != 0 && !isNaN(this.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.details.garantie_vers_anbieter && this.details.garantie_vers_anbieter != 1) {
|
||||
if(ret != '') {
|
||||
ret += '<br/>';
|
||||
}
|
||||
ret += this.$t('front_extern.detail_provider') + ': ' + this.details.garantieAnbieter;
|
||||
}
|
||||
if(this.details.garantie_vers_kosten && this.details.garantie_vers_kosten > 0) {
|
||||
if(ret != '') {
|
||||
ret += '<br>';
|
||||
}
|
||||
ret += this.$t('front_extern.detail_insurance_cost') + ': ' + this.formatPrice(this.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.settings.id;
|
||||
this.form.adID = this.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.details.id;
|
||||
var ndx = this.list.findIndex(i => i.id === id);
|
||||
if(ndx > 0) {
|
||||
return this.list[ndx-1].id;
|
||||
}
|
||||
return false;
|
||||
},
|
||||
getNext: function() {
|
||||
var id = this.details.id;
|
||||
var ndx = this.list.findIndex(i => i.id === id);
|
||||
if(ndx < this.list.length-1) {
|
||||
return this.list[ndx+1].id;
|
||||
}
|
||||
return false;
|
||||
},
|
||||
fahrzeug() {
|
||||
if(this.details.modell_zusatz && this.details.modell_zusatz.length > 0) {
|
||||
return this.details.rel_marke.Markenbezeichnung + ' ' + this.details.rel_modelle.Modellbezeichnung + ' ' + this.details.modell_zusatz;
|
||||
}else{
|
||||
return this.details.rel_marke.Markenbezeichnung + ' ' + this.details.rel_modelle.Modellbezeichnung;
|
||||
}
|
||||
},
|
||||
titleColor: function() {
|
||||
return this.settings.titleColor ? 'color: #' + this.settings.titleColor + ' !important;' : '';
|
||||
},
|
||||
bgColor: function() {
|
||||
return this.settings.bgColor ? 'background-color: #' + this.settings.bgColor + ';' : '';
|
||||
},
|
||||
fontColor: function() {
|
||||
return this.settings.fontColor ? 'color: #' + this.settings.fontColor + ' !important;' : '';
|
||||
},
|
||||
btnBgColor: function() {
|
||||
return this.settings.buttonColor ? 'background: #' + this.settings.buttonColor + ' !important' : '';
|
||||
},
|
||||
btnFgColor: function() {
|
||||
return this.settings.buttonTextColor ? 'color: #' + this.settings.buttonTextColor + ' !important;' : '';
|
||||
},
|
||||
googleMapsLink: function() {
|
||||
return '//maps.google.ch/maps?q=' + this.details.standort.kunde_strasse + ',' + this.details.standort.kunde_plz + '+' + this.details.standort.kunde_ort;
|
||||
},
|
||||
standortLogo: function() {
|
||||
var logo = this.details.standort.medien.find(b => b.medientyp_id == 1);
|
||||
if(logo) {
|
||||
return this.clientCDNPath(this.details.ident_nr_kunde, this.details.ident_nr_standort) + '/logos/' + logo.media;
|
||||
}
|
||||
return false;
|
||||
},
|
||||
|
||||
|
||||
},
|
||||
|
||||
|
||||
}
|
||||
</script>
|
||||
|
||||
|
||||
@@ -0,0 +1,216 @@
|
||||
<template>
|
||||
<div>
|
||||
<div class="hub hub-search" id="basicSearchId">
|
||||
<div class="heading-container" style="line-height: 70px; margin-bottom: 0px;">
|
||||
<div class="navButtonsContainer">
|
||||
<h1 class="title-main" :style="fontColor">
|
||||
<span class="counter-container">
|
||||
<span class="count">{{ data.results ? data.results.length : 0 }}</span> {{ $t('front_extern.vehicles')}}
|
||||
</span>
|
||||
</h1>
|
||||
<template v-if="false">
|
||||
<span class="divider advanced-mobile"> | </span><span class="customize-search-container advanced-mobile"><a href="javascript:;" class="top-link customize-search advancedSearchButton"><span style="color: #000000!important">Erweiterte Suche</span></a></span><span class="divider advanced-mobile"> | </span><span class="customize-search-container"><a href="javascript:;" class="top-link customize-search resetButton"><span style="color: #000000!important">Zurücksetzen</span></a></span>
|
||||
</template>
|
||||
</div>
|
||||
<div v-if="false" class="printButtonsContainer"><a href="#" class="printLayerButton" data-modal-id="modalPrint" style="color: #000000!important">Drucken</a><span class="divider"> | </span><a href="#" class="pdfLayerButton" data-modal-id="modalPdf" style="color: #000000!important">Download PDF</a></div>
|
||||
</div>AA
|
||||
<form v-if="true" id="hcifilterform" action="" method="GET">
|
||||
<div class="expander">
|
||||
<div class="expander-content" style="background-color: #fff!important;">
|
||||
<div class="filter-form">
|
||||
<div class="layout--group">
|
||||
<div class="layout--four-fifth full-w-mobile">
|
||||
<div class="layout--group">
|
||||
<div class="layout--one-fourth">
|
||||
<div class="part-line connected"><label for="Make" class="line-label"><span class="label-text" style="color: #d63e2d!important;">Marke</span></label>
|
||||
<div class="ghost-select-container">
|
||||
<div class="ghost-select"><span class="label">Alle</span>
|
||||
<div class="button" style="background: #d63e2d!important;"><span class="icon" style="border-top-color: #FFFFFF!important;"></span></div>
|
||||
<select class="ghost" data-param="make" id="markenID" name="Make">
|
||||
<option value="0">Alle</option>
|
||||
<option value="APRILIA">APRILIA</option>
|
||||
<option value="BMW">BMW</option>
|
||||
<option value="KAWASAKI">KAWASAKI</option>
|
||||
<option value="SUZUKI">SUZUKI</option>
|
||||
<option value="YAMAHA">YAMAHA</option>
|
||||
</select>
|
||||
</div>
|
||||
<div class="connector"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="layout--one-fourth">
|
||||
<div class="part-line"><label for="Model" class="line-label"><span class="label-text" style="color: #d63e2d!important;">Modell</span></label>
|
||||
<div class="ghost-select-container" id="divModel">
|
||||
<div class="ghost-select"><span class="label"> </span>
|
||||
<div class="button" style="background: #d63e2d!important;"><span class="icon" style="border-top-color: #FFFFFF!important;"></span></div><select class="ghost" data-param="model" id="modelID" name="Model">
|
||||
<option value="0">Alle</option>
|
||||
</select>
|
||||
</div>
|
||||
<div class="connector"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="layout--one-fourth">
|
||||
<div class="part-line"><label for="PriceTo" class="line-label"><span class="label-text" style="color: #d63e2d!important;">Preis <span class="label-hint">bis</span></span></label>
|
||||
<div class="ghost-select-container">
|
||||
<div class="ghost-select"><span class="label">Alle</span>
|
||||
<div class="button" style="background: #d63e2d!important;"><span class="icon" style="border-top-color: #FFFFFF!important;"></span></div><select class="ghost" data-param="priceto" id="PriceTo" name="PriceTo">
|
||||
<option value="" selected="selected">Alle</option>
|
||||
<option value="1000">CHF 1000</option>
|
||||
<option value="2000">CHF 2'000</option>
|
||||
<option value="3000">CHF 3'000</option>
|
||||
<option value="4000">CHF 4'000</option>
|
||||
<option value="5000">CHF 5'000</option>
|
||||
<option value="7500">CHF 7'500</option>
|
||||
<option value="10000">CHF 10'000</option>
|
||||
<option value="12500">CHF 12'500</option>
|
||||
<option value="15000">CHF 15'000</option>
|
||||
<option value="17500">CHF 17'500</option>
|
||||
<option value="20000">CHF 20'000</option>
|
||||
<option value="22500">CHF 22'500</option>
|
||||
<option value="25000">CHF 25'000</option>
|
||||
<option value="30000">CHF 30'000</option>
|
||||
<option value="35000">CHF 35'000</option>
|
||||
<option value="40000">CHF 40'000</option>
|
||||
<option value="45000">CHF 45'000</option>
|
||||
<option value="50000">CHF 50'000</option>
|
||||
<option value="60000">CHF 60'000</option>
|
||||
<option value="70000">CHF 70'000</option>
|
||||
<option value="80000">CHF 80'000</option>
|
||||
<option value="90000">CHF 90'000</option>
|
||||
<option value="100000">CHF 100'000</option>
|
||||
<option value="150000">CHF 150'000</option>
|
||||
<option value="200000">CHF 200'000</option>
|
||||
<option value="300000">CHF 300'000</option>
|
||||
</select>
|
||||
</div>
|
||||
<div class="connector"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="layout--one-fourth">
|
||||
<div class="part-line"><label for="KmTo" class="line-label"><span class="label-text" style="color: #d63e2d!important;">km <span class="label-hint">bis</span></span></label>
|
||||
<div class="ghost-select-container">
|
||||
<div class="ghost-select"><span class="label">Alle</span>
|
||||
<div class="button" style="background: #d63e2d!important;"><span class="icon" style="border-top-color: #FFFFFF!important;"> </span></div><select class="ghost" data-param="kmto" id="KmTo" name="KmTo">
|
||||
<option value="">Alle</option>
|
||||
<option value="1000">1'000 Km</option>
|
||||
<option value="5000">5'000 Km</option>
|
||||
<option value="7500">7'500 Km</option>
|
||||
<option value="10000">10'000 Km</option>
|
||||
<option value="25000">25'000 Km</option>
|
||||
<option value="50000">50'000 Km</option>
|
||||
<option value="60000">60'000 Km</option>
|
||||
<option value="70000">70'000 Km</option>
|
||||
<option value="80000">80'000 Km</option>
|
||||
<option value="90000">90'000 Km</option>
|
||||
<option value="100000">100'000 Km</option>
|
||||
<option value="125000">125'000 Km</option>
|
||||
<option value="150000">150'000 Km</option>
|
||||
<option value="175000">175'000 Km</option>
|
||||
<option value="200000">200'000 Km</option>
|
||||
</select>
|
||||
</div>
|
||||
<div class="connector"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="layout--one-fifth showOnMobile">
|
||||
<div class="part-line"><label for="Sort" class="line-label"><span class="label-text" style="color: #d63e2d!important;">Sortieren nach:</span></label>
|
||||
<div class="ghost-select-container">
|
||||
<div class="ghost-select sort"><span class="label sortLabelText">Bitte auswählen</span>
|
||||
<div class="button" style="background: #d63e2d!important;"><span class="icon" style="border-top-color: #FFFFFF!important;"> </span></div><select class="ghost" data-param="sort" id="Sort" name="Sort">
|
||||
<option value="" selected="selected">Bitte auswählen</option>
|
||||
<option value="price_asc">Preis (tiefster zuerst)</option>
|
||||
<option value="price_desc">Preis (höchster zuerst)</option>
|
||||
<option value="km_asc">Km (tiefste zuerst)</option>
|
||||
<option value="km_desc">Km (höchste zuerst)</option>
|
||||
<option value="year_asc">Jahrgang (älteste zuerst)</option>
|
||||
<option value="year_desc">Jahrgang (neuste zuerst)</option>
|
||||
<option value="makemodel_asc">Marke/Modell (A-Z)</option>
|
||||
<option value="makemodel_desc">Marke/Modell (Z-A)</option>
|
||||
</select>
|
||||
</div>
|
||||
<div class="connector"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="layout--group">
|
||||
<div class="layout--one-fourth onMobile">
|
||||
<div class="part-line"><label for="Sort" class="line-label"><span class="label-text" style="color: #d63e2d!important;">Sortieren nach:</span></label>
|
||||
<div class="ghost-select-container">
|
||||
<div class="ghost-select sort"><span class="label sortLabelText">Bitte auswählen</span>
|
||||
<div class="button" style="background: #d63e2d!important;"><span class="icon" style="border-top-color: #FFFFFF!important;"> </span></div><select class="ghost" data-param="sort" id="Sort" name="Sort">
|
||||
<option value="">Bitte auswählen</option>
|
||||
<option value="price_asc">Preis (tiefster zuerst)</option>
|
||||
<option value="price_desc">Preis (höchster zuerst)</option>
|
||||
<option value="km_asc">Km (tiefste zuerst)</option>
|
||||
<option value="km_desc">Km (höchste zuerst)</option>
|
||||
<option value="year_asc">Jahrgang (älteste zuerst)</option>
|
||||
<option value="year_desc">Jahrgang (neuste zuerst)</option>
|
||||
<option value="makemodel_asc">Marke/Modell (A-Z)</option>
|
||||
<option value="makemodel_desc">Marke/Modell (Z-A)</option>
|
||||
</select>
|
||||
</div>
|
||||
<div class="connector"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
<div class="hub hub-filter-list">
|
||||
<div class="resultListContainer" style="margin: 0 auto;"></div>
|
||||
<div id="listContainerToPrint" class="object-list-container search-result-container">
|
||||
<p class="printHeader"><b>Keller Motos AG</b> Industriestrasse 17 5301 Siggenthal-Station Telefon: 056 281 13 13 </p>
|
||||
<product-grid
|
||||
:data="data.results"
|
||||
:lang="lang"
|
||||
:settings="settings"
|
||||
@detailClick="$emit('detailClick', $event)"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
import { emit } from 'process';
|
||||
import ProductGrid from './ProductGrid.vue'
|
||||
|
||||
export default {
|
||||
props: ['data', 'lang', 'settings'],
|
||||
components: {
|
||||
'product-grid': ProductGrid,
|
||||
},
|
||||
data() {
|
||||
},
|
||||
computed: {
|
||||
// titleColor: function() {
|
||||
// return this.settings.titleColor ? 'color: #' + this.settings.titleColor + ' !important' : '';
|
||||
// },
|
||||
// bgColor: function() {
|
||||
// return this.settings.divBGColor ? 'color: #' + this.settings.divBGColor + ' !important' : '11';
|
||||
// },
|
||||
fgColor: function() {
|
||||
// console.log(this.settings)
|
||||
console.log('this.settings.divBGColor', this.settings.divBGColor)
|
||||
return this.settings.divBGColor ? 'color: #' + this.settings.divBGColor + ' !important' : '11';
|
||||
},
|
||||
// bgColor: function() {
|
||||
// // console.log('this.settings.divBGColor', this.settings.divBGColor)
|
||||
// return this.settings.divBGColor ? 'background-color: #' + this.settings.divBGColor + ' !important' : '11';
|
||||
// },
|
||||
fontColor: function() {
|
||||
return this.settings.fontColor ? 'color: #' + this.settings.fontColor + ' !important' : '';
|
||||
},
|
||||
},
|
||||
}
|
||||
</script>
|
||||
|
||||
@@ -0,0 +1,45 @@
|
||||
<template>
|
||||
<ul class="listContainerJSON object-list search-result-list">
|
||||
<result-item v-for="result in data"
|
||||
v-bind:key="result.id"
|
||||
:result="result"
|
||||
:lang="lang"
|
||||
:settings="settings"
|
||||
@detailClick="$emit('detailClick', $event)"
|
||||
>
|
||||
</result-item>
|
||||
</ul>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import ResultItem from './ResultItem.vue'
|
||||
// import Loader from './Loader.vue'
|
||||
|
||||
export default {
|
||||
props: [
|
||||
"data", "lang", "loading", 'settings'
|
||||
],
|
||||
components: {
|
||||
'result-item': ResultItem,
|
||||
// 'loader': Loader,
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
},
|
||||
computed: {
|
||||
// resultsLoading() {
|
||||
// return this.$store.state.items.resultsLoading;
|
||||
// },
|
||||
},
|
||||
methods: {
|
||||
},
|
||||
watch: {
|
||||
resultsLoading(to, from) {
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
@@ -0,0 +1,69 @@
|
||||
<template>
|
||||
<img
|
||||
class=""
|
||||
:src="filename"
|
||||
:width="imgW"
|
||||
:height="imgH"
|
||||
@load="loadImage"
|
||||
@error="onImgError()"
|
||||
>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import PathMixin from '../mixins/PathMixin.js'
|
||||
import defaultImageMixin from '../mixins/defaultImageMixin.js'
|
||||
|
||||
export default {
|
||||
mixins: [PathMixin, defaultImageMixin],
|
||||
props: ['result'],
|
||||
|
||||
data: function () {
|
||||
return {
|
||||
imgWidth: 1,
|
||||
imgHeight: 1,
|
||||
imgError: false,
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
onImgError() {
|
||||
this.imgError = true;
|
||||
},
|
||||
loadImage(img) {
|
||||
if(this.$parent.$refs.rImageContainer) {
|
||||
var maxH = this.$parent.$refs.rImageContainer.clientHeight;
|
||||
var maxW = this.$parent.$refs.rImageContainer.clientWidth;
|
||||
var imgW = img.srcElement.naturalWidth;
|
||||
var imgH = img.srcElement.naturalHeight;
|
||||
var t1 = maxW / imgW;
|
||||
var t2 = maxH / imgH;
|
||||
if(t1 > t2) {
|
||||
this.imgWidth = imgW * t2;
|
||||
this.imgHeight = imgH * t2;
|
||||
}else{
|
||||
this.imgWidth = imgW * t1;
|
||||
this.imgHeight = imgH * t1;
|
||||
}
|
||||
}
|
||||
},
|
||||
},
|
||||
mounted() {
|
||||
},
|
||||
computed: {
|
||||
imgW: function() {
|
||||
return this.imgWidth;
|
||||
},
|
||||
imgH: function() {
|
||||
return this.imgHeight;
|
||||
},
|
||||
pSize() {
|
||||
},
|
||||
filename() {
|
||||
if(this.result.media[0]){
|
||||
return (this.imgError) ? this.getDefaultImage(this.result.modell_kategorie) : this.adCDNPath(this.result.ident_nr_kunde, this.result.ident_nr_standort) + this.result.media[0]['datei'];
|
||||
}else{
|
||||
return this.getDefaultImage(this.result.modell_kategorie);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
@@ -0,0 +1,183 @@
|
||||
<template>
|
||||
<a href="#" @click.prevent="$emit('detailClick', result.id)" class="newListeItem ListeField goToDetail">
|
||||
<div :style="[bgColor]">
|
||||
<div ref="rImageContainer" class="ListeCol newListeImageContainer" style="text-align: center;">
|
||||
<result-image
|
||||
data-src=""
|
||||
:alt="result.rel_marke.Markenbezeichnung + ' ' + result.rel_modelle.Modellbezeichnung + ' ' + result.rel_category['bezeichnung_' + lang] + ' ' + result.rel_art['bezeichnung_' + lang]"
|
||||
:title="result.rel_marke.Markenbezeichnung + ' ' + result.rel_modelle.Modellbezeichnung + ' ' + result.rel_category['bezeichnung_' + lang] + ' ' + result.rel_art['bezeichnung_' + lang]"
|
||||
:result="result"
|
||||
class=""
|
||||
/>
|
||||
</div>
|
||||
<div class="ListeCol newListeTitleDetailsContainer" :style="fontColor">
|
||||
<div class="newListeTitleDetailsFirst" style="width:500px;">
|
||||
<span v-html="fahrzWoZus" :style="titleColor" class="newListeTitletext mobileTruncate"></span>
|
||||
<br>
|
||||
</div>
|
||||
<div class="newListeTitleDetailsSecond">
|
||||
<span class="exportShowMobile"><b>{{formatPrice(result.fzg_preis, 0)}}</b></span>
|
||||
{{result.rel_art['bezeichnung_' + lang]}} <br>
|
||||
<span v-if="result.fzg_art == '1' || result.fzg_art == '2'">
|
||||
<template v-if="result.fzg_rubrik_vermietung == 0">
|
||||
<span v-if="result.fzg_km_distanz == 0">
|
||||
{{ formatNum(result.fzg_km) }} {{ $t("front_extern.km") }}
|
||||
</span>
|
||||
<span v-else>
|
||||
{{ formatNum(result.fzg_km) }} {{ $t("front_extern.h") }}
|
||||
</span>
|
||||
<br />
|
||||
</template>
|
||||
<template v-if="result.fzg_1iv != ''">
|
||||
{{ $t("front_extern.1iv") }} {{ formatDate(result.fzg_1iv) }}<br />
|
||||
</template>
|
||||
{{result.fzg_leistung ? formatNum(result.fzg_leistung, 1) + 'KW' : ''}} {{ $t("front_extern.ausweis") }} {{result.rel_ausweis['bezeichnung_' + lang]}}
|
||||
</span>
|
||||
<span v-else-if="result.fzg_art == '3' || result.fzg_art == '4' || result.fzg_art == '5'">
|
||||
<template v-if="result.garantie_typ == '2'">
|
||||
<template v-if="result.garantie_monate != ''">
|
||||
{{ result.garantie_monate }}
|
||||
{{ $t("front_extern.monate") }}
|
||||
</template>
|
||||
<template v-if="result.garantie_monate != '' && result.garantie_km != ''">
|
||||
{{ $t("front_extern.oder") }}
|
||||
</template>
|
||||
<template v-if="result.garantie_km != ''">
|
||||
{{ result.garantie_km }} {{ $t("front_extern.kilometer") }}
|
||||
</template>
|
||||
</template>
|
||||
<template v-if="result.garantie_typ == '3'">
|
||||
<template v-if="result.garantie_monate != ''">
|
||||
{{ result.garantie_monate }}
|
||||
{{ $t("front_extern.monate") }}
|
||||
</template>
|
||||
<template v-if="result.garantie_monate != '' && result.garantie_km != ''">
|
||||
{{ $t("front_extern.oder") }}
|
||||
</template>
|
||||
<template v-if="result.garantie_km != ''">
|
||||
{{ result.garantie_km }} {{ $t("front_extern.kilometer") }}
|
||||
</template>
|
||||
</template>
|
||||
<template v-if="result.garantie_monate != '' && result.garantie_km == ''">
|
||||
<br />
|
||||
</template>
|
||||
<template v-if="result.fzg_1iv != '' && result.fzg_art == '5'">
|
||||
{{ $t("front_extern.1iv") }} {{ result.fzg_1iv }}<br />
|
||||
</template>
|
||||
{{result.fzg_leistung ? formatNum(result.fzg_leistung, 1) + 'KW' : ''}} {{ $t("front_extern.ausweis") }} {{result.rel_ausweis['bezeichnung_' + lang]}}
|
||||
</span>
|
||||
<span class="hide-mob"> |</span> {{ result.rel_farbe['bezeichnung_' + lang] }}
|
||||
</div>
|
||||
</div>
|
||||
<div class="ListeCol exportShowNormal" style="width: 12px;" :style="fontColor">
|
||||
<span style="border-left: 1px solid #ccc; display: block; height: 85px; margin-top: 10px;"> </span>
|
||||
</div>
|
||||
<div class="ListeCol newListePriceDetailsContainer exportShowNormal" :style="fontColor">
|
||||
<template v-if="result.fzg_rubrik_vermietung == 1">
|
||||
<span v-if="result.mietkonditionen && result.mietkonditionen.miete_tag" class="newListePriceDetailsContainerFirst">
|
||||
{{ $t("front_extern.ab") }} <b>{{formatPrice(result.mietkonditionen.miete_tag, 0)}} / {{ $t("front_extern.day") }}</b>
|
||||
</span>
|
||||
</template>
|
||||
<span v-else-if="result.actualprice > 0" class="newListePriceDetailsContainerFirst">
|
||||
<b>{{formatPrice(result.actualprice, 0)}}</b>
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</a>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import ResultImage from './ResultImage.vue'
|
||||
import PathMixin from '../mixins/PathMixin.js'
|
||||
import Numberformatting from '../mixins/Numberformatting.js'
|
||||
|
||||
export default {
|
||||
mixins: [PathMixin, Numberformatting],
|
||||
props: ['result', 'lang', 'settings'],
|
||||
components: {
|
||||
'result-image': ResultImage
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
// formatPrice(price){
|
||||
// if(price == 0) {
|
||||
// return this.$t('front_detail.on_request')
|
||||
// }else{
|
||||
// var options = { style: "currency", currency: "CHF", roundingIncrement: 1, maximumFractionDigits: 0 }
|
||||
// return Intl.NumberFormat("de-CH", options).format(price) + '.-';
|
||||
// }
|
||||
// },
|
||||
formatNum(price, digits = 0){
|
||||
var options = { maximumFractionDigits: digits, minimumFractionDigits: digits }
|
||||
return Intl.NumberFormat("de-CH", options).format(price);
|
||||
},
|
||||
// formatDate(value){
|
||||
// if(!value) {
|
||||
// return '-';
|
||||
// }
|
||||
// const date = new Date(value);
|
||||
// if(!date instanceof Date || isNaN(date)) {
|
||||
// return '-';
|
||||
// }
|
||||
// return new Intl.DateTimeFormat("de-CH", {year: 'numeric', month: '2-digit', day: '2-digit' }).format(date);
|
||||
// },
|
||||
getCategoryText(id) {
|
||||
switch (id) {
|
||||
case 4:
|
||||
case 5:
|
||||
case 6:
|
||||
case 7:
|
||||
case 8:
|
||||
case 11:
|
||||
case 15:
|
||||
case 19:
|
||||
return this.$t('front_extern.result_motorrad');
|
||||
break;
|
||||
default:
|
||||
return '';
|
||||
break;
|
||||
}
|
||||
},
|
||||
getArtClass(result) {
|
||||
switch (result.fzg_art) {
|
||||
case 1:
|
||||
return 'bg-mhsecondary-orange';
|
||||
break;
|
||||
case 2:
|
||||
return 'bg-mhsecondary-cyan';
|
||||
break;
|
||||
case 3:
|
||||
return 'bg-mhsecondary-moss';
|
||||
break;
|
||||
case 4:
|
||||
default:
|
||||
return 'bg-mhsecondary-yellow';
|
||||
break;
|
||||
case 5:
|
||||
return 'bg-mhsecondary-beige';
|
||||
break;
|
||||
}
|
||||
},
|
||||
createUrl(result) {
|
||||
return this.adSlug(this.lang, result.rel_marke.Markenbezeichnung, result.rel_modelle.Modellbezeichnung, result.id);
|
||||
},
|
||||
},
|
||||
computed: {
|
||||
fahrzWoZus() {
|
||||
return this.result.rel_marke.Markenbezeichnung + ' ' + this.result.rel_modelle.Modellbezeichnung;
|
||||
},
|
||||
titleColor: function() {
|
||||
return this.settings.titleColor ? 'color: #' + this.settings.titleColor + ' !important' : '';
|
||||
},
|
||||
bgColor: function() {
|
||||
return this.settings.bgColor ? 'background-color: #' + this.settings.bgColor : '';
|
||||
},
|
||||
fontColor: function() {
|
||||
return this.settings.fontColor ? 'color: #' + this.settings.fontColor + ' !important' : '';
|
||||
},
|
||||
},
|
||||
}
|
||||
</script>
|
||||
Vendored
+26
@@ -0,0 +1,26 @@
|
||||
import { createApp } from 'vue'
|
||||
import { i18n } from './modules/i18n.js';
|
||||
import App from "./App.vue";
|
||||
|
||||
const appEl = document.createElement('div');
|
||||
appEl.setAttribute("id", "app");
|
||||
|
||||
// var src = document.getElementsByClassName('wrapperJSON');
|
||||
// if(src.length) {
|
||||
// src[0].appendChild(appEl);
|
||||
// }else{
|
||||
// const queryString = window.location.search;
|
||||
// const urlParams = new URLSearchParams(queryString);
|
||||
// var ui=urlParams.get('ui');
|
||||
// var fzl=urlParams.get('fzl');
|
||||
// const wrapper = document.createElement('div');
|
||||
// wrapper.setAttribute("class", "wrapperJSON");
|
||||
// wrapper.setAttribute("data-ui", ui);
|
||||
// wrapper.setAttribute("data-fzl", fzl);
|
||||
// wrapper.appendChild(appEl);
|
||||
// document.body.appendChild(wrapper);
|
||||
// }
|
||||
|
||||
document.body.appendChild(appEl);
|
||||
|
||||
createApp(App).use(i18n).mount('#app');
|
||||
@@ -0,0 +1,48 @@
|
||||
export default {
|
||||
methods: {
|
||||
formatPrice(price, prec=2, dots=true, label=true) {
|
||||
price = Number(price);
|
||||
if(price == 0 && label) {
|
||||
return this.$t('front_extern.on_request')
|
||||
}else{
|
||||
if(price != Math.floor(price) && prec > 0) {
|
||||
return 'CHF ' + this.splitAndPad(price.toFixed(prec));
|
||||
}
|
||||
if(dots) {
|
||||
return 'CHF ' + this.splitAndPad(price.toFixed(0)) + '.-';
|
||||
}else{
|
||||
return 'CHF ' + this.splitAndPad(price.toFixed(0));
|
||||
}
|
||||
}
|
||||
},
|
||||
splitAndPad(number) {
|
||||
number = number + '';
|
||||
var x = number.split('.');
|
||||
var x1 = x[0];
|
||||
var x2 = x.length > 1 ? '.' + x[1] : '';
|
||||
var rgx = /(\d+)(\d{3})/;
|
||||
while (rgx.test(x1)) {
|
||||
x1 = x1.replace(rgx, '$1' + '’' + '$2');
|
||||
}
|
||||
return x1 + x2;
|
||||
},
|
||||
isContentHtml(input) {
|
||||
var htmlRegex = new RegExp(/<[a-z/][\s\S]*>/i);
|
||||
return htmlRegex.test(input);
|
||||
},
|
||||
formatDate(value) {
|
||||
if(!value) {
|
||||
return '-';
|
||||
}
|
||||
const date = new Date(value);
|
||||
if(!date instanceof Date || isNaN(date)) {
|
||||
return '-';
|
||||
}
|
||||
return new Intl.DateTimeFormat("de-CH", {year: 'numeric', month: '2-digit', day: '2-digit' }).format(date);
|
||||
},
|
||||
formatNum(price, digits = 0){
|
||||
var options = { maximumFractionDigits: digits, minimumFractionDigits: digits }
|
||||
return Intl.NumberFormat("de-CH", options).format(price);
|
||||
},
|
||||
}
|
||||
};
|
||||
+42
@@ -0,0 +1,42 @@
|
||||
import { slugify } from 'transliteration';
|
||||
|
||||
export default {
|
||||
methods: {
|
||||
// CDN paths
|
||||
clientCDNPath(client, location) {
|
||||
return "https://cdn.motorradhandel.ch/media/clients/" + client + '/' + location;
|
||||
},
|
||||
adCDNPath(client, location) {
|
||||
return this.clientCDNPath(client, location) + '/ads/';
|
||||
},
|
||||
marktplatzCDNPath(client, location) {
|
||||
return this.clientCDNPath(client, location) + '/marktplatz/';
|
||||
},
|
||||
brandLogos(logo) {
|
||||
return "https://cdn.motorradhandel.ch/media/marken/images/" + logo;
|
||||
},
|
||||
|
||||
|
||||
// Slug creations
|
||||
adSlug(locale, brandName, modelName, id) {
|
||||
return '/' + locale + '/d/' + this.safeString(brandName) + '/' + this.safeString(modelName) + '/' + id;
|
||||
},
|
||||
rentalSlug(locale, brandName, modelName, id) {
|
||||
return '/' + locale + '/m/' + this.safeString(brandName) + '/' + this.safeString(modelName) + '/' + id;
|
||||
},
|
||||
clientSlug(locale, clientName, id) {
|
||||
return '/' + locale + '/h/' + this.safeString(clientName) + '/' + id;
|
||||
},
|
||||
marktplatzSlug(locale, art, title, id) {
|
||||
return '/' + locale + '/mp/' + this.safeString(art) + '/' + this.safeString(title) + '/' + id;
|
||||
},
|
||||
bikesorySlug(locale, title, brand, model, id) {
|
||||
return '/' + locale + '/stories/' + this.safeString(title) + '/' + this.safeString(brand) + '/' + this.safeString(model) + '/' + id;
|
||||
},
|
||||
|
||||
|
||||
safeString(str) {
|
||||
return slugify(str).replace(/[-\s]+/g, '-');
|
||||
},
|
||||
}
|
||||
};
|
||||
@@ -0,0 +1,10 @@
|
||||
export default {
|
||||
methods: {
|
||||
getDefaultImage(category = 1) {
|
||||
return "https://cdn.motorradhandel.ch/media/categories/def_images/motorradhandel_missing_image_" + category + ".png";
|
||||
},
|
||||
getDefaultMPImage(category = 1) {
|
||||
return "https://cdn.motorradhandel.ch/media/categories/def_images/motorradhandel_mp_missing_image_" + category + ".png";
|
||||
},
|
||||
}
|
||||
};
|
||||
+28
@@ -0,0 +1,28 @@
|
||||
import { useI18n, createI18n } from 'vue-i18n';
|
||||
import axios from 'axios'
|
||||
|
||||
|
||||
export const i18n = createI18n({
|
||||
locale: 'de',
|
||||
fallbackLocale: 'de',
|
||||
allowComposition: true,
|
||||
})
|
||||
|
||||
const loadedLanguages = []
|
||||
|
||||
function setI18nLanguage (i18n, lang) {
|
||||
if (i18n.mode === 'legacy') {
|
||||
i18n.global.locale = lang
|
||||
} else {
|
||||
i18n.global.locale.value = lang
|
||||
}
|
||||
axios.defaults.headers.common['Accept-Language'] = lang
|
||||
document.querySelector('html').setAttribute('lang', lang)
|
||||
return lang
|
||||
}
|
||||
|
||||
export const loadLanguage = function(i18n, lng, texts) {
|
||||
loadedLanguages.push(lng)
|
||||
i18n.global.setLocaleMessage(lng, texts)
|
||||
setI18nLanguage(i18n, lng)
|
||||
}
|
||||
Reference in New Issue
Block a user