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.
104 lines
2.9 KiB
104 lines
2.9 KiB
<template>
|
|
<div class="booking-info-item tw-p-[15px] tw-mb-[20px] tw-bg-white tw-rounded-xl xl:tw-p-[20px]">
|
|
<div :class="[
|
|
'info-content',
|
|
' tw-flex',
|
|
'tw-justify-start',
|
|
'tw-items-start',
|
|
' -tw-mx-[7px]',
|
|
'xl:-tw-mx-[8px]',
|
|
]">
|
|
<div class="element content-img tw-max-w-[52px] tw-px-[7px] md:tw-max-w-[116px] xl:tw-px-[8px]">
|
|
<img class="tw-rounded" :src="info.preview_image" />
|
|
</div>
|
|
<div class="element content-text tw-px-[7px] xl:tw-px-[8px]">
|
|
<div class="confirmed t18 tw-text-[#7997ff] tw-font-medium tw-mb-[12px]">
|
|
{{ $t('Awaiting Confirmation') }}
|
|
</div>
|
|
<h3 class="t12 tw-font-bold tw-mb-[10px] xl:tw-text-[16px] xl:tw-leading-[21px]">
|
|
{{ info.name }}
|
|
</h3>
|
|
<div class="id tw-body-5 tw-mb-[10px]">#{{ orderStatus.bookingNo }}</div>
|
|
<template v-if="info.bookingItems && info.bookingItems.length>0">
|
|
<div class="detail tw-body-5 tw-mb-[10px]" v-for="(item,index) in info.bookingItems" :key="index">
|
|
{{ item }}
|
|
</div>
|
|
</template>
|
|
<div v-show="info.exhibitionName" class="date tw-body-5 tw-mb-[10px]">
|
|
{{ $t('Exhibition Name') }}：{{ info.exhibitionName }}
|
|
</div>
|
|
<div class="date tw-body-5 tw-mb-[10px]">
|
|
{{ $t('Service Date：') }}：{{ orderStatus.service_date }}{{ $t('(Local time)') }}
|
|
</div>
|
|
<div class="date tw-body-5 tw-mb-[10px]">
|
|
{{ $t('Booking Date：') }}：{{ orderStatus.created_at }}
|
|
</div>
|
|
<div class="total t16 tw-font-normal tw-text-primary-1">${{ total.toLocaleString() }} {{ orderStatus.currency }}</div>
|
|
</div>
|
|
</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";
|
|
import moment from "moment";
|
|
export default {
|
|
components: {
|
|
elementTextarea,
|
|
elementPromoCode,
|
|
elementTimePicker,
|
|
moment
|
|
},
|
|
props: {
|
|
totalPrice: {
|
|
type: Number
|
|
},
|
|
info: {
|
|
type: Object,
|
|
},
|
|
orderStatus: {
|
|
type: Object
|
|
}
|
|
},
|
|
data() {
|
|
return {};
|
|
},
|
|
computed: {
|
|
// bookDate() {
|
|
// return this.orderStatus.created_at;
|
|
// // return moment(this.orderStatus.created_at).format("YYYY.MM.DD H:mm");
|
|
// },
|
|
total() {
|
|
return parseFloat(this.totalPrice).toLocaleString();
|
|
},
|
|
},
|
|
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>
|