vmall/apps/shop-admin/pages/orders/[id].vue

<script setup lang="ts">
import { t as localized } from "@vmall/shared";
import type { Order, OrderStatus, Shipment, ShipmentItemBody } from "@vmall/shared";

definePageMeta({ middleware: "auth" });

const { $api } = useNuxtApp();
const { locale, t: translate } = useI18n();
const { load: loadMoney, fmt } = useMoney();
const route = useRoute();
const orderId = computed(() => String(route.params.id));
const order = ref<Order | null>(null);
const shipments = ref<Shipment[]>([]);
const quantities = ref<Record<string, number>>({});
const carrier = ref("");
const trackingNo = ref("");
const loading = ref(true);
const busy = ref(false);
const actionId = ref("");
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 shipmentStatusClass(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");
}

function shippedQuantity(itemId: string): number {
  return shipments.value
    .filter((shipment) => shipment.order_id === orderId.value)
    .flatMap((shipment) => shipment.items)
    .filter((item) => item.order_item_id === itemId)
    .reduce((total, item) => total + item.qty, 0);
}

function unshippedQuantity(itemId: string, total: number): number {
  return Math.max(0, total - shippedQuantity(itemId));
}

async function findShopOrder(): Promise<Order> {
  let currentPage = 1;
  let totalPages = 1;
  while (currentPage <= totalPages) {
    const result = await $api.shop.listOrders({ page: currentPage });
    const found = result.items.find((item) => item.id === orderId.value);
    if (found) return found;
    totalPages = Math.max(1, Math.ceil(result.total / result.per_page));
    currentPage += 1;
  }
  throw new Error(translate("common.empty"));
}

async function loadOrder(): Promise<void> {
  loading.value = true;
  error.value = "";
  try {
    const [loadedOrder, loadedShipments] = await Promise.all([
      findShopOrder(),
      $api.shop.listShipments(),
    ]);
    order.value = loadedOrder;
    shipments.value = loadedShipments.filter((shipment) => shipment.order_id === orderId.value);
    const nextQuantities: Record<string, number> = {};
    loadedOrder.items.forEach((item) => {
      nextQuantities[item.id] = Math.max(
        0,
        item.qty - loadedShipments
          .filter((shipment) => shipment.order_id === orderId.value)
          .flatMap((shipment) => shipment.items)
          .filter((shipmentItem) => shipmentItem.order_item_id === item.id)
          .reduce((total, shipmentItem) => total + shipmentItem.qty, 0),
      );
    });
    quantities.value = nextQuantities;
  } catch (err: unknown) {
    error.value = err instanceof Error ? err.message : translate("common.error");
  } finally {
    loading.value = false;
  }
}

async function createShipment(): Promise<void> {
  if (!order.value || !carrier.value.trim() || !trackingNo.value.trim()) {
    error.value = translate("common.required");
    return;
  }
  const items: ShipmentItemBody[] = order.value.items
    .map((item) => ({ order_item_id: item.id, qty: quantities.value[item.id] ?? 0 }))
    .filter((item) => item.qty > 0);
  if (!items.length) {
    error.value = translate("common.required");
    return;
  }
  busy.value = true;
  error.value = "";
  try {
    await $api.shop.createShipment(order.value.id, carrier.value.trim(), trackingNo.value.trim(), items);
    carrier.value = "";
    trackingNo.value = "";
    await loadOrder();
  } catch (err: unknown) {
    error.value = err instanceof Error ? err.message : translate("common.error");
  } finally {
    busy.value = false;
  }
}

async function markShipped(shipment: Shipment): Promise<void> {
  actionId.value = shipment.id;
  error.value = "";
  try {
    await $api.shop.markShipped(shipment.id);
    await loadOrder();
  } catch (err: unknown) {
    error.value = err instanceof Error ? err.message : translate("common.error");
  } finally {
    actionId.value = "";
  }
}

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

