NUXT_FRONTEND/pages/search.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="{
                        name: 'news-category',
                        params: {
                          category: categoryNewsList.category
                            ? categoryNewsList.category.alias
                            : '',
                        },
                      }"
                      class="catalog-main__topic-link"
                      href="javascript:void(0)"
                    >
                      Поиск</nuxt-link
                    >
                  </li>
                </ul>
              </div>
              <div class="catalog-main__header">
                <h1>Поиск</h1>
              </div>
              <div class="catalog-main__list">
                <div class="catalog-list" id="catalogList">
                  <BaseInput
                    class="search__input"
                    v-model="string"
                    @input="searchTrigger"
                  ></BaseInput>
                   <li class="catalog-list__item" v-for="searchItem in searchList" :key="searchItem.id">
                      <div class="catalog-item">
                        <nuxt-link
                          :to="{
                            name: 'news-category-alias',
                            params: {
                              category: searchItem.category.alias,
                              alias: searchItem.alias,
                            },
                          }"
                          class="catalog-item__link"
                        >
                          <main class="catalog-item__main">
                            <div class="catalog-item__main-top">
                              <div class="catalog-item__main-title" v-html="searchItem.title"></div>
                            </div>
                            <div class="catalog-item__main-bottom">
                              <div class="catalog-item__main-info">
                                <div class="catalog-item__main-info-element">
                                  {{ searchItem.start_activity ? convertDate(searchItem.start_activity) : ''}}
                                </div>
                              </div>
                            </div>
                          </main></nuxt-link>
                      </div>
                    </li>
                </div>
              </div>
              <Pagination
                v-if="searchList.length"
                v-model="curPage"
                :length="paginationLength"
                @input="nextPage"
                :visible="10"
              ></Pagination>              
            </div>
          </div>
        </main>
      </div>
    </div>
  </section>
</template>

<script>
import { mapGetters } from "vuex";
let delayTimer;
export default {
  props: {
    query: {
      type: String
    }
  },
  data() {
    return {
      string: "",
      searchList: [],
      curPage: 1,
      totalPages: null
    };
  },
  computed: {
    ...mapGetters({
      categoryNewsList: "modules/news/categoryNewsList",
    }),

     paginationLength() {
      if(this.curPage < 10) return 10;
      return this.curPage + 5;
     }
  },
  props: {
    category: {
      type: Object,
    },
  },
  mounted() {
    this.string = this.$route.params.query
    this.searchTrigger()
  },

  methods: {
    nextPage() {
      this.searchTrigger();
      this.scrollTop();
    },

    scrollTop() {
      const element = document.getElementById("catalogList");
      const top = element.offsetTop;
      window.scrollTo(0, top - 230);
    },

    searchTrigger() {
      clearTimeout(delayTimer);
      delayTimer = setTimeout(() => {
        this.$axios
          .post("search", {
            request: this.string,
            page: this.curPage
          })
          .then((res) => {
            if (res.status == 200) {
              const { items, total_pages } = res.data.data;
              this.searchList = items;
              this.totalPages = total_pages;
            }
          });
      }, 600);
    },
    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;
    },
  },
  async fetch({ store, route }) {
    await store.dispatch("modules/news/setCategoriesList");
  },
  async asyncData({ store }) {
    await store.dispatch("modules/ads/getAds");
  },

  head() {
    return {
      title: 'Поиск по сайту — Амик.ру'
    }
  }
};
</script>

<style lang="less" scoped>
.catalog-list{
  list-style: none;
  &__item{

  }
}
.search {
  &__input {
    width: 100%;
    max-width: 100%;
    height: 41px;
    display: flex;
    align-items: center;
    margin-bottom: 20px;

    input {
        width: 100%;
        outline: none;
        height: 100%;
    }
  }
}
</style>