30 lines
941 B
Vue
30 lines
941 B
Vue
<script setup>
|
|
const props = defineProps({
|
|
invoice: Object,
|
|
});
|
|
const { $formatNum } = useNuxtApp();
|
|
</script>
|
|
|
|
<template>
|
|
<div>
|
|
<div class="is-flex is-gap-2">
|
|
<div class="is-flex-grow-1 p-3 rounded-md has-background-white-ter">
|
|
<p class="fs-13 has-text-grey">Tổng tiền</p>
|
|
<p class="font-bold">
|
|
{{ $formatNum(invoice.final_amount, { hasUnit: true }) }}
|
|
</p>
|
|
</div>
|
|
<div class="is-flex-grow-1 p-3 rounded-md has-background-success-95">
|
|
<p class="fs-13 has-text-success-40">Đã thanh toán</p>
|
|
<p class="font-bold has-text-success-30">{{ $formatNum(null) }}</p>
|
|
</div>
|
|
</div>
|
|
<div class="p-4 mt-4 rounded-md has-background-danger-95">
|
|
<p class="fs-13 has-text-danger-50">Còn lại</p>
|
|
<p class="fs-20 font-bold has-text-danger-40">
|
|
{{ $formatNum(invoice.total, { hasUnit: true }) }}
|
|
</p>
|
|
</div>
|
|
</div>
|
|
</template>
|