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.
1281 lines
48 KiB
1281 lines
48 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 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"></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-[20px]">
|
|
<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">
|
|
<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" class="editor-styleguide tw-text-base-primary t14 md:t16 md:tw-font-normal"
|
|
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("The upper limit of length and width is 1000 cm and the upper limit of height is 330 cm. If one of them exceeds the limit, the quotation will not be calculated. 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 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,
|
|
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: [],
|
|
selectAddressList: [],
|
|
selectExhibitionServiceList: [{id: 0,show: true}],
|
|
selectPackageList: [],
|
|
quantitySelectList: [],
|
|
deliveryType: '',
|
|
expenseRules: [],
|
|
finalPrice: "0",
|
|
showServiceItem: 0,
|
|
currencyName: '',
|
|
currencyID: '',
|
|
previewFile: '',
|
|
countdown: 30,
|
|
};
|
|
},
|
|
async created() {
|
|
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 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
|
|
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));
|
|
},
|
|
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
|
|
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();
|
|
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.totalPrice<=0){
|
|
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;
|
|
// 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";
|
|
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";
|
|
return false;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
let quantityData = this.$refs.ref_quantitySelectGroup.formData;
|
|
if(quantityData.selectList.length>0){
|
|
totalPrice += this.TruckCostRules();
|
|
}
|
|
this.totalPrice = totalPrice;
|
|
this.finalPrice = Number(totalPrice).toLocaleString();
|
|
},
|
|
// 堆高機
|
|
stackerCostRules(data1,data2){
|
|
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;
|
|
}else if((data1.length !="" && data1.width!="" && data1.height!="") && data1.weight==""){
|
|
tmpWeight = Number(data1.length)*Number(data1.width)*Number(data1.height)/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;
|
|
}
|
|
}
|
|
if(Number(data1.length) > 1000 || Number(data1.width) > 1000 || Number(data1.height)>330){
|
|
this.dialog = true;
|
|
this.openTimer();
|
|
return -1;
|
|
}
|
|
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;
|
|
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){
|
|
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 = 30;
|
|
this.timer = setInterval(() => {
|
|
if (this.countdown > 0) {
|
|
this.countdown--;
|
|
} else {
|
|
clearInterval(this.timer);
|
|
this.dialog = false;
|
|
}
|
|
}, 500);
|
|
},
|
|
},
|
|
};
|
|
</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>
|