ostandari/pages/_portal/gallery/index.vue

<template>
  <div class="gallery-page">
    <div class="container">
      <div class="row">
        <div class="col-12 col-md-9">
          <h3 class="gallery-title">عکس</h3>
          <div>
            <div class="row">
              <div class="col-12 mb-5 sectionStyle">
                <div class="gallery-item1" v-if="gallery && gallery.hero">
                  <nuxt-link :to="{name: 'portal-gallery-media', params: {portal: currentPortal, media: gallery.hero._id}}" class="gallery-img-box1">
                    <img :src="gallery.hero.thumbCover" alt="" class="gallery-img1">
                    <div class="gallery-detail-item1">
                      <h3 class="gallery-detail-title1">{{ gallery.hero.title }}</h3>
                      <p class="gallery-detail-date1">{{ jDate(gallery.hero.customDate || gallery.hero.created_at) }}</p>
                    </div>
                  </nuxt-link>
                </div>

                <div class="gallery-item1" v-else-if="gallery && gallery.all && gallery.all.docs && gallery.all.docs.length">
                  <nuxt-link :to="{name: 'portal-gallery-media', params: {portal: currentPortal, media: gallery.all.docs[0]._id}}" class="gallery-img-box1">
                    <img :src="gallery.all.docs[0].thumbCover" alt="" class="gallery-img1">
                    <div class="gallery-detail-item1">
                      <h3 class="gallery-detail-title1">{{ gallery.all.docs[0].title }}</h3>
                      <p class="gallery-detail-date1">{{ jDate(gallery.all.docs[0].customDate || gallery.all.docs[0].created_at) }}</p>
                    </div>
                  </nuxt-link>
                </div>
              </div>
              <div class="col-12" v-if="gallery && gallery.all && gallery.all.docs && !gallery.all.docs.length">
                <div class="not-found">
                  <p>موردی وجود ندارد!</p>
                </div>
              </div>

              <div class="col-12 col-sm-6 col-md-3 mb-3 sectionStyle" v-for="(item, index) in gallery.all.docs" :key="item._id" v-if="index > 0">
                <div class="gallery-item">
                  <nuxt-link :to="{name: 'portal-gallery-media', params: {portal: currentPortal, media: item._id}}" class="gallery-img-box">
                    <img :src="item.thumbCover" alt="" class="gallery-img">
                  </nuxt-link>
                  <div class="gallery-detail-item">
                    <h3 class="gallery-detail-title">{{ item.title }}</h3>
                    <p class="gallery-detail-date" id="gallery-detail-date">{{ jDate(item.customDate || item.created_at) }}</p>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>

        <div class="col-12 col-md-3">
          <h3 class="gallery-side">برگزیده ها</h3>
          <div class="sectionStyle" v-if="gallery && gallery.favorites && gallery.favorites.length">
            <div class="row">
              <div class="col-12 col-sm-6 col-md-12 mb-3" v-for="(item, index) in gallery.favorites" :key="item._id" v-if="index < 5">
                <div class="gallery-item ">
                  <nuxt-link :to="{name: 'portal-gallery-media', params: {portal: currentPortal, media: item._id}}" class="gallery-img-box">
                    <img :src="item.thumbCover" alt="" class="gallery-img">
                  </nuxt-link>
                  <div class="gallery-detail-item">
                    <h3 class="gallery-detail-title">{{ item.title }}</h3>
                    <p class="gallery-detail-date" id="gallery-detail-date2">{{ jDate(item.customDate || item.created_at) }}</p>
                  </div>
                </div>
              </div>
            </div>
          </div>
          <div class="not-found" v-if="gallery && gallery.favorites && !gallery.favorites.length">
            <p>موردی وجود ندارد!</p>
          </div>
        </div>
      </div>
      <div class="paginate">
        <div class="row">
          <div class="col-12">
            <el-pagination
                layout="next, pager, prev"
                v-if="gallery && gallery.all && gallery.all.totalPages > 1"
                class="el-pagination"
                @current-change="pageNumber"
                :current-page="Number($route.query.page)"
                :page-count="Number(gallery.all.totalPages)"
            >
            </el-pagination>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import moment from "moment-jalaali"

export default {
  data() {
    return {
      gallery: null
    }
  },
  computed: {
    currentPortal() {
      return this.$route.params.portal
    },
    pageQuery() {
      return this.$route.query.page
    },
  },
  watch: {
    pageQuery(newVal, oldVal) {
      this.$nuxt.refresh()
    },
  },
  methods: {
    jDate(date) {
      return moment(date).locale('fa').format('LL')
    },
    pageNumber(val) {
      this.$router.push({
        name: 'portal-gallery',
        params: {portal: this.currentPortal},
        query: {type: 'image', page: val}
      })
      $(window).scrollTop(0)
    },
  },
  async asyncData({params, query, error, $axios}) {
    try {
      const portalQuery = params.portal
      const data = await $axios.get(`/api/public/getAllGallery?portal=${portalQuery}&type=${query.type}&page=${query.page}`)
      return {
        gallery: data.data
      }
    } catch (e) {
      error({status: 404})
    }
  }
}
</script>