ostandari/pages/_portal/index.vue

<template>
  <div class="home--page">

    <section class="event" v-if="homeData.occasion.length">
      <div class="container">
        <div class="row">
          <div class="col-12">
            <div id="slides-event">
              <div v-for="(item,index) in homeData.occasion" :key="item._id" class="slide" :class="index && 'hide'">
                <img :src="item.mainCover" :alt="item.title">
              </div>
            </div>
          </div>
        </div>
      </div>
    </section>

    <section class="s1">
      <div class="container">
        <div class="row">
          <div class="col-12">
            <div v-if="homeData.s1.length" id="slides">
              <div v-for="(item,index) in homeData.s1" :key="item._id" class="slide" :class="index && 'hide' ">
                <div class="row">
                  <div class="txt-holder order-1 order-lg-0 col-12 col-lg-4">
                    <div class="txtBox">
                      <h2 :title="item.title">{{ item.title }}</h2>
                      <p :title="item.summaryTitle" class="p2">{{ item.summaryTitle }}</p>
                      <nuxt-link
                          v-if="item.isLocal"
                          :to="{name: 'portal-news-details',params: {portal: currentPortal,details: item.url}}"
                          class="btn bigBtn btn-primary bbt"
                      >
                        <span>ادامه مطلب</span>
                      </nuxt-link>
                      <a class="btn bigBtn btn-primary bbt" :href="item.url" target="_blank" v-else>
                        <span>ادامه مطلب</span>
                      </a>
                    </div>
                  </div>
                  <div class="img-holder order-0 order-lg-1 col-12 col-lg-8">
                    <img :src="item.cover" :alt="item.title">
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </section>

    <div class="container">
      <div class="row">
        <main class="col-12 col-lg-9 main-content">
          <section v-if="homeData.s2 && homeData.s2.length" class="s2">
            <LineTxt label="اخبار استاندار"/>
            <div class="sectionStyle">
              <div class="row">
                <!--              <div class="col-12 col-md-6">-->
                <!--                <div class="big-image-card">-->
                <!--                  <img :src="homeData.s2[0].thumbCover"-->
                <!--                       :alt="homeData.s2[0].title">-->
                <!--                  <h2>{{ homeData.s2[0].title }}</h2>-->
                <!--                  <p>{{ homeData.s2[0].summaryTitle }}</p>-->
                <!--                  <nuxt-link class="btn btn-primary mt-2  mb-4"-->
                <!--                             :to="{name: 'portal-news-details', params: {portal: currentPortal,-->
                <!--                              details: homeData.s2[0].title}}">-->
                <!--                    <span class="txtBtn">ادامه مطلب</span>-->
                <!--                  </nuxt-link>-->
                <!--                </div>-->
                <!--              </div>-->
                <div class="col-12">
                  <div class="row">
                    <NewsBox v-for="item in homeData.s2" :key="item._id" :item="item"/>
                  </div>

                  <div class="row mt-3">
                    <div class="col-12 archive">
                      <nuxt-link
                          :to="{name: 'portal-category-details',params: {portal: currentPortal,details: homeData.s2[0].catId.title},query: {type: 'news', page: 1, id: homeData.s2[0].catId._id}}"
                          class="btn bigBtn btn-primary"
                      >
                        <span>آرشیو</span>
                      </nuxt-link>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </section>
          <section v-if="homeData.s3.length" class="s3">
            <LineTxt label="پرونده خبری"/>
            <div class="sectionStyle">
              <div class="row">
                <nuxt-link
                    class="title-box"
                    v-for="(item , index) in homeData.s3"
                    :key="item._id"
                    :to="{name: 'portal-newsfile-details',params: {portal:currentPortal,details: item.title},query: {page: 1}}"
                    v-slot="{href,navigate}"
                    custom
                >
                  <div @click="navigate" class="col-12 col-md-6 col-lg-3 newsFile">
                    <img :src="item.thumbCover" :alt="item.title">
                    <div class="txtBox" :class="index === 0 && 'first'">
                      <!--                      <span>{{ index + 1 }}</span>-->
                      <a :href="href">
                        <h2>{{ item.title }}</h2>
                      </a>
                    </div>
                  </div>
                </nuxt-link>
              </div>
              <div class="row mt-3">
                <div class="col-12 archive">
                  <nuxt-link
                      :to="{name: 'portal-category-details',params: {portal: currentPortal,details: homeData.s3[0].catId.title},query: {type: 'newsFile', page: 1, id: homeData.s3[0].catId._id}}"
                      class="btn bigBtn btn-primary"
                  >
                    <span>آرشیو</span>
                  </nuxt-link>
                </div>
              </div>
            </div>
          </section>
          <section v-if="homeData.s4 && homeData.s4.news.length" class="s4">
            <LineTxt :label="homeData.s4.nameTag"/>
            <div class="sectionStyle">
              <div class="row">
                <!--              <div class="col-12 col-md-6">-->
                <!--                <div class="big-image-card">-->
                <!--                  <img :src="homeData.s4.news[0].cover" :alt="homeData.s4.news[0].title">-->
                <!--                  <h2>{{ homeData.s4.news[0].title }}</h2>-->
                <!--                  <p class="mt-2">-->
                <!--                    {{ homeData.s4.news[0].summaryTitle }}-->
                <!--                  </p>-->
                <!--                  <nuxt-link class="btn btn-primary mt-2 mb-4"-->
                <!--                             :to="{name: 'portal-news-details', params: {portal: currentPortal,-->
                <!--                             details: homeData.s4.news[0].title}}">-->
                <!--                    <span class="txtBtn">ادامه مطلب</span>-->
                <!--                  </nuxt-link>-->
                <!--                </div>-->
                <!--              </div>-->
                <div class="col-12">
                  <div class="row">
                    <NewsBox v-for="item in homeData.s4.news" :key="item._id" :item="item"/>
                  </div>
                </div>
              </div>
              <div class="row mt-3">
                <div class="col-12 archive">
                  <nuxt-link
                      :to="{name: 'portal-archive',params: {portal: currentPortal},query: {flag: 'category' , catId : homeData.s4.news[0].rootParent, page: 1}}"
                      class="btn bigBtn btn-primary"
                  >
                    <span>آرشیو</span>
                  </nuxt-link>
                </div>
              </div>
            </div>
          </section>
          <section v-if="homeData.s5.length && homeData.s5[0].news.length" class="s5">
            <div class="pt-2">
              <div class="odd-line">
                <!--                <div class="line"></div>-->
                <div class="button-holder mb-2">
                  <div class="line d-none d-md-inline-block"></div>
                  <div class="row">
                    <div class="col-12">
                      <div class="button-holder2" v-for="(item, index) in homeData.s5" :key="item._id">
                        <button class="btn btn-primary bigBtn" :class="sectionThreeTagIndex === index && 'btn-active'"
                                @click="sectionThreeTagIndex = index">
                          <span class="btnTxt">{{ item.nameTag }}</span>
                        </button>
                      </div>
                    </div>
                  </div>
                </div>
              </div>

              <div class="sectionStyle">
                <div class="row" v-if="sectionThreeData.length">
                  <div class="col-12 mt-4">
                    <div class="row">
                      <div class="row">
                        <div v-for="item in sectionThreeData" :key="item._id" class="col-12 col-md-6">
                          <nuxt-link :to="{name: 'portal-news-details', params: {portal: currentPortal, details: item._id}}" :title="item.title">
                            <div class="txt-holder">
                              <i class="fas fa-globe-asia"></i>
                              <h2>{{ item.title }}</h2>
                            </div>
                          </nuxt-link>
                        </div>
                      </div>

                    </div>
                  </div>
                  <div class="col-12 mt-4 d-flex justify-content-center">
                    <nuxt-link
                        :to="{name: 'portal-archive',params: {portal: currentPortal},query: {flag: 'category' , catId : sectionThreeData[0].rootParent, page: 1}}"
                        class="btn bigBtn btn-primary"
                    >
                      <span>آرشیو</span>
                    </nuxt-link>
                  </div>
                </div>
                <div class="not-found" v-else>
                  <p>موردی وجود ندارد!</p>
                </div>
              </div>
            </div>
          </section>
          <section v-if="homeData.s6 && homeData.s6.length" class="s6">
            <LineTxt label="پربیننده ترین ها"/>

            <div class="sectionStyle">
              <div class="row">
                <!--              <div class="col-12 col-md-6">-->
                <!--                <div class="big-image-card">-->
                <!--                  <img :src="homeData.s6[0].thumbCover" :alt="homeData.s6[0].title">-->
                <!--                  <h2>{{ homeData.s6[0].title }}</h2>-->
                <!--                  <p class="mt-2">-->
                <!--                    {{ homeData.s6[0].summaryTitle }}-->
                <!--                  </p>-->
                <!--                  <nuxt-link class="btn btn-primary mt-2 mb-4"-->
                <!--                             :to="{name: 'portal-news-details', params: {portal: currentPortal,-->
                <!--                             details: homeData.s6[0].title}}">-->
                <!--                    <span>ادامه مطلب</span>-->
                <!--                  </nuxt-link>-->
                <!--                </div>-->
                <!--              </div>-->
                <div class="col-12">
                  <div class="row">
                    <NewsBox v-for="item in homeData.s6" :key="item._id" :item="item"/>
                  </div>
                </div>
              </div>
            </div>
          </section>
        </main>

        <aside class="col-lg-3 d-none d-lg-block side-bar">

          <div class="boss" v-for="item in homeData.s1Side" :key="item._id">
            <nuxt-link :to="{name: 'portal-info-page', params:{ portal: currentPortal, page: 'manager'}}" v-slot="{href,navigate}" custom>
              <div class="sectionStyle">
                <a :href="href" class="txtLink">
                  <img @click="navigate" :src="item.thumb" :alt="item.title">
                </a>
                <div class="links">
                  <a :href="href" @click="navigate" class="txtLink title">{{ item.title }}</a>
                  <h2>
                    <a :href="href" @click="navigate" class="txtLink">استاندار مرکزی</a>
                  </h2>
                  <a :href="`mailto: ${item.email}`" target="_blank" class="mailLink">
                    <span>ایمیل: </span>
                    <span>{{ item.email }}</span>
                  </a>
                  <nuxt-link :to="{name: 'portal-services-meeting', params: {portal: currentPortal}}" class="btn btn-primary">
                    <span class="txtBtn">راه ارتباطی</span>
                  </nuxt-link>
                </div>
              </div>
            </nuxt-link>
          </div>

          <div v-if="homeData.s5Side.length" class="spec-news mt-3">
            <SideBarLineTxt label="مطالب ویژه"/>

            <div class="sectionStyle">
              <div id="slides-spec">
                <nuxt-link
                    v-for="item in homeData.s5Side"
                    :key="item._id"
                    :to="{name: 'portal-news-details', params: {portal: currentPortal,details: item._id}}"
                    v-slot="{href,navigate}"
                    custom
                >
                  <div @click="navigate" class="slide pointer" :title="item.title">
                    <img :src="item.cover" :alt="item.title">
                    <a :href="href">{{ item.title }}</a>
                  </div>
                </nuxt-link>
              </div>
            </div>
          </div>

          <div class="multimedia mt-3" v-if="homeData.s2Side.length || homeData.s3Side.length || homeData.s4Side.length">
            <SideBarLineTxt label="چندرسانه ای"/>

            <div class="sectionStyle">

              <div class="media" v-if="homeData.s2Side.length" id="sideImageSlider">
                <nuxt-link
                    v-for="item in homeData.s2Side"
                    :key="item._id"
                    :to="{name: 'portal-gallery-media', params: {portal: currentPortal,media: item._id}}"
                >
                  <div class="image slide pointer" :title="item.title">
                    <img :src="item.thumbCover" :alt="item.title">
                    <div class="txtBox">
                      <span class="tag">عکس</span>
                      <a>{{ item.title }}</a>
                      <div class="btns">
                        <!--                        <a :href="href" class="btn btn-primary">-->
                        <!--                          <span class="txtBtn">مشاهده</span>-->
                        <!--                        </a>-->
                        <nuxt-link
                            :to="{name: 'portal-category-details',params: {portal: currentPortal,details: item.catId.title},query: {id: item.catId._id,type: 'gallery',galleryType: 'image',page: 1}}"
                            class="btn btn-primary">
                          <span class="txtBtn">آرشیو</span>
                        </nuxt-link>
                      </div>
                    </div>
                  </div>
                </nuxt-link>
              </div>


              <!--              <div v-if="homeData.s3Side.length" class="videos">-->
              <!--                <img class="img-item" :src="homeData.s3Side[0].thumbCover" :alt="homeData.s3Side[0].title">-->
              <!--                <span class="tag">فیلم</span>-->
              <!--                <nuxt-link :to="{name: 'portal-videos-video', params: {portal: currentPortal,video: homeData.s3Side[0].title}}">-->
              <!--                  <p class="title-gallery">{{ homeData.s3Side[0].title }}</p>-->
              <!--                </nuxt-link>-->
              <!--              </div>-->

              <div class="media" :class="homeData.s2Side.length && media_video" v-if="homeData.s3Side.length" id="sideVideoSlider">
                <nuxt-link
                    v-for="item in homeData.s3Side"
                    :key="item._id"
                    :to="{name: 'portal-videos-video', params: {portal: currentPortal,video: item._id}}"

                >
                  <div class="video slide pointer" :title="item.title">
                    <img :src="item.thumbCover" :alt="item.title">
                    <div class="txtBox">
                      <span class="tag">فیلم</span>
                      <a>{{ item.title }}</a>
                      <div class="btns">
                        <!--                        <a :href="href" class="btn btn-primary">-->
                        <!--                          <span class="txtBtn">مشاهده</span>-->
                        <!--                        </a>-->
                        <nuxt-link
                            :to="{name: 'portal-category-details',params: {portal: currentPortal,details: item.catId.title},query: {id: item.catId._id,type: 'gallery',galleryType: 'video',page: 1}}"
                            class="btn btn-primary">
                          <span class="txtBtn">آرشیو</span>
                        </nuxt-link>
                      </div>
                    </div>
                  </div>
                </nuxt-link>
              </div>


              <!--              <div v-if="homeData.s4Side.length" class="graphics">-->
              <!--                <img class="img-item" :src="homeData.s4Side[0].thumbCover" :alt="homeData.s4Side[0].title">-->
              <!--                <span class="tag">گرافیک</span>-->
              <!--                <nuxt-link :to="{name: 'portal-graphics-graphic', params: {portal: currentPortal,graphic: homeData.s4Side[0].title}}">-->
              <!--                  <p class="title-gallery">{{ homeData.s4Side[0].title }}</p>-->
              <!--                </nuxt-link>-->
              <!--              </div>-->

              <div class="media" :class="homeData.s3Side.length || homeData.s2Side.length && media_graphic" v-if="homeData.s4Side.length" id="sideGraphicSlider">
                <nuxt-link
                    v-for="item in homeData.s4Side"
                    :key="item._id"
                    :to="{name: 'portal-graphics-graphic', params: {portal: currentPortal,graphic: item._id}}"
                >
                  <div class="graphic slide pointer" :title="item.title">
                    <img :src="item.thumbCover" :alt="item.title">
                    <div class="txtBox">
                      <span class="tag">گرافیک</span>
                      <a>{{ item.title }}</a>
                      <div class="btns">
                        <!--                        <a :href="href" class="btn btn-primary">-->
                        <!--                          <span class="txtBtn">مشاهده</span>-->
                        <!--                        </a>-->
                        <nuxt-link
                            :to="{name: 'portal-category-details',params: {portal: currentPortal,details: item.catId.title},query: {id: item.catId._id,type: 'gallery',galleryType: 'graphic',page: 1}}"
                            class="btn btn-primary">
                          <span class="txtBtn">آرشیو</span>
                        </nuxt-link>
                      </div>
                    </div>
                  </div>
                </nuxt-link>
              </div>

            </div>
          </div>

          <div v-if="homeData.notificationsSide.length" class="notifications links mt-3">
            <SideBarLineTxt label="اطلاعیه ها"/>

            <div class="sectionStyle">
              <ul>
                <li class="mb-2" v-for="item in homeData.notificationsSide" :key="item._id">
                  <nuxt-link :to="{name: 'portal-news-details', params: {portal: currentPortal,details: item._id}}" :title="item.title">
                    <i class="fal fa-megaphone"></i>
                    <span>{{ item.title }}</span>
                  </nuxt-link>
                </li>
              </ul>
            </div>
          </div>

          <div v-if="homeData.s6Side.length" class="latest_news mt-3">
            <SideBarLineTxt label="آخرین اخبار"/>
            <div class="sectionStyle">
              <ul>
                <li v-for="item in homeData.s6Side" :key="item._id">
                  <nuxt-link
                      :to="{name: 'portal-news-details', params: {portal: currentPortal,details: item._id}}"
                      :title="item.title"
                  >
                    <i class="fas fa-circle"></i>
                    <span>{{ item.title }}</span>
                  </nuxt-link>
                </li>
              </ul>
            </div>
          </div>

          <div v-if="homeData.s7Side.length" class="links mt-3">
            <SideBarLineTxt label="پیوند ها"/>

            <div class="sectionStyle">
              <ul>
                <li class="mb-2" v-for="link in homeData.s7Side" :key="link._id">
                  <a :href="link.url" :title="link.title" target="_blank">
                    <i class="fal fa-link"></i>
                    <span>{{ link.title }}</span>
                  </a>
                </li>
              </ul>
            </div>
          </div>

        </aside>
      </div>
    </div>
  </div>
