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.
98 lines
2.6 KiB
98 lines
2.6 KiB
<template>
|
|
<div class="booking-info-item tw-p-[15px] tw-mb-[20px] tw-bg-neutrals-0 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 t14 tw-text-complementary-1 tw-mb-[12px]">
|
|
|
|
</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.order_display_id }}</div>
|
|
<div class="detail tw-body-5 tw-mb-[10px]">
|
|
Pick Up Service, Taipei City, Standard Car for 4 people] x 1
|
|
</div>
|
|
<div v-show="orderStatus.service_date" 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:') }} {{ bookDate }}
|
|
</div>
|
|
<div class="total t14 tw-font-bold tw-text-primary-1">${{ total }} {{ 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 moment(this.orderStatus.created_at).format("YYYY.MM.DD H:mm");
|
|
},
|
|
total() {
|
|
return (parseFloat(this.totalPrice * 110 / 100)).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>
|