NUXT_FRONTEND/pages/news/index.vue

<template>
  <section class="catalog section">
    <div class="catalog__wrapper section-wrapper">
      <div class="catalog__container">
        <CatalogMenu />
        <main class="catalog__main">
          <div class="catalog-main">
            <div class="catalog-main__wrapper">
              <div class="catalog-main__topic">
                <ul class="catalog-main__topic-list">
                  <li class="catalog-main__topic-item">
                    <a
                      class="catalog-main__topic-link"
                      href="javascript:void(0)"
                      >Новости</a
                    >
                  </li>
                  <li class="catalog-main__topic-item">
                    <nuxt-link
                      to="/news?page=1"
                      class="catalog-main__topic-link"
                      href="javascript:void(0)"
                    ></nuxt-link>
                  </li>
                </ul>
              </div>
              <div class="catalog-main__header">
                <h1 class="catalog-main__title">Новости</h1>

                <div
                  class="catalog-main__filter"
                  @click="$modal.show('filter-modal')"
                >
                  <BaseIcon name="filter"></BaseIcon>
                </div>

                <!-- <a
                  class="
                    catalog-main__subscribe
                    button button_grey-dark button_grey-dark-short
                  "
                  ><span class="button__text">Подписаться</span></a
                > -->
              </div>
              <div class="catalog-main__list">
                <div class="catalog-list">
                  <CatalogList
                    :categoryNewsList="categoryNewsList.news"
                    :pages="categoryNewsList.total_pages"
                    @loadMore="onLoadMore"
                  />
                </div>
              </div>
            </div>
          </div>
        </main>
      </div>
    </div>

    <CatalogFilter @apply="onApplyFilter" :filter="filter"></CatalogFilter>
  </section>
</template>

<script>
import { mapGetters } from "vuex";
export default {
  watchQuery: ["pagination", "date_start", "date_end"],

  data: () => ({
    filter: {
      date: null,
    },
  }),

  computed: {
    ...mapGetters({
      newsItem: "modules/news/newsItem",
      categoryNewsList: "modules/news/categoryNewsList",
    }),
  },
  props: {
    category: {
      type: Object,
    },
  },
  head() {
    return {
      title: "Лента новостей",
      meta: [
        {
          name: "description",
          content:
            "Все основные новости Алтайского края, Барнаула, России и мира подобранные для вас вопросы и ответы.",
        },
        {
          name: "keys",
          content:
            "Все основные новости Алтайского края, Барнаула, России и мира подобранные для вас вопросы и ответы.",
        },
      ],
      link: [
        {rel: 'canonical', href: 'https://www.amic.ru/news'}
      ]
    };
  },
  beforeRouteEnter(to, from, next) {
    next();
  },

  methods: {
    onApplyFilter() {
      const [date_start = "", date_end = ""] = this.filter.activity;

      this.$router.push({
        name: this.$route.name,
        query: { pagination: 1, date_start, date_end },
      });
      this.$modal.hide("filter-modal");
    },

    async onLoadMore(loadMoreCounter,filter = {}) {
      var payload = Object.assign({
          category: false,
          pagination: loadMoreCounter,
          filter: filter
        });
      await this.$store.dispatch("modules/news/loadCategoryNews", payload);
    },
  },

  async fetch({ store, route }) {
    await store.dispatch("modules/news/setCategoryNewsList", {
      category: false,
      pagination: route.query.pagination || 1,

      filter: {
        date_start: route.query.date_start || null,
        date_end: route.query.date_end || null,
      },
    });

    await store.dispatch("modules/news/setCategoriesList");
  },
  async asyncData({ store }) {
    await store.dispatch("modules/ads/getAds");
  },
};
</script>

<style>
</style>