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.
1360 lines
51 KiB
1360 lines
51 KiB
<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:t24">
|
|
{{ $t("Package Options") }}
|
|
</h2>
|
|
<p class="text-slate-600 t12 md:t16">{{ $t("Select the exhibition you want to attend, and add the storage and delivery service of exhibits or truck pickup service") }}</p>
|
|
</div>
|
|
<div class="tw-w-full tw-bg-neutrals-100 tw-px-[20px] tw-py-[30px] md:tw-p-[30px] tw-rounded-[20px]">
|
|
<div class="">
|
|
<!-- 輸入攤位數量 -->
|
|
<div v-if="serviceID" class="group tw-mb-[40px] tw-px-[20px] tw-py-[30px] tw-rounded-[20px] tw-bg-white">
|
|
<h3 class="t14 tw-font-bold tw-mb-[30px] md:t16 tw-block">
|
|
輸入攤位數量
|
|
</h3>
|
|
<selectExhibitionBooth @booth-select="getBoothSelect"></selectExhibitionBooth>
|
|
</div>
|
|
<!-- 選擇展覽 -->
|
|
<div v-else class="group tw-mb-[40px] tw-px-[20px] tw-py-[30px] tw-rounded-[20px] tw-bg-white">
|
|
<h3 class="t14 tw-font-bold tw-mb-[30px] md:t16 tw-block">
|
|
{{ $t("Select Exhibition") }}
|
|
</h3>
|
|
<selectExhibition ref="ref_selectExhibition" :selectYearList="selectYearList" :selectMonthList="selectMonthList" :selectExhibitionList="selectExhibitionList"></selectExhibition>
|
|
</div>
|
|
<div class="group tw-mb-[20px] tw-p-[20px] tw-rounded-[20px] tw-bg-white">
|
|
<h3 class="t14 tw-font-bold tw-mb-[20px] md:t16 tw-block">
|
|
{{ $t("Select exhibition hall service") }}
|
|
</h3>
|
|
<div class="tw-mb-[10px]">
|
|
<p class="tw-text-neutrals-500 tw-font-normal md:t16">{{ $t("Storage service of exhibits in the exhibition hall, and assistance in transportation to the designated booth") }}</p>
|
|
</div>
|
|
<selectExhibitionService v-for="(item,index) in selectExhibitionServiceList"
|
|
:key="item.id" :ref="'ref_selectExhibitionitem'+item.id" @ChangeCosts="ChangeCosts($event)"
|
|
:selectQuantityList="selectQuantityList"
|
|
:selectPackageList="selectPackageList"
|
|
:typeGroupList="typeGroupList"
|
|
:sort="index+1"
|
|
:show = "item.id == showServiceItem"
|
|
@delExhibitionService="delExhibitionService(item.id)">
|
|
</selectExhibitionService>
|
|
<v-btn outlined class="tw-rounded-[16px] remove-upper tw-border-primary-2 tw-text-primary-1 tw-flex tw-items-center"
|
|
style="padding: 24px 10px" width="100%" @click="addExhibitionService">
|
|
<v-img max-width="20" class="tw-mr-[8px]" :src="require(`@/assets/svg/new.svg`)"></v-img>
|
|
<span class="t18 tw-font-normal">{{ $t("New exhibit specifications") }}</span>
|
|
</v-btn>
|
|
</div>
|
|
<div v-show="showCardItem" class="group tw-mb-[20px] tw-p-[20px] tw-rounded-[20px] tw-bg-white">
|
|
<div class="tw-flex tw-justify-between tw-items-center">
|
|
<h3 class="t14 tw-font-bold tw-mb-[20px] md:t16">
|
|
{{ $t("Select truck pickup service") }}
|
|
</h3>
|
|
<v-img v-show="pickupServiceShow" max-width="18" max-height="19" class="tw-mr-[8px] tw-cursor-pointer" :src="require(`@/assets/svg/delete_default.svg`)" @click="deletePickupSerivce()"></v-img>
|
|
</div>
|
|
<div class="tw-mb-[20px]">
|
|
<p class="tw-text-neutrals-500 tw-font-normal md:t16">{{ $t("Pick up the goods at the designated place and transport them to the exhibition hall") }}</p>
|
|
</div>
|
|
<div v-show="pickupServiceShow">
|
|
<div>
|
|
<quantitySelectGroup ref="ref_quantitySelectGroup" :label="'Select quantity'" :quantitySelectList="quantitySelectList" @ChangeCosts="ChangeCosts($event)">
|
|
</quantitySelectGroup>
|
|
</div>
|
|
<h3 class="t14 tw-font-bold tw-mb-[20px] md:t16 tw-block">
|
|
{{ $t("Fill in the picking information") }}<span class="required t12 md:t14">*</span>
|
|
</h3>
|
|
<pickupInformation :selectAddressList="selectAddressList" ref="ref_pickupService" @ChangeCosts="ChangeCosts($event)"></pickupInformation>
|
|
</div>
|
|
<v-btn v-show="pickupServiceShow==false" outlined class="tw-rounded-[16px] remove-upper tw-border-primary-2 tw-text-primary-1 t18"
|
|
style="padding: 24px 10px" width="100%" @click="pickupServiceShow = true">
|
|
<v-img max-width="20" class="tw-mr-[8px]" :src="require(`@/assets/svg/new.svg`)"></v-img>
|
|
<span class="t18 tw-font-normal">{{ $t("New pickup service") }}</span>
|
|
</v-btn>
|
|
</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 }} {{ currencyName }}
|
|
</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="serviceDescription" class="serviceDescription 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 Description") }}
|
|
</h2>
|
|
<div v-for="(item,index) in expenseRules" :key="index" style="border: 1px solid red;">
|
|
<h3 class="t16 tw-mb-[20px] md:18 xl:t18 xl:tw-font-bold tw-pl-[10px]">
|
|
{{ index+1 }}. {{ item.ItemName }}
|
|
</h3>
|
|
<table class="tablecss" width="100%" v-if="item.ItemType=='01'">
|
|
<thead class="tw-bg-[#343434]">
|
|
<tr>
|
|
<th class="tw-text-[#fefefe]">{{$t('Weight')}}</th>
|
|
<th class="tw-text-[#fefefe]">{{$t('Price (NT $, tax included)')}}</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody>
|
|
<template v-if="item.StackerCostRules && item.StackerCostRules.length>0">
|
|
<tr v-for="item2 in item.StackerCostRules" :key="item2.Guid">
|
|
<td width="50%">{{item2.Weight_Min}}{{$t('More than tons to')}}{{item2.Weight_Max}}{{$t('Less than tons')}}</td>
|
|
<td width="50%">{{item2.Price}}<span v-if="item2.PricingMode=='N'">{{$t('NTD/piece')}}</span><span v-else>{{$t('NTD/ton')}}</span></td>
|
|
</tr>
|
|
</template>
|
|
</tbody>
|
|
</table>
|
|
<div ref="details" v-if="item.ItemType!='01' && item.ItemType!='02'" class="editor-styleguide tw-text-base-primary t14 md:t16 md:tw-font-normal tw-mt-[20px]"
|
|
v-html="item.CostRuleText"></div>
|
|
<div ref="details" class="editor-styleguide tw-text-base-primary t14 md:t16 md:tw-font-normal tw-mt-[20px]"
|
|
v-html="item.ExpensesMemo"></div>
|
|
</div>
|
|
<!-- <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 v-show="content.faq && content.faq.length>0" 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 }} {{ currencyName }}
|
|
</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="currencyName" :confirmationTime="content.confirmationTime">
|
|
</sidebarSelectOption>
|
|
</div>
|
|
<sideBarMenu :fixBarList="fixBarList" :currStep="currStep"></sideBarMenu>
|
|
</section>
|
|
<v-dialog v-model="dialog" :width="423"
|
|
@click:outside="colseDialog()">
|
|
<v-card class="tw-p-[30px]">
|
|
<v-spacer class="d-flex tw-justify-between align-center tw-mb-[30px]">
|
|
<div class="tw-text-[20px] tw-text-black tw-font-bold">
|
|
{{ $t("Remind") }}
|
|
</div>
|
|
<v-btn @click="colseDialog()" icon>
|
|
<v-icon> mdi-close </v-icon>
|
|
</v-btn>
|
|
</v-spacer>
|
|
<v-spacer class="tw-mb-[40px]">
|
|
<div class="tw-text-[16px] tw-text-neutrals-800">
|
|
{{$t("Your goods are of special size. Please contact ShowEasy service personnel (02) 2725-5000")}}
|
|
</div>
|
|
</v-spacer>
|
|
<div class="tw-text-[18px] tw-rounded-[16px] tw-text-center">
|
|
<span class="tw-text-primary-1 t18">{{countdown}}</span>s{{ $t("userProfile.unLinkOK") }}
|
|
</div>
|
|
</v-card>
|
|
</v-dialog>
|
|
<loading :isLoading="isLoading"></loading>
|
|
</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 selectExhibition from "@/components/service/content/selectExhibition.vue";
|
|
import selectExhibitionBooth from "@/components/service/content/selectExhibitionBooth.vue";
|
|
import selectExhibitionService from "@/components/service/content/selectExhibitionService.vue";
|
|
import quantitySelectGroup from "@/components/service/content/quantitySelectGroup.vue";
|
|
import pickupInformation from "@/components/service/content/pickupInformation.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 mobileFixTopBar from "@/components/swiper/mobileFixTopBar.vue";
|
|
import like from "@/components/newComponent/like/like.vue";
|
|
import { filterData,dateIsInWeekend } from "~/utils/common";
|
|
import loading from "@/components/newComponent/loading/loading.vue";
|
|
export default {
|
|
name: 'ServiceContent',
|
|
layout: "login",
|
|
auth: false,
|
|
components: {
|
|
Swiper,
|
|
scrollama,
|
|
Breadcrumbs,
|
|
slideshow,
|
|
detailsModal,
|
|
cancellationPolicyModal,
|
|
selectExhibition,
|
|
selectExhibitionBooth,
|
|
selectExhibitionService,
|
|
quantitySelectGroup,
|
|
pickupInformation,
|
|
faq,
|
|
sidebarSelectOption,
|
|
sideBarMenu,
|
|
mobileFixTopBar,
|
|
like,
|
|
loading,
|
|
},
|
|
data() {
|
|
return {
|
|
dialog: false,
|
|
isLoading: false,
|
|
showCardItem: false,
|
|
pickupServiceShow: false,
|
|
apiUrl: process.env.SERVICE_CONSOLE,
|
|
btnDisabled: process.env.ENV == 'production',
|
|
currStep: null,
|
|
stickySwiper: null,
|
|
content: {
|
|
banners: [],
|
|
country: null,
|
|
city: null,
|
|
name: "",
|
|
highlights: '',
|
|
details: '',
|
|
cancellation_policy: "",
|
|
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: [],
|
|
confirmationTime: '',
|
|
additionalServices: [
|
|
{
|
|
name: '司機英文服務'
|
|
},{
|
|
name: '兒童安全座椅'
|
|
},{
|
|
name: '增加一個停靠點'
|
|
},{
|
|
name: '協助飯店入住（每個人，限接機）'
|
|
}
|
|
],
|
|
|
|
},
|
|
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: "serviceDescription", title: "Service Description", show: true },
|
|
{ id: "cancellationPolicy", title: "Cancellation Policy", show: true },
|
|
{ id: "faq", title: "FAQ", show: false },
|
|
{ id: "contactUs", title: "Contact Us", show: true },
|
|
],
|
|
activePackage: 0,
|
|
totalPrice: 0,
|
|
additionTotalPrice: [],
|
|
customPlanPrice: [],
|
|
selectDates: '',
|
|
typeGroupList: [],
|
|
selectQuantityList: [],
|
|
selectYearList: [],
|
|
selectMonthList: [],
|
|
selectExhibitionList: [],
|
|
selectAddressList: [],
|
|
selectExhibitionServiceList: [{id: 0,show: true}],
|
|
selectPackageList: [],
|
|
quantitySelectList: [],
|
|
deliveryType: '',
|
|
expenseRules: [],
|
|
finalPrice: "0",
|
|
showServiceItem: 0,
|
|
currencyName: '',
|
|
currencyID: '',
|
|
previewFile: '',
|
|
countdown: 15,
|
|
rulesShow: false,
|
|
boothSelect: 0,
|
|
serviceID: false,
|
|
};
|
|
},
|
|
async created() {
|
|
if(this.$route.params.id == "1c6e0001-e2dd-46b5-a617-4dac2f34894f"){
|
|
this.serviceID = true;
|
|
}else{
|
|
this.serviceID = false;
|
|
}
|
|
this.isLoading = true;
|
|
let arr = [];
|
|
for(let i=1;i<11;i++){
|
|
let target = {
|
|
id: i+"",
|
|
name: i+"",
|
|
};
|
|
arr.push(target);
|
|
}
|
|
|
|
this.selectQuantityList = arr;
|
|
await this.getBanners();
|
|
await this.getServiceData();
|
|
await this.getExtensionYear();
|
|
await this.getExtensionMonth();
|
|
await this.getExhibitions();
|
|
await this.getQuantitySelects();
|
|
await this.getServiceItems();
|
|
await this.getReceivingCitys();
|
|
// await this.getFaq();
|
|
await this.getPackages();
|
|
await this.getInfoItem();
|
|
// await this.addViewCount();
|
|
// await this.getYouMightLikeData();
|
|
// await this.getRegionName();
|
|
// await this.getCountryCode();
|
|
if (process.browser) {
|
|
window.addEventListener("resize", this.handleResize);
|
|
}
|
|
this.handleResize();
|
|
this.$nextTick(()=>{
|
|
this.isLoading = false;
|
|
});
|
|
},
|
|
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();
|
|
},
|
|
},
|
|
// 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 getBanners() {
|
|
await this.$axios.get(`/trending/api/Onsite/BannerFiles?Lang=${this.$i18n.localeProperties["langQuery"]}&ServiceID=${this.$route.params.id}`)
|
|
.then((response) => {
|
|
if(response && response.data && response.data.DATA && response.data.DATA.rel){
|
|
let data = response.data.DATA.rel
|
|
if(data.length>0){
|
|
this.content.banners = data.map((item) => {
|
|
return {
|
|
banner_id: item.FileID,
|
|
image: item.FilePath,
|
|
};
|
|
});
|
|
}
|
|
}
|
|
})
|
|
.catch((error) => console.log(error));
|
|
},
|
|
async getExtensionYear() {
|
|
await this.$axios.get(`/trending/api/Onsite/ExtensionYear?Lang=${this.$i18n.localeProperties["langQuery"]}&ServiceID=${this.$route.params.id}`)
|
|
.then((response) => {
|
|
if(response && response.data && response.data.DATA && response.data.DATA.rel){
|
|
let data = response.data.DATA.rel
|
|
if(data.length>0){
|
|
this.selectYearList = data.map((item) => {
|
|
return {
|
|
id: item.ArgumentID,
|
|
name: item.ArgumentValue,
|
|
};
|
|
});
|
|
}
|
|
}
|
|
})
|
|
.catch((error) => console.log(error));
|
|
},
|
|
async getExtensionMonth() {
|
|
await this.$axios.get(`/trending/api/Onsite/ExtensionMonth?Lang=${this.$i18n.localeProperties["langQuery"]}`)
|
|
.then((response) => {
|
|
if(response && response.data && response.data.DATA && response.data.DATA.rel){
|
|
let data = response.data.DATA.rel
|
|
if(data.length>0){
|
|
this.selectMonthList = data.map((item) => {
|
|
return {
|
|
id: item.ArgumentID,
|
|
name: item.ArgumentValue,
|
|
};
|
|
});
|
|
}
|
|
}
|
|
})
|
|
.catch((error) => console.log(error));
|
|
},
|
|
async getExhibitions(){
|
|
let select_year = "";
|
|
let select_month = "";
|
|
await this.$axios.get(`/trending/api/Onsite/Exhibitions?Lang=${this.$i18n.localeProperties["langQuery"]}&ServiceID=${this.$route.params.id}&Year=${select_year}&Month=${select_month}`)
|
|
.then((response) => {
|
|
if(response && response.data && response.data.DATA && response.data.DATA.rel){
|
|
let data = response.data.DATA.rel
|
|
if(data.length>0){
|
|
this.selectExhibitionList = data.map((item) => {
|
|
return {
|
|
id: item.ArgumentID,
|
|
name: item.ArgumentValue,
|
|
};
|
|
});
|
|
}
|
|
}
|
|
})
|
|
.catch((error) => console.log(error));
|
|
},
|
|
async getServiceItems() {
|
|
this.showCardItem = false;
|
|
await this.$axios
|
|
.get(`trending/api/Onsite/ServiceItems?Lang=${this.$i18n.localeProperties["langQuery"]}&ServiceID=${this.$route.params.id}`)
|
|
.then((response) => {
|
|
if(response && response.data && response.data.DATA && response.data.DATA.rel){
|
|
let data = response.data.DATA.rel
|
|
if(data.length>0){
|
|
this.typeGroupList = data.map((item) => {
|
|
if(item.ItemType=="02"){
|
|
this.showCardItem = true;
|
|
}
|
|
return {
|
|
package_id: item.ArgumentID,
|
|
name: item.ArgumentValue,
|
|
itemType: item.ItemType
|
|
};
|
|
});
|
|
}
|
|
}
|
|
})
|
|
.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(`trending/api/Onsite/PackingTypes?Lang=${this.$i18n.localeProperties["langQuery"]}`)
|
|
.then((response) => {
|
|
if(response && response.data && response.data.DATA && response.data.DATA.rel){
|
|
let data = response.data.DATA.rel
|
|
if(data.length>0){
|
|
this.selectPackageList = data.map((item) => {
|
|
return {
|
|
id: item.ArgumentID,
|
|
name: item.ArgumentValue,
|
|
};
|
|
});
|
|
}
|
|
}
|
|
})
|
|
.catch((error) => console.log(error));
|
|
},
|
|
async getQuantitySelects() {
|
|
await this.$axios
|
|
.get(`trending/api/Onsite/TruckTypes?Lang=${this.$i18n.localeProperties["langQuery"]}`)
|
|
.then((response) => {
|
|
if(response && response.data && response.data.DATA && response.data.DATA.rel){
|
|
let data = response.data.DATA.rel
|
|
if(data.length>0){
|
|
this.quantitySelectList = data;
|
|
}
|
|
}
|
|
})
|
|
.catch((error) => console.log(error));
|
|
},
|
|
async getReceivingCitys() {
|
|
await this.$axios
|
|
.get(`trending/api/Onsite/ReceivingCitys?Lang=${this.$i18n.localeProperties["langQuery"]}`)
|
|
.then((response) => {
|
|
if(response && response.data && response.data.DATA && response.data.DATA.rel){
|
|
let data = response.data.DATA.rel
|
|
if(data.length>0){
|
|
this.selectAddressList = data.map((item) => {
|
|
return {
|
|
id: item.ArgumentID,
|
|
name: item.ArgumentValue,
|
|
};
|
|
});
|
|
}
|
|
}
|
|
})
|
|
.catch((error) => console.log(error));
|
|
},
|
|
async getServiceData() {
|
|
await this.$axios
|
|
.get(`/trending/api/Onsite/Info?Lang=${this.$i18n.localeProperties["langQuery"]}&ServiceID=${this.$route.params.id}`)
|
|
.then((response) => {
|
|
if(response && response.data && response.data.DATA && response.data.DATA.rel){
|
|
let data = response.data.DATA.rel
|
|
|
|
console.log(data)
|
|
|
|
if(data){
|
|
this.content.name = data.ServiceName;
|
|
this.content.highlights = data.Features;
|
|
this.content.details = data.Details;
|
|
this.content.cancellation_policy = data.CancelPolicy;
|
|
this.content.faq = data.FQAs;
|
|
this.currencyName = data.CurrencyName;
|
|
this.currencyID = data.CurrencyID;
|
|
this.previewFile = data.PreviewFile;
|
|
this.finalPrice = data.MinPrice == null ? "0" : data.MinPrice +"";
|
|
this.content.supplier.brand = data.SupplierName;
|
|
this.content.supplier.logo = data.SupplierLogo;
|
|
for(let i=0;i<this.fixBarList.length;i++){
|
|
if(this.fixBarList[i].id=="faq"){
|
|
if(data.FQAs && data.FQAs.length>0){
|
|
this.fixBarList.show = true;
|
|
}else{
|
|
this.fixBarList.show = false;
|
|
}
|
|
break;
|
|
}
|
|
}
|
|
this.content.confirmationTime = data.ConfirmDays;
|
|
}
|
|
}
|
|
// 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));
|
|
},
|
|
//攤位數量
|
|
getBoothSelect(value){
|
|
this.boothSelect = value;
|
|
},
|
|
//抓卡車相關數據
|
|
async getInfoItem() {
|
|
await this.$axios
|
|
.get(`/trending/api/Onsite/InfoItem?Lang=${this.$i18n.localeProperties["langQuery"]}&ServiceID=${this.$route.params.id}`)
|
|
.then((response) => {
|
|
if(response && response.data && response.data.DATA && response.data.DATA.rel){
|
|
let data = response.data.DATA.rel
|
|
|
|
console.log(data);
|
|
|
|
if(data.length>0){
|
|
this.expenseRules = 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;
|
|
}
|
|
},
|
|
bookNow() {
|
|
let validators = this.$refs.ref_selectExhibition.validators();
|
|
|
|
console.log("this.$refs.ref_selectExhibition:" + this.$refs.ref_selectExhibition);
|
|
|
|
if(validators==false){
|
|
return false;
|
|
}
|
|
if(this.selectExhibitionServiceList.length>0){
|
|
for(let i=0;i<this.selectExhibitionServiceList.length;i++){
|
|
let ref = eval("this.$refs.ref_selectExhibitionitem"+this.selectExhibitionServiceList[i].id)[0];
|
|
if(ref !=undefined){
|
|
validators = ref.validators();
|
|
if(validators==false){
|
|
ref.show = true;
|
|
return false;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
let selectExhibitionData = this.$refs.ref_selectExhibition.formData;
|
|
let selectExhibitionServiceData = [];
|
|
if(this.selectExhibitionServiceList.length>0){
|
|
for(let i=0;i<this.selectExhibitionServiceList.length;i++){
|
|
let ref = eval("this.$refs.ref_selectExhibitionitem"+this.selectExhibitionServiceList[i].id)[0];
|
|
if(ref !=undefined){
|
|
let target = ref.formData;
|
|
selectExhibitionServiceData.push(target);
|
|
}
|
|
}
|
|
}
|
|
let quantityData = this.$refs.ref_quantitySelectGroup.formData;
|
|
if(quantityData.selectList.length>0){
|
|
if(this.showCardItem){
|
|
validators = this.$refs.ref_quantitySelectGroup.validators();
|
|
if(validators==false){
|
|
this.pickupServiceShow = true;
|
|
return false;
|
|
}
|
|
validators = this.$refs.ref_pickupService.validators();
|
|
if(validators==false){
|
|
this.pickupServiceShow = true;
|
|
return false;
|
|
}
|
|
}
|
|
}
|
|
// let pickupServiceData = this.$refs.ref_pickupService.formData;
|
|
if(this.rulesShow){
|
|
this.ChangeCosts(null);
|
|
return false;
|
|
}
|
|
this.$router.push(
|
|
{
|
|
path: this.localePath("/service/checkout/" + this.$route.params.id),
|
|
//携带需要传递的参数
|
|
query: {
|
|
selectExhibitionData: encodeURIComponent(JSON.stringify(selectExhibitionData)),
|
|
selectExhibitionServiceData: encodeURIComponent(JSON.stringify(selectExhibitionServiceData)),
|
|
quantityData: encodeURIComponent(JSON.stringify(quantityData)),
|
|
// pickupServiceData: encodeURIComponent(JSON.stringify(pickupServiceData)),
|
|
totalPrice: this.totalPrice,
|
|
currencyName: encodeURIComponent(this.currencyName),
|
|
previewFile: encodeURIComponent(this.previewFile),
|
|
title: encodeURIComponent(this.content.name)
|
|
}
|
|
});
|
|
},
|
|
// choicesIdx(data) {
|
|
// let vm = this;
|
|
// vm.choicesIndex = data;
|
|
// },
|
|
addExhibitionService(){
|
|
const arr = this.selectExhibitionServiceList.map(({id})=> id);
|
|
let max = arr.length>0 ? Math.max.apply(null, arr) : 0;
|
|
this.selectExhibitionServiceList.push({id: max+1,show:true});
|
|
this.showServiceItem = max+1;
|
|
},
|
|
delExhibitionService(value){
|
|
if(this.selectExhibitionServiceList.length>0){
|
|
for(let i=0;i<this.selectExhibitionServiceList.length;i++){
|
|
if(value == this.selectExhibitionServiceList[i].id){
|
|
// let index = this.selectExhibitionServiceList.indexOf(this.selectExhibitionServiceList[i]);
|
|
this.selectExhibitionServiceList.splice(i, 1);
|
|
break;
|
|
}
|
|
}
|
|
|
|
}
|
|
this.ChangeCosts(null);
|
|
},
|
|
deletePickupSerivce(){
|
|
this.pickupServiceShow = false;
|
|
if(this.$refs.ref_quantitySelectGroup){
|
|
this.$refs.ref_quantitySelectGroup.clearAll();
|
|
}
|
|
},
|
|
//展館服務(包裝、尺寸、數量、服務類型)
|
|
ChangeCosts(data){
|
|
let totalPrice = 0;
|
|
this.totalPrice = 0;
|
|
this.rulesShow = false;
|
|
// let selectExhibitionData = this.$refs.ref_selectExhibition.formData;
|
|
let selectExhibitionServiceData = [];
|
|
if(this.selectExhibitionServiceList.length>0){
|
|
for(let i=0;i<this.selectExhibitionServiceList.length;i++){
|
|
let ref = eval("this.$refs.ref_selectExhibitionitem"+this.selectExhibitionServiceList[i].id)[0];
|
|
if(ref !=undefined){
|
|
let target = ref.formData;
|
|
selectExhibitionServiceData.push(target);
|
|
}
|
|
}
|
|
}
|
|
if(selectExhibitionServiceData.length>0){
|
|
for(let i=0;i<selectExhibitionServiceData.length;i++){
|
|
let arr = selectExhibitionServiceData[i].selectServiceItems;
|
|
if(arr.length>0){
|
|
for(let j=0;j<arr.length;j++){
|
|
if(arr[j].itemType == "01"){
|
|
totalPrice += this.stackerCostRules(selectExhibitionServiceData[i],arr[j]);
|
|
if(totalPrice==-1){
|
|
this.totalPrice = 0;
|
|
this.finalPrice = "0";
|
|
this.rulesShow = true;
|
|
return false;
|
|
}
|
|
}else if(arr[j].itemType == "02"){
|
|
|
|
}else if(arr[j].itemType == "03" || arr[j].itemType == "04" || arr[j].itemType == "05" || arr[j].itemType == "06"){
|
|
totalPrice += this.OtherCostRules(selectExhibitionServiceData[i],arr[j]);
|
|
if(totalPrice==-1){
|
|
this.totalPrice = 0;
|
|
this.finalPrice = "0";
|
|
this.rulesShow = true;
|
|
return false;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
let quantityData = this.$refs.ref_quantitySelectGroup.formData;
|
|
if(quantityData.selectList.length>0){
|
|
totalPrice += this.TruckCostRules();
|
|
}
|
|
this.totalPrice = Math.ceil(totalPrice);
|
|
this.finalPrice = Math.ceil(Number(totalPrice)).toLocaleString();
|
|
},
|
|
// 堆高機
|
|
stackerCostRules(data1,data2){
|
|
|
|
//這邊這邊是這個
|
|
console.log('expenseRules', this.expenseRules);
|
|
|
|
let price = 0;
|
|
let tmpWeight = 0;//Number(data1.weight)/1000;
|
|
// 材積重 長x寬x高/6000 得到噸
|
|
|
|
if((data1.length =="" && data1.width=="" && data1.height=="") && data1.weight!=""){
|
|
tmpWeight = Number(data1.weight)/1000; // Number() => 將字串轉為數值!!
|
|
} //長(沒值)，寬(沒值)，高(沒值) 但重量(有值) => 總噸數 = 重量(公斤)/1000!!
|
|
|
|
else if((data1.length !="" && data1.width!="" && data1.height!="") && data1.weight==""){
|
|
tmpWeight = Number(data1.length)*Number(data1.width)*Number(data1.height)/6000/1000;
|
|
} //長(有值)，寬(有值)，高(有值) 但重量(沒值) => 總噸數 = 長*寬*高/6000/1000!!
|
|
|
|
//長(有值)，寬(有值)，高(有值) 但重量(有值) => 總噸數 = 長*寬*高/6000/1000!!
|
|
else if(data1.length !="" && data1.width!="" && data1.height!="" && data1.weight!=""){
|
|
let volumeWeight = Number(data1.length)*Number(data1.width)*Number(data1.height)/6000/1000;
|
|
// 比較誰大 (材積重與客戶給出的公斤重比較)!!
|
|
if(volumeWeight>Number(data1.weight)/1000){
|
|
tmpWeight = volumeWeight; //若材積重 > 客戶給的公斤重 => 總噸數 = 材積重!!
|
|
}else{
|
|
tmpWeight = Number(data1.weight)/1000; //若材積重 < 客戶給的公斤重 => 總噸數 = 客戶給的公斤重!!
|
|
}
|
|
}
|
|
|
|
//判斷 => 若長 > 1000 或 寬 > 1000 或 高 > 330，則顯示提醒dialog!!
|
|
if(Number(data1.length) > 1000 || Number(data1.width) > 1000 || Number(data1.height)>330){
|
|
this.dialog = true;
|
|
this.openTimer();
|
|
return -1;
|
|
}
|
|
|
|
//防呆 => 若總噸數為0，則總金額為0 !!
|
|
if(tmpWeight==0){
|
|
return price;
|
|
}
|
|
if(this.expenseRules.length>0){
|
|
for(let i=0;i<this.expenseRules.length;i++){
|
|
let subArr = this.expenseRules[i].StackerCostRules;
|
|
|
|
console.log('subArr', subArr)
|
|
|
|
if(this.expenseRules[i].Guid == data2.package_id && subArr.length>0){
|
|
for(let j=0;j<subArr.length;j++){
|
|
// 需要判斷按數量還是重量
|
|
if(subArr[j].Weight_Min!="" && subArr[j].Weight_Max!=""){
|
|
if(Number(subArr[j].Weight_Min)<=tmpWeight && Number(subArr[j].Weight_Max)>=tmpWeight){
|
|
if(subArr[j].PricingMode=="N"){
|
|
price = subArr[j].Price;
|
|
}else{
|
|
price = subArr[j].Price*tmpWeight;
|
|
}
|
|
break;
|
|
}
|
|
}
|
|
}
|
|
break;
|
|
}
|
|
}
|
|
}
|
|
let num = (data1.quantity =="" || data1.quantity =="0") ? 0 : Number(data1.quantity);
|
|
price = price*num;
|
|
return price;
|
|
},
|
|
TruckCostRules(){
|
|
let price = 0;
|
|
let quantityData = this.$refs.ref_quantitySelectGroup.formData;
|
|
let pickupServiceData = this.$refs.ref_pickupService.formData;
|
|
if(this.expenseRules.length>0){
|
|
let list = filterData({ItemType: '02'},this.expenseRules);
|
|
if(list.length>0){
|
|
if(list[0].TruckCostRules.length>0 && quantityData.selectList.length>0 && pickupServiceData.address1!="" && pickupServiceData.address1!="0"){
|
|
price += this.updateForData(quantityData.selectList,list[0].TruckCostRules,pickupServiceData.address1);
|
|
}
|
|
if(list[0].TruckMarkupByModel.length>0 && quantityData.truckList.length>0){
|
|
price += this.updateForData(quantityData.truckList,list[0].TruckMarkupByModel,null);
|
|
}
|
|
// 壓車費
|
|
if(list[0].TruckEscortCostRules.length>0 && pickupServiceData.delivery_type=="2" && quantityData.selectList.length>0
|
|
&& list[0].EscortFreeCityID!="" && pickupServiceData.address1!="0"){
|
|
price += this.updateForData(quantityData.selectList,list[0].TruckEscortCostRules,list[0].EscortFreeCityID);
|
|
}
|
|
if(list[0].TruckHolidayPay.length>0 && pickupServiceData.select_date!=""){
|
|
let inWeekend = dateIsInWeekend(pickupServiceData.select_date);
|
|
if(inWeekend==5 && pickupServiceData.delivery_type=="2"){
|
|
price += this.updateForData(quantityData.selectList,list[0].TruckHolidayPay,null);
|
|
}else if(inWeekend==6 && pickupServiceData.delivery_type=="2"){
|
|
price += this.updateForData(quantityData.selectList,list[0].TruckHolidayPay,null)*2;
|
|
}else if(inWeekend==0 && pickupServiceData.delivery_type=="2"){
|
|
price += this.updateForData(quantityData.selectList,list[0].TruckHolidayPay,null);
|
|
}else if(inWeekend==6 && pickupServiceData.delivery_type=="1"){
|
|
price += this.updateForData(quantityData.selectList,list[0].TruckHolidayPay,null);
|
|
}else if(inWeekend==0 && pickupServiceData.delivery_type=="1"){
|
|
price += this.updateForData(quantityData.selectList,list[0].TruckHolidayPay,null);
|
|
}
|
|
}
|
|
}
|
|
}
|
|
return price;
|
|
},
|
|
updateForData(data1,data2,address1){
|
|
let price = 0;
|
|
if(data1.length>0 && data2.length>0){
|
|
for(let n=0;n<data1.length;n++){
|
|
let truckID = data1[n].id;
|
|
let num = data1[n].number;
|
|
for(let i=0;i<data2.length;i++){
|
|
if(data2[i].CityID!=undefined && data2[i].CityID!="" && data2[i].TruckID!=""){
|
|
if(data2[i].CityID==address1 && data2[i].TruckID == truckID){
|
|
price += data2[i].Price*num;
|
|
break;
|
|
}
|
|
}else if(data2[i].CityID ==undefined && data2[i].TruckID!=""){
|
|
if(data2[i].TruckID == truckID){
|
|
price += data2[i].Price*num;
|
|
break;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
return price;
|
|
},
|
|
OtherCostRules(data1,data2){
|
|
|
|
console.log('OtherCostRules data1: ',data1)
|
|
console.log('OtherCostRules data2: ',data2)
|
|
|
|
|
|
let price = 0;
|
|
let tmpValue = 0;
|
|
if(data1.length =="" && data1.width=="" && data1.height==""){
|
|
return price;
|
|
}else{
|
|
tmpValue = Number(data1.length)*Number(data1.width)*Number(data1.height)/1000000;
|
|
}
|
|
if(Number(data1.length) > 1000 || Number(data1.width) > 1000 || Number(data1.height)>330){
|
|
this.dialog = true;
|
|
this.openTimer();
|
|
return -1;
|
|
}
|
|
if(this.expenseRules.length>0){
|
|
for(let i=0;i<this.expenseRules.length;i++){
|
|
let subArr = this.expenseRules[i].OtherCostRules;
|
|
if(this.expenseRules[i].Guid == data2.package_id && subArr.length>0){
|
|
for(let j=0;j<subArr.length;j++){
|
|
if(subArr[j].Unit_Min!=""){
|
|
if(Number(subArr[j].Unit_Min)<tmpValue){
|
|
price = subArr[j].Price*tmpValue;
|
|
}else{
|
|
price = subArr[j].Price*subArr[j].Unit_Min;
|
|
}
|
|
break;
|
|
}
|
|
}
|
|
break;
|
|
}
|
|
}
|
|
}
|
|
let num = (data1.quantity =="" || data1.quantity =="0") ? 0 : Number(data1.quantity);
|
|
price = price*num;
|
|
return price;
|
|
},
|
|
colseDialog(){
|
|
this.dialog = false;
|
|
},
|
|
openTimer(){
|
|
this.countdown = 15;
|
|
this.timer = setInterval(() => {
|
|
if (this.countdown > 0) {
|
|
this.countdown--;
|
|
} else {
|
|
clearInterval(this.timer);
|
|
this.dialog = false;
|
|
}
|
|
}, 1000);
|
|
},
|
|
},
|
|
};
|
|
</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);
|
|
}
|
|
}
|
|
.tablecss{
|
|
line-height: 36px;
|
|
text-align: center;
|
|
color: #343434;
|
|
// border-radius: 10px;
|
|
}
|
|
table{
|
|
border: 1px solid #cecece;
|
|
border-collapse: separate;
|
|
border-radius: 10px;
|
|
text-align: center;
|
|
border-spacing: 0px;
|
|
// padding: 10px;
|
|
}
|
|
table thead{
|
|
border-radius: 10px;
|
|
}
|
|
th{
|
|
border: 1px solid #343434;
|
|
text-align: center;
|
|
}
|
|
td{
|
|
border-top: 1px solid #cecece;
|
|
text-align: center;
|
|
}
|
|
table thead>tr:first-of-type>th:first-of-type{
|
|
border-top-left-radius: 10px;
|
|
}
|
|
table thead>tr:first-of-type>th:last-of-type{
|
|
border-top-right-radius: 10px;
|
|
}
|
|
table tfoot>tr:last-of-type>td:first-of-type{
|
|
border-bottom-left-radius: 10px;
|
|
}
|
|
table tfoot>tr:last-of-type>td:last-of-type{
|
|
border-bottom-right-radius: 10px;
|
|
}
|
|
table::before{
|
|
border-radius: 10px;
|
|
}
|
|
// table tr:first-child th:first-child {
|
|
// border-top-left-radius: 10px; /* 设置table左下圆角 */
|
|
// }
|
|
|
|
// table tr:first-child th:last-child {
|
|
// border-top-right-radius: 10px; /* 设置table右下圆角 */
|
|
// }
|
|
|
|
table tr:last-child td:first-child {
|
|
border-bottom-left-radius: 10px; /* 设置table左下圆角 */
|
|
}
|
|
|
|
table tr:last-child td:last-child {
|
|
border-bottom-right-radius: 10px; /* 设置table右下圆角 */
|
|
}
|
|
</style>
|