vmall/apps/mall/pages/seckill.vue

<script setup lang="ts">
import { t as pick } from "@vmall/shared";
import type { PublicFlashSaleItem, PublicFlashSaleSession } from "@vmall/shared";

const { locale, t } = useI18n();
const { $api } = useNuxtApp();
const cart = useCartStore();
const sessions = ref<PublicFlashSaleSession[]>([]);
const activeSessionIndex = ref(0);
const remainingSeconds = ref(0);
const loading = ref(true);
const addingSkuId = ref("");
const error = ref("");
let countdownTimer: ReturnType<typeof setInterval> | undefined;

const breadcrumb = computed(() => [
  { label: t("stores.breadcrumbHome"), to: "/" },
  { label: t("marketing.seckillBreadcrumb") },
]);

const activeSession = computed<PublicFlashSaleSession | null>(
  () => sessions.value[activeSessionIndex.value] ?? sessions.value[0] ?? null,
);

function updateCountdown(): void {
  const session = activeSession.value;
  if (!session) {
    remainingSeconds.value = 0;
    return;
  }
  remainingSeconds.value = Math.max(
    0,
    Math.ceil((new Date(session.ends_at).getTime() - Date.now()) / 1000),
  );
}

function formatCountdown(seconds: number): string {
  const h = Math.floor(seconds / 3600);
  const m = Math.floor((seconds % 3600) / 60);
  const s = seconds % 60;
  const p = (n: number): string => String(n).padStart(2, "0");
  return `${p(h)}:${p(m)}:${p(s)}`;
}

function soldPct(item: PublicFlashSaleItem): number {
  const total = item.sold_count + item.reserved_stock;
  if (total <= 0) return 100;
  return Math.round((item.sold_count / total) * 100);
}

// The listing price is display only: the shopper adds the SKU to the cart and
// checkout resolves the authoritative price server-side.
async function addToCart(item: PublicFlashSaleItem): Promise<void> {
  addingSkuId.value = item.sku_id;
  error.value = "";
  try {
    await $api.addCartItem(item.sku_id, 1);
    await cart.refresh();
  } catch {
    error.value = t("marketing.grabFailed");
  } finally {
    addingSkuId.value = "";
  }
}

async function load(): Promise<void> {
  loading.value = true;
  try {
    sessions.value = await $api.listFlashSales();
    activeSessionIndex.value = 0;
    updateCountdown();
  } catch {
    sessions.value = [];
  } finally {
    loading.value = false;
  }
}

onMounted(async () => {
  await load();
  countdownTimer = setInterval(updateCountdown, 1000);
});

onBeforeUnmount(() => {
  if (countdownTimer) clearInterval(countdownTimer);
});
</script>

<template>
  <div class="bg-bg text-text min-h-screen pb-14 font-sans">
    <UiBreadcrumb :items="breadcrumb" />
    <section class="max-w-mall bg-surface mx-auto px-4">
      <header class="border-border bg-bg border border-b-0 px-4 py-3.5">
        <h1 class="border-primary m-0 border-l-[3px] pl-2.5 text-[17px] font-medium">
          {{ t("marketing.seckillTitle") }}
        </h1>
      </header>
      <div class="border-border grid grid-cols-2 border border-b-0 sm:grid-cols-4" role="tablist">
        <button
          v-for="(session, index) in sessions"
          :key="session.id"
          type="button"
          class="border-border bg-surface flex min-h-[70px] cursor-pointer flex-col items-center justify-center border-0 border-r px-2 text-sm last:border-r-0"
          :class="index === activeSessionIndex ? 'bg-primary-soft text-primary' : ''"
          role="tab"
          :aria-selected="index === activeSessionIndex"
          @click="
            activeSessionIndex = index;
            updateCountdown();
          "
        >
          <strong>{{ pick(session.label, locale) }}</strong
          ><span class="text-muted text-xs">{{
            index === activeSessionIndex ? t("marketing.currentSession") : t("marketing.upcoming")
          }}</span>
        </button>
      </div>
      <p
        v-if="activeSession"
        class="border-border bg-bg text-primary m-0 border px-4 py-3 text-center text-lg font-semibold"
        aria-live="polite"
      >
        {{ t("marketing.countdown", { time: formatCountdown(remainingSeconds) }) }}
      </p>
      <p
        v-if="error"
        class="border-danger/30 bg-danger/10 text-danger my-4 border px-3.5 py-2.5"
        role="alert"
      >
        {{ error }}
      </p>
      <div v-if="loading" class="text-muted py-6">{{ t("common.loading") }}</div>
      <div
        v-else-if="activeSession && activeSession.items.length"
        class="grid [grid-template-columns:repeat(auto-fill,minmax(220px,1fr))] gap-4 py-5"
      >
        <VCard
          v-for="item in activeSession.items"
          :key="item.id"
          :padded="false"
          class="min-w-0 overflow-hidden"
        >
          <NuxtLink
            :to="`/goods/${item.product_slug}`"
            class="bg-bg flex h-52 items-center justify-center"
            ><img
              class="h-full w-full object-contain"
              :src="item.image || '/mock/product-1.svg'"
              :alt="pick(item.product_name, locale)"
              loading="lazy"
          /></NuxtLink>
          <div class="p-3.5">
            <NuxtLink
              :to="`/goods/${item.product_slug}`"
              class="hover:text-primary line-clamp-2 font-medium"
              >{{ pick(item.product_name, locale) }}</NuxtLink
            >
            <p class="my-2 flex items-center gap-2">
              <span class="text-primary text-lg font-semibold"
                ><PriceText :amount-minor="item.sale_price_minor" :currency="item.currency" /></span
              ><s class="text-muted text-sm"
                ><PriceText
                  :amount-minor="item.original_price_minor"
                  :currency="item.original_currency"
              /></s>
            </p>
            <div class="text-muted flex items-center gap-2 text-xs">
              <div class="bg-bg h-2 flex-1 overflow-hidden rounded-full">
                <span
                  class="bg-primary block h-full"
                  :style="{ width: `${soldPct(item)}%` }"
                ></span>
              </div>
              <span>{{ t("marketing.progress", { n: soldPct(item) }) }}</span>
            </div>
            <p class="text-muted my-2 text-sm">
              {{ t("marketing.stock", { n: item.reserved_stock }) }}
            </p>
            <VBtn
              class="w-full"
              variant="primary"
              type="button"
              :disabled="item.reserved_stock <= 0 || addingSkuId === item.sku_id"
              @click="addToCart(item)"
              >{{ addingSkuId === item.sku_id ? t("common.loading") : t("marketing.buyNow") }}</VBtn
            >
          </div>
        </VCard>
      </div>
      <UiEmptyState v-else :text="t('marketing.noSeckillProducts')" />
    </section>
  </div>
</template>