ShowEasyFrontEnd/FrontEnd/components/service/DoneBookingInfoItem.vue

<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="['tw-text-secondary-default confirmed t18 tw-font-medium tw-mb-[12px]']">
          {{ $t(mybookingStatusMap(info.bookingStatus)) }} 
        </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";
import { mybookingStatusMap, bookingColor } from "@/plugins/util.js";
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: {
    bookingColor,
    mybookingStatusMap
  },
};
</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>