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.
 
 

651 lines
24 KiB

<template>
<div
class="exhibition-content tw-grid tw-grid-cols-1 tw-gap-[30px] tw-mt-[20px] tw-mb-[60px] md:tw-px-[30px] md:tw-mt-[30px] md:tw-gap-[60px] xl:tw-px-[60px] xl:tw-max-w-screen-xl xl:tw-mx-auto xl:tw-grid-cols-[auto_364px]">
{{ relatedservicelist.category }}
<mobileFixTopBar ref="stickySwiper" :fixBar="fixBar" :currStep="currStep" :list="fixBarList"></mobileFixTopBar>
<section class="section1 tw-px-[30px] md:tw-px-0 xl:tw-w-full xl:tw-col-span-2">
<ExhibitionBannerArea :exhibition="exhibition"></ExhibitionBannerArea>
</section>
<section class="section2 tw-px-[30px] md:tw-px-0 xl:tw-pr-[30px] xl:tw-col-start-1 xl:tw-row-start-2">
<Breadcrumbs class="tw-px-0 md:tw-mb-[40px]"></Breadcrumbs>
<div class="tw-hidden md:tw-block">
<div class="md:tw-h-[48px] md:tw-grid md:tw-grid-cols-3 md:tw-gap-[12px] md:tw-mb-[30px]">
<a :href="exhibition.website" :target="exhibition.website == '#' ? '_self' : '_blank'">
<div
class="tw-bg-[#F6F6F6] tw-w-full tw-text-neutrals-800 elevation-0 tw-px-[34px] tw-py-[12px] tw-float-left tw-text-[16px]">
<unicon name="globe" class="float-left mr-3" />
<span>{{ $t("Official Website") }}</span>
</div>
</a>
<a :href="
'https://www.facebook.com/share.php?u=' +
this.currentDomain +
this.$route.fullPath
" target="_blank">
<div
class="tw-bg-[#F6F6F6] tw-w-full tw-text-neutrals-800 elevation-0 tw-px-[34px] tw-py-[12px] tw-float-left tw-text-[16px]">
<unicon name="facebook-f" class="float-left mr-3" />
<span class="mt-n2">{{ $t("Share with friends") }}</span>
</div>
</a>
<div @click="toggleFavorite"
class="tw-bg-[#F6F6F6] tw-w-full tw-text-neutrals-800 elevation-0 tw-px-[34px] tw-py-[12px] tw-float-left tw-text-[16px]">
<v-icon class="mr-2" color="neutrals darken-5">{{ saved ? "mdi-heart" : "mdi-heart-outline" }}
</v-icon>
<span>{{ $t("Follow Event") }}</span>
</div>
</div>
</div>
</section>
<section class="step section3 tw-px-[30px] md:tw-px-0 xl:tw-pr-[30px] xl:tw-col-start-1 xl:tw-row-start-3">
<ExhibitionIntro class="d-block" :exhibition="exhibition"></ExhibitionIntro>
</section>
<section class="section4 tw-ml-[12px] md:tw-ml-0 md:tw-px-0 xl:tw-col-start-1 xl:tw-row-start-4">
<ExhibitionAD v-if="exhibition.ads" :items="exhibition.ads"></ExhibitionAD>
</section>
<section class="section5 tw-px-[30px] md:tw-px-0 xl:tw-col-start-1 xl:tw-row-start-5">
<div v-if="relatedserviceShow">
<h3 ref="relatedServices" id="relatedServices" data-step="relatedServices" class="step md:tw-text-[20px]">
<two-dots class="tw-mr-7" />{{ $t("Related Services") }}
</h3>
<RelatedServicesSwiper :getCategory="getCategory" class="tw-mb-[30px] xl:tw-max-w-[822px]"
@categoryid="getCategoryId" @getAllServiceList="getAllService" @test="testtest"></RelatedServicesSwiper>
<template v-for="(item, index) in relatedservicelist">
<RelatedServices v-if="index <= 2" :key="index"
:relatedservice="item" :relatedservicelist="relatedservicelist" class="tw-mb-[20px] md:tw-mb-[30px]">
</RelatedServices>
</template>
<button
class="tw-body-3 tw-text-primary-1 tw-w-full tw-py-[10px] tw-justify-center tw-flex tw-flex-row tw-items-center">
<nuxt-link v-if="getcategoryid" :to="localePath(getcategoryid)" target="_blank"
class="tw-mr-[16px] hover:tw-text-primary-1">
{{$t('See more')}}
</nuxt-link>
<nuxt-link v-else :to="localePath('/service')" target="_blank" class="tw-mr-[16px] hover:tw-text-primary-1">
{{$t('See more')}}
</nuxt-link>
<img src="~/assets/svg/seeMore.svg" alt="" />
</button>
</div>
<div ref="photoGallery" id="photoGallery" data-step="photoGallery"
v-show="exhibition.gallery.length > 0 || exhibition.videos.length > 0" :class="['tw-mb-10 step']">
<h3 class="md:tw-text-[20px]">
<two-dots class="mr-7" />{{ $t("Photo & Video Gallery") }}
</h3>
<ExhibitionPhotoVideoGallery class="mt-lg-13 px-n7 mt-7"
v-if="exhibition.gallery.length > 0 || exhibition.videos.length > 0" :exhibition="exhibition" />
</div>
<div ref="venue" id="venue" data-step="venue" v-show="exhibition.venues && exhibition.venues.length > 0"
:class="['tw-mb-10 step']">
<h3 class="md:tw-text-[20px]">
<two-dots class="mr-7" />{{ $t("Venue") }}
</h3>
<ExhibitionVenue class="mt-lg-13 mt-7" v-if="exhibition.venues && exhibition.venues.length > 0"
:exhibition="exhibition" />
</div>
<div ref="exhibitProfile" id="exhibitProfile" data-step="exhibitProfile" v-show="exhibition.profile != ''"
:class="['tw-mb-10 step']">
<h3 class="md:tw-text-[20px]">
<two-dots class="mr-7" />{{ $t("Exhibit Profile") }}
</h3>
<ExhibitionExhibitProfile class="mt-lg-13 mt-7" :exhibition="exhibition" />
</div>
<div ref="detailedDescription" id="detailedDescription" data-step="detailedDescription" :class="['step']"
v-show="exhibition.description != ''">
<h3 class="md:tw-text-[20px]">
<two-dots class="mr-7" />{{ $t("Detailed Description") }}
</h3>
<ExhibitionDetailDescription class="mt-lg-13 mt-7" :exhibition="exhibition" />
</div>
</section>
<section class="section6 tw-px-[30px] md:tw-px-0 xl:tw-col-span-2 xl:tw-row-start-6">
<h3>
<two-dots class="step tw-mr-7" />{{ $t("You might like ...") }}
</h3>
<v-slide-group>
<template v-for="(item, i) in exhibition.recommended">
<v-slide-item v-if="exhibition.recommended" :key="i">
<nuxt-link :to="localePath('/exhibition/' + item.id)">
<ExhibitionYouMightLike class="float-left" :item="item" />
</nuxt-link>
</v-slide-item>
</template>
</v-slide-group>
</section>
<section class="section7 tw-hidden xl:tw-block xl:tw-row-start-2 xl:tw-row-end-6">
<sideBarMenu :fixBarList="fixBarList" :currStep="currStep"></sideBarMenu>
</section>
</div>
</template>
<script>
import ExhibitionBannerArea from "@/components/exhibition/ExhibitionBannerArea";
import ExhibitionIntro from "@/components/exhibition/ExhibitionIntro";
import ExhibitionReviews from "@/components/exhibition/ExhibitionReviews";
import ExhibitionPhotoVideoGallery from "@/components/exhibition/ExhibitionPhotoVideoGallery";
import Breadcrumbs from "@/components/Breadcrumbs";
import TwoDots from "@/components/TwoDots";
import ExhibitionAD from "@/components/exhibition/ExhibitionAD";
import ExhibitionYouMightLike from "@/components/exhibition/ExhibitionYouMightLike";
import { Swiper, SwiperSlide } from "vue-awesome-swiper";
import { scrollama } from "scrollama";
import SeeMoreDetailDescription from "@/components/exhibition/SeeMoreDetailDescription.vue";
import RelatedServices from "@/components/service/RelatedServicesCard.vue";
import RelatedServicesSwiper from "@/components/swiper/relatedService.vue";
import mobileFixTopBar from "@/components/swiper/mobileFixTopBar.vue";
import sideBarMenu from "@/components/service/content/sideBarMenu.vue";
import { CornerDownLeftIcon } from "vue-feather-icons";
export default {
auth: false,
name: "ExhibitionContent",
components: {
Breadcrumbs,
ExhibitionAD,
ExhibitionBannerArea,
ExhibitionIntro,
ExhibitionReviews,
ExhibitionPhotoVideoGallery,
ExhibitionYouMightLike,
Swiper,
SwiperSlide,
scrollama,
TwoDots,
SeeMoreDetailDescription,
RelatedServices,
RelatedServicesSwiper,
mobileFixTopBar,
sideBarMenu,
},
meta: {
pageName: "Exhibition content",
},
head() {
return {
title: this.exhibition.name,
meta: [
{
name: this.exhibition.name,
content: this.exhibition.description,
},
{ hid: "og:title", name: "og:title", content: this.exhibition.name },
{ hid: "og:image", name: "og:image", content: this.exhibition.logo },
{
hid: "og:url",
name: "og:url",
content: this.currentDomain + this.$route.fullPath,
},
{
hid: "og:description",
name: "og:description",
content: this.exhibition.description,
},
{ hid: "og:type", name: "og:type", content: "website" },
// other meta
],
};
},
data() {
return {
windowHeight: 0,
currentDomain: "https://www.showeasy.com",
apiUrl: process.env.SERVICE_CONSOLE,
list: [],
navControl: {
ad: true,
nav: false,
mobnav: false,
},
tab: "0",
saved: false,
exhibition: {
id: null,
name: "",
subtitle: null,
region: {},
country: {},
city: {},
logo: "",
banner: null,
startdate: "",
enddate: "",
status: {},
website: "",
isRecommend: null,
isLiked: null,
rating: 0,
reviewCount: null,
exhibitors: "",
visitors: "",
internalexhibitors: null,
area: null,
showstatusid: 100,
about: "",
profile: "",
description: "",
shortName: null,
frequency: {},
online: {},
organizers: [],
videos: [],
gallery: {},
venues: [],
categories: [],
subcategories: [],
},
relatedserviceShow: false,
relatedservicelist: [],
getservicecategory: [],
seemore: false,
getCategory: [],
getcategoryid: "",
testcategory: "",
currStep: null,
fixBar: false,
fixBarList: [],
};
},
async created() {
await this.getExhibition();
await this.getServiceCategory();
await this.getCategorySwiperList();
await this.getRelatedServiceList();
await this.checkRelatedService();
},
async beforeCreate() {
if (this.$auth.loggedIn) {
await this.$axios
.get(
`/member/exhibitions/user?jwt=${this.$auth.$storage.getUniversal("jwt").token
}&exhibition_id=${this.$route.params.id}`
)
.then((result) => {
this.saved = result.data.saved;
})
.catch((err) => {
console.log(err);
});
await this.$store.dispatch("updatePicture");
}
},
mounted() {
let vm = this;
vm.$nextTick(function () {
vm.list = [
/* {
url: "#ExhibitionHighlightReview",
name: "Highlight Review",
isShow:false,
},
{
url: "#ExhibitionRelatedServices",
name: "Related Services",
isShow:false,
},*/
{
url: "#ExhibitionPhotoVideoGallery",
name: "Photo & Video Gallery",
isShow:
this.exhibition.gallery.length > 0 ||
this.exhibition.videos.length > 0
? true
: false,
},
{
url: "#ExhibitionVenue",
name: "Venue",
isShow:
this.exhibition.venues && this.exhibition.venues.length > 0
? true
: false,
},
{
url: "#ExhibitionExhibitProfile",
name: "Exhibit Profile",
isShow: this.exhibition.profile ? true : false,
},
{
url: "#ExhibitionDetailDescription",
name: "Detailed Description",
isShow: this.exhibition.description ? true : false,
},
/*{
url: "#ExhibitionReviews",
name: "Reviews",
isShow:false,
},*/
];
// instantiate the scrollama
const scrollama = require("scrollama");
const scroller = scrollama();
// setup the instance, pass callback functions
scroller
.setup({
step: ".exhibition-content .step",
offset: 0.6,
})
.onStepEnter((response) => {
// { element, index, direction }
vm.currStep = response.element.id;
if (response.index > 3) {
vm.$refs.stickySwiper.slideTo(4);
} else {
vm.$refs.stickySwiper.slideTo(0);
}
if (response.index >= 1) {
vm.fixBar = true;
} else {
vm.fixBar = false;
}
})
.onStepExit((response) => {
// { element, index, direction }
vm.currStep = response.element.id;
if (response.index >= 1) {
vm.fixBar = true;
} else {
vm.fixBar = false;
}
});
});
},
watch: {
relatedservicelist: {
handler: function () {
if (this.relatedservicelist) {
this.relatedservicelist.forEach((item) => {
this.serviceListCategory = item.category;
if (this.getservicecategory) {
this.getservicecategory.forEach((category) => {
if (item.category == category.ids[0]) {
item.category = category.lang_text;
}
});
}
});
}
},
},
},
methods: {
introCheck(entries, observer, isIntersecting) {
this.navControl.mobnav = !isIntersecting;
},
checkNavBlock(entries, observer, isIntersecting) {
this.navControl.ad = isIntersecting;
},
navfix(entries, observer, isIntersecting) {
this.navControl.nav = isIntersecting;
},
toggleFavorite() {
if (this.$auth.loggedIn) {
this.$axios
.put(
`/member/exhibitions?jwt=${this.$auth.$storage.getUniversal("jwt")
? this.$auth.$storage.getUniversal("jwt").token
: ""
}&exhibition_id=${this.$route.params.id}&delete=${this.saved}`
)
.then((result) => {
this.saved = !this.saved;
})
.catch((err) => {
console.log(err);
});
} else {
this.$router.push(this.localePath("/user"));
}
},
async getExhibition() {
if (this.$route.query.preview) {
await this.$axios
.get(
"/admin/events/previewShows/" +
this.$route.params.id +
this.$i18n.localeProperties["langQuery"]
)
.then((res) => {
this.exhibition.id = res.data.exhibition.id;
this.exhibition.name = res.data.exhibition.name;
this.exhibition.subtitle = res.data.exhibition.subtitle;
this.exhibition.region = res.data.exhibition.region;
this.exhibition.country = res.data.exhibition.country;
this.exhibition.city = res.data.exhibition.city;
this.exhibition.logo = res.data.exhibition.logo;
this.exhibition.banner = res.data.exhibition.banner;
this.exhibition.startdate = res.data.exhibition.startdate;
this.exhibition.enddate = res.data.exhibition.enddate;
this.exhibition.status = res.data.exhibition.status;
this.exhibition.website = res.data.exhibition.website;
this.exhibition.isRecommend = res.data.exhibition.isRecommend;
this.exhibition.isLiked = res.data.exhibition.isLiked;
this.exhibition.rating = res.data.exhibition.rating;
this.exhibition.reviewCount = res.data.exhibition.reviewCount;
this.exhibition.exhibitors = res.data.exhibition.exhibitors;
this.exhibition.visitors = res.data.exhibition.visitors;
this.exhibition.internalexhibitors =
res.data.exhibition.internalexhibitors;
this.exhibition.area = res.data.exhibition.area;
this.exhibition.showstatusid = res.data.exhibition.showstatusid;
this.exhibition.about = res.data.exhibition.about;
this.exhibition.profile = res.data.exhibition.profile;
this.exhibition.description = res.data.exhibition.description;
this.exhibition.shortName = res.data.exhibition.shortName;
this.exhibition.frequency = res.data.exhibition.frequency;
this.exhibition.online = res.data.exhibition.online;
this.exhibition.organizers = res.data.exhibition.organizers;
this.exhibition.videos = res.data.exhibition.videos;
this.exhibition.gallery = res.data.exhibition.gallery;
this.exhibition.venues = res.data.exhibition.venues;
this.exhibition.categories = res.data.exhibition.categories;
this.exhibition.subcategories = res.data.exhibition.subcategories;
})
.catch((err) => {
console.log(err);
});
} else {
await this.$axios
.get(
`/exhibitions/${this.$route.params.id}?lang=${this.$i18n.localeProperties["langQuery"]}`
)
.then((res) => {
this.exhibition.id = res.data.exhibition.id;
this.exhibition.name = res.data.exhibition.name;
this.exhibition.subtitle = res.data.exhibition.subtitle;
this.exhibition.region = res.data.exhibition.region;
this.exhibition.country = res.data.exhibition.country;
this.exhibition.city = res.data.exhibition.city;
this.exhibition.logo = res.data.exhibition.logo;
this.exhibition.banner = res.data.exhibition.banner;
this.exhibition.startdate = res.data.exhibition.startdate;
this.exhibition.enddate = res.data.exhibition.enddate;
this.exhibition.status = res.data.exhibition.status;
this.exhibition.website = res.data.exhibition.website;
this.exhibition.isRecommend = res.data.exhibition.isRecommend;
this.exhibition.isLiked = res.data.exhibition.isLiked;
this.exhibition.rating = res.data.exhibition.rating;
this.exhibition.reviewCount = res.data.exhibition.reviewCount;
this.exhibition.exhibitors = res.data.exhibition.exhibitors;
this.exhibition.visitors = res.data.exhibition.visitors;
this.exhibition.internalexhibitors =
res.data.exhibition.internalexhibitors;
this.exhibition.area = res.data.exhibition.area;
this.exhibition.showstatusid = res.data.exhibition.showstatusid;
this.exhibition.about = res.data.exhibition.about;
this.exhibition.profile = res.data.exhibition.profile;
this.exhibition.description = res.data.exhibition.description;
this.exhibition.shortName = res.data.exhibition.shortName;
this.exhibition.frequency = res.data.exhibition.frequency;
this.exhibition.online = res.data.exhibition.online;
this.exhibition.organizers = res.data.exhibition.organizers;
this.exhibition.videos = res.data.exhibition.videos;
this.exhibition.gallery = res.data.exhibition.gallery;
this.exhibition.venues = res.data.exhibition.venues;
this.exhibition.categories = res.data.exhibition.categories;
this.exhibition.subcategories = res.data.exhibition.subcategories;
})
.catch((err) => {
console.log(err);
});
}
},
async getCategorySwiperList() {
let langCode = this.$i18n.localeProperties["langQuery"];
await this.$axios
.get(
`/service/category?lang_code=${langCode}`
)
.then((res) => {
let categoryArray = [];
let result = res.data;
for (let i in result) {
let obj = {
ids: [result[i].id, result[i].service_category_id],
lang_text: result[i].language_text[0].text
}
categoryArray.push(obj);
}
this.getCategory = categoryArray;
})
.catch((error) => console.log(error));
},
async getRelatedServiceList() {
// &expo_id={this.$route.params.id}
let vm = this;
await this.$axios
.get(
`${this.apiUrl}/user-services/relative-services?counts=3&country=${this.exhibition.country.id}&city=${this.exhibition.city.id}&lang_code=${this.$i18n.localeProperties["langQuery"]}&expo_id=${this.$route.params.id}`
)
.then((res) => {
this.relatedservicelist = res.data;
})
.catch((error) => console.log(error));
},
async getServiceCategory() {
let langCode = this.$i18n.localeProperties["langQuery"];
await this.$axios
.get(
`/service/category?lang_code=${langCode}`
)
.then((res) => {
let categoryArray = [];
let result = res.data;
for (let i in result) {
let obj = {
ids: [result[i].id, result[i].service_category_id],
lang_text: result[i].language_text[0].text
}
categoryArray.push(obj);
}
this.getservicecategory = categoryArray;
})
.catch((error) => console.log(error));
},
getAllService() {
let vm = this;
this.$axios
.get(
`${this.apiUrl}/user-services/relative-services?counts=3&country=${this.exhibition.country.id}&city=${this.exhibition.city.id}&lang_code=${this.$i18n.localeProperties["langQuery"]}&expo_id=${this.$route.params.id}`
)
.then((res) => {
this.relatedservicelist = res.data;
})
.catch((error) => console.log(error));
},
getCategoryId(data) {
this.getcategoryid = data;
},
testtest(data) {
this.testcategory = data;
this.serviceList();
},
serviceList() {
this.$axios
.get(
`${this.apiUrl}/user-services/relative-services?counts=3&country=${this.exhibition.country.id}&city=${this.exhibition.city.id}&lang_code=${this.$i18n.localeProperties["langQuery"]}&service_category=${this.testcategory}&expo_id=${this.$route.params.id}`
)
.then((res) => {
this.relatedservicelist = res.data;
})
.catch((error) => console.log(error));
},
checkRelatedService() {
this.fixBarList = [
{ id: "highlightReview", title: "Highlight Review", show: false },
{ id: "relatedServices", title: "Related Services", show: false },
{
id: "photoGallery",
title: "Photo & Video Gallery",
show:
this.exhibition.gallery.length > 0 ||
this.exhibition.videos.length > 0
? true
: false,
},
{
id: "venue",
title: "Venue",
show: this.exhibition.venues.length > 0 ? true : false,
},
{
id: "exhibitProfile",
title: "Exhibit Profile",
show: this.exhibition.profile ? true : false,
},
{
id: "detailedDescription",
title: "Detailed Description",
show: this.exhibition.description ? true : false,
},
{ id: "reviews", title: "Reviews", show: false },
];
if (this.relatedservicelist.length > 0) {
this.relatedserviceShow = true;
this.fixBarList = [
{ id: "highlightReview", title: "Highlight Review", show: false },
{ id: "relatedServices", title: "Related Services", show: true },
{
id: "photoGallery",
title: "Photo & Video Gallery",
show:
this.exhibition.gallery.length > 0 ||
this.exhibition.videos.length > 0
? true
: false,
},
{
id: "venue",
title: "Venue",
show: this.exhibition.venues.length > 0 ? true : false,
},
{
id: "exhibitProfile",
title: "Exhibit Profile",
show: this.exhibition.profile ? true : false,
},
{
id: "detailedDescription",
title: "Detailed Description",
show: this.exhibition.description ? true : false,
},
{ id: "reviews", title: "Reviews", show: false },
];
}
}
},
};
</script>
<style lang="scss" scoped>
</style>