asan-service/pages/download/index.vue

<template>
  <div class="download--page page">
    <hero title="دانلود ها" />
    <section class="s1">
      <div class="container">
        <div class="row">
          <div class="col-12">
            <div class="filters">
              <ul>
                <nuxt-link tag="li" :to="{ name: 'download', query: { category: 'all', page: 1 } }">
                  <a :class="$route.query.category === 'all' ? 'active' : null">همه</a>
                </nuxt-link>

                <nuxt-link
                  v-for="item in dCategories"
                  :key="item._id"
                  tag="li"
                  :to="{ name: 'download', query: { category: item.name, page: 1 } }"
                >
                  <a :class="$route.query.category === item.name ? 'active' : null">{{ item.name }}</a>
                </nuxt-link>
              </ul>
            </div>
          </div>
        </div>
      </div>
    </section>
    <section class="s2">
      <div class="container">
        <div class="row align-items-stretch">
          <div v-for="item in topPartList" :key="item._id" class="col-12 col-xxl-6 mb-3">
            <div class="item fadeInAnim">
              <div class="imgBox">
                <img :src="item.image" :alt="item.title" />
              </div>
              <div class="txtBox">
                <h2>
                  <b>{{ item.title }}</b>
                  <span>{{ categoryName(item.category) }}</span>
                </h2>
                <p>{{ item.short_description }}</p>
                <nuxt-link :to="{ name: 'download-item+', params: { item: item.title } }" class="btn btn-primary"
                  >ادامه مطلب</nuxt-link
                >
              </div>
            </div>
          </div>

          <!-- untrack -->
          <div v-if="downloads.docs.length >= 4" class="col-12">
            <div class="untrack">
              <h3>جدیدترین ها:</h3>
              <div class="row">
                <div v-for="item in downloads_newest" :key="item._id + '_special'" class="col-12 col-lg-4 mb-3 mb-lg-0">
                  <div class="latest fadeInAnim">
                    <div class="normal">
                      <img :src="item.image" :alt="item.title" />
                      <h2>{{ item.title }}</h2>
                    </div>
                    <div class="hover">
                      <h2>{{ item.title }}</h2>
                      <p>{{ item.short_description }}</p>
                      <nuxt-link :to="{ name: 'download-item+', params: { item: item.title } }" class="btn btn-primary"
                        >ادامه مطلب
                      </nuxt-link>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
          <!-- untrack -->

          <div v-for="item in bottomPartList" :key="item._id" class="col-12 col-xxl-6 mb-3">
            <div class="item fadeInAnim">
              <div class="imgBox">
                <img :src="item.image" :alt="item.title" />
              </div>
              <div class="txtBox">
                <h2>
                  <b>{{ item.title }}</b>
                  <span>{{ categoryName(item.category) }}</span>
                </h2>
                <p>{{ item.short_description }}</p>
                <nuxt-link :to="{ name: 'download-item+', params: { item: item.title } }" class="btn btn-primary"
                  >ادامه مطلب</nuxt-link
                >
              </div>
            </div>
          </div>

          <div v-if="!downloads.docs.length" class="col-12 no-post">
            <h2>چیزی برای دانلود در این صفحه وجود نداد.</h2>
          </div>
        </div>
      </div>
    </section>
    <section class="s3">
      <div class="row">
        <div class="col-12">
          <el-pagination
            v-if="paginate"
            layout="prev, pager, next"
            :current-page="Number($route.query.page)"
            :page-count="Number(downloads.totalPages)"
            @current-change="pageNumber"
          >
          </el-pagination>
        </div>
      </div>
    </section>
  </div>
</template>

<script>
import FadeInAnimation from '~/mixins/FadeInAnimation'

export default {
  name: 'DownloadsListPage',
  mixins: [FadeInAnimation],
  async asyncData({ $axios, query, error }) {
    try {
      const allData = await Promise.all([
        // fetch download categories
        $axios.get(`/api/public/dCategory`),
        // fetch downloads
        $axios.get(`/api/public/downloads/page/${encodeURIComponent(query.category)}/${query.page}`)
      ])

      const dCategories = allData[0]
      const downloads = allData[1]
      let downloads_newest = []
      if (downloads.data.docs.length >= 4) downloads_newest = await $axios.get(`/api/public/downloads-newest`)
      return {
        dCategories: dCategories.data,
        downloads: downloads.data,
        downloads_newest: downloads_newest.data || downloads_newest
      }
    } catch (e) {
      error({ status: 404, message: 'There is a problem here' })
    }
  },
  data() {
    return {
      dCategories: null,
      downloads: null,
      downloads_newest: null,
      partSize: 4
    }
  },
  head() {
    return {
      title: 'آسان سرویس | دانلود ها'
    }
  },
  computed: {
    paginate() {
      return this.downloads.totalPages > 1
    },
    pageQueries() {
      return this.$route.query.page + this.$route.query.category
    },
    topPartList() {
      return this.downloads.docs.filter((item, index) => index < this.partSize)
    },
    bottomPartList() {
      return this.downloads.docs.filter((item, index) => index >= this.partSize)
    }
  },
  watch: {
    pageQueries(newVal, oldVal) {
      this.$nuxt.refresh()
      $(window).scrollTop(0)
    }
  },
  methods: {
    pageNumber(val) {
      this.$router.push({ name: 'download', query: { category: this.$route.query.category, page: val } })
    },
    categoryName(id) {
      return this.dCategories.find(item => item._id === id)?.name
    }
  }
}
</script>