wip(freight): migration 0017 + model/column-list groundwork for add-freight-templates
This commit is contained in:
@@ -1,5 +1,4 @@
|
||||
<script setup lang="ts">
|
||||
|
||||
import type { Order, OrderStatus, Paged } from "@vmall/shared";
|
||||
|
||||
definePageMeta({ middleware: "auth" });
|
||||
@@ -20,7 +19,6 @@ function statusClass(value: OrderStatus): "green" | "red" | "orange" | "blue" {
|
||||
return "blue";
|
||||
}
|
||||
|
||||
|
||||
function formatDate(value: string): string {
|
||||
return new Date(value).toLocaleString(locale.value === "zh" ? "zh-CN" : "en-US");
|
||||
}
|
||||
@@ -29,7 +27,10 @@ async function loadOrders(): Promise<void> {
|
||||
loading.value = true;
|
||||
error.value = "";
|
||||
try {
|
||||
orders.value = await $api.shop.listOrders({ page: page.value, status: status.value || undefined });
|
||||
orders.value = await $api.shop.listOrders({
|
||||
page: page.value,
|
||||
status: status.value || undefined,
|
||||
});
|
||||
} catch (err: unknown) {
|
||||
error.value = err instanceof Error ? err.message : translate("common.error");
|
||||
} finally {
|
||||
@@ -43,7 +44,12 @@ async function filterChanged(): Promise<void> {
|
||||
}
|
||||
|
||||
async function changePage(nextPage: number): Promise<void> {
|
||||
if (!orders.value || nextPage < 1 || nextPage > Math.ceil(orders.value.total / orders.value.per_page)) return;
|
||||
if (
|
||||
!orders.value ||
|
||||
nextPage < 1 ||
|
||||
nextPage > Math.ceil(orders.value.total / orders.value.per_page)
|
||||
)
|
||||
return;
|
||||
page.value = nextPage;
|
||||
await loadOrders();
|
||||
}
|
||||
@@ -57,8 +63,15 @@ onMounted(() => {
|
||||
<template>
|
||||
<VPage :title="$t('shop.orderList')">
|
||||
<div class="mb-4 flex items-center gap-3">
|
||||
<label for="order-status" class="text-sm font-medium">{{ $t("shop.filterOrderStatus") }}</label>
|
||||
<select id="order-status" v-model="status" class="rounded-md border border-border bg-surface px-3 py-2 text-sm text-text focus:border-primary focus:outline-2 focus:outline-primary/30" @change="filterChanged">
|
||||
<label for="order-status" class="text-sm font-medium">{{
|
||||
$t("shop.filterOrderStatus")
|
||||
}}</label>
|
||||
<select
|
||||
id="order-status"
|
||||
v-model="status"
|
||||
class="border-border bg-surface text-text focus:border-primary focus:outline-primary/30 rounded-md border px-3 py-2 text-sm focus:outline-2"
|
||||
@change="filterChanged"
|
||||
>
|
||||
<option value="">{{ $t("common.all") }}</option>
|
||||
<option value="pending_payment">{{ $t("order.status.pending_payment") }}</option>
|
||||
<option value="paid">{{ $t("order.status.paid") }}</option>
|
||||
@@ -68,7 +81,7 @@ onMounted(() => {
|
||||
<option value="cancelled">{{ $t("order.status.cancelled") }}</option>
|
||||
</select>
|
||||
</div>
|
||||
<div v-if="error" class="my-2 text-sm text-danger" role="alert">{{ error }}</div>
|
||||
<div v-if="error" class="text-danger my-2 text-sm" role="alert">{{ error }}</div>
|
||||
<p v-if="loading" class="text-muted">{{ $t("common.loading") }}</p>
|
||||
<VCard v-else-if="!orders?.items.length" class="text-muted">{{ $t("common.empty") }}</VCard>
|
||||
<template v-else>
|
||||
@@ -84,18 +97,36 @@ onMounted(() => {
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr v-for="order in orders.items" :key="order.id">
|
||||
<td><NuxtLink :to="`/orders/${order.id}`" class="text-primary hover:underline">{{ order.order_no }}</NuxtLink></td>
|
||||
<td>
|
||||
<NuxtLink :to="`/orders/${order.id}`" class="text-primary hover:underline">{{
|
||||
order.order_no
|
||||
}}</NuxtLink>
|
||||
</td>
|
||||
<td>{{ formatDate(order.created_at) }}</td>
|
||||
<td>{{ order.items.length }}</td>
|
||||
<td>{{ fmt(order.total_minor, order.currency) }}</td>
|
||||
<td><VBadge :tone="statusClass(order.status)">{{ $t(`order.status.${order.status}`) }}</VBadge></td>
|
||||
<td>
|
||||
<VBadge :tone="statusClass(order.status)">{{
|
||||
$t(`order.status.${order.status}`)
|
||||
}}</VBadge>
|
||||
</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</VTable>
|
||||
<div v-if="orders.total > orders.per_page" class="mt-4 flex items-center justify-between">
|
||||
<VBtn size="sm" :disabled="page <= 1 || loading" @click="changePage(page - 1)">{{ $t("common.prev") }}</VBtn>
|
||||
<span class="text-sm text-muted">{{ $t("common.page") }} {{ page }} / {{ Math.ceil(orders.total / orders.per_page) }}</span>
|
||||
<VBtn size="sm" :disabled="page >= Math.ceil(orders.total / orders.per_page) || loading" @click="changePage(page + 1)">{{ $t("common.next") }}</VBtn>
|
||||
<VBtn size="sm" :disabled="page <= 1 || loading" @click="changePage(page - 1)">{{
|
||||
$t("common.prev")
|
||||
}}</VBtn>
|
||||
<span class="text-muted text-sm"
|
||||
>{{ $t("common.page") }} {{ page }} /
|
||||
{{ Math.ceil(orders.total / orders.per_page) }}</span
|
||||
>
|
||||
<VBtn
|
||||
size="sm"
|
||||
:disabled="page >= Math.ceil(orders.total / orders.per_page) || loading"
|
||||
@click="changePage(page + 1)"
|
||||
>{{ $t("common.next") }}</VBtn
|
||||
>
|
||||
</div>
|
||||
</template>
|
||||
</VPage>
|
||||
|
||||
Reference in New Issue
Block a user