71 lines
2.1 KiB
Vue
71 lines
2.1 KiB
Vue
<script lang="ts" setup>
|
|
import { formatNumberDecimal } from 'stores/utils';
|
|
import { dateFormatJS } from 'src/utils/datetime';
|
|
|
|
import { MainButton, ViewButton } from 'components/button';
|
|
|
|
defineEmits<{
|
|
(e: 'view', index: number): void;
|
|
(e: 'example', index: number): void;
|
|
}>();
|
|
|
|
withDefaults(
|
|
defineProps<{
|
|
payType: string;
|
|
amount: number;
|
|
date: string | Date;
|
|
index: number;
|
|
paySplitCount: number;
|
|
}>(),
|
|
{ payType: 'Full', amount: 0, date: () => new Date() },
|
|
);
|
|
</script>
|
|
<template>
|
|
<section class="surface-1 rounded row">
|
|
<aside class="column col bordered-r q-py-md q-pl-md">
|
|
<span class="text-weight-medium text-body1">
|
|
{{ $t('quotation.receiptDialog.PaymentReceive') }}
|
|
</span>
|
|
<span class="app-text-muted-2 q-pt-md">
|
|
{{ $t('quotation.receiptDialog.paymentMethod') }}
|
|
</span>
|
|
<span class="row items-center">
|
|
{{ $t(`quotation.type.${payType}`) }}
|
|
{{ payType !== 'Full' ? `${index + 1} / ${paySplitCount}` : `` }}
|
|
<q-icon name="mdi-minus" class="q-px-xs" />
|
|
<article class="app-text-positive text-weight-medium">
|
|
{{ $t('quotation.receiptDialog.PaymentSuccess') }}
|
|
</article>
|
|
<article class="q-ml-auto text-weight-bold text-body1 q-pr-lg">
|
|
฿ {{ formatNumberDecimal(amount, 2) }}
|
|
</article>
|
|
</span>
|
|
</aside>
|
|
|
|
<aside class="column col q-py-md text-right self-center q-px-md">
|
|
<div class="q-gutter-x-xs">
|
|
<MainButton
|
|
icon="mdi-play-box-outline"
|
|
color="207 96% 32%"
|
|
@click="() => $emit('example', index)"
|
|
/>
|
|
|
|
<ViewButton icon-only @click="() => $emit('view', index)" />
|
|
</div>
|
|
<span class="app-text-positive text-weight-bold text-body1">
|
|
{{ $t('quotation.receiptDialog.receiptIssued') }}
|
|
</span>
|
|
<div class="app-text-muted-2">
|
|
<q-icon name="mdi-calendar-blank-outline" />
|
|
{{
|
|
dateFormatJS({
|
|
date: date,
|
|
dayStyle: '2-digit',
|
|
monthStyle: '2-digit',
|
|
})
|
|
}}
|
|
</div>
|
|
</aside>
|
|
</section>
|
|
</template>
|
|
<style scoped></style>
|