You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
482 lines
18 KiB
482 lines
18 KiB
<template>
|
|
<div class="search tw-w-full">
|
|
<div v-click-outside="clickOutSide" @click="open()"
|
|
:class="['tw-relative tw-flex tw-rounded-[16px] tw-border-solid tw-border tw-transition-all tw-duration-200 tw-delay-75 tw-ease-in-out',bigSearch ? 'tw-border-primary-default tw-w-full tw-px-[16px] tw-py-[11px]' :'tw-border-neutrals-200 tw-w-[320px] tw-px-[16px] tw-py-[11px]']">
|
|
<div v-if="bigSearch" class="btn-group tw-flex tw-rounded-none xl:tw-pr-[16px] xl:tw-mr-[16px]">
|
|
<v-btn class="border-radius-14 remove-upper mx-0 tw-hidden xl:tw-block"
|
|
:class="tabToggle == 0 ? 'white--text primary' : 'primary--text'" style="font-size: 14px" height="40" text
|
|
@click="clickExhibition">{{ $t('Exhibition')}}</v-btn>
|
|
<v-btn class="border-radius-14 remove-upper mx-0 tw-hidden xl:tw-block"
|
|
:class="tabToggle == 1 ? 'white--text primary' : 'primary--text'" style="font-size: 14px" text height="40"
|
|
@click="clickService">{{ $t('Service')}}</v-btn>
|
|
</div>
|
|
<input v-show="!bigSearch"
|
|
class="custom-control flex-grow-1 tw-placeholder-text-[14px] md:tw-placeholder-text-[16px]"
|
|
:placeholder="$t(customPlaceholder)" />
|
|
<input v-show="bigSearch" ref="search"
|
|
class="custom-control flex-grow-1 tw-placeholder-text-[14px] md:tw-placeholder-text-[16px]" v-model="inputs"
|
|
:placeholder="$t(customPlaceholder)" @input="handleInput" @click="handleClick"
|
|
v-on:keyup.enter="$router.push(localePath(`/${type}?q=${inputs}`));" />
|
|
<svg width="24" height="24" class="tw-my-auto" shape-rendering="geometricPrecision"
|
|
@click="$router.push(localePath(`/${type}?q=${inputs}`));">
|
|
<image xlink:href="@/assets/svg/icon-search-small.svg" src="@/assets/svg/icon-search-small.svg" width="24"
|
|
height="24" />
|
|
</svg>
|
|
<v-card class="search-result white rounded-lg above" v-if="keywords.length != 0 && keyword"
|
|
style="z-index: 999 !important" :max-width="width">
|
|
<template v-for="(keyword, idx) in populars.search">
|
|
<v-row v-if="type=='exhibition'" :key="idx"
|
|
class="mx-2 my-2 grey--text text--lighten-1">
|
|
<nuxt-link :to="localePath(`/${type}?q=${keyword}`)" class="remove-underline"
|
|
style="width: 100%; height: 100%">
|
|
<v-card flat color="transparent" width="100%" height="40" style="padding: 0px 12px"
|
|
class="d-flex align-center">
|
|
{{ keyword }}
|
|
</v-card>
|
|
</nuxt-link>
|
|
</v-row>
|
|
</template>
|
|
<template v-for="(keyword, idx) in popular.service">
|
|
<v-row v-if="type=='service'" :key="idx"
|
|
class="mx-2 my-2 grey--text text--lighten-1">
|
|
<nuxt-link :to="localePath(`/${type}?q=${keyword}`)" class="remove-underline"
|
|
style="width: 100%; height: 100%">
|
|
<v-card flat color="transparent" width="100%" height="40" style="padding: 0px 12px"
|
|
class="d-flex align-center">
|
|
{{ keyword }}
|
|
</v-card>
|
|
</nuxt-link>
|
|
</v-row>
|
|
</template>
|
|
</v-card>
|
|
|
|
<!-- exhibition -->
|
|
<v-container
|
|
class="search-result white border-radius-16 hidden-sm-and-down xl:tw-px-[20px] xl:tw-py-[20px] tw-shadow-[0_1px_6px_0_rgba(0,0,0,0.4)]"
|
|
v-if="exhibition">
|
|
<!-- <div class="tw-mb-[20px]">
|
|
<div class="tw-mb-[20px]">
|
|
<div class="tw-body-3 tw-font-bold tw-text-black tw-mb-[20px]">{{ $t('History') }} </div>
|
|
<div class="tw-flex tw-flex-wrap">
|
|
<nuxt-link
|
|
class="tw-mr-[16px] tw-mb-[10px] tw-px-[16px] tw-py-[7px] tw-border-solid tw-border-[1px] tw-rounded-[12px] tw-transition-all tw-duration-300 tw-ease-in-out tw-border-x-secondary-default tw-text-secondary-default hover:tw-border-transparent hover:tw-bg-secondary-default hover:tw-text-white"
|
|
v-for="(item, idx) in servicesSearchs" :key="idx" :to="localePath(`/exhibition?q=${item}`)">
|
|
{{ item }}
|
|
</nuxt-link>
|
|
</div>
|
|
</div>
|
|
</div> -->
|
|
<div class="tabs tw-flex tw-mb-[16px] md:tw-mb-[20px]">
|
|
<button
|
|
:class="['tw-mr-[30px] tw-body-3 tw-transition-all tw-duration-300 tw-ease-in-out tab',tabs == 'exhibitionsCategories' ? 'active tw-text-black tw-font-bold':'tw-text-neutrals-500']"
|
|
@click="tabs = 'exhibitionsCategories'">{{
|
|
$t('Exhibition Categories')
|
|
}}</button>
|
|
<button
|
|
:class="['tw-body-3 tw-transition-all tw-duration-300 tw-ease-in-out tab',tabs == 'location' ? 'active tw-text-black tw-font-bold':'tw-text-neutrals-500']"
|
|
@click="tabs = 'location'">{{ $t('Location')
|
|
}}</button>
|
|
</div>
|
|
|
|
<div v-if="tabs=='exhibitionsCategories'">
|
|
<div class="customMenuLink tw-relative tw-flex tw-justify-start tw-items-center tw-z-10"
|
|
@mouseleave="exhibitionActiveIndex=0">
|
|
<div class="customDropMenu exhibition tw-w-full tw-overflow-hidden">
|
|
<div class="tw-relative tw-grid tw-grid-cols-2 tw-h-[270px]">
|
|
<div
|
|
class="tw-list-none tw-overflow-x-hidden tw-overflow-y-auto tw-h-auto tw-break-inside-avoid tw-grid tw-grid-cols-1 tw-gap-[20px]">
|
|
<div class="tw-list-none tw-pr-[20px]" v-for="(item,index) in exhibitionsCategories" :key="index"
|
|
@mouseover="exhibitionActiveIndex=index">
|
|
<div
|
|
:class="['exhibitionDropdownLink tw-w-full tw-body-4 tw-font-normal hover:tw-text-primary-default',exhibitionActiveIndex == index ? 'tw-text-primary-default active':'tw-text-neutrals-900']">
|
|
<span class="tw-block tw-flex tw-items-center tw-break-words tw-pr-[20px]">{{
|
|
$t(item.title)
|
|
}}</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="tw-overflow-x-hidden tw-overflow-y-auto">
|
|
<ul class="tw-list-none tw-grid tw-grid-cols-1 tw-gap-[20px] tw-px-[20px] ">
|
|
<li class="tw-list-none"><a
|
|
:href="localePath(`/exhibition?category=${exhibitionsCategories[exhibitionActiveIndex].id}`)"
|
|
class="tw-block tw-body-4 tw-font-normal tw-text-neutral-800 hover:tw-text-primary-default">{{
|
|
$t('All')}}</a>
|
|
</li>
|
|
<li v-for="(sub,index) in exhibitionsCategories[exhibitionActiveIndex].subcategory" :key="index"
|
|
class="tw-list-none"><a :href="localePath(`/exhibition?subcategory=${sub.id}`)"
|
|
class="tw-block tw-min-h-[30px] tw-body-4 tw-font-normal tw-min-w-[230px] tw-text-neutral-800 hover:tw-text-primary-default">{{
|
|
sub.title }}</a>
|
|
</li>
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div v-if="tabs=='location'">
|
|
<div class="customMenuLink tw-relative tw-flex tw-justify-start tw-items-center tw-z-10">
|
|
<div class="customDropMenu exhibition tw-w-full tw-overflow-hidden">
|
|
<div class="tw-relative tw-grid tw-grid-cols-[1fr_1fr_1fr] tw-h-[270px]">
|
|
<div
|
|
class="tw-list-none tw-overflow-x-hidden tw-overflow-y-auto tw-h-auto tw-break-inside-avoid tw-flex tw-flex-col tw-pr-[20px]">
|
|
<div v-for="(item,index) in exhibitionsLocations" :key="index"
|
|
@mouseover="locationActiveIndex=index;cityActiveIndex=0"
|
|
:class="['exhibitionDropdownLink tw-block tw-w-full tw-body-4 tw-font-normal tw-mb-[20px] tw-pr-[20px] hover:tw-text-primary-default',locationActiveIndex == index ? 'tw-text-primary-default active':'tw-text-neutrals-900']">
|
|
{{
|
|
$t(item.region)
|
|
}}</div>
|
|
</div>
|
|
<div class="tw-overflow-x-hidden tw-overflow-y-auto">
|
|
<ul class="tw-px-[20px] tw-list-none tw-flex tw-flex-col tw-flex-wrap">
|
|
<li class="tw-list-none tw-mb-[20px]"><a
|
|
:href="localePath(`/exhibition?region=${exhibitionsLocations[locationActiveIndex].id}`)"
|
|
class="tw-block tw-body-4 tw-font-normal tw-text-neutral-800 hover:tw-text-primary-default">{{
|
|
$t('All')}}</a>
|
|
</li>
|
|
<li v-for="(countries,index) in exhibitionsLocations[locationActiveIndex].countries" :key="index"
|
|
@mouseover="cityActiveIndex=index"
|
|
:class="['exhibitionDropdownLink tw-block tw-w-full tw-body-4 tw-font-normal tw-mb-[20px] tw-pr-[20px] hover:tw-text-primary-default',cityActiveIndex == index ? 'tw-text-primary-default active':'tw-text-neutrals-900']">
|
|
{{
|
|
countries.country }}
|
|
</li>
|
|
</ul>
|
|
</div>
|
|
<div class="tw-overflow-x-hidden tw-overflow-y-auto">
|
|
<ul class="tw-px-[20px] tw-list-none tw-flex tw-flex-col tw-flex-wrap">
|
|
<li class="tw-list-none tw-mb-[20px]"><a
|
|
:href="localePath(`/exhibition?region=${exhibitionsLocations[locationActiveIndex].countries[cityActiveIndex].id}`)"
|
|
class="tw-block tw-body-4 tw-font-normal tw-text-neutral-800 hover:tw-text-primary-default">{{
|
|
$t('All')}}</a>
|
|
</li>
|
|
<li
|
|
v-for="(cities,index) in exhibitionsLocations[locationActiveIndex].countries[cityActiveIndex].cities"
|
|
:key="index" class="tw-list-none tw-mb-[20px]"><a
|
|
:href="localePath(`/exhibition?city=${cities.id}`)"
|
|
class="tw-block tw-body-4 tw-font-normal tw-text-neutral-800 hover:tw-text-primary-default">{{
|
|
cities.city }}</a>
|
|
</li>
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</v-container>
|
|
<!-- exhibition -->
|
|
|
|
<!-- service -->
|
|
<v-container
|
|
class="search-result tw-px-[30px] tw-py-[20px] tw-bg-white tw-rounded-[16px] tw-hidden xl:tw-px-[20px] xl:tw-py-[20px] tw-shadow-[0_1px_6px_0_rgba(0,0,0,0.4)] xl:tw-block"
|
|
v-if="service" v-click-outside="">
|
|
<div class="">
|
|
<!-- <div class="tw-mb-[20px]">
|
|
<div class="tw-body-3 tw-font-bold tw-text-black tw-mb-[20px]">{{ $t('History') }} </div>
|
|
<div class="tw-flex tw-flex-wrap">
|
|
<nuxt-link
|
|
class="tw-mr-[16px] tw-mb-[10px] tw-px-[16px] tw-py-[7px] tw-border-solid tw-border-[1px] tw-rounded-[12px] tw-transition-all tw-duration-300 tw-ease-in-out tw-border-x-secondary-default tw-text-secondary-default hover:tw-border-transparent hover:tw-bg-secondary-default hover:tw-text-white"
|
|
v-for="(item, idx) in servicesSearchs" :key="idx" :to="localePath(`/service?q=${item}`)">
|
|
{{ item }}
|
|
</nuxt-link>
|
|
</div>
|
|
</div> -->
|
|
<div>
|
|
<div class="tw-body-3 tw-font-bold tw-text-black tw-mb-[20px]">{{ $t('Location') }} </div>
|
|
<div class="tw-flex tw-flex-wrap">
|
|
<nuxt-link
|
|
class="tw-mr-[16px] tw-mb-[10px] tw-px-[16px] tw-py-[7px] tw-border-solid tw-border-[1px] tw-rounded-[12px] tw-transition-all tw-duration-300 tw-ease-in-out tw-border-x-secondary-default tw-text-secondary-default hover:tw-border-transparent hover:tw-bg-secondary-default hover:tw-text-white"
|
|
v-for="(servicesLocation, idx) in servicesLocations" :key="idx"
|
|
:to="localePath(`/service?q=${servicesLocation}`)">
|
|
{{ servicesLocation }}
|
|
</nuxt-link>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</v-container>
|
|
<!-- service -->
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<script>
|
|
import axios from "axios";
|
|
|
|
export default {
|
|
props: {
|
|
servicesSearchs: {
|
|
type: Array,
|
|
default: () => []
|
|
},
|
|
servicesLocations: {
|
|
type: Array,
|
|
default: () => []
|
|
},
|
|
exhibitionsSearchs: {
|
|
type: Array,
|
|
default: () => []
|
|
},
|
|
exhibitionsLocations: {
|
|
type: Array,
|
|
default: () => []
|
|
},
|
|
exhibitionsCategories: {
|
|
type: Array,
|
|
default: () => []
|
|
},
|
|
serviceKeywords: {
|
|
type: Array,
|
|
default: () => []
|
|
},
|
|
exhibitionsKeywords: {
|
|
type: Array,
|
|
default: () => []
|
|
},
|
|
populars: {
|
|
type: Object,
|
|
default: () => { }
|
|
},
|
|
},
|
|
data() {
|
|
return {
|
|
type: 'exhibition',
|
|
toggle_exclusive: 1,
|
|
inputs: "",
|
|
keywords: [],
|
|
tabToggle: 0,
|
|
tab: null,
|
|
tab2: null,
|
|
tabs: 'exhibitionsCategories',
|
|
exhibition: false,
|
|
service: false,
|
|
keyword: false,
|
|
locationsIdx: 0,
|
|
countriesIdx: 0,
|
|
categoriesIdx: 0,
|
|
exhibitionActiveIndex: 0,
|
|
locationActiveIndex: 0,
|
|
cityActiveIndex: 0,
|
|
WindowsWidth: undefined,
|
|
bigSearch: false,
|
|
customPlaceholder: 'Search exhibitions or services...',
|
|
};
|
|
},
|
|
created() {
|
|
if (process.client) {
|
|
this.WindowsWidth = window.innerWidth;
|
|
}
|
|
},
|
|
methods: {
|
|
onResize() {
|
|
if (process.client) {
|
|
this.WindowsWidth = window.innerWidth;
|
|
}
|
|
},
|
|
open() {
|
|
let vm = this;
|
|
vm.bigSearch = true;
|
|
vm.$nextTick(() => {
|
|
vm.$refs.search.focus();
|
|
setTimeout(function () {
|
|
vm.handleClick();
|
|
}, 300)
|
|
}
|
|
);
|
|
},
|
|
handleClick() {
|
|
if (this.tabToggle == 0) {
|
|
this.exhibition = true;
|
|
this.service = false;
|
|
} else {
|
|
this.exhibition = false;
|
|
this.service = true;
|
|
}
|
|
if (this.inputs.length > 0) {
|
|
this.keyword = true;
|
|
this.exhibition = false;
|
|
this.service = false;
|
|
}
|
|
if (this.WindowsWidth < 1366) {
|
|
this.$store.dispatch('toggleSearchDialog', true);
|
|
}
|
|
},
|
|
handleInput() {
|
|
this.keyword = true;
|
|
this.exhibition = false;
|
|
this.service = false;
|
|
this.keywords = [];
|
|
},
|
|
clickOutSide() {
|
|
this.exhibition = false;
|
|
this.service = false;
|
|
this.bigSearch = false;
|
|
this.tabs = 'exhibitionsCategories';
|
|
this.exhibitionActiveIndex = 0;
|
|
this.locationActiveIndex = 0;
|
|
this.cityActiveIndex = 0;
|
|
this.tabToggle = 0;
|
|
},
|
|
clickExhibition() {
|
|
let oringalToggle = this.tabToggle;
|
|
if (this.tabToggle != 0) {
|
|
this.tabToggle = 0;
|
|
}
|
|
if (this.service == true) {
|
|
this.service = false;
|
|
this.exhibition = true;
|
|
}
|
|
if (this.keyword == true) {
|
|
this.keyword = false;
|
|
}
|
|
if (this.inputs.length > 0) {
|
|
this.exhibition = false;
|
|
this.service = false;
|
|
this.keyword = true;
|
|
} else {
|
|
if (oringalToggle == 0) {
|
|
this.exhibition = false;
|
|
}
|
|
}
|
|
this.keywords = this.exhibitionsKeywords;
|
|
this.type = 'exhibition';
|
|
if (this.WindowWidth >= 1366) {
|
|
this.customPlaceholder = 'Explore global exhibitions';
|
|
}
|
|
},
|
|
clickService() {
|
|
let oringalToggle = this.tabToggle;
|
|
if (this.tabToggle != 1) {
|
|
this.tabToggle = 1;
|
|
}
|
|
if (this.exhibition == true) {
|
|
this.service = true;
|
|
this.exhibition = false;
|
|
}
|
|
if (this.keyword == true) {
|
|
this.keyword = false;
|
|
}
|
|
if (this.inputs.length > 0) {
|
|
this.exhibition = false;
|
|
this.service = false;
|
|
this.keyword = true;
|
|
} else {
|
|
if (oringalToggle == 1) {
|
|
this.service = false;
|
|
}
|
|
}
|
|
this.keywords = this.serviceKeywords;
|
|
this.type = 'service';
|
|
if (this.WindowWidth >= 1366) {
|
|
this.customPlaceholder = 'Search exhibitions or services...';
|
|
}
|
|
},
|
|
},
|
|
computed: {
|
|
WindowWidth() {
|
|
if (process.client) {
|
|
this.WindowsWidth = window.innerWidth;
|
|
}
|
|
return this.WindowsWidth;
|
|
},
|
|
},
|
|
mounted() {
|
|
this.$nextTick(() => {
|
|
window.addEventListener("resize", this.onResize);
|
|
if (this.WindowWidth >= 1366) {
|
|
this.customPlaceholder = 'Explore global exhibitions';
|
|
} else {
|
|
this.customPlaceholder = 'Search exhibitions or services...';
|
|
}
|
|
});
|
|
},
|
|
beforeDestroy() {
|
|
window.removeEventListener("resize", this.onResize);
|
|
},
|
|
};
|
|
</script>
|
|
|
|
<style lang="scss" scoped>
|
|
.search-result {
|
|
position: absolute;
|
|
left: 0px;
|
|
top: 70px;
|
|
width: 100%;
|
|
z-index: 10;
|
|
}
|
|
|
|
.v-tab {
|
|
margin: 0;
|
|
}
|
|
|
|
:deep() {
|
|
.above {
|
|
z-index: 99 !important;
|
|
}
|
|
}
|
|
|
|
.custom-control:focus {
|
|
outline: none !important;
|
|
}
|
|
|
|
.nuxt-link-active {
|
|
color: #232323;
|
|
text-decoration: none;
|
|
}
|
|
|
|
.nuxt-link-active:hover {
|
|
color: primary;
|
|
text-decoration: underline;
|
|
text-decoration-style: dashed;
|
|
}
|
|
|
|
.nuxt-link-exact-active {
|
|
color: #232323;
|
|
text-decoration: none;
|
|
}
|
|
|
|
.tabs {
|
|
.tab {
|
|
position: relative;
|
|
padding-bottom: 15px;
|
|
|
|
&.active {
|
|
&::after {
|
|
position: absolute;
|
|
bottom: 0;
|
|
left: 0;
|
|
content: '';
|
|
display: block;
|
|
width: 100%;
|
|
height: 3px;
|
|
background-color: #f48800;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
.exhibitionDropdownLink {
|
|
&.active {
|
|
background-image: url('@/assets/svg/icon-arrow.svg');
|
|
background-position: right center;
|
|
background-size: 16px;
|
|
background-repeat: no-repeat;
|
|
}
|
|
}
|
|
|
|
@media screen and (min-width:1366px) {
|
|
.btn-group {
|
|
position: relative;
|
|
|
|
&::before {
|
|
content: '';
|
|
display: inline-block;
|
|
position: absolute;
|
|
right: 0;
|
|
top: 0;
|
|
bottom: 0;
|
|
width: 1px;
|
|
height: 16px;
|
|
background-color: #f5cda8;
|
|
margin: auto;
|
|
}
|
|
}
|
|
}
|
|
</style>
|