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.
376 lines
11 KiB
376 lines
11 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>
|
|
<div class="element content-status tw-hidden xl:tw-block xl:tw-ml-[20px]">
|
|
<span
|
|
v-if="questionValidation == true"
|
|
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>
|
|
|
|
</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 Contact from "@/components/service/Contact";
|
|
|
|
import is from "is_js";
|
|
export default {
|
|
components: {
|
|
elementTextarea,
|
|
elementInputNew,
|
|
selectDate,
|
|
elementTimePicker,
|
|
is,
|
|
Contact,
|
|
},
|
|
props: {
|
|
info: {
|
|
type: Object,
|
|
},
|
|
content: {
|
|
type: Object,
|
|
},
|
|
questions: {
|
|
type: Array,
|
|
default: [],
|
|
},
|
|
active: {
|
|
type: Number,
|
|
},
|
|
orderingPerson_Validation: {
|
|
type: Boolean,
|
|
}
|
|
},
|
|
data() {
|
|
return {
|
|
show: false,
|
|
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 () {
|
|
});
|
|
},
|
|
created(){
|
|
if (process.browser) {
|
|
window.addEventListener("resize", this.handleResize);
|
|
}
|
|
this.handleResize();
|
|
},
|
|
destroyed() {
|
|
if (process.browser) {
|
|
window.removeEventListener("resize", this.handleResize);
|
|
}
|
|
},
|
|
watch: {
|
|
orderingPerson_Validation: {
|
|
handler: function () {
|
|
if (this.orderingPerson_Validation == true) {
|
|
this.show = true;
|
|
} else {
|
|
this.show = false;
|
|
}
|
|
},
|
|
},
|
|
questionValidation: {
|
|
handler: function () {
|
|
if (this.questionValidation == true) {
|
|
this.show = false;
|
|
}else{
|
|
this.show = true;
|
|
}
|
|
},
|
|
},
|
|
},
|
|
|
|
methods: {
|
|
handleResize() {
|
|
if (process.browser) {
|
|
this.windewWidth = window.innerWidth;
|
|
}
|
|
},
|
|
updateInfo() {
|
|
// 需要先校驗
|
|
this.questions.forEach((item) => {
|
|
if (item.requiredFlag !== "0") {
|
|
if (item.value == "") {
|
|
item.validation = false;
|
|
} else {
|
|
item.validation = true;
|
|
this.$emit("answer", this.questions);
|
|
}
|
|
} 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);
|
|
this.questionValidation == true;
|
|
},
|
|
getValidation(){
|
|
this.updateInfo();
|
|
|
|
this.questionValidation = this.questions.every(function (item) {
|
|
return item.validation == true;
|
|
});
|
|
if(this.questionValidation==false){
|
|
this.show = true;
|
|
}
|
|
return this.questionValidation;
|
|
},
|
|
},
|
|
};
|
|
</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>
|