NUXT_FRONTEND/components/Catalog/Item.vue

<template>
  <li class="catalog-list__item">
    <div class="catalog-item">
      <component v-bind="linkProps(categoryNews)" class="catalog-item__link">
        <aside class="catalog-item__side">
          <div class="catalog-item__figure">
            <img
              class="catalog-item__img"
              :src="categoryNews.image ? categoryNews.image.url : ''"
              :alt="categoryNews.image ? categoryNews.image.title : ''"
            />
          </div>
        </aside>
        <main class="catalog-item__main">
          <div class="catalog-item__main-top">
            <div class="catalog-item__main-title">
              <img
                v-if="categoryNews.lightning"
                :src="require('~/static/svg/styled/lightning.svg')"
              />
              <span v-html="categoryNews.title"></span>
            </div>
          </div>
          <div class="catalog-item__main-bottom">
            <div class="catalog-item__main-info">
              <div class="catalog-item__main-info-element">
                {{
                  categoryNews.start_activity
                    ? convertDate(categoryNews.start_activity)
                    : ""
                }}
              </div>
              <!-- <div class="catalog-item__main-info-element">
                <span> <BaseIcon :name="'views'" /></span>
                <span> {{ categoryNews.views_counter? categoryNews.views_counter : '' }} </span>
              </div> -->
              <div
                class="catalog-item__main-info-element"
                v-if="categoryNews.comments_count"
              >
                <span> <BaseIcon :name="'comments'" clear /></span>
                <span>
                  {{
                    categoryNews.comments_count
                      ? categoryNews.comments_count
                      : ""
                  }}
                </span>
              </div>
            </div>
          </div>
        </main></component
      >
      <div class="catalog-item__banner" v-if="i == 5">
        <BannersW640H360 />
      </div>
    </div>
  </li>
</template>

<script>
export default {
  components: {},
  props: {
    categoryNews: {
      type: Object,
    },
    i: {
      type: Number,
    },
  },
  methods: {
    linkProps(news) {
      if(news.link) return {
        is: 'a',
        href: news.link,
        target: '_blank',
      }

      else return {
        is: 'nuxt-link',
        to: this.params(news)
      }
    },

    params(news) {
      if (news.category.alias == "articles") {
        return {
          name: "articles-alias",
          params: {
            category: "articles",
            alias: news.alias,
          },
        };
      } else {
        return {
          name: "news-category-alias",
          params: {
            category: news.category.alias,
            alias: news.alias,
          },
        };
      }
    },
    convertDate(dateTampstamp) {
      const date = new Date(dateTampstamp * 1000);
      const dateString =
        date.toLocaleString("ru", {
          day: "numeric",
          month: "long",
        }) +
        " " +
        date.getFullYear() +
        ", " +
        ("0" + date.getHours()).slice(-2) +
        ":" +
        ("0" + date.getMinutes()).slice(-2);
      return dateString;
    },
  },
};
</script>

<style>
</style>