ShowEasyFrontEnd/FrontEnd/components/booking/PaymentDetails.vue

<template>
  <div
    class="PaymentDetails tw-bg-white tw-rounded-[20px] tw-text-base-primary tw-p-5 tw-h-auto"
    v-if="BookingOrder.Payment && BookingOrder.OnSiteService.Provider"
  >
    <div class="tw-body-3 tw-font-bold tw-mb-[11.5px]">{{ $t('Payment Details') }}</div>
    <div class="tw-mb-[10px]">
      <div class="tw-py-[20px] t14 tw-font-bold tw-inline-block tw-mr-[40px]">
        <div class="tw-mb-[12px]">{{ $t('Payment Method') }}</div>
        <div class="tw-mb-[12px]">{{ $t('Payment Terms') }}</div>
        <div v-if="BookingOrder.Payment.PaymentDate" class="tw-mb-[12px]">{{ $t('Payment Date') }}</div>
        <div>{{ $t('Total Amount') }}</div>
      </div>
      <div class="t14 tw-inline-block">
        <div class="tw-mb-[12px]">
          {{ BookingOrder.PaymentType ? paymentMethodMap(BookingOrder.PaymentType) : "尚未確認付款方式" }}
        </div>
        <div class="tw-mb-[12px]">
          全額付款
        </div>
        <div v-if="BookingOrder.Payment.PaymentDate" class="tw-mb-[12px]">
          {{ BookingOrder.Payment.PaymentDate ? new Date(BookingOrder.Payment.PaymentDate).toLocaleString() : "尚未付款" }}
        </div>
        <div>
          ${{ BookingOrder.TotalPrice }} {{ BookingOrder.Currency.CurrencyName }}
        </div>
      </div>
    </div>
    <div v-if="BookingOrder.PaymentStatus == '01' && BookingOrder.PaymentType == '3'" class="tw-flex">
      <img src="~/assets/img/icons/Icon.png" class="tw-w-[20px] tw-h-[20px] tw-mr-[5px]" />
      <div class="tw-text-[#ffb70a]">{{ $t('This Booking is Unpaid') }}</div>
    </div>
    <div v-if="BookingOrder.PaymentStatus == '01' && BookingOrder.PaymentType == '2' && BookingOrder.OnSiteService.Provider.ProviderStatus == null" class="tw-flex">
      <img src="~/assets/img/icons/Icon.png" class="tw-w-[20px] tw-h-[20px] tw-mr-[5px]" />
      <div class="tw-text-[#ffb70a]">等待供應商確認後提供匯款訊息</div>
    </div>
    <div
      class="tw-grid tw-grid-rows-[40px_40px_auto] tw-gap-[10px_12px] md:tw-grid-cols-[129px_175px_auto] md:tw-grid-rows-none md:tw-items-center md:tw-gap-[24px]"
    >
      <button v-if="BookingOrder.BookingStatus == '02' && BookingOrder.PaymentType == '2' && BookingOrder.OnSiteService.Provider.ProviderStatus != '04'"
        class="t14 tw-text-complementary-1 tw-p-[11px] tw-font-bold tw-bg-[#EFF3FF] tw-max-w-[129px] tw-rounded-[10px] hover:tw-text-[#A0B5FF] no-print"
        @click="$emit('banking-details')"
      >
        {{ $t('Banking Details') }}
      </button>
      <button v-if="BookingOrder.BookingStatus == '02' && BookingOrder.PaymentStatus == '01' && BookingOrder.PaymentType == '2' && BookingOrder.Payment.Remittance == null"
        class="button-border t14 tw-text-primary-1 tw-p-[11px] tw-font-bold tw-border tw-border-solid tw-rounded-[10px] tw-border-primary-1 tw-max-w-[175px] hover:tw-bg-primary-3 no-print"
        @click="$emit('upload-remittanceSlip')"
      >
        {{ $t('Upload Remittance Slip') }}
      </button>
      <button v-if="BookingOrder.BookingStatus == '02' && BookingOrder.PaymentStatus == '02' && BookingOrder.PaymentType == '2' && BookingOrder.Payment.Remittance != null"
        class="button-border t14 tw-text-primary-1 tw-p-[11px] tw-font-bold tw-border tw-border-solid tw-rounded-[10px] tw-border-primary-1 tw-max-w-[175px] hover:tw-bg-primary-3 no-print"
        @click="$emit('upload-remittanceSlip')"
      >
        {{ $t('Upload Remittance Slip Again') }}
      </button>
      <div v-if="BookingOrder.BookingStatus == '02' && BookingOrder.PaymentStatus == '01' && BookingOrder.PaymentType == '2' && BookingOrder.Payment.Remittance == null" class="t14 tw-font-normal tw-text-[#EE9546]">
        {{ $t('Please upload your remittance slip as soon as the bill has been transferred.') }}
      </div>
      <button v-if="BookingOrder.BookingStatus == '02' && BookingOrder.PaymentStatus == '02' && BookingOrder.PaymentType == '2' && BookingOrder.Payment.Remittance != null"
        class="t14 tw-text-complementary-1 tw-underline tw-underline-complementary-1 tw-max-w-[110px] no-print"
        @click="$emit('open-remittanceSlip', BookingOrder.Payment.Remittance)"
      >
        {{ BookingOrder.Payment.RemittanceFileName }}
      </button>
    </div>
  </div>
</template>
<script>
import { paymentMethodMap, paymentTermMap } from '@/plugins/util.js'
export default {
  components: {
    paymentMethodMap,
    paymentTermMap
  },
  props: {
      BookingOrder: {
        type: Object,
      },
  },
  methods: {
    paymentMethodMap,
    paymentTermMap
  }
};
</script>
<style lang="scss" scoped></style>