67 lines
2.1 KiB
Vue
67 lines
2.1 KiB
Vue
<script setup>
|
|
const props = defineProps({
|
|
invoice: Object,
|
|
});
|
|
|
|
const { $getdata, $formatNum } = useNuxtApp();
|
|
const invoiceDetails = ref([]);
|
|
onMounted(async () => {
|
|
invoiceDetails.value = await $getdata("Invoice_Detail", { filter: { invoice: props.invoice.id } });
|
|
});
|
|
</script>
|
|
|
|
<template>
|
|
<div>
|
|
<pre class="fs-12 max-h-40 mb-2">{{ invoiceDetails }}</pre>
|
|
<div class="is-flex is-flex-direction-column is-gap-2">
|
|
<div
|
|
v-for="invoiceDetail in invoiceDetails"
|
|
:key="invoiceDetail.id"
|
|
class="p-3 has-background-white-ter rounded-md"
|
|
>
|
|
<div class="fs-15 is-flex is-justify-content-space-between">
|
|
<p>{{ invoiceDetail.variant__product__name }}</p>
|
|
<p class="font-semibold">
|
|
{{ $formatNum(invoiceDetail.price, { hasUnit: true }) }}
|
|
</p>
|
|
</div>
|
|
<div class="is-flex is-gap-8 fs-13 has-text-grey-dark mt-1">
|
|
<p>SL: {{ invoiceDetail.quantity }}</p>
|
|
<p>Đơn giá: {{ $formatNum(invoiceDetail.price, { hasUnit: true }) }}</p>
|
|
<p>
|
|
Giảm:
|
|
{{ new Intl.NumberFormat("vi-VN", { style: "percent" }).format(invoiceDetail.discount) }}
|
|
</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<hr />
|
|
<table class="table is-fullwidth is-bordered fs-14 mb-8">
|
|
<tbody class="has-text-right">
|
|
<tr>
|
|
<td class="has-text-grey-dark">Tổng tiền hàng</td>
|
|
<td>{{ $formatNum(invoice.total_amount, { hasUnit: true }) }}</td>
|
|
</tr>
|
|
<tr>
|
|
<td class="has-text-grey-dark">Phí vận chuyển</td>
|
|
<td>{{ $formatNum(invoice.shipping_fee, { hasUnit: true }) }}</td>
|
|
</tr>
|
|
<tr>
|
|
<td class="has-text-grey-dark">Giảm giá</td>
|
|
<td>{{ $formatNum(invoice.discount_amount, { hasUnit: true }) }}</td>
|
|
</tr>
|
|
<tr class="font-bold">
|
|
<td>Tổng cộng</td>
|
|
<td class="fs-17">{{ $formatNum(invoice.final_amount, { hasUnit: true }) }}</td>
|
|
</tr>
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
</template>
|
|
|
|
<style scoped>
|
|
table td {
|
|
vertical-align: middle;
|
|
}
|
|
</style>
|