205 lines
8.8 KiB
Vue
205 lines
8.8 KiB
Vue
<template>
|
|
<a href="#" @click.prevent="$emit('detailClick', result.id)" class="newListeItem ListeField goToDetail">
|
|
<div :style="[bckgrColor('divBgColor')]">
|
|
<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_' + $store.state.settings.lang] + ' ' + result.rel_art['bezeichnung_' + $store.state.settings.lang]"
|
|
:title="result.rel_marke.Markenbezeichnung + ' ' + result.rel_modelle.Modellbezeichnung + ' ' + result.rel_category['bezeichnung_' + $store.state.settings.lang] + ' ' + result.rel_art['bezeichnung_' + $store.state.settings.lang]"
|
|
:result="result"
|
|
class=""
|
|
/>
|
|
</div>
|
|
<div class="ListeCol newListeTitleDetailsContainer" :style="color('fontColor')">
|
|
<div class="newListeTitleDetailsFirst" style="width:500px;">
|
|
<span v-html="fahrzWoZus" :style="color('titleColor')" class="newListeTitletext mobileTruncate"></span>
|
|
<br>
|
|
</div>
|
|
<div class="newListeTitleDetailsSecond">
|
|
<template v-if="$store.state.settings.srchParObj.rental">
|
|
<span v-if="result.mietkonditionen && result.mietkonditionen.miete_tag" class="exportShowMobile">
|
|
{{ $t("front_extern.ab") }} <b>{{formatPrice(result.mietkonditionen.miete_tag, 0)}} / {{ $t("front_extern.day") }}</b>
|
|
</span>
|
|
</template>
|
|
<span v-else class="exportShowMobile"><b>{{formatPrice(result.fzg_preis, 0)}}</b></span>
|
|
{{result.rel_art['bezeichnung_' + $store.state.settings.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_' + $store.state.settings.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 > 0)">
|
|
{{ $t("front_extern.oder") }}
|
|
</template>
|
|
<template v-if="(result.garantie_km > 0)">
|
|
{{ 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 > 0)">
|
|
{{ $t("front_extern.oder") }}
|
|
</template>
|
|
<template v-if="(result.garantie_km > 0)">
|
|
{{ 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_' + $store.state.settings.lang]}}
|
|
</span>
|
|
<span class="hide-mob"> |</span> {{ result.rel_farbe['bezeichnung_' + $store.state.settings.lang] }}
|
|
</div>
|
|
</div>
|
|
<div class="ListeCol exportShowNormal" style="width: 12px;" :style="color('fontColor')">
|
|
<span style="border-left: 1px solid #ccc; display: block; height: 100px; margin-right: 10px;"> </span>
|
|
</div>
|
|
<div class="ListeCol newListePriceDetailsContainer exportShowNormal" :style="color('fontColor')">
|
|
<template v-if="$store.state.settings.srchParObj.rental">
|
|
<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>
|
|
<template v-else>
|
|
<template v-if="result.fzg_rubrik_vermietung == 0 || (result.fzg_rubrik_vermietung == 1 && result.inserat_status_vermietet_anzeigen == 1)" class="price beschNormal">
|
|
<span v-if="result.actualprice != result.fzg_preis" class="newListePriceDetailsContainerFirst">
|
|
{{ $t("front_extern.special_price") }}: <b>{{formatPrice(result.actualprice, 0)}}</b><br />
|
|
{{ $t("front_extern.normal_price") }}: <span class="strikethrough">{{formatPrice(result.fzg_preis, 0)}}</span><br />
|
|
{{ $t("front_extern.special_price_bis") }}: {{formatDate(result.fzg_preis_aktion_bis)}}
|
|
</span>
|
|
<span v-else-if="result.actualprice > 0" class="newListePriceDetailsContainerFirst">
|
|
{{ $t("front_extern.price") }}: <b>{{formatPrice(result.actualprice, 0)}}</b>
|
|
</span>
|
|
<span v-else class="newListePriceDetailsContainerFirst">
|
|
{{ $t("front_extern.price") }}: {{ $t('front_extern.price_on_request') }}
|
|
</span>
|
|
</template>
|
|
<template v-if="result.fzg_rubrik_vermietung == 1">
|
|
<span v-if="result.mietkonditionen && result.mietkonditionen.miete_tag" class="newListePriceDetailsContainerFirst">
|
|
<br />
|
|
{{ $t("front_extern.mietbar_ab") }}: <b>{{formatPrice(result.mietkonditionen.miete_tag, 0)}} / {{ $t("front_extern.day") }}</b>
|
|
</span>
|
|
</template>
|
|
</template>
|
|
<span v-if="$store.state.locations.length > 1" class="newListePriceDetailsContainerLocation">
|
|
{{ $t("front_extern.standort") }}: {{ result.standort.firma_name }}
|
|
</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'],
|
|
components: {
|
|
'result-image': ResultImage
|
|
},
|
|
data() {
|
|
return {
|
|
}
|
|
},
|
|
methods: {
|
|
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.$store.state.settings.lang, result.rel_marke.Markenbezeichnung, result.rel_modelle.Modellbezeichnung, result.id);
|
|
},
|
|
},
|
|
computed: {
|
|
fahrzWoZus() {
|
|
return this.result.rel_marke.Markenbezeichnung + ' ' + this.result.rel_modelle.Modellbezeichnung;
|
|
},
|
|
},
|
|
}
|
|
</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);
|
|
}
|
|
span.newListePriceDetailsContainerLocation {
|
|
font-size: 15px;
|
|
display: inherit;
|
|
font-weight: 400;
|
|
padding-top: 20px;
|
|
|
|
}
|
|
</style> |