<template>
  <VPage :title="order ? order.order_no : $t('order.title')">
    <template #actions>
      <NuxtLink class="inline-flex items-center justify-center rounded-md border border-border bg-surface px-4 py-2 text-sm font-medium text-text hover:bg-bg" to="/orders">{{ $t("common.back") }}</NuxtLink>
    </template>
    <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>
    <template v-else-if="order">
      <VCard>
        <div class="mb-4 flex items-center justify-between gap-3">
          <h2 class="text-lg font-semibold">{{ $t("shop.details") }}</h2>
          <VBadge :tone="statusClass(order.status)">{{ $t(`order.status.${order.status}`) }}</VBadge>
        </div>
        <div class="mb-5 grid gap-4 [grid-template-columns:repeat(auto-fit,minmax(180px,1fr))]">
          <div class="grid gap-1.5"><span class="text-sm text-muted">{{ $t("shop.created") }}</span><strong>{{ formatDate(order.created_at) }}</strong></div>
          <div class="grid gap-1.5"><span class="text-sm text-muted">{{ $t("shop.total") }}</span><strong>{{ fmt(order.total_minor, order.currency) }}</strong></div>
        </div>
        <h3 class="mb-3 text-base font-semibold">{{ $t("shop.items") }}</h3>
        <VTable>
          <thead><tr><th>{{ $t("product.detail") }}</th><th>{{ $t("product.skuCode") }}</th><th>{{ $t("common.qty") }}</th><th>{{ $t("common.price") }}</th></tr></thead>
          <tbody>
            <tr v-for="item in order.items" :key="item.id">
              <td>{{ localized(item.product_name, locale) }}</td>
              <td>{{ item.sku_code }}</td>
              <td>{{ item.qty }}</td>
              <td>{{ fmt(item.unit_price_minor, order.currency) }}</td>
            </tr>
          </tbody>
        </VTable>
        <h3 class="mb-2 mt-5 text-base font-semibold">{{ $t("shop.address") }}</h3>
        <address class="not-italic leading-7">
          <div>{{ order.shipping_address.recipient }} · {{ order.shipping_address.phone }}</div>
          <div>{{ order.shipping_address.country }}, {{ order.shipping_address.region }}, {{ order.shipping_address.city }}</div>
          <div>{{ order.shipping_address.line1 }}, {{ order.shipping_address.postal_code }}</div>
        </address>
      </VCard>

      <VCard v-if="order.status === 'paid' || order.status === 'fulfilling'" class="mt-4">
        <h2 class="mb-4 text-lg font-semibold">{{ $t("shop.createShipment") }}</h2>
        <form @submit.prevent="createShipment">
          <div class="grid gap-3 md:grid-cols-2">
            <VField :label="$t('shop.carrier')">
              <VInput id="carrier" v-model="carrier" required />
            </VField>
            <VField :label="$t('shop.trackingNo')">
              <VInput id="tracking-no" v-model="trackingNo" required />
            </VField>
          </div>
          <h3 class="mb-3 text-base font-semibold">{{ $t("shop.shipmentQuantities") }}</h3>
          <div v-for="item in order.items" :key="`quantity-${item.id}`" class="flex items-end gap-3">
            <div class="min-w-0 flex-[2] pb-3.5">{{ localized(item.product_name, locale) }} ({{ item.sku_code }})</div>
            <VField class="flex-1" :label="`${$t('shop.unshipped')}: ${unshippedQuantity(item.id, item.qty)}`">
              <VInput :id="`quantity-${item.id}`" v-model.number="quantities[item.id]" type="number" min="0" :max="unshippedQuantity(item.id, item.qty)" step="1" />
            </VField>
          </div>
          <VBtn variant="primary" type="submit" :disabled="busy">{{ $t("shop.createShipment") }}</VBtn>
        </form>
      </VCard>

      <VCard class="mt-4">
        <h2 class="mb-4 text-lg font-semibold">{{ $t("shipment.title") }}</h2>
        <div v-if="!shipments.length" class="text-muted">{{ $t("common.empty") }}</div>
        <VTable v-else>
          <thead><tr><th>{{ $t("shipment.shipmentNo") }}</th><th>{{ $t("shop.carrier") }}</th><th>{{ $t("shop.trackingNo") }}</th><th>{{ $t("common.status") }}</th><th>{{ $t("common.actions") }}</th></tr></thead>
          <tbody>
            <tr v-for="shipment in shipments" :key="shipment.id">
              <td>{{ shipment.shipment_no }}</td><td>{{ shipment.carrier }}</td><td>{{ shipment.tracking_no }}</td>
              <td><VBadge :tone="shipmentStatusClass(shipment.status)">{{ $t(`shipment.status.${shipment.status}`) }}</VBadge></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>
      </VCard>
    </template>
  </VPage>
</template>