ostandari/components/SiteHeader.vue

<template>
  <div class="site--header">
    <div class="col-12">
      <!------------------------ countDown modal ------------------------>
      <el-dialog v-if="counterDown" append-to-body :visible.sync="showAlert" :show-close="false" :title="'مانده تا' + ' ' + counterDown.title">
        <div>
          <flip-countdown :deadline="counterDown1[0]"></flip-countdown>
        </div>
        <div slot="footer" class="dialog-footer">
          <el-button class="btn bigBtn btn-primary" @click="showAlert = false">بستن</el-button>
        </div>
      </el-dialog>
      <!------------------------ countDown modal ------------------------>
      <div class="site-top">
        <div class="container">
          <div class="row">
            <div class="col-12 col-md-6 site-top-right">
              <span>
                <i class="far fa-calendar-alt"></i>
                <span class="time-date">{{ jDate }}</span>
              </span>
            </div>
            <div class="col-12 col-md-6 site-top-left">
              <el-button type="text" @click="showAlert = true" v-if="counterDown">
                <span class="timer">{{ jDate2(counterDown.expireDate) + ' مانده تا ' + counterDown.title }}</span>
              </el-button>

              <div class="email-top" v-else>
                <a class="email-text" :href="`mailto: ${yearBanner.email}`" target="_blank">{{ yearBanner.email }}</a>
                <i class="far fa-envelope"></i>
              </div>

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

    <div class="view-banner">
      <img v-if="yearBanner.iranFlag" class="iran-flag" src="~/assets/img/iran.png" alt="">
      <div class="banner">
        <img :src="yearBanner.mainCover" alt="">
      </div>
      <div class="relativePos">
        <div class="container navigations">
          <div class="row">
            <div class="col-12 col-lg-10 menu-desk">
              <nav>
                <ul>
                  <nuxt-link :to="{name: 'portal',params: {portal: currentPortal}}" v-slot="{navigate,href,isActive}" custom exact>
                    <li @click="navigate" :class="isActive ? 'active' : null">
                      <a :href="href">صفحه اصلی</a>
                    </li>
                  </nuxt-link>
                  <!-- ***************** dynamic routes ***************** -->
                  <nuxt-link
                      v-for="item in header.categories"
                      :key="item._id"
                      :to="{name: 'portal-category-details',params: {portal: currentPortal,details: item.title},query: categoryURLQuery(item)}"
                      v-slot="{navigate,href,isActive}"
                      custom
                  >
                    <li :class="isActive ? 'active' : null">
                      <a class="pointer">{{ item.title }}</a>
                      <div class="mega-menu">
                        <!-- item route -->
                        <!--                        <ul class="tree">-->
                        <!--                          <li class="treeItem">-->
                        <!--                            <a @click="navigate" :href="href">-->
                        <!--                              صفحه-->
                        <!--                              {{ item.title }}-->
                        <!--                            </a>-->
                        <!--                          </li>-->
                        <!--                        </ul>-->
                        <!-- recursive tree -->
                        <TreeItem :array="item.childs"/>
                      </div>
                    </li>
                  </nuxt-link>
                  <!-- ***************** dynamic routes ***************** -->
                  <nuxt-link :to="{name: 'portal-services' ,params: {portal: currentPortal}}" v-slot="{navigate,href,isActive}" custom>
                    <li @click="navigate" :class="isActive ? 'active' : null">
                      <a :href="href">میز خدمت</a>
                    </li>
                  </nuxt-link>
                  <li class="pointer">
                    <a>چند رسانه ای</a>
                    <div class="mega-menu">
                      <ul class="tree">
                        <li class="treeItem">
                          <nuxt-link
                              :to="{
                                name: 'portal-gallery',
                                params: {portal: currentPortal},
                                query: {type:'image', page: 1}
                              }">
                            عکس
                          </nuxt-link>
                        </li>
                        <li class="treeItem">
                          <nuxt-link
                              :to="{
                                 name: 'portal-videos',
                                params: {portal: currentPortal},
                                query: {type:'video', page: 1}
                              }">
                            فیلم
                          </nuxt-link>
                          <!--                          <nuxt-link-->
                          <!--                              :to="{-->
                          <!--                                name: 'portal-category-details',-->
                          <!--                                params: {portal: currentPortal,details: homePageData.s3Side[0].catId.title},-->
                          <!--                                query: {id: homePageData.s3Side[0].catId._id,type: 'gallery',galleryType: 'video',page: 1}-->
                          <!--                              }">-->
                          <!--                            فیلم-->
                          <!--                          </nuxt-link>-->
                        </li>
                        <li class="treeItem">
                          <nuxt-link
                              :to="{
                                name: 'portal-graphics',
                                params: {portal: currentPortal},
                                query: {type:'graphic', page: 1}
                              }">
                            گرافیک
                          </nuxt-link>
                        </li>
                        <li class="treeItem">
                          <nuxt-link
                          to="/ostandari/digital-books"
                          >
                            کتابخانه دیجیتال
                          </nuxt-link>
                        </li>
                      </ul>
                    </div>
                  </li>
                  <nuxt-link
                      v-if="yearBanner.electionBtn"
                      :to="{name: 'portal',params: {portal: currentPortal === 'ostandari' ? 'election' : 'ostandari'}}"
                      v-slot="{navigate,href}"
                      custom
                  >
                    <li @click="navigate">
                      <a :href="href">{{ currentPortal === 'ostandari' ? 'ستاد انتخابات' : 'استانداری' }}</a>
                    </li>
                  </nuxt-link>
                  <nuxt-link :to="{name: 'portal-info-page', params:{portal: currentPortal,page: 'aboutState'}}" v-slot="{navigate,href,isActive}" custom
                             v-if="header.staticContents">
                    <li :class="isActive ? 'active' : null">
                      <a class="pointer">درباره استان</a>

                      <div class="mega-menu">
                        <!-- item route -->
                        <ul class="tree">
                          <nuxt-link :to="{name: 'portal-info-page', params:{portal: currentPortal,page: 'sima'}}" v-slot="{navigate,href,isActive}" custom>
                            <li @click="navigate" :class="isActive ? 'active' : null" class="treeItem">
                              <a :href="href">
                                سیمای استان
                              </a>
                            </li>
                          </nuxt-link>
                        </ul>
                      </div>
                    </li>
                  </nuxt-link>
                  <nuxt-link :to="{name: 'portal-contact' ,params: {portal: currentPortal}}" v-slot="{navigate,href,isActive}" custom>
                    <li @click="navigate" :class="isActive ? 'active' : null">
                      <a :href="href">تماس با ما</a>
                    </li>
                  </nuxt-link>
                </ul>
              </nav>
            </div>
            <div class="col-12 col-lg-2 left">
              <ul>
                <li class="searchBtns">
                  <i class="fal fa-search" v-if="!searching" @click="search(true)"></i>
                  <i class="fal fa-times" v-else @click="search(false)"></i>
                </li>
                <li class="menu" @click="showOffCanvas">
                  <i class="fas fa-bars hamburger-btn"></i>
                </li>
              </ul>
            </div>
          </div>
        </div>
        <div class="searchBox" :class="searching? 'active-search' : null">
          <div class="container">
            <div class="row">
              <div class="col-12">
                <form @submit.prevent="doSearch" class="searchInput">
                  <input type="text" name="search" id="searchInput" placeholder="عبارت مدنظر خود را جستجو کنید" v-model="searchableText">
                  <button type="submit">
                    <i class="fas fa-arrow-circle-left"></i>
                  </button>
                </form>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import moment from 'moment-jalaali'
