ShowEasyFrontEnd/FrontEnd/components/service/DoneBookingInfoItem.vue

<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>