ostandari/pages/_portal/graphics/_graphic.vue

<template>
  <section class="graphic-details">
    <div class="container">
      <div class="row">
        <div class="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="row mb-4">
          <div class="col-12 img-graphic">
            <img style="width : 100%" :src="info.graphic" alt="">
          </div>
        </div>
      </div>
    </div>

    <div class="s2" v-if="related.length">
      <h3>مطالب مرتبط</h3>

      <div id="slides">
        <div class="slide" v-for="item in related" :key="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>
        </div>
      </div>
    </div>

  </section>
</template>

<script>
import moment from 'moment-jalaali'

export default {
  data() {
    return {
      info: null,
      galleryShown: false,
      initialIndex: 0,
      related: []
    }
  },
  mounted() {
    $(document).ready(() => {
      new SimpleLightbox('.graphic-details .img-graphic a')
      $("#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')
    }
  },
  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 data = await $axios.get(`/api/public/getGallery/${encodeURIComponent(params.graphic)}`)
      let related = await $axios.get(`/api/public/getRelatedGallery`, {
        params: {
          type: 'graphic',
          title: params.graphic
        }
      })
      return {
        info: data.data,
        related: related.data
      }
    } catch (err) {
      error({status: 404, message: 'دریافت اطلاعات با مشکل مواجه شده است!'})
    }
  }

}
</script>