import FlipCountdown from '~/components/vue2-flip-countdown.js'

export default {
  name: "SiteHeader",
  data() {
    return {
      searching: false,
      searchableText: '',
      date: Date.now(),
      dialogTimeVisible: false,
      showAlert: false
    }
  },
  mounted() {
    setInterval(() => this.date = Date.now(), 1000)
    $(window).scroll(() => {
      if ($(window).scrollTop() > 300) $('.app-front').addClass('miniHeader')
      if ($(window).scrollTop() < 290) $('.app-front').removeClass('miniHeader')
    })

    if (this.$route.name !== 'portal') {
      (async () => {
        try {
          const homeData = await this.$axios.get(`/api/public/home?portal=${this.$route.params.portal}`, {progress: false})
          this.$store.commit('front/setHomePageData', homeData.data)
        } catch (e) {
          console.log(e)
        }
      })()
    }
  },
  components: {FlipCountdown},
  computed: {
    yearBanner() {
      return this.$store.state.front.yearBanner
    },
    currentPortal() {
      return this.$route.params.portal
    },
    header() {
      return this.$store.state.front.headerData
    },
    jDate() {
      return moment(this.date).locale('fa').format('dddd - LL - h:mm:ss ')
    },
    counterDown() {
      return this.$store.state.front.counterDown
    },
    counterDown1() {
      return this.$store.state.front.counterDown.expireDate.split('T')
    },
    homePageData() {
      return this.$store.state.front.homePageData
    },
  },
  methods: {
    categoryURLQuery(item) {
      const query = {type: item.defaultPageType, id: item._id}
      if (item.defaultPageType === 'news') return {...query, page: 1}
      if (item.defaultPageType === 'gallery-image') return {...query, page: 1, type: 'gallery', galleryType: 'image'}
      if (item.defaultPageType === 'gallery-video') return {...query, page: 1, type: 'gallery', galleryType: 'video'}
      if (item.defaultPageType === 'gallery-graphic') return {...query, page: 1, type: 'gallery', galleryType: 'graphic'}
      else return query
    },
    showOffCanvas() {
      this.$store.commit('front/setOffCanvas', true)
    },
    search(status) {
      this.searching = status
      if (status) setTimeout(() => $('#searchInput').focus(), 100)
      else this.searchableText = ''
    },
    doSearch() {
      if (this.searchableText.length) {
        this.$router.push({name: 'portal-search', params: {portal: this.currentPortal}, query: {sq: this.searchableText}})
        setTimeout(() => this.search(false), 100)
      } else {
        this.$message({
          type: 'warning',
          message: 'ابتدا عبارت مورد نظر را بنویسید'
        })
      }
    },
    jDate2(e) {
      return moment(e).locale('fa').fromNow(true)
    }
  }
}
</script>