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,134 @@
+<script setup lang="ts">
+import type { Cart, CartItem } from "@vmall/shared";
+import { t as localized } from "@vmall/shared";
+
+const { $api } = useNuxtApp();
+const { locale } = useI18n();
+const { currency, convertAmount, formatAmount } = usePrice();
+
+const cart = ref<Cart | null>(null);
+const converted = ref<Record<string, number>>({});
+const subtotalDisplay = ref("");
+const loading = ref(true);
+const error = ref("");
+const updating = ref<string | null>(null);
+
+const subtotalMinor = computed(() => (cart.value?.items ?? []).reduce((sum, item) => sum + (converted.value[item.sku_id] ?? 0) * item.qty, 0));
+
+function errorMessage(value: unknown): string {
+  return value instanceof Error ? value.message : $t("mall.loadFailed");
+}
+
+async function refreshPrices(): Promise<void> {
+  if (!cart.value) return;
+  const entries = await Promise.all(cart.value.items.map(async (item) => [item.sku_id, await convertAmount(item.unit_price_minor, item.currency)] as const));
+  converted.value = Object.fromEntries(entries);
+  subtotalDisplay.value = await formatAmount(subtotalMinor.value, currency.value);
+}
+
+async function loadCart(): Promise<void> {
+  loading.value = true;
+  error.value = "";
+  try {
+    cart.value = await $api.getCart();
+    await refreshPrices();
+  } catch (value) {
+    error.value = errorMessage(value);
+    cart.value = null;
+  } finally {
+    loading.value = false;
+  }
+}
+
+async function updateQuantity(item: CartItem, value: string | number): Promise<void> {
+  const qty = Math.trunc(Number(value));
+  if (!Number.isFinite(qty) || qty < 1) {
+    error.value = $t("mall.invalidQuantity");
+    return;
+  }
+  updating.value = item.sku_id;
+  error.value = "";
+  try {
+    await $api.updateCartItem(item.sku_id, qty);
+    await loadCart();
+  } catch (value) {
+    error.value = errorMessage(value);
+  } finally {
+    updating.value = null;
+  }
+}
+
+async function removeItem(item: CartItem): Promise<void> {
+  updating.value = item.sku_id;
+  error.value = "";
+  try {
+    await $api.removeCartItem(item.sku_id);
+    await loadCart();
+  } catch (value) {
+    error.value = errorMessage(value);
+  } finally {
+    updating.value = null;
+  }
+}
+
+watch(currency, () => void refreshPrices());
+onMounted(() => void loadCart());
+
+definePageMeta({ middleware: "auth" });
+</script>
+
+<template>
+  <section>
+    <h1 class="page-title">{{ $t("cart.title") }}</h1>
+    <p v-if="loading" class="muted">{{ $t("common.loading") }}</p>
+    <p v-if="error" class="error-text" role="alert">{{ error }}</p>
+    <div v-if="!loading && cart && cart.items.length === 0" class="card empty-state">{{ $t("cart.emptyCart") }}</div>
+    <template v-if="cart && cart.items.length > 0">
+      <div class="card cart-list">
+        <div v-for="item in cart.items" :key="item.sku_id" class="cart-line">
+          <div class="cart-product">
+            <img v-if="item.image" :src="item.image" :alt="localized(item.product_name, locale)">
+            <div v-else class="image-placeholder">{{ $t("mall.noImage") }}</div>
+            <div>
+              <NuxtLink :to="`/products/${item.product_id}`" class="product-name">{{ localized(item.product_name, locale) }}</NuxtLink>
+              <div class="muted">{{ item.sku_code }}</div>
+            </div>
+          </div>
+          <div class="unit-price"><PriceText :amount-minor="item.unit_price_minor" :currency="item.currency" /></div>
+          <div class="quantity-field">
+            <label class="sr-only" :for="`qty-${item.sku_id}`">{{ $t("common.qty") }}</label>
+            <input :id="`qty-${item.sku_id}`" :value="item.qty" type="number" min="1" :disabled="updating === item.sku_id" @change="updateQuantity(item, ($event.target as HTMLInputElement).value)">
+          </div>
+          <div class="line-total"><PriceText :amount-minor="(converted[item.sku_id] ?? 0) * item.qty" :currency="currency" /></div>
+          <button class="btn danger sm" :disabled="updating === item.sku_id" @click="removeItem(item)">{{ $t("cart.remove") }}</button>
+        </div>
+      </div>
+      <div class="card summary row between">
+        <strong>{{ $t("cart.subtotal") }}</strong>
+        <strong class="total">{{ subtotalDisplay || $t("common.loading") }}</strong>
+        <NuxtLink class="btn primary" to="/checkout">{{ $t("cart.checkout") }}</NuxtLink>
+      </div>
+    </template>
+  </section>
+</template>
+
+<style scoped>
+.cart-list { padding: 0; }
+.cart-line { display: grid; grid-template-columns: minmax(240px, 1fr) 120px 100px 120px auto; gap: 14px; align-items: center; padding: 14px 16px; border-bottom: 1px solid var(--border); }
+.cart-line:last-child { border-bottom: 0; }
+.cart-product { display: flex; align-items: center; gap: 10px; min-width: 0; }
+.cart-product img, .image-placeholder { width: 56px; height: 56px; object-fit: cover; border-radius: var(--radius); background: #eef1f5; }
+.image-placeholder { display: grid; place-items: center; color: var(--muted); font-size: 10px; text-align: center; }
+.product-name { font-weight: 600; }
+.quantity-field { margin: 0; }
+.quantity-field input { width: 80px; }
+.line-total, .unit-price, .total { color: var(--primary); font-weight: 600; }
+.summary { margin-top: 16px; }
+.empty-state { text-align: center; }
+.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }
+@media (max-width: 800px) {
+  .cart-line { grid-template-columns: 1fr auto auto; }
+  .unit-price, .line-total { text-align: right; }
+  .cart-product { grid-column: 1 / -1; }
+}
+</style>