feat: three nuxt frontends, demo seed, rounding + money-exponent + rate-cast fixes, archived specs

2026-09-17 13:34:38 +08:00
parent dc9fd31c5e
commit 653f13161a
85 changed files with 4327 additions and 106 deletions
@@ -0,0 +1,110 @@
+<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): string {
+  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>
+  <div class="page">
+    <div class="page-head"><h1 class="page-title">{{ $t("shop.orderList") }}</h1></div>
+    <div class="row mb">
+      <label for="order-status">{{ $t("shop.filterOrderStatus") }}</label>
+      <select id="order-status" v-model="status" @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="error-text" role="alert">{{ error }}</div>
+    <p v-if="loading" class="muted">{{ $t("common.loading") }}</p>
+    <div v-else-if="!orders?.items.length" class="card muted">{{ $t("common.empty") }}</div>
+    <template v-else>
+      <div class="table-wrap">
+        <table class="table">
+          <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}`">{{ 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><span class="badge" :class="statusClass(order.status)">{{ $t(`order.status.${order.status}`) }}</span></td>
+            </tr>
+          </tbody>
+        </table>
+      </div>
+      <div v-if="orders.total > orders.per_page" class="row between mt">
+        <button class="btn sm" :disabled="page <= 1 || loading" @click="changePage(page - 1)">{{ $t("common.prev") }}</button>
+        <span class="muted">{{ $t("common.page") }} {{ page }} / {{ Math.ceil(orders.total / orders.per_page) }}</span>
+        <button class="btn sm" :disabled="page >= Math.ceil(orders.total / orders.per_page) || loading" @click="changePage(page + 1)">{{ $t("common.next") }}</button>
+      </div>
+    </template>
+  </div>
+</template>
+
+<style scoped>
+.table-wrap {
+  overflow-x: auto;
+}
+</style>