</template>

<script>

if (process.client) require("slick-carousel")
import moment from 'moment-jalaali'

export default {
  name: "index",
  data() {
    return {
      sectionThreeTagIndex: 0,
      homeData: null,
      dialogTimeVisible: false
    }
  },
  computed: {
    currentPortal() {
      return this.$route.params.portal
    },
    sectionThreeTag() {
      return this.homeData.s5[this.sectionThreeTagIndex]?.nameTag
    },
    sectionThreeData() {
      return this.homeData.s5.find(item => item.nameTag === this.sectionThreeTag)?.news
    },
    counterDown() {
      return this.$store.state.front.counterDown.expireDate.split('T')
    }
  },
  methods: {
    jDate(data) {
      return moment(data).locale('fa').fromNow()
    },
  },
  
  mounted() {
    $(document).ready(() => {
      //////////////////// slides - section1
      $("#slides").on('init', function () {
        $('#slides .slide').removeClass('hide')
      })
      $("#slides").slick({
        dots: true,
        slidesToShow: 1,
        rtl: true,
        autoplay: true,
        autoplaySpeed: 3000,
        speed: 1000,
        arrows: false,
        infinite: false
      })

      //////////////////// sidebar - images
      $("#sideImageSlider").on('init', function () {
        $('#sideImageSlider .slide').removeClass('hide')
      })
      $("#sideImageSlider").slick({
        dots: true,
        slidesToShow: 1,
        rtl: true,
        autoplay: true,
        autoplaySpeed: 5000,
        speed: 1000,
        arrows: false,
        infinite: false,
        pauseOnHover: true
      })


      //////////////////// sidebar - videos
      $("#sideVideoSlider").on('init', function () {
        $('#sideVideoSlider .slide').removeClass('hide')
      })
      $("#sideVideoSlider").slick({
        dots: true,
        slidesToShow: 1,
        rtl: true,
        autoplay: true,
        autoplaySpeed: 3000,
        speed: 1000,
        arrows: false,
        infinite: false,
        pauseOnHover: true
      })


      //////////////////// sidebar - graphics
      $("#sideGraphicSlider").on('init', function () {
        $('#sideGraphicSlider .slide').removeClass('hide')
      })
      $("#sideGraphicSlider").slick({
        dots: true,
        slidesToShow: 1,
        rtl: true,
        autoplay: true,
        autoplaySpeed: 4000,
        speed: 1000,
        arrows: false,
        infinite: false,
        pauseOnHover: true
      })


      //////////////////// slides-spec
      $("#slides-spec").slick({
        dots: true,
        slidesToShow: 1,
        rtl: true,
        autoplay: true,
        autoplaySpeed: 3000,
        speed: 1000,
        arrows: false,
        infinite: false,
        pauseOnHover: true
      })

      //////////////////// slides-event
      $("#slides-event").on('init', function () {
        $('#slides-event .slide').removeClass('hide')
      })
      $("#slides-event").slick({
        dots: false,
        slidesToShow: 1,
        rtl: true,
        autoplay: true,
        autoplaySpeed: 3500,
        speed: 1000,
        arrows: false,
        pauseOnHover: true
      })
    })
  },
  async asyncData({$axios, store, error, params}) {
    const portalQuery = params.portal
    try {
      const homeData = await $axios.get(`/api/public/home?portal=${portalQuery}`)
      store.commit('front/setHomePageData', homeData.data)
      return {
        homeData: homeData.data
      }
    } catch (e) {
      error({status: 500, message: "مشکلی پیش آمده است!"})
    }
  }
}

</script>