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.
766 lines
26 KiB
766 lines
26 KiB
<template>
|
|
<div
|
|
class="booking-info-item tw-p-[15px] lg:tw-p-[20px] tw-mb-[30px] tw-bg-white tw-rounded-xl md:tw-mb-[40px]"
|
|
>
|
|
<div
|
|
:class="[
|
|
'info-content',
|
|
'collapse',
|
|
'tw-cursor-pointer',
|
|
'tw-grid tw-items-start tw-grid-cols-[52px_auto] tw-gap-[15px] md:tw-grid-cols-[160px_auto] md:tw-gap-[20px] xl:tw-grid-cols-[56px_105px_520px_30px] xl:tw-gap-[16px] xl:tw-items-center',
|
|
show ? 'show' : 'hide',
|
|
]"
|
|
@click="show = !show"
|
|
>
|
|
<img
|
|
class="element content-img tw-rounded-[4px] tw-h-1/5 md:tw-rounded-[12px] md:tw-h-3/5 xl:tw-h-3/5"
|
|
:src="info.preview_image"
|
|
/>
|
|
<div class="element content-text">
|
|
<h3
|
|
class="t12 tw-font-bold tw-mb-[10px] tw-text-base-primary md:tw-text-[16px] md:tw-leading-[21px] xl:tw-mb-[12px]"
|
|
>
|
|
{{ info.service_name }}
|
|
</h3>
|
|
<div v-for="(item, key) in info.order_item" :key="key"
|
|
class="detail tw-body-5 tw-mb-[10px] xl:tw-text-neutrals-600 xl:tw-mb-[4px]"
|
|
>
|
|
{{ item }}
|
|
</div>
|
|
<div class="tw-mb-[10px] tw-my-[12px] xl:tw-mb-0 tw-flex t-12 tw-text-[#232323]"
|
|
>
|
|
<div>{{ $t("Select Exhibition") }}：</div>
|
|
<div class="tw-ml-[10px]">{{ info.selectExhibition }}</div>
|
|
</div>
|
|
<!-- <div
|
|
v-for="(item, key) in info.order_as" :key="key"
|
|
class="detail tw-body-5 tw-mb-[10px] xl:tw-mb-0 xl:tw-text-neutrals-600"
|
|
>
|
|
{{ item.as_name + " x " + item.quantity }}
|
|
</div> -->
|
|
<!-- <div
|
|
class="date tw-body-5 tw-mb-[10px] xl:tw-mt-[12px]"
|
|
v-if="info.service_date != null || info.service_time != null"
|
|
>
|
|
Service Date: {{ info.service_date +" "+ info.service_time }}
|
|
</div> -->
|
|
<!-- <div
|
|
class="total t14 tw-font-bold tw-text-primary-1 tw-mb-[10px] xl:tw-hidden"
|
|
>
|
|
$3,500 {{ info.currency
|
|
}}<span class="tw-font-normal tw-text-neutrals-400 tw-ml-[10px]"
|
|
>(Tax included)</span
|
|
>
|
|
</div>
|
|
<div class="element xl:tw-hidden">
|
|
<button
|
|
class="tw-transition tw-flex tw-justify-center tw-items-center tw-btn-md tw-text-primary-1 tw-border tw-border-solid tw-border-primary-1 tw-px-[30px] tw-py-[8.5px] tw-w-full tw-rounded-xl hover:tw-bg-primary-3"
|
|
>
|
|
{{ $t("Enter Required info") }}
|
|
<span
|
|
v-if="questionValidation == true"
|
|
class="status-check-icon tw-inline-block tw-items-center tw-w-[16px] tw-h-[16px] tw-ml-[10px]"
|
|
></span>
|
|
</button>
|
|
</div> -->
|
|
</div>
|
|
<div class="element content-status tw-hidden xl:tw-block xl:tw-ml-[20px]">
|
|
<span
|
|
class="status-check-icon tw-inline-block tw-w-[30px] tw-h-[30px]"
|
|
></span>
|
|
</div>
|
|
</div>
|
|
|
|
<Transition name="bounce">
|
|
<div v-show="show" :class="['info-form']">
|
|
<div
|
|
:class="[
|
|
'bookingdetails',
|
|
'tw-border-0 tw-border-t tw-border-solid tw-border-neutrals-200',
|
|
'tw-pt-[20px] tw-mt-[20px]',
|
|
]"
|
|
>
|
|
<h3 class="tw-mb-[40px] t18 tw-font-bold tw-text-black">{{ $t("Ordering details") }}</h3>
|
|
<table class="table-auto">
|
|
<template v-for="(item,index) in questions">
|
|
<template v-if="windewWidth>414">
|
|
<tr v-if="item.type != 'MultilineText'" class="element tw-my-[10px]" :key="index">
|
|
<td class="tw-pr-[20px]">
|
|
<div class="tw-items-center">
|
|
<label class="tw-font-normal "><span>{{ item.name }}
|
|
<span v-if="item.requiredFlag=='1'" class="required t12 md:t14">*</span></span></label>
|
|
</div>
|
|
</td>
|
|
<td>
|
|
<div class="element tw-my-[10px]">
|
|
<div class="md:tw-flex tw-items-center" v-if="item.type == 'DateText'">
|
|
<selectDate @selected="item.value = $event"></selectDate>
|
|
<span v-if="item.validation==false" class="required md:tw-ml-[20px] t12 md:t14">{{ $t("Required.") }}</span>
|
|
</div>
|
|
<div class="md:tw-flex tw-items-center" v-else-if="item.type == 'TimeText'">
|
|
<elementTimePicker @change="item.value = $event"></elementTimePicker>
|
|
<span v-if="item.validation==false" class="required md:tw-ml-[20px] t12 md:t14">{{ $t("Required.") }}</span>
|
|
</div>
|
|
<elementInputNew v-else-if="item.type == 'SingleText'"
|
|
:input="{
|
|
id: item.id,
|
|
required: item.requiredFlag=='1' ? true : false,
|
|
type: 'text',
|
|
placeholder: '',
|
|
}"
|
|
:validation="item.validation"
|
|
@change="item.value = $event"
|
|
>
|
|
</elementInputNew>
|
|
</div>
|
|
</td>
|
|
</tr>
|
|
</template>
|
|
<template v-else>
|
|
<template v-if="item.type != 'MultilineText'">
|
|
<tr class="element" :key="index">
|
|
<div class="tw-items-center">
|
|
<label class="tw-font-normal "><span>{{ item.name }}
|
|
<span v-if="item.requiredFlag=='1'" class="required t12 md:t14">*</span></span></label>
|
|
</div>
|
|
</tr>
|
|
<tr class="element" :key="item.id+index">
|
|
<div class="element tw-my-[10px]">
|
|
<div class="md:tw-flex tw-items-center" v-if="item.type == 'DateText'">
|
|
<selectDate @selected="item.value = $event"></selectDate>
|
|
<span v-if="item.validation==false" class="required md:tw-ml-[20px] t12 md:t14">{{ $t("Required.") }}</span>
|
|
</div>
|
|
<div class="md:tw-flex tw-items-center" v-else-if="item.type == 'TimeText'">
|
|
<elementTimePicker @change="item.value = $event"></elementTimePicker>
|
|
<span v-if="item.validation==false" class="required md:tw-ml-[20px] t12 md:t14">{{ $t("Required.") }}</span>
|
|
</div>
|
|
<elementInputNew v-else-if="item.type == 'SingleText'"
|
|
:input="{
|
|
id: item.id,
|
|
required: item.requiredFlag=='1' ? true : false,
|
|
type: 'text',
|
|
placeholder: '',
|
|
}"
|
|
:validation="item.validation"
|
|
@change="item.value = $event"
|
|
>
|
|
</elementInputNew>
|
|
</div>
|
|
</tr>
|
|
</template>
|
|
</template>
|
|
</template>
|
|
</table>
|
|
<template v-for="item in questions">
|
|
<div v-if="item.type == 'MultilineText'" class="element tw-my-[10px]" :key="item.id">
|
|
<elementTextarea
|
|
:input="{
|
|
id: item.id,
|
|
label: item.name,
|
|
required: false,
|
|
placeholder: '',
|
|
}"
|
|
:default="''"
|
|
:validation="true"
|
|
@change="item.value = $event"
|
|
></elementTextarea>
|
|
</div>
|
|
</template>
|
|
<!-- <template v-for="(item,index) in questions">
|
|
<div v-if="item.type == 'CustomDate'" class="element tw-mt-[16px]">
|
|
<div class="element tw-flex">
|
|
<div class="tw-flex element tw-grid tw-grid-cols-1 md:tw-grid-cols-[190px_215px_auto] xl:tw-grid-cols-[190px_215px_auto] tw-gap-[10px]">
|
|
<div class="tw-items-center"></div>
|
|
<label class="tw-font-normal "><span>{{ item.name }}
|
|
<span class="required">*</span></span></label>
|
|
</div>
|
|
<selectDate @selected="item.value = $event"></selectDate>
|
|
</div>
|
|
</div>
|
|
<div v-else-if="item.type == 'TimeText'" class="element tw-mt-[16px]">
|
|
<div class="element tw-flex">
|
|
<label class="tw-font-normal "><span>{{ item.name }}
|
|
<span class="required">*</span></span></label>
|
|
<elementTimePicker></elementTimePicker>
|
|
</div>
|
|
</div>
|
|
<div v-else-if="item.type == 'Email'" class="element tw-mt-[16px]">
|
|
<div class="element tw-flex">
|
|
<div class="tw-flex tw-items-center">
|
|
<label class="tw-font-normal ">
|
|
<span>{{ item.name }}</span><span class="required">*</span>
|
|
</label>
|
|
</div>
|
|
<elementInputNew
|
|
:input="{
|
|
id: item.id,
|
|
required: true,
|
|
type: 'text',
|
|
placeholder: '',
|
|
}"
|
|
:validation="item.validation"
|
|
@change="item.value = $event"
|
|
>
|
|
</elementInputNew>
|
|
</div>
|
|
</div>
|
|
<div v-else-if="item.type == 'MultilineText'" class="element tw-mt-[16px]" >
|
|
<elementTextarea
|
|
:input="{
|
|
id: item.id,
|
|
label: item.name,
|
|
required: false,
|
|
placeholder: '',
|
|
}"
|
|
:default="''"
|
|
:validation="true"
|
|
@change="item.value = $event"
|
|
></elementTextarea>
|
|
</div>
|
|
</template> -->
|
|
<!-- <div
|
|
v-for="(item, key) in content.booking_questions" :key="key"
|
|
class="element tw-mb-[20px]"
|
|
>
|
|
<elementTextarea
|
|
:input="{
|
|
id: item.question_id,
|
|
label: item.question,
|
|
required:
|
|
item.required === 1 || item.required === 'required'
|
|
? true
|
|
: false,
|
|
placeholder: '',
|
|
}"
|
|
:default="''"
|
|
:validation="question[key].validation"
|
|
@change="setQuestion($event, key, item)"
|
|
></elementTextarea>
|
|
</div> -->
|
|
<!-- <OrderingDetails ref="child_Ordering"></OrderingDetails> -->
|
|
</div>
|
|
<!-- <div
|
|
:class="[
|
|
'contact-info',
|
|
'tw-border-0 tw-border-t tw-border-solid tw-border-neutrals-200',
|
|
'tw-pt-[20px] tw-mt-[20px]',
|
|
]"
|
|
> -->
|
|
<!-- <h3 class="tw-mb-[20px]">{{ $t("Contact information") }}</h3>
|
|
<Contact></Contact> -->
|
|
<!-- <div
|
|
class="element element-button-group tw-flex tw-justify-start tw-flex-wrap -tw-mx-[8px]"
|
|
>
|
|
<button
|
|
v-for="(item, index) in contact"
|
|
:key="index"
|
|
:class="[
|
|
'tw-transition',
|
|
'tw-btn-md',
|
|
'tw-text-[14px]',
|
|
'tw-leading-[18px]',
|
|
'tw-text-complementary-1',
|
|
'tw-bg-neutrals-0',
|
|
'tw-px-[12px]',
|
|
'tw-py-[11px]',
|
|
'tw-mx-[8px]',
|
|
'tw-mb-[16px]',
|
|
'tw-rounded-2xl',
|
|
'tw-border tw-border-solid',
|
|
'tw-bg-complementary-3',
|
|
activeLabel == index + 1
|
|
? 'tw-border-complementary-1 tw-bg-complementary-1/20'
|
|
: 'tw-border-transparent',
|
|
]"
|
|
@click="onLabelClick(index + 1, item)"
|
|
>
|
|
{{ item.first_name }} {{ item.last_name }}
|
|
</button>
|
|
<button
|
|
class="btn-add-icon tw-transition tw-btn-md tw-text-[14px] tw-leading-[18px] tw-text-complementary-1 tw-bg-complementary-3 tw-pr-[12px] tw-pl-[36px] tw-py-[11px] tw-mx-[8px] tw-mb-[16px] tw-rounded-[10px]"
|
|
@click="$modal.show('add-contact-modal')"
|
|
>
|
|
{{ $t("Add") }}
|
|
</button>
|
|
</div> -->
|
|
<!-- <div class="company-info-list">
|
|
<template v-for="(item, index) in contact">
|
|
<div
|
|
:key="index"
|
|
v-if="index + 1 === activeLabel"
|
|
class="tw-grid tw-grid-cols-1 tw-gap-y-[16px]"
|
|
>
|
|
<div
|
|
class="element tw-grid tw-grid-cols-[140px_auto] tw-gap-x-[12px]"
|
|
>
|
|
<div class="label t14 tw-font-bold">
|
|
{{ $t("First Name") }}
|
|
</div>
|
|
<div class="content tw-body-4">
|
|
{{ item.first_name }}
|
|
</div>
|
|
</div>
|
|
<div
|
|
class="element tw-grid tw-grid-cols-[140px_auto] tw-gap-x-[12px]"
|
|
>
|
|
<div class="label t14 tw-font-bold">
|
|
{{ $t("Last Name") }}
|
|
</div>
|
|
<div class="content tw-body-4">
|
|
{{ item.last_name }}
|
|
</div>
|
|
</div>
|
|
<div
|
|
class="element tw-grid tw-grid-cols-[140px_auto] tw-gap-x-[12px]"
|
|
>
|
|
<div class="label t14 tw-font-bold">{{ $t("Email") }}</div>
|
|
<div class="content tw-body-4">
|
|
{{ item.email }}
|
|
</div>
|
|
</div>
|
|
<div
|
|
class="element tw-grid tw-grid-cols-[140px_auto] tw-gap-x-[12px]"
|
|
>
|
|
<div class="label t14 tw-font-bold">{{ $t("Phone") }}</div>
|
|
<div class="content tw-body-4">
|
|
{{ item.phone_number }}
|
|
</div>
|
|
</div>
|
|
<button
|
|
class="btn-edit-icon tw-w-[28px] tw-h-[28px]"
|
|
@click="$modal.show('edit-contact-modal')"
|
|
></button>
|
|
</div>
|
|
</template>
|
|
</div> -->
|
|
<!-- </div> -->
|
|
<!-- <div
|
|
:class="[
|
|
'promo-code',
|
|
'tw-border-0 tw-border-t tw-border-solid tw-border-neutrals-200',
|
|
'tw-pt-[20px] tw-mt-[20px]',
|
|
]"
|
|
>
|
|
<h3 class="tw-mb-[10px]">{{ $t("Promo code") }}</h3>
|
|
<elementPromoCode></elementPromoCode>
|
|
</div> -->
|
|
<div class="element tw-text-right tw-mt-[40px]">
|
|
<button
|
|
class="tw-transition tw-btn-md tw-bg-primary-1 tw-px-[30px] tw-py-[8.5px] tw-rounded-2xl hover:tw-bg-primary-2"
|
|
@click="updateInfo()"
|
|
>
|
|
{{ $t("Next") }}
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</Transition>
|
|
<!-- <Transition name="bounce">
|
|
<div v-show="show" :class="['info-form']">
|
|
<div
|
|
:class="[
|
|
'bookingdetails',
|
|
'tw-border-0 tw-border-t tw-border-solid tw-border-neutrals-200',
|
|
'tw-pt-[20px] tw-mt-[20px]',
|
|
]"
|
|
>
|
|
{{ content.booking_questions }}
|
|
<h3 class="tw-mb-[40px]">{{ $t("Booking Details") }}</h3>
|
|
<div
|
|
v-for="(item, key) in content.booking_questions"
|
|
class="element tw-mb-[20px]"
|
|
>
|
|
<elementTextarea
|
|
:input="{
|
|
id: item.question_id,
|
|
label: item.question,
|
|
required:
|
|
item.required === 1 || item.required === 'required'
|
|
? true
|
|
: false,
|
|
placeholder: '',
|
|
}"
|
|
:default="''"
|
|
:validation="true"
|
|
@change="
|
|
setQuestion($event, key, item.question_id, item.question)
|
|
"
|
|
></elementTextarea>
|
|
</div>
|
|
</div>
|
|
<div
|
|
:class="[
|
|
'contact-info',
|
|
'tw-border-0 tw-border-t tw-border-solid tw-border-neutrals-200',
|
|
'tw-pt-[20px] tw-mt-[20px]',
|
|
]"
|
|
>
|
|
<h3 class="tw-mb-[20px]">{{ $t("Contact Info") }}</h3>
|
|
<div
|
|
class="element element-button-group tw-flex tw-justify-start tw-flex-wrap -tw-mx-[8px]"
|
|
>
|
|
<button
|
|
v-for="(item, index) in contact"
|
|
:key="index"
|
|
:class="[
|
|
'tw-transition',
|
|
'tw-btn-md',
|
|
'tw-text-[14px]',
|
|
'tw-leading-[18px]',
|
|
'tw-text-complementary-1',
|
|
'tw-bg-neutrals-0',
|
|
'tw-px-[12px]',
|
|
'tw-py-[11px]',
|
|
'tw-mx-[8px]',
|
|
'tw-mb-[16px]',
|
|
'tw-rounded-2xl',
|
|
'tw-border tw-border-solid',
|
|
'tw-bg-complementary-3',
|
|
activeLabel == index + 1
|
|
? 'tw-border-complementary-1 tw-bg-complementary-1/20'
|
|
: 'tw-border-transparent',
|
|
]"
|
|
@click="onLabelClick(index + 1, item)"
|
|
>
|
|
{{ item.first_name }} {{ item.last_name }}
|
|
</button>
|
|
<button
|
|
class="btn-add-icon tw-transition tw-btn-md tw-text-[14px] tw-leading-[18px] tw-text-complementary-1 tw-bg-complementary-3 tw-pr-[12px] tw-pl-[36px] tw-py-[11px] tw-mx-[8px] tw-mb-[16px] tw-rounded-[10px]"
|
|
@click="$modal.show('add-contact-modal')"
|
|
>
|
|
{{ $t("Add") }}
|
|
</button>
|
|
</div>
|
|
<div class="company-info-list">
|
|
<template v-for="(item, index) in contact">
|
|
<div
|
|
:key="index"
|
|
v-if="index + 1 === activeLabel"
|
|
class="tw-grid tw-grid-cols-1 tw-gap-y-[16px]"
|
|
>
|
|
<div
|
|
class="element tw-grid tw-grid-cols-[140px_auto] tw-gap-x-[12px]"
|
|
>
|
|
<div class="label t14 tw-font-bold">
|
|
{{ $t("First Name") }}
|
|
</div>
|
|
<div class="content tw-body-4">
|
|
{{ item.first_name }}
|
|
</div>
|
|
</div>
|
|
<div
|
|
class="element tw-grid tw-grid-cols-[140px_auto] tw-gap-x-[12px]"
|
|
>
|
|
<div class="label t14 tw-font-bold">
|
|
{{ $t("Last Name") }}
|
|
</div>
|
|
<div class="content tw-body-4">
|
|
{{ item.last_name }}
|
|
</div>
|
|
</div>
|
|
<div
|
|
class="element tw-grid tw-grid-cols-[140px_auto] tw-gap-x-[12px]"
|
|
>
|
|
<div class="label t14 tw-font-bold">{{ $t("Email") }}</div>
|
|
<div class="content tw-body-4">
|
|
{{ item.email }}
|
|
</div>
|
|
</div>
|
|
<div
|
|
class="element tw-grid tw-grid-cols-[140px_auto] tw-gap-x-[12px]"
|
|
>
|
|
<div class="label t14 tw-font-bold">{{ $t("Phone") }}</div>
|
|
<div class="content tw-body-4">
|
|
{{ item.phone_number }}
|
|
</div>
|
|
</div>
|
|
<button
|
|
class="btn-edit-icon tw-w-[28px] tw-h-[28px]"
|
|
@click="$modal.show('edit-contact-modal')"
|
|
></button>
|
|
</div>
|
|
</template>
|
|
</div>
|
|
</div>
|
|
<div
|
|
:class="[
|
|
'promo-code',
|
|
'tw-border-0 tw-border-t tw-border-solid tw-border-neutrals-200',
|
|
'tw-pt-[20px] tw-mt-[20px]',
|
|
]"
|
|
>
|
|
<h3 class="tw-mb-[10px]">{{ $t("Promo code") }}</h3>
|
|
<elementPromoCode></elementPromoCode>
|
|
</div>
|
|
<div class="element tw-text-right tw-mt-[40px]">
|
|
<button
|
|
class="tw-transition tw-btn-md tw-bg-primary-1 tw-px-[30px] tw-py-[8.5px] tw-rounded-2xl hover:tw-bg-primary-2"
|
|
@click="updateInfo()"
|
|
>
|
|
{{ $t("Next") }}
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</Transition> -->
|
|
</div>
|
|
</template>
|
|
<script>
|
|
import elementTextarea from "@/components/newComponent/form/ElementTextarea";
|
|
import elementInputNew from "@/components/newComponent/form/ElementInputNew";
|
|
import selectDate from "@/components/service/content/selectDate.vue";
|
|
import elementTimePicker from "@/components/newComponent/form/ElementTimePicker";
|
|
// import elementPromoCode from "@/components/newComponent/form/ElementPromoCode";
|
|
import Contact from "@/components/service/Contact";
|
|
// import OrderingDetails from "@/components/service/OrderingDetails";
|
|
|
|
import is from "is_js";
|
|
export default {
|
|
components: {
|
|
elementTextarea,
|
|
elementInputNew,
|
|
selectDate,
|
|
// elementPromoCode,
|
|
elementTimePicker,
|
|
is,
|
|
Contact,
|
|
// OrderingDetails,
|
|
},
|
|
props: {
|
|
info: {
|
|
type: Object,
|
|
},
|
|
content: {
|
|
type: Object,
|
|
},
|
|
questions: {
|
|
type: Array,
|
|
default: [],
|
|
},
|
|
active: {
|
|
type: Number,
|
|
},
|
|
},
|
|
data() {
|
|
return {
|
|
show: true,
|
|
// question: [],
|
|
contactData: {
|
|
first_name: "",
|
|
last_name: "",
|
|
email: "",
|
|
phone_number: "",
|
|
},
|
|
questionValidation: false,
|
|
errors: null,
|
|
windewWidth: null,
|
|
};
|
|
},
|
|
|
|
computed: {
|
|
activeLabel() {
|
|
return this.active;
|
|
},
|
|
},
|
|
|
|
mounted() {
|
|
let vm = this;
|
|
vm.$nextTick(function () {
|
|
// if (vm.contact.length > 0) {
|
|
// vm.contactData.first_name = vm.contact[0].first_name;
|
|
// vm.contactData.last_name = vm.contact[0].last_name;
|
|
// vm.contactData.email = vm.contact[0].email;
|
|
// vm.contactData.phone_number = vm.contact[0].phone_number;
|
|
// }
|
|
});
|
|
},
|
|
created(){
|
|
if (process.browser) {
|
|
window.addEventListener("resize", this.handleResize);
|
|
}
|
|
this.handleResize();
|
|
},
|
|
destroyed() {
|
|
if (process.browser) {
|
|
window.removeEventListener("resize", this.handleResize);
|
|
}
|
|
},
|
|
watch: {
|
|
// contact: {
|
|
// handler: function () {
|
|
// let vm = this;
|
|
// if (vm.contact.length > 0) {
|
|
// vm.contactData.first_name = vm.contact[0].first_name;
|
|
// vm.contactData.last_name = vm.contact[0].last_name;
|
|
// vm.contactData.email = vm.contact[0].email;
|
|
// vm.contactData.phone_number = vm.contact[0].phone_number;
|
|
// }
|
|
// },
|
|
// },
|
|
// questions: {
|
|
// handler: function () {
|
|
// this.getContent();
|
|
// },
|
|
// },
|
|
questionValidation: {
|
|
handler: function () {
|
|
if (this.questionValidation == true) {
|
|
this.show = false;
|
|
}else{
|
|
this.show = true;
|
|
}
|
|
},
|
|
},
|
|
},
|
|
|
|
methods: {
|
|
handleResize() {
|
|
if (process.browser) {
|
|
this.windewWidth = window.innerWidth;
|
|
}
|
|
},
|
|
// onLabelClick(label) {
|
|
// let index = label - 1;
|
|
|
|
// if (index <= 0) {
|
|
// index = 0;
|
|
// }
|
|
// this.contactData.first_name = this.contact[index].first_name;
|
|
// this.contactData.last_name = this.contact[index].last_name;
|
|
// this.contactData.email = this.contact[index].email;
|
|
// this.contactData.phone_number = this.contact[index].phone_number;
|
|
// this.$emit("changeActiveLabel", label);
|
|
// },
|
|
updateInfo() {
|
|
// 需要先校驗
|
|
this.questions.forEach((item) => {
|
|
if (item.requiredFlag !== "0") {
|
|
if (item.value == "") {
|
|
item.validation = false;
|
|
} else {
|
|
item.validation = true;
|
|
this.$emit("answer", this.questions);
|
|
// this.$emit("contact", this.contactData);
|
|
}
|
|
} else {
|
|
this.$emit("answer", this.questions);
|
|
}
|
|
});
|
|
this.questionValidation = this.questions.every(function (item) {
|
|
if(item.type=="MultilineText"){
|
|
item.validation = true;
|
|
}
|
|
return item.validation == true;
|
|
});
|
|
this.$emit("bookingDetail_validation", this.questionValidation);
|
|
},
|
|
getValidation(){
|
|
this.updateInfo();
|
|
// let isPass = this.$refs.child_Ordering.save();
|
|
this.questionValidation = this.questions.every(function (item) {
|
|
return item.validation == true;
|
|
});
|
|
if(this.questionValidation==false){
|
|
this.show = true;
|
|
}
|
|
return this.questionValidation;
|
|
},
|
|
// getContent() {
|
|
// this.questions.forEach((item) => {
|
|
// item.validation = true;
|
|
// });
|
|
// // this.question = JSON.parse(JSON.stringify(this.questions));
|
|
// this.questions.forEach((item) => {
|
|
// item.answer = "";
|
|
// });
|
|
// },
|
|
|
|
// setQuestion(val, index, item) {
|
|
// this.question[index].answer = val;
|
|
// },
|
|
},
|
|
};
|
|
</script>
|
|
<style lang="scss" scoped>
|
|
.collapse {
|
|
@media (min-width: 1366px) {
|
|
&::before {
|
|
content: "";
|
|
display: inline-block;
|
|
position: relative;
|
|
padding-left: auto;
|
|
padding-right: auto;
|
|
left: 25px;
|
|
top: 0;
|
|
background-image: url("~/assets/svg/down-arrow.svg");
|
|
background-repeat: no-repeat;
|
|
background-position: center;
|
|
background-size: 100%;
|
|
width: 16px;
|
|
height: 10px;
|
|
margin-right: 45px;
|
|
transform: rotate(-90deg);
|
|
transition: all 0.2s linear;
|
|
}
|
|
|
|
&.disabled {
|
|
pointer-events: none;
|
|
|
|
&::before {
|
|
background-image: url("~/assets/svg/down-arrow-disabled.svg");
|
|
}
|
|
}
|
|
|
|
&.show {
|
|
&::before {
|
|
transform: rotate(0);
|
|
transition: all 0.2s linear;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
.status-check-icon {
|
|
background-image: url("~/assets/svg/status-check.svg");
|
|
background-size: 100%;
|
|
background-repeat: no-repeat;
|
|
background-position: center;
|
|
}
|
|
|
|
.btn-add-icon {
|
|
background-image: url("~/assets/svg/plus-blue.svg");
|
|
background-repeat: no-repeat;
|
|
background-position: left 12px center;
|
|
background-size: 16px 16px;
|
|
}
|
|
|
|
.btn-edit-icon {
|
|
background-image: url("~/assets/svg/edit-info.svg");
|
|
background-repeat: no-repeat;
|
|
background-position: center;
|
|
background-size: 100%;
|
|
}
|
|
|
|
.bounce-enter-active {
|
|
animation: bounce-in 0.3s ease-out;
|
|
}
|
|
|
|
.bounce-leave-active {
|
|
animation: bounce-in 0.3s cubic-bezier(1, 0.5, 0.8, 1) reverse;
|
|
}
|
|
|
|
@keyframes bounce-in {
|
|
0% {
|
|
opacity: 0;
|
|
transform: translateY(-10px);
|
|
}
|
|
|
|
50% {
|
|
opacity: 0.5;
|
|
transform: translateY(-5px);
|
|
}
|
|
|
|
100% {
|
|
opacity: 1;
|
|
transform: translateY(0);
|
|
}
|
|
}
|
|
</style>
|