vmall/apps/mall/pages/cart.vue

<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>