vmall/apps/shop-admin/pages/orders/index.vue

<script setup lang="ts">

import type { Order, OrderStatus, Paged } from "@vmall/shared";

definePageMeta({ middleware: "auth" });

const { $api } = useNuxtApp();
const { locale, t: translate } = useI18n();
const { load: loadMoney, fmt } = useMoney();
const orders = ref<Paged<Order> | null>(null);
const page = ref(1);
const status = ref<"" | OrderStatus>("");
const loading = ref(true);
const error = ref("");

function statusClass(value: OrderStatus): "green" | "red" | "orange" | "blue" {
  if (value === "completed") return "green";
  if (value === "cancelled") return "red";
  if (value === "pending_payment") return "orange";
  return "blue";
}


function formatDate(value: string): string {
  return new Date(value).toLocaleString(locale.value === "zh" ? "zh-CN" : "en-US");
}

async function loadOrders(): Promise<void> {
  loading.value = true;
  error.value = "";
  try {
    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 {
    loading.value = false;
  }
}

async function filterChanged(): Promise<void> {
  page.value = 1;
  await loadOrders();
}

async function changePage(nextPage: number): Promise<void> {
  if (!orders.value || nextPage < 1 || nextPage > Math.ceil(orders.value.total / orders.value.per_page)) return;
  page.value = nextPage;
  await loadOrders();
}

onMounted(() => {
  loadMoney();
  loadOrders();
});
</script>

<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">
        <option value="">{{ $t("common.all") }}</option>
        <option value="pending_payment">{{ $t("order.status.pending_payment") }}</option>
        <option value="paid">{{ $t("order.status.paid") }}</option>
        <option value="fulfilling">{{ $t("order.status.fulfilling") }}</option>
        <option value="shipped">{{ $t("order.status.shipped") }}</option>
        <option value="completed">{{ $t("order.status.completed") }}</option>
        <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>
    <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>
      <VTable>
        <thead>
          <tr>
            <th>{{ $t("shop.orderNo") }}</th>
            <th>{{ $t("shop.created") }}</th>
            <th>{{ $t("shop.items") }}</th>
            <th>{{ $t("shop.total") }}</th>
            <th>{{ $t("common.status") }}</th>
          </tr>
        </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>{{ 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>
          </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>
      </div>
    </template>
  </VPage>
</template>