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.
137 lines
4.3 KiB
137 lines
4.3 KiB
<template>
|
|
<div
|
|
class="BookingInfoItem booking-info-item tw-p-[20px] tw-mb-[20px] tw-bg-neutrals-0 tw-rounded-xl xl:tw-p-[20px]"
|
|
>
|
|
<div class="tw-body-3 tw-font-bold md:tw-body-2 tw-mb-[21.5px]">
|
|
{{ $t('Booking Details') }}
|
|
</div>
|
|
<div
|
|
:class="[
|
|
'info-content',
|
|
' tw-flex',
|
|
'tw-items-start',
|
|
'tw-mb-[10px]',
|
|
'md:tw-mb-[15px]',
|
|
' -tw-mx-[7px]',
|
|
'xl:-tw-mx-[8px]',
|
|
]"
|
|
>
|
|
<div>
|
|
<img
|
|
class="tw-rounded tw-ml-[6px] tw-px-[2px] md:tw-rounded-[8px]"
|
|
:src="Img"
|
|
/>
|
|
</div>
|
|
<div
|
|
class="element content-text tw-ml-[13px] md:tw-ml-[17px] tw-text-black"
|
|
>
|
|
<div class="t14 tw-font-bold tw-mb-[10px] md:t16 xl:tw-leading-[21px]">
|
|
{{ info.service_name}}
|
|
</div>
|
|
<div
|
|
class="tw-grid tw-grid-cols-[40px_auto] tw-gap-[10px] tw-items-center tw-mb-[12px]"
|
|
>
|
|
<img :src="Supplier.logo" />
|
|
<div class="id tw-body-5 lg:tw-body-3 tw-text-hint">
|
|
{{ Supplier.brand }}
|
|
</div>
|
|
</div>
|
|
<div class="detail tw-body-5 tw-mb-[10px]" v-for="(item, key) in info.order_item" :key="key">
|
|
{{ (item.package_name && item.package_name!='' ? item.package_name + ", " : "") + (item.customer_plan_name ? item.customer_plan_name + ", " : "") + item.specification_name +
|
|
" x " + item.quantity }}
|
|
</div>
|
|
<div class="date tw-body-5 tw-mb-[10px]" v-for="(item, key) in info.order_as" :key="key">{{ item.as_name + " x " + item.quantity }}
|
|
</div>
|
|
<div v-if="info.service_date != null || info.service_time != null" class="date tw-body-5 tw-mb-[10px]">
|
|
{{info.service_date}} {{info.service_time}} (Local time)
|
|
</div>
|
|
<div
|
|
class="total t14 tw-text-primary-1 tw-mb-[10px] md:tw-mb-[20px] md:t16"
|
|
>
|
|
${{ info.subTotal }} {{ info.currency }}
|
|
</div>
|
|
<button
|
|
v-if="info.order_question_answer.length > 0 "
|
|
class="t14 tw-font-bold tw-p-[11px] tw-bg-complementary-1 tw-bg-opacity-10 tw-rounded-[10px] tw-text-complementary-1 hover:tw-text-secondary-light"
|
|
@click="$modal.show('OtherDetails')"
|
|
>
|
|
{{ $t('Other Details') }}
|
|
</button>
|
|
</div>
|
|
</div>
|
|
<div
|
|
class="tw-grid tw-grid-rows-[18px_auto_32px] tw-gap-[15px] tw-border-solid tw-border-neutrals-200 tw-rounded-[20px] tw-p-[20px] lg:tw-ml-[120px]"
|
|
>
|
|
<div
|
|
class="tw-grid tw-grid-cols-[16px_auto] tw-gap-[10px] tw-items-center tw-mb-[15px]"
|
|
>
|
|
<img src="~/assets/svg/Vector.svg" />
|
|
<div
|
|
class="t14 tw-font-bold tw-text-warning-default tw-items-center tw-font-bold md:t12 lg:t16"
|
|
>
|
|
{{ $t('Notice') }}
|
|
</div>
|
|
</div>
|
|
<div v-html="NoticeDetails.message_content">
|
|
</div>
|
|
<button
|
|
class="tw-body-3 tw-text-warning-default tw-border-solid tw-border-warning-default tw-border-[1px] tw-rounded-[12px] tw-place-self-center tw-py-[7px] tw-px-[16px] md:t14 lg:tw-body-3 lg:tw-place-self-start hover:tw-bg-success-background"
|
|
@click="$modal.show('NoticeDetails')"
|
|
>
|
|
{{ $t('Notice Details') }}
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
<script>
|
|
import elementTextarea from "@/components/newComponent/form/ElementTextarea";
|
|
import elementPromoCode from "@/components/newComponent/form/ElementPromoCode";
|
|
import elementTimePicker from "@/components/newComponent/form/ElementTimePicker";
|
|
export default {
|
|
components: {
|
|
elementTextarea,
|
|
elementPromoCode,
|
|
elementTimePicker,
|
|
},
|
|
props: {
|
|
info: {
|
|
type: Object,
|
|
},
|
|
NoticeDetails: {
|
|
type: Object,
|
|
},
|
|
Supplier: {
|
|
type: Object,
|
|
},
|
|
Img: {
|
|
type: String,
|
|
}
|
|
},
|
|
data() {
|
|
return {};
|
|
},
|
|
methods: {},
|
|
};
|
|
</script>
|
|
<style lang="scss" scoped>
|
|
.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>
|