ostandari/pages/_portal/newsfile/_details.vue

<template>
  <section class="news-file-details">
    <section class="s1 mb-3">
      <div class="container">
        <LineTxt :label="newsFile.newsFile.title"/>
        <div class="sectionStyle">
          <div class="row" v-if="newsFile.news.docs.length">

            <div class="col-12 col-md-6">
              <img :src="newsFile.news.docs[0].thumbCover" class="img-hold" :alt="newsFile.news.docs[0].title">
            </div>
            <div class="news_holder col-12 col-md-6">
<!--              <h2 class="s1-title" :title="newsFile.news.docs[0].summaryTitle">{{ newsFile.news.docs[0].summaryTitle }}</h2>-->
              <p class="s1-description mb-4 mt-4" :title="newsFile.news.docs[0].title">{{ newsFile.news.docs[0].title }}</p>
              <p class="s1-description lid" :title="newsFile.news.docs[0].leadTitle">{{ newsFile.news.docs[0].leadTitle }}</p>
              <div class="date">
                <p>{{ jDate(newsFile.news.docs[0].customDate) }}</p>
              </div>
              <nuxt-link
                  :to="{name: 'portal-news-details',
                params: {portal: currentPortal, details: newsFile.news.docs[0]._id}}" class="btn btn-primary">
                <span>ادامه مطلب</span>
              </nuxt-link>
            </div>

          </div>
          <div class="not-found" v-else>
            <p>موردی وجود ندارد!</p>
          </div>
        </div>
      </div>
    </section>

    <section class="s2" v-if="newsFile.news.docs.length > 1">
      <div class="container">
<!--        <LineTxt label="سایر اخبار"/>-->
        <div class="sectionStyle">
          <div class="row">

<!--            <div class="col-12 col-md-9 mb-3 bigNews">-->
<!--              <div class="row">-->
<!--                <div class="col-12 order-1 col-md-4 order-md-0">-->
<!--&lt;!&ndash;                  <h2 class="s2-title1" :title="newsFile.news.docs[1].summaryTitle">{{ newsFile.news.docs[1].summaryTitle }}</h2>&ndash;&gt;-->
<!--                  <p class="desc" :title="newsFile.news.docs[1].title">{{ newsFile.news.docs[1].title }}</p>-->
<!--                  <p class="desc" :title="newsFile.news.docs[1].leadTitle">{{ newsFile.news.docs[1].leadTitle }}</p>-->
<!--                  <div class="date">-->
<!--                    <p>{{ jDate(newsFile.news.docs[1].customDate) }}</p>-->
<!--                  </div>-->
<!--                  <nuxt-link-->
<!--                      :to="{name: 'portal-news-details',params: {portal: currentPortal, details: newsFile.news.docs[1]._id}}"-->
<!--                      class="btn btn-primary">-->
<!--                    <span>ادامه مطلب</span>-->
<!--                  </nuxt-link>-->
<!--                </div>-->
<!--                <div class="col-12 order-0 col-md-8 order-md-1">-->
<!--                  <img :src="newsFile.news.docs[1].thumbCover" :alt="newsFile.news.docs[1].title">-->
<!--                </div>-->
<!--              </div>-->
<!--            </div>-->

            <!--                        <div class="col-12 col-md-3 mb-4"-->
            <!--                             v-for="(item, index) in newsFile.news.docs" v-if="index > 1" :key="item._id">-->
            <!--                          <img :src="item.thumbCover" :alt="item.title">-->
            <!--                          <h3 class="mt-4 mb-4 s2-title2">{{ item.title }}</h3>-->
            <!--                          <div class="view-date">-->
            <!--                            <span class="date">{{ jDate2(item.customDate) + ' - ' + jDate(item.customDate) }}</span>-->
            <!--                            <nuxt-link :to="{name: 'portal-news-details',params: {portal: currentPortal, details: item.title}}">-->
            <!--                              <span class="but">ادامه مطلب<i class="fas fa-chevron-left"></i></span>-->
            <!--                            </nuxt-link>-->
            <!--                          </div>-->
            <!--                        </div>-->


            <NewsBox v-for="(item, index) in newsFile.news.docs" v-if="index > 0" :key="item._id" :item="item" :timeIsAgo="false"/>
            <!-- ******************************************* old style ******************************************* -->
            <!--            <nuxt-link-->
            <!--                v-for="(item, index) in newsFile.news.docs" v-if="index > 1"-->
            <!--                :key="item._id"-->
            <!--                :to="{name: 'portal-news-details', params: {portal: currentPortal,details: item.title}}"-->
            <!--                v-slot="{href,navigate}"-->
            <!--                custom-->
            <!--            >-->
            <!--              <div @click="navigate" class="small-pics justifyBetween col-12 col-md-3 mb-4 pointer">-->
            <!--                <img :src="item.thumbCover" :alt="item.title">-->
            <!--                <h2 class="mt-2">{{ item.title }}</h2>-->
            <!--                <div class="row view-time-ago">-->
            <!--                  <div class="col-12 col-xxl-6">-->
            <!--                    <p>{{ jDate(item.customDate) }}</p>-->
            <!--                  </div>-->
            <!--                  <div class="col-12 col-xxl-6">-->
            <!--                    <a :href="href" class="btn btn-primary mt-2">-->
            <!--                      <span class="txtBtn">ادامه مطلب</span>-->
            <!--                    </a>-->
            <!--                  </div>-->
            <!--                </div>-->
            <!--              </div>-->
            <!--            </nuxt-link>-->
            <!-- ******************************************* old style ******************************************* -->

          </div>
        </div>
      </div>
    </section>

    <div class="paginate">
      <div class="row">
        <div class="col-12">
          <el-pagination
              layout="prev, pager, next"
              v-if="paginate"
              class="el-pagination"
              @current-change="newsPageNumber"
              :current-page="Number($route.query.page)"
              :page-count="Number(newsFile.news.totalPages)"
          >
          </el-pagination>
        </div>
      </div>
    </div>
  </section>
</template>

<script>
import moment from "moment-jalaali"

export default {
  data() {
    return {
      newsFile: null
    }
  },
  computed: {
    currentPortal() {
      return this.$route.params.portal
    },
    paginate() {
      return this.newsFile.news.totalPages > 1
    },
    pageQuery() {
      return this.$route.query.page
    },
  },
  watch: {
    pageQuery(newVal, oldVal) {
      this.$nuxt.refresh()
    },
  },
  methods: {
    jDate(data) {
      return moment(data).locale('fa').format('LL')
    },
    jDate2(data) {
      return moment(data).locale('fa').fromNow()
    },
    newsPageNumber(val) {
      this.$router.push({
        name: 'portal-newsfile-details',
        params: {portal: this.currentPortal, details: this.$route.params.details},
        query: {page: val}
      })
      $(window).scrollTop(0)
    },
  },
  head() {
    return {
      title: 'پرونده خبری'
    }
  },
  async asyncData({$axios, params, error, query}) {
    try {
      const newsFile = await $axios.get(`/api/public/getnewsfile/${encodeURIComponent(params.details)}?page=${query.page}`)
      return {
        newsFile: newsFile.data
      }
    } catch (e) {
      error({status: 404, message: 'در دریافت اطلاعات مشکلی پیش آمده است!'})
    }
  }

}
</script>