ostandari/pages/_portal/gallery/_media.vue

<template>
  <div class="gallery-details">
    <section class="container">
      <div class="row">
        <div class="col-12 view-date">
          <p class="date">{{ jalali(info.customDate || info.created_at) }}</p>
          <p class="date">{{ jDate(info.customDate || info.created_at) }}</p>
        </div>
        <div v-if="info.summaryTitle" class="col-12 col-md-6">
          <h2 class="summry-title mt-3">
            {{ info.summaryTitle }}
          </h2>
        </div>
        <div class="col-12">
          <h1 class="title">
            {{ info.title }}
          </h1>
        </div>

        <div v-if="info.leadTitle" class="col-12">
          <p class="summry-title mb-4">
            {{ info.leadTitle }}
          </p>
        </div>

        <div class="col-12 user-info">
          <div class="row">
            <div class="col-12 col-md-6">
              <span>توسط {{ info._creator.firstName + ' ' + info._creator.lastName }}</span>
              <span class="date"> - {{ jDate2(info.customDate || info.created_at) }}</span>
            </div>
            <div class="col-12 col-md-6 item2">
              <el-popover
                  placement="top-start"
                  title=""
                  trigger="hover"
                  :value="autoPlayNotice"
                  content="نمایش پشت سرهم تصاویر">
                <button class="btn btn-primary" slot="reference" @click="autoPlay"><i class="fas fa-play"></i></button>
              </el-popover>
            </div>
          </div>
        </div>
        <div class="col-12 mb-4">
          <div class="row">
            <div class="col-12 img-gallery">
              <a :href="info.cover">
                <img style="width : 100%" :src="info.thumbCover" alt="">
              </a>
            </div>
            <template v-for="(item , index) in info.images">
              <div :key="item._id" class="col-12 col-md-2 mt-4 img-gallery">
                <a :href="item">
                  <img style="width : 100%" :src="info.thumbImages[index]" alt="">
                </a>
              </div>
            </template>
          </div>
        </div>
      </div>
    </section>
    <section class="s2" v-if="related.length">
      <h3>مطالب مرتبط</h3>

      <div id="slides">
        <nuxt-link
            class="slide"
            v-for="item in related"
            :key="item._id"
            :to="{name: 'portal-gallery-media',params: {portal: $route.params.portal,media: item._id}}"
        >
          <div class="view-txt">
            <div>
              <p class="h3">{{ item.title }}</p>
              <p>{{ item.summaryTitle }}</p>
              <div class="date">
                <span>{{ jalali(item.customDate || item.created_at) }}</span>
                <span>توسط {{ item._creator.firstName + ' ' + item._creator.lastName }}</span>
              </div>
            </div>
          </div>
        </nuxt-link>
      </div>
    </section>
  </div>
</template>

<script>
import moment from 'moment-jalaali'

if (process.client) require("slick-carousel")
export default {
  data() {
    return {
      info: null,
      galleryShown: false,
      autoPlayNotice: false,
      initialIndex: 0,
      related: []
    }
  },
  mounted() {
    setTimeout(() => this.autoPlayNotice = true, 4000)
    setTimeout(() => this.autoPlayNotice = false, 7000)
    $(document).ready(() => {
      new SimpleLightbox('.gallery-details .img-gallery a')
      // $('.img-gallery a').simpleLightbox({
      //
      // });

      $("#slides").slick({
        dots: true,
        slidesToShow: this.related.length === 1 ? 1 : 2,
        rtl: true,
        responsive: [
          {
            breakpoint: 960,
            settings: {
              slidesToShow: 2,
              slidesToScroll: 1,
              infinite: true,
              dots: true
            }
          },
          {
            breakpoint: 720,
            settings: {
              slidesToShow: 2,
              slidesToScroll: 1
            }
          },
          {
            breakpoint: 540,
            settings: {
              slidesToShow: 1,
              slidesToScroll: 1
            }
          }
        ]
      })
    })
  },
  methods: {
    jalali(date) {
      return moment(date).locale('fa').fromNow()
    },
    jDate(date) {
      return moment(date).locale('fa').format('LL')
    },
    jDate2(date) {
      return moment(date).locale('fa').format('a h:mm - jYYYY/jMM/jDD')
    },
    autoPlay() {
      let gallery = new SimpleLightbox('.gallery-details .img-gallery a')
      gallery.open()
      setInterval(() => gallery.next(), 3000)
    }

  },
  head() {
    return {
      title: 'جزئیات تصویر',
      meta: [
        {
          hid: 'description',
          name: 'description',
          content: this.info.summaryTitle
        },
        {
          hid: 'keywords',
          name: 'keywords',
          content: this.info.keywords
        }
      ]
    }
  },
  async asyncData({params, error, $axios}) {
    try {
      let info = await $axios.get(`/api/public/getGallery/${encodeURIComponent(params.media)}`)
      let related = await $axios.get(`/api/public/getRelatedGallery`, {
        params: {
          type: 'image',
          title: params.media
        }
      })
      return {
        info: info.data,
        related: related.data
      }
    } catch (err) {
      error({status: 404, message: 'دریافت اطلاعات با مشکل مواجه شده است!'})
    }
  }

}
</script>