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.
123 lines
4.2 KiB
123 lines
4.2 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]"
|
|
v-if="info.OnSiteService"
|
|
>
|
|
<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 v-if="info.OnSiteService.Logo">
|
|
<img class="tw-ml-[6px] tw-px-[2px] tw-w-[48px] tw-h-[40px] tw-rounded-[8px] xl:tw-w-[100px] xl:tw-h-[80px]" :src="info.OnSiteService.Logo"/>
|
|
</div>
|
|
<div v-else>
|
|
<img src="~/assets/svg/noLogo.svg" class="md:tw-max-w-[100px] md:tw-max-h-[80px]" alt="" />
|
|
</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.OnSiteService.ServiceName }}
|
|
</div>
|
|
<div
|
|
class="tw-grid tw-grid-cols-[40px_auto] tw-gap-[10px] tw-items-center tw-mb-[12px]"
|
|
>
|
|
<div v-if="info.OnSiteService.Provider.Logo"><img :src="info.OnSiteService.Provider.Logo" /></div>
|
|
<div v-else><img src="~/assets/svg/noLogo.svg" class="tw-w-[40px]" alt="" /></div>
|
|
<div class="id tw-body-5 lg:tw-body-3 tw-text-hint">
|
|
{{ info.OnSiteService.Provider.ProviderName }}
|
|
</div>
|
|
</div>
|
|
<div v-for="(item, key) in info.BookingDetail" :key="key" class="detail tw-body-5 tw-mb-[10px]">
|
|
{{ item }}
|
|
</div>
|
|
<div class="date tw-body-5 tw-mb-[10px]">
|
|
{{ new Date(info.OnSiteService.ServiceStartDate).toLocaleString() }} - {{ new Date(info.OnSiteService.ServiceEndDate).toLocaleString() }} (Local time)
|
|
</div>
|
|
<button
|
|
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 no-print"
|
|
@click="$emit('other-details')"
|
|
>
|
|
{{ $t('Other Details') }}
|
|
</button>
|
|
</div>
|
|
</div>
|
|
<div v-if="info.NoticeDetail"
|
|
class="tw-grid tw-grid-rows-[18px_auto_32px] tw-gap-[15px] tw-border-solid tw-border 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 md:t12 lg:t16"
|
|
>
|
|
{{ $t('Notice') }}
|
|
</div>
|
|
</div>
|
|
<div v-html="info.NoticeDetail">
|
|
</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 no-print"
|
|
@click="$emit('notice-details')"
|
|
>
|
|
{{ $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 {};
|
|
},
|
|
created(){
|
|
},
|
|
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>
|