External-lists/resources/vue/extMPPages/components/ResultItem.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.inserat_artikel_titel"
          :title="result.inserat_artikel_titel"
          :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">
          <span class="exportShowMobile"><b>0 - {{formatPrice(result.fzg_preis, 0)}}</b></span>
          {{result.rel_art['bezeichnung_' + $store.state.settings.lang]}} <br>
          #<span>{{ result.ident_nr_artikel }}</span>
          <br>
          <span>{{ result.rel_zustand['bezeichnung_' + $store.state.settings.lang] }}</span>
          <template v-if="result.rel_models.length > 0">
            <br>
            <span>{{ result.rel_models[0].rel_brand.Markenbezeichnung }} {{ result.rel_models[0].rel_modell.Modellbezeichnung }}</span>
            <span style="text-transform: none;" v-if="result.rel_models.length > 1">&nbsp;{{ $t("front_externMP.andMore") }}</span>
          </template>
        </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;">&nbsp;</span>
      </div>
      <div class="ListeCol newListePriceDetailsContainer exportShowNormal" :style="color('fontColor')">
        <span v-if="result.inserat_artikel_preis_katalog && result.inserat_artikel_preis_katalog > 0" class="newListePriceDetailsContainerFirst">
          {{ $t("front_externMP.special_price") }}: <b>{{formatPrice(result.inserat_artikel_preis_verkauf, 0)}}</b><br />
          {{ $t("front_externMP.normal_price") }}: <span class="strikethrough">{{formatPrice(result.inserat_artikel_preis_katalog, 0)}}</span><br />
        </span>
        <span v-else-if="result.actualprice > 0" class="newListePriceDetailsContainerFirst">
          {{ $t("front_externMP.price") }}: <b>{{formatPrice(result.inserat_artikel_preis_verkauf, 0)}}</b>
        </span>
        <span v-else class="newListePriceDetailsContainerFirst">
          {{ $t("front_externMP.price") }}: {{ $t('front_externMP.price_on_request') }}
        </span>
        <span v-if="$store.state.locations.length > 1" class="newListePriceDetailsContainerLocation">
          {{ $t("front_externMP.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_externMP.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.marktplatzSlug(this.$store.state.settings.lang, result.inserat_art, result.inserat_artikel_titel, result.id);
      },
      getFirstModel(obj) {
        console.log(obj)
        var t = obj[0];
        console.log(obj[0]);
        console.log(t.id);
      },
    },
    computed: {
      fahrzWoZus() {
        return this.result.inserat_artikel_titel;
      },
  },
  }
</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>