96 lines
2.9 KiB
Vue
96 lines
2.9 KiB
Vue
<script setup lang="ts">
|
|
import type { Shipment } from "@vmall/shared";
|
|
|
|
definePageMeta({ middleware: "auth" });
|
|
|
|
const { $api } = useNuxtApp();
|
|
const { locale, t: translate } = useI18n();
|
|
const shipments = ref<Shipment[]>([]);
|
|
const loading = ref(true);
|
|
const error = ref("");
|
|
const actionId = ref("");
|
|
|
|
function statusClass(value: Shipment["status"]): "green" | "blue" | "orange" {
|
|
return value === "delivered" ? "green" : value === "shipped" ? "blue" : "orange";
|
|
}
|
|
|
|
function formatDate(value: string): string {
|
|
return new Date(value).toLocaleString(locale.value === "zh" ? "zh-CN" : "en-US");
|
|
}
|
|
|
|
async function loadShipments(): Promise<void> {
|
|
loading.value = true;
|
|
error.value = "";
|
|
try {
|
|
shipments.value = await $api.shop.listShipments();
|
|
} catch (err: unknown) {
|
|
error.value = err instanceof Error ? err.message : translate("common.error");
|
|
} finally {
|
|
loading.value = false;
|
|
}
|
|
}
|
|
|
|
async function markShipped(shipment: Shipment): Promise<void> {
|
|
actionId.value = shipment.id;
|
|
error.value = "";
|
|
try {
|
|
await $api.shop.markShipped(shipment.id);
|
|
await loadShipments();
|
|
} catch (err: unknown) {
|
|
error.value = err instanceof Error ? err.message : translate("common.error");
|
|
} finally {
|
|
actionId.value = "";
|
|
}
|
|
}
|
|
|
|
onMounted(loadShipments);
|
|
</script>
|
|
|
|
<template>
|
|
<VPage :title="$t('shop.shipmentList')">
|
|
<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="!shipments.length" class="text-muted">{{ $t("common.empty") }}</VCard>
|
|
<VTable v-else>
|
|
<thead>
|
|
<tr>
|
|
<th>{{ $t("shipment.shipmentNo") }}</th>
|
|
<th>{{ $t("shop.orderNo") }}</th>
|
|
<th>{{ $t("shop.carrier") }}</th>
|
|
<th>{{ $t("shop.trackingNo") }}</th>
|
|
<th>{{ $t("common.status") }}</th>
|
|
<th>{{ $t("shop.created") }}</th>
|
|
<th>{{ $t("common.actions") }}</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody>
|
|
<tr v-for="shipment in shipments" :key="shipment.id">
|
|
<td>{{ shipment.shipment_no }}</td>
|
|
<td>
|
|
<NuxtLink :to="`/orders/${shipment.order_id}`" class="text-primary hover:underline">{{
|
|
shipment.order_no ?? shipment.order_id
|
|
}}</NuxtLink>
|
|
</td>
|
|
<td>{{ shipment.carrier }}</td>
|
|
<td>{{ shipment.tracking_no }}</td>
|
|
<td>
|
|
<VBadge :tone="statusClass(shipment.status)">{{
|
|
$t(`shipment.status.${shipment.status}`)
|
|
}}</VBadge>
|
|
</td>
|
|
<td>{{ formatDate(shipment.created_at) }}</td>
|
|
<td>
|
|
<VBtn
|
|
v-if="shipment.status === 'pending'"
|
|
size="sm"
|
|
:disabled="actionId === shipment.id"
|
|
@click="markShipped(shipment)"
|
|
>{{ $t("shipment.markShipped") }}</VBtn
|
|
>
|
|
</td>
|
|
</tr>
|
|
</tbody>
|
|
</VTable>
|
|
</VPage>
|
|
</template>
|