57 lines
1.8 KiB
Vue
57 lines
1.8 KiB
Vue
<script setup lang="ts">
|
|
import type { Invoice } from "@vmall/shared";
|
|
|
|
definePageMeta({ middleware: "auth" });
|
|
|
|
const { t } = useI18n();
|
|
const { $api } = useNuxtApp();
|
|
|
|
const rows = ref<Invoice[]>([]);
|
|
const loading = ref(true);
|
|
|
|
async function load(): Promise<void> {
|
|
loading.value = true;
|
|
try {
|
|
rows.value = await $api.listMyInvoices();
|
|
} finally {
|
|
loading.value = false;
|
|
}
|
|
}
|
|
|
|
onMounted(() => {
|
|
void load();
|
|
});
|
|
</script>
|
|
|
|
<template>
|
|
<VCard class="min-h-[560px]">
|
|
<h1 class="text-text mb-4 text-xl font-bold">{{ t("user.invoicesTitle") }}</h1>
|
|
<div v-if="loading" class="text-muted px-0 py-5">{{ t("common.loading") }}</div>
|
|
<UiEmptyState v-else-if="rows.length === 0" :text="t('user.noInvoices')" />
|
|
<VTable v-else>
|
|
<thead>
|
|
<tr>
|
|
<th>{{ t("user.invoiceNo") }}</th>
|
|
<th>{{ t("user.invoiceOrderNo") }}</th>
|
|
<th>{{ t("user.invoiceTitle") }}</th>
|
|
<th>{{ t("user.invoiceKind") }}</th>
|
|
<th>{{ t("user.amount") }}</th>
|
|
<th>{{ t("common.status") }}</th>
|
|
<th>{{ t("user.invoiceIssuedAt") }}</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody>
|
|
<tr v-for="invoice in rows" :key="invoice.id">
|
|
<td>{{ invoice.invoice_no || t("mall.notAvailable") }}</td>
|
|
<td>{{ invoice.order_no || t("mall.notAvailable") }}</td>
|
|
<td>{{ invoice.title }}</td>
|
|
<td>{{ invoice.kind === "personal" ? t("user.personal") : t("user.company") }}</td>
|
|
<td><PriceText :amount-minor="invoice.amount_minor" :currency="invoice.currency" /></td>
|
|
<td><StatusBadge :status="invoice.status" kind="invoice" /></td>
|
|
<td>{{ invoice.issued_at ? invoice.issued_at.slice(0, 10) : t("mall.notAvailable") }}</td>
|
|
</tr>
|
|
</tbody>
|
|
</VTable>
|
|
</VCard>
|
|
</template>
|