mahyargdz
412 lines
15 KiB
Vue
412 lines
15 KiB
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 v-if="item.title !== 'شفافیت'" 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>
|
|
<nuxt-link
|
|
to="/ostandari/shafaf"
|
|
v-slot="{ navigate, href, isActive }"
|
|
custom
|
|
>
|
|
<li @click="navigate" :class="isActive ? 'active' : null">
|
|
<a :href="href">شفافیت</a>
|
|
</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>
|
|
|
|
<style scoped>
|
|
/* li:nth-child(6) {
|
|
display: none !important;
|
|
} */
|
|
</style>
|