|
|
<template> <div class="service-content tw-mb-[60px] tw-grid tw-grid-cols-1 tw-gap-[30px] md:tw-mb-[100px] xl:tw-px-[60px] xl:tw-max-w-screen-xl xl:tw-mx-auto xl:tw-grid-cols-[auto_364px]"> <mobileFixTopBar ref="stickySwiper" :fixBar="fixBar" :currStep="currStep" :list="fixBarList"></mobileFixTopBar> <section class="step sercion-1 tw-w-full md:tw-px-[30px] xl:tw-px-0 xl:tw-col-span-2"> <div class="tw-mt-[20px] md:tw-mb-[11px] md:tw-mt-[40px]"> <Breadcrumbs></Breadcrumbs> </div> <div v-if="content.banners.length" class="tw-w-full"> <slideshow :banners="content.banners"></slideshow> </div> </section> <section class="sercion-2 tw-px-[30px] md:tw-px-[30px] xl:tw-px-0 xl:tw-col-start-1 xl:tw-row-start-2"> <h1 class="t16 tw-mb-[18px] md:t24">{{ content.name }}</h1> <div v-if="content.supplier" class="supplier tw-flex tw-items-center tw-mb-[20px] tw-text-base-primary t14 md:tw-mb-[30px] md:t16 md:tw-font-normal"> <img :src="content.supplier.logo" class="tw-max-w-[40px] md:tw-max-w-[80px]" /> <div class="t14 tw-font-normal tw-ml-[10px] md:t18 md:tw-font-normal"> {{ content.supplier.brand }} </div> </div> <div class="editor-styleguide tw-text-base-primary" v-html="content.highlights"></div> </section> <section class="sercion-3 tw-grid tw-grid-cols-1 tw-gap-[30px] md:tw-gap-[40px] md:tw-px-[30px] xl:tw-px-0 xl:tw-col-start-1 xl:tw-row-start-3"> <div ref="packageOptions" id="packageOptions" class="step"> <div class="tw-px-[30px] md:tw-px-0"> <h2 class="title-icon-left t16 tw-mb-[20px] md:t20"> {{ $t("Package Options") }} </h2> <p>{{ $t("Select date and package options") }}</p> </div> <div class="tw-w-full tw-bg-neutrals-100 tw-p-[20px] md:tw-p-[30px]"> <div class=""> <div class="group tw-mb-[40px]" v-if="content.dateStatus == 'active'"> <h3 class="t14 tw-font-bold tw-mb-[20px] md:t16"> {{ $t("Select Date") }} </h3> <selectDate :start="content.start" :end="content.end" @selected="selectDates = $event"></selectDate> </div> <div class="group tw-mb-[40px]" v-if="content.timeStatus == 'active'"> <h3 class="t14 tw-font-bold tw-mb-[20px] md:t16"> {{ $t("Time") }} </h3> <timeButtonGroup v-if="content.times.length > 0" :list="content.times" @selected="selectTime = $event"> </timeButtonGroup> </div> <div class="group tw-mb-[20px]"> <h3 class="t14 tw-font-bold tw-mb-[20px] md:t16"> {{ $t("Package Type") }} </h3> <typeGroup :packages="content.packages" @type="changeType($event)"></typeGroup> </div> <template v-for="(item, index) in content.packages"> <div :key="index" v-if="index === activePackage" class=""> <div v-if="index == 1"> <div class="group tw-mb-[20px]"> <h3 class="t14 tw-font-bold tw-mb-[20px] md:t16"> {{ item.plan_title }} </h3> </div> <buttonGroup :list="item.choices" @choicesIdx="choicesIdx($event)"></buttonGroup> <customSelectGroup ref="customSelectGroup" :label="'Specification'" :package="item.specifications" :choices="item.choices" :choicesIndex="choicesIndex" @totalPrice="customPlanPrice = $event"> </customSelectGroup> </div> <div v-else> <selectGroup :label="'Specification'" :package="item.specifications" @totalPrice="totalPrice = $event"></selectGroup> </div> </div> </template> <div v-show="content.additionalServices.length > 0" class="group tw-mb-[20px]"> <additionalGroup :label="'Additional Services'" :package="content.additionalServices" @totalPrice="additionTotalPrice = $event"></additionalGroup> </div> <div class="md:tw-flex md:tw-justify-between md:tw-items-center"> <div class="tw-flex tw-justify-between tw-items-start md:tw-w-full md:tw-basis-10/12"> <div class="tw-flex tw-flex-col tw-justify-center"> <div class="tw-flex tw-items-center tw-mb-[8px] md:tw-mb-0"> <div class="tw-body-4 tw-text-neutrals-900 tw-mr-[10px] md:t24"> ${{ finalPrice }} {{ currency }} </div> <!-- <div class="tw-body-4 tw-text-base-hint tw-line-through md:t20 md:tw-font-medium" > ${{ totalPrice.toLocaleString() }} </div> --> </div> <div class="tw-hidden tw-body-4 tw-text-neutrals-600 md:tw-hidden"> Deposit fee: $5 {{ currency }} (10%) </div> </div> <like></like> </div> <button class="tw-transition tw-btn-md tw-text-white tw-border tw-border-solid tw-border-primary-default tw-bg-primary-default tw-py-[8.5px] tw-mt-[20px] tw-w-full tw-rounded-xl md:tw-mt-0 md:tw-ml-[36px] md:tw-w-auto md:tw-basis-2/12 disabled:tw-bg-neutral-100 disabled:tw-text-base-disable disabled:tw-border-neutral-200" @click="bookNow" :disabled="btnDisabled"> {{ $t("Book Now") }} </button> </div> </div> </div> </div> <div id="serviceDetails" class="serviceDetails step"> <div class="tw-px-[30px] md:tw-px-0"> <h2 class="title-icon-left t16 tw-mb-[20px] md:t20 xl:tw-font-bold"> {{ $t("Service Details") }} </h2> <div v-if="content.details.length < 800"> <div ref="details" class="editor-styleguide tw-text-base-primary t14 md:t16 md:tw-font-normal" v-html="content.details"></div> </div> <div v-else> <div :class="[ button.details ? 'seeMore-hide' : 'seeMore-show', 'editor-styleguide tw-text-base-primary tw-transition t14 md:t16 md:tw-font-normal', ]" ref="details" v-html="content.details"></div> <button v-show="seeMore.details" :class="[ 'seeMore tw-transition tw-btn-md tw-text-primary-1 tw-border tw-border-solid tw-border-primary-1 tw-px-[30px] tw-py-[8.5px] tw-mt-[20px] tw-w-full tw-rounded-xl hover:tw-bg-primary-3 xl:hover:tw-bg-transparent xl:tw-border-none', button.details ? '' : 'open', ]" @click="opendetail()"> {{ $t(seeMoreDetailsText) }} </button> </div> </div> </div> <div id="cancellationPolicy" class="cancellationPolicy step tw-px-[30px] md:tw-px-0"> <h2 class="title-icon-left t16 tw-mb-[20px] md:t20 xl:tw-font-bold"> {{ $t("Cancellation Policy") }} </h2> <div v-if="content.cancellation_policy.length < 800"> <div ref="cancellation_policy" class="editor-styleguide tw-text-base-primary t14 md:t16 md:tw-font-normal" v-html="content.cancellation_policy"> </div> </div> <div v-else> <div :class="[ button.cancellation_policy ? 'seeMore-hide' : 'seeMore-show', 'editor-styleguide tw-text-base-primary tw-transition t14 md:t16 md:tw-font-normal', ]" ref="cancellation_policy" v-html="content.cancellation_policy"></div> <button v-show="seeMore.cancellation_policy" :class="[ 'seeMore tw-transition tw-btn-md tw-text-primary-1 tw-border tw-border-solid tw-border-primary-1 tw-px-[30px] tw-py-[8.5px] tw-mt-[20px] tw-w-full tw-rounded-xl hover:tw-bg-primary-3 xl:hover:tw-bg-transparent xl:tw-border-none', button.cancellation_policy ? '' : 'open', ]" @click="openCancellationPolicy()"> {{ $t(seeMoreCancellationPolicyText) }} </button> </div> </div> <div id="faq" ref="faq" class="step tw-px-[30px] md:tw-px-0"> <h2 class="title-icon-left t16 tw-mb-[20px] md:t20 xl:tw-font-bold"> {{ $t("FAQ") }} </h2> <faq :faq="content.faq" class="tw-z-[8]"></faq> </div> <div id="contactUs" class="step tw-px-[30px] md:tw-px-0"> <h2 class="title-icon-left t16 tw-mb-[20px] md:t20 xl:tw-font-bold"> {{ $t("Contact Us") }} </h2> <div class="tw-body-3 tw-text-base-primary tw-mb-[20px]"> 886-2-2725-5000 </div> <div class="tw-body-3 tw-text-base-primary">info@showeasy.com</div> </div> <div :class="[ 'tw-bg-white tw-flex tw-flex-cols tw-justify-between tw-items-center tw-px-[30px] tw-py-[16px] tw-w-full', fixBar ? 'tw-fixed tw-left-[0px] tw-bottom-[0px] tw-z-[8] tw-shadow-[1px_0px_2px_rgba(0,0,0,0.25)]' : 'tw-hidden', ]"> <div :class="[ 'tw-flex tw-flex-col tw-justify-between tw-items-start tw-grow md:tw-w-full md:tw-flex-row md:tw-items-center', ]"> <div class="tw-flex tw-items-center tw-mb-[12px] md:tw-mb-0"> <div class="t16 tw-text-neutrals-900 tw-mr-[10px] md:t20 md:tw-mr-0"> ${{ finalPrice }} {{ currency }} </div> </div> <div class="tw-flex tw-justify-center tw-items-center tw-w-full md:tw-w-fit"> <like></like> <button class="tw-transition tw-whitespace-nowrap tw-body-4 tw-text-white tw-border tw-border-solid tw-border-primary-default tw-bg-primary-default tw-ml-[22px] tw-px-[24px] tw-py-[8.5px] tw-rounded-xl tw-w-full md:tw-body-2 md:tw-min-w-[130px] md:tw-max-w-[130px] md:tw-mt-0 disabled:tw-bg-neutral-100 disabled:tw-text-base-disable disabled:tw-border-neutral-200" @click="bookNow" :disabled="btnDisabled"> {{ $t("Book Now") }} </button> </div> </div> </div> </section> <section class="sercion-4 tw-px-[30px] tw-grid tw-grid-cols-1 tw-gap-[40px] tw-z-[8] md:tw-px-[30px] xl:tw-px-0 xl:tw-col-start-1 xl:tw-row-start-4"> <detailsModal :detail="content.details"></detailsModal> <cancellationPolicyModal :cancellationPolicy="content.cancellation_policy"></cancellationPolicyModal> </section> <section class="sercion-5 tw-hidden md:tw-px-[30px] xl:tw-px-0 xl:tw-block xl:tw-row-start-2 xl:tw-row-end-5"> <div class="tw-mb-[40px]"> <sidebarSelectOption :totalPrice="finalPrice" :currency="currency" :confirmationTime="content.confirmationTime"> </sidebarSelectOption> </div> <sideBarMenu :fixBarList="fixBarList" :currStep="currStep"></sideBarMenu> </section> <section class="step sercion-6 tw-pl-[30px] tw-w-full xl:tw-px-0 xl:tw-col-span-2"> <h2 class="title-icon-left t16 md:t20 xl:tw-font-bold"> {{ $t("You might like ...") }} </h2> <youMightLikeslideshow :list="list" :countrycode="countrycode" :regionName="regionName"></youMightLikeslideshow> </section> </div></template><script>import Breadcrumbs from "@/components/Breadcrumbs";import slideshow from "@/components/swiper/serviceContent.vue";import detailsModal from "@/components/service/contentModal/DetailsModal.vue";import cancellationPolicyModal from "@/components/service/contentModal/cancellationPolicyModal.vue";import selectDate from "@/components/service/content/selectDate.vue";import typeGroup from "@/components/service/content/typeGroup.vue";import selectGroup from "@/components/service/content/selectGroup.vue";import customSelectGroup from "@/components/service/content/customSelectGroup.vue";import additionalGroup from "@/components/service/content/additionalGroup.vue";import faq from "@/components/service/content/faq.vue";import sidebarSelectOption from "@/components/service/content/sidebarSelectOption.vue";import sideBarMenu from "@/components/service/content/sideBarMenu.vue";import Swiper from "swiper/bundle";import { scrollama } from "scrollama";import youMightLikeslideshow from "@/components/swiper/youMightLike.vue";import mobileFixTopBar from "@/components/swiper/mobileFixTopBar.vue";import timeButtonGroup from "@/components/service/content/timeButtonGroup";import buttonGroup from "@/components/service/content/buttonGroup.vue";import like from "@/components/newComponent/like/like.vue";export default { auth: false, components: { Swiper, scrollama, Breadcrumbs, slideshow, detailsModal, cancellationPolicyModal, selectDate, typeGroup, timeButtonGroup, buttonGroup, selectGroup, customSelectGroup, additionalGroup, faq, sidebarSelectOption, sideBarMenu, youMightLikeslideshow, mobileFixTopBar, like, }, data() { return { apiUrl: process.env.SERVICE_CONSOLE, btnDisabled: process.env.ENV == 'production', currStep: null, stickySwiper: null, content: { banners: [{ banner_id: '123e41', image: require('/assets/img/service_banner.png') },{ banner_id: '123e31', image: require('/assets/img/service_banner.png') },{ banner_id: '123e12', image: require('/assets/img/service_banner.png') }], country: null, city: null, name: "科隆機場接送服務", highlights: '<ul><li>接送車輛皆為車況良好的八人座(含司機)賓士商務車。</li><li>安排熟悉路況及駕駛經驗豐富的當地專業導遊擔任司機，免費提供旅宿與交通安排基本諮詢服務。</li><li>司機精通德語與華語，可加價選購英文服務。</li><li>本服務包含於出關處舉牌迎賓，提供親切專業的接送服務。</li></ul>', details: '<div data-v-5da7b8eb="" class="seeMore-show tw-text-base-primary tw-transition t14 md:t16 md:tw-font-normal"><h2>經典服務經驗</h2><p><br></p><p>從2020起，柏林政府啟用新機場，此機場位於柏林東南郊區，離市中心遙遠，由機場出發至市中心，需要多次轉車，柏林公眾交通系統，播報站名以德文為主，容易因為聽不懂德文而錯失過站，此外地鐵超過百年，建造時間較早，諸多車站沒有規劃電梯，必須手搬著行李，自行上下樓梯，對旅客而言，行動非常不便。</p><p><br></p><p>為解決上述問題，本公司提供華人專業導遊接送服務，提前抵達機場，在您的出機口舉牌等待您的到來，接送車輛賓士8人座(含司機)商務車，駕駛人員接送經驗豐富，熟悉當地路況，華文與德文流利，以最舒適的方式，從機場送達您想去的地點</p><p><br></p><h2>商品詳細說明</h2><ul><li>預定接機服務請至少於5個日曆天之前完成訂購與付費手續。</li><li>八人座(含司機)賓士商務車，最多可以搭乘7位貴賓，行李數量因空間有限需限制，搭載行李的數量會因乘客人數增加而對應減少，</li></ul><p> 請參考如下資訊並請於訂購本服務時提供搭乘人數與行李數量：</p><p> 乘客1~4人，可搭載4件可置於腿上的隨身行李及4件28吋的托運行李。</p><p> 乘客5~7人，可搭載7件可置於腿上的隨身行李及2件28吋的托運行李。</p><ul><li>用車距離為30公里以內，每超過 一公里加收5歐元，費用請現場支付給司機。</li><li>機場接機等待時間為飛機落地起算1小時以內。</li><li>本服務限定一個下車地，可加價選購增加停靠地點服務，服務終止時間以最後一位乘客抵達下車地點為準。</li><li>搭車前24小時將以電子郵件及簡訊提供給客戶必要資訊，包括司機的名字、手機、車牌等，而司機會在事先約定好的位置手持歡迎牌等待。</li><li>若遇航班提早抵達，仍須依您原預約時間提供服務，請恕無法提前；若您選擇自行離開放棄服務則費用恕不退還。</li><li>若乘車現場發現與訂購人數或行李數不符，導致超載，司機有權拒絕提供服務，恕不退費。</li><li>因車輛安排考量，預約之貴賓如欲變更時間或預約資料，需於原預約時間(班機抵達時間)之 48小時前告知，如未於可受理異動時間之前告知，預約時間與接送資料無法變更。</li></ul><p><br></p><h2>商品購買說明</h2><p><br></p><ul><li>可加價指定司機具備英文溝通能力的服務 </li><li>可加價增加停靠地點（每新增一處停靠地點加收20歐元），若事前無訂購增加停靠地點，則請於當日現場給付現金給司機。 </li><li>提供兒童安全座椅及兒童增高墊加價租用服務，如有特殊需求（如兒童安全座椅）須事前告知，以便安排，當天現場恕無法追加。 </li><li>如需協助辦理飯店入住，請點選加值服務，現場須提供飯店飯店預定證明及入住人護照正本。 </li></ul><p><br></p></div>', cancellation_policy: "<ul><li>所選日期 5天（含）之前取消，收取手續費 0％</li><li>所選日期 4天（含）之前取消，收取手續費 50％</li><li>所選日期 3天（含）之前取消，收取手續費 100％</li></ul>", saved: false, confirmation_time: 24, supplier: { logo: require('/assets/img/Footer.png'), brand: 'ShowEasy' }, available_sections: null, timeStatus: 'active', dateStatus: 'active', times: [{ start_time: '2023-02-06', end_time: '2023-03-06', },{ start_time: '2023-02-06', end_time: '2023-03-06', },{ start_time: '2023-02-06', end_time: '2023-03-06', }], start: '2023-02-06', end: '2023-06-06', faq: [{ question: '超過限定里程（30公里）如何計費加價？', answer: '每超過一公里加收5歐元，費用請現場支付給司機。', }], confirmationTime: '', packages: [{ package_id: '1', name: '嘉義', photo: require('/assets/img/Frame.jpg'), is_customize: 1, choices:[{title: '接機服務',text: 'qweqweq'},{title: '送機服務',text: '13123'}], plan_title: '接送機服務', specifications: [{ title: '123123', }] },{ package_id: '1', name: '臺南', photo: require('/assets/img/Frame.jpg'), is_customize: 1, choices:[{title: '接機服務',text: 'qweqweq'},{title: '送機服務',text: '13123'}], plan_title: '接送機服務', specifications: [{ title: '123123', }] }], additionalServices: [], }, list: [], choicesIndex: 0, countrycode: [], regionName: [], elementHeight: { details: null, cancellation_policy: null, faq: null, }, seeMore: { details: true, cancellation_policy: true, }, button: { details: true, cancellation_policy: true, }, offset: { packageOptions: 0, faq: 0, }, contentId: "", packageId: "", packageName: "", window: { width: 0, }, fixBar: false, fixBarList: [ { id: "packageOptions", title: "Package Options", show: true }, { id: "serviceDetails", title: "Service Details", show: true }, { id: "cancellationPolicy", title: "Cancellation Policy", show: true }, { id: "faq", title: "FAQ", show: true }, { id: "contactUs", title: "Contact Us", show: true }, ], activePackage: 0, totalPrice: [], additionTotalPrice: [], customPlanPrice: [], selectDates: '', selectTime: { start_time: '2023-02-06', end_time: '2023-03-06', }, }; }, async created() { // await this.getServiceData();
// await this.getFaq();
// await this.getPackages();
// await this.getAdditionalServices();
// await this.addViewCount();
// await this.getYouMightLikeData();
// await this.getRegionName();
// await this.getCountryCode();
if (process.browser) { window.addEventListener("resize", this.handleResize); } this.handleResize(); }, mounted() { let vm = this; vm.contentId = vm.$route.params.id; vm.offset.packageOptions = vm.$refs.packageOptions.offsetTop; vm.offset.faq = vm.$refs.faq.offsetTop; vm.$nextTick(function () { // instantiate the scrollama
const scrollama = require("scrollama"); const scroller = scrollama(); // setup the instance, pass callback functions
scroller .setup({ step: ".service-content .step", offset: 0.6, }) .onStepEnter((response) => { // { element, index, direction }
vm.currStep = response.element.id; let fb_messenger = document.querySelector(".fb_dialog_content"); if (response.index > 3) { vm.$refs.stickySwiper.slideTo(4); } else { vm.$refs.stickySwiper.slideTo(0); } if (response.index >= 1 && response.index < 6) { vm.fixBar = true; if (fb_messenger) { fb_messenger.classList.add("hasBar"); } } else { vm.fixBar = false; if (fb_messenger) { fb_messenger.classList.remove("hasBar"); } } }) .onStepExit((response) => { // { element, index, direction }
vm.currStep = response.element.id; let fb_messenger = document.querySelector(".fb_dialog_content"); if (response.index >= 1 && response.index < 6) { vm.fixBar = true; if (fb_messenger) { fb_messenger.classList.add("hasBar"); } } else { vm.fixBar = false; if (fb_messenger) { fb_messenger.classList.remove("hasBar"); } } }); }) }, computed: { currency() { return this.$store.getters.getCurrency; }, seeMoreDetailsText() { if (this.button.details == false) { return "See less"; } else { return "See more"; } }, seeMoreCancellationPolicyText() { if (this.button.cancellation_policy == false) { return "See less"; } else { return "See more"; } }, finalPrice() { let option = 0; let custom = 0; let addition = 0; if (this.additionTotalPrice) { this.additionTotalPrice.forEach((item) => { addition += Number(item.total); }); } if (this.customPlanPrice) { this.customPlanPrice.forEach((item) => { custom += Number(item.total); }); } if (this.totalPrice) { this.totalPrice.forEach((item) => { option += Number(item.total); }); } if (this.currency == 'USD') { return Number(addition + custom + option).toFixed(2).toLocaleString(); } else { return Number(addition + custom + option).toLocaleString(); } }, }, watch: { currency: { handler: function () { this.getServiceData(); this.getPackages(); this.getAdditionalServices(); }, }, activePackage: { handler: function (newVal, oldVal) { if (newVal !== oldVal) { this.customPlanPrice = []; this.totalPrice = []; } }, }, choicesIndex: { handler: function (newVal, oldVal) { if (newVal !== oldVal) { this.customPlanPrice = []; this.totalPrice = []; } }, } }, destroyed() { if (process.browser) { window.removeEventListener("resize", this.handleResize); } }, methods: { async getServiceData() { await this.$axios .get( `${this.apiUrl}/user-services/content?service_id=${this.$route.params.id}&lang_code=${this.$i18n.localeProperties["langQuery"]}¤cy=${this.currency}` ) .then((res) => { this.content.banners = res.data.banners; this.content.name = res.data.name; this.content.country = res.data.country; this.content.city = res.data.city; this.content.highlights = res.data.highlights; this.content.details = res.data.details; this.content.cancellation_policy = res.data.cancellation_policy; this.content.supplier = res.data.supplier; this.content.available_sections = res.data.available_sections; this.content.times = res.data.available_sections.times; this.content.timeStatus = res.data.available_sections.time_status; this.content.dateStatus = res.data.available_sections.date_status; this.content.start = res.data.available_sections.start; this.content.end = res.data.available_sections.end; this.content.payment_currency = res.data.payment_currency; this.content.confirmationTime = res.data.confirmation_time.toString(); }) .catch((error) => console.log(error)); },
async getFaq() { await this.$axios .get( `${this.apiUrl}/user-services/faqs?service_id=${this.$route.params.id}&lang_code=${this.$i18n.localeProperties["langQuery"]}` ) .then((res) => { this.content.faq = res.data; }) .catch((error) => console.log(error)); }, async getPackages() { await this.$axios .get( `${this.apiUrl}/user-services/packages?service_id=${this.$route.params.id}&lang_code=${this.$i18n.localeProperties["langQuery"]}¤cy=${this.currency}` ) .then((res) => { this.content.packages = res.data; this.packageId = res.data[0].package_id ? res.data[0].package_id : ""; }) .catch((error) => console.log(error)); }, async getAdditionalServices() { await this.$axios .get( `${this.apiUrl}/user-services/additional?service_id=${this.$route.params.id}&lang_code=${this.$i18n.localeProperties["langQuery"]}¤cy=${this.currency}` ) .then((res) => { this.content.additionalServices = res.data.services == [] ? null : res.data; }) .catch((error) => console.log(error)); }, async addViewCount() { let Obj = { service_id: `${this.$route.params.id}`, lang_code: `${this.$i18n.localeProperties["langQuery"]}`, add_number: 1, }; await this.$axios .put(`${this.apiUrl}/user-services/view-counts`, Obj) .then((res) => { }) .catch((error) => console.log(error)); }, opendetail() { if (this.window.width >= 1366) { this.button.details = !this.button.details; } else { this.$modal.show("Details"); } }, openCancellationPolicy() { if (this.window.width >= 1366) { this.button.cancellation_policy = !this.button.cancellation_policy; } else { this.$modal.show("cancellationPolicy"); } }, handleResize() { if (process.browser) { this.window.width = window.innerWidth; } }, changeType(index) { let vm = this; vm.activePackage = index; vm.packageId = vm.content.packages[index].package_id ? vm.content.packages[index].package_id : ""; vm.packageName = vm.content.packages[index].name ? vm.content.packages[index].name : ""; }, async getYouMightLikeData() { this.$axios .get( `${this.apiUrl}/user-services/advertisements?region=0&country=0&city=0&expo=0&counts=3&lang_code=${this.$i18n.localeProperties["langQuery"]}` ) .then((res) => { this.list = res.data; }) .catch((error) => console.log(error)); }, async getCountryCode() { this.$axios .get( `${this.apiUrl}/countries?lang_code=${this.$i18n.localeProperties["langQuery"]}` ) .then((respone) => { this.countrycode = respone.data; }) .catch((error) => console.log(error)); }, async getRegionName() { this.$axios .get( `/t/exhibitions/locations?lang=${this.$i18n.localeProperties["langQuery"]}&sort=False` ) .then((respone) => { this.regionName = respone.data.region_ori; }) .catch((error) => console.log(error)); }, bookNow() { let Obj = { service_id: this.$route.params.id, service_name: this.content.name, select_dates: this.selectDates, currency: this.currency, lang_code: this.$i18n.localeProperties["langQuery"], time: this.selectTime, package_id: this.packageId, package_name: this.packageName, specification: this.totalPrice ? this.totalPrice : {}, additional_services: this.additionTotalPrice ? this.additionTotalPrice : {}, custom_plan: this.customPlanPrice ? this.customPlanPrice : {}, supplier_id: this.content.supplier.id ? this.content.supplier.id : '', }; this.$axios .post(`/order?jwt=${this.$auth.$storage.getUniversal("jwt").token || "" }`, Obj)
.then((res) => { if (res.status == "200") { this.$router.push(this.localePath("/service/checkout/" + res.data.order_display_id)) }
}) .catch((error) => console.log(error)); }, choicesIdx(data) { let vm = this; vm.choicesIndex = data; } },};</script><style lang="scss" scoped>:deep() {
// .serviceDetails,
// .cancellationPolicy {
// p {
// margin-bottom: 6px;
// }
// }
}
.service-content {
.serviceDetails img { width: 100%; height: auto; }
.fix-right { position: fixed; top: 120px; right: 0 px; max-width: 400px; height: auto; z-index: 100; }
.title-icon-left { background-position: left 0px center; }
ul { padding-left: 24px; }
img { // image-rendering: pixelated;
}}
.seeMore { &-hide { position: relative; max-height: 295px; overflow: hidden;
&::after { content: ""; display: block; position: absolute; background: url("~/assets/img/gradient_white.png") repeat-x left bottom; width: 100%; height: 130px; left: 0; bottom: 0; z-index: 1; transition: bottom 0.5s; } }
&-show { position: relative; max-height: 100%; overflow: initial;
&::after { display: none; } }
@media screen and (min-width: 1366px) { position: relative; display: flex; align-items: center; justify-content: center;
&::after { content: ""; display: inline-block; position: relative; background-image: url("~/assets/svg/arrow-down-primary.svg"); background-position: center center; background-repeat: no-repeat; background-size: 100%; width: 9px; height: 6px; margin-left: 16px; }
&.open { &::after { transform: rotate(180deg); } } }}
.section-7 { >div { box-shadow: 1px 0px 2px rgba(0, 0, 0, 0.25), 0px 1px 2px rgba(0, 0, 0, 0.1); }}</style>
|
