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.
68 lines
2.7 KiB
68 lines
2.7 KiB
<template>
|
|
<div
|
|
class="PaymentDetails tw-bg-neutrals-0 tw-rounded-[20px] tw-text-base-primary tw-p-5 tw-h-auto"
|
|
v-if="BookingOrder.Payment"
|
|
>
|
|
<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 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.Payment.PaymentMethod ? paymentMethodMap(BookingOrder.Payment.PaymentMethod) : "尚未確認付款方式" }}
|
|
</div>
|
|
<div class="tw-mb-[12px]">
|
|
{{ BookingOrder.Payment.PaymentTerms ? paymentTermMap(BookingOrder.Payment.PaymentTerms) : "尚未確認" }}
|
|
</div>
|
|
<div class="tw-mb-[12px]">
|
|
{{ BookingOrder.Payment.PaymentDate ? new Date(BookingOrder.Payment.PaymentDate).toLocaleString() : "尚未付款" }}
|
|
</div>
|
|
<div>
|
|
${{ BookingOrder.TotalPrice }} {{ BookingOrder.Currency.CurrencyName }}
|
|
</div>
|
|
</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
|
|
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'"
|
|
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>
|
|
<div v-if="BookingOrder.BookingStatus == '02' && BookingOrder.PaymentStatus == '01'" class="t14 tw-font-normal tw-text-[#EE9546]">
|
|
{{ $t('Please upload your remittance slip as soon as the bill has been transferred.') }}
|
|
</div>
|
|
</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>
|