vmall/apps/mall/pages/seckill.vue

<script setup lang="ts">
import { t as pick } from "@vmall/shared";
import { lowestSku, SECKILL_SESSIONS, seckillProducts } from "~/mock/data";
import type { Product } from "@vmall/shared";

const { locale, t } = useI18n();
const activeSessionIndex = ref(0);
const remainingSeconds = ref(0);
const products = seckillProducts();
let countdownTimer: ReturnType<typeof setInterval> | undefined;

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

const activeSession = computed(() => SECKILL_SESSIONS[activeSessionIndex.value] ?? SECKILL_SESSIONS[0]);

function setCurrentSession(): void {
  const hour = new Date().getHours();
  const index = SECKILL_SESSIONS.findIndex((session) => hour >= session.startHour && hour < session.endHour);
  activeSessionIndex.value = index >= 0 ? index : 0;
}

function updateCountdown(): void {
  const now = new Date();
  const session = activeSession.value;
  const end = new Date(now);
  if (session.endHour === 24) {
    end.setDate(end.getDate() + 1);
    end.setHours(0, 0, 0, 0);
  } else {
    end.setHours(session.endHour, 0, 0, 0);
  }
  const seconds = Math.max(0, Math.ceil((end.getTime() - now.getTime()) / 1000));
  if (seconds === 0) {
    setCurrentSession();
    updateCountdown();
    return;
  }
  remainingSeconds.value = seconds;
}

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 sessionState(index: number): "current" | "upcoming" | "ended" {
  if (index === activeSessionIndex.value) return "current";
  return index < activeSessionIndex.value ? "ended" : "upcoming";
}

function sessionStateLabel(index: number): string {
  const state = sessionState(index);
  if (state === "current") return t("marketing.currentSession");
  if (state === "ended") return t("marketing.ended");
  return t("marketing.upcoming");
}
function priceMinorOf(product: Product): number {
  return lowestSku(product)?.price_minor ?? 0;
}

function currencyOf(product: Product): string {
  return lowestSku(product)?.currency ?? "USD";
}


onMounted(() => {
  setCurrentSession();
  updateCountdown();
  countdownTimer = setInterval(updateCountdown, 1000);
});

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

<template>
  <div class="seckill-page">
    <UiBreadcrumb :items="breadcrumb" />
    <section class="w1200 marketing-section">
      <header class="section-heading">
        <h1>{{ t("marketing.seckillTitle") }}</h1>
      </header>
      <div class="session-tabs" role="tablist">
        <button
          v-for="(session, index) in SECKILL_SESSIONS"
          :key="session.label"
          type="button"
          class="session-tab"
          :class="{ active: sessionState(index) === 'current', ended: sessionState(index) === 'ended' }"
          role="tab"
          :aria-selected="sessionState(index) === 'current'"

        >
          <strong>{{ session.label }}</strong>
          <span>{{ sessionStateLabel(index) }}</span>
        </button>
      </div>
      <p class="countdown" aria-live="polite">{{ t("marketing.countdown", { time: formatCountdown(remainingSeconds) }) }}</p>

      <div v-if="products.length" class="seckill-grid">
        <article v-for="item in products" :key="item.product.id" class="seckill-card hover-lift">
          <NuxtLink :to="`/goods/${item.product.slug}`" class="product-image">
            <img :src="item.product.images[0]" :alt="pick(item.product.name, locale)" loading="lazy" />
          </NuxtLink>
          <div class="product-body">
            <NuxtLink :to="`/goods/${item.product.slug}`" class="product-name">{{ pick(item.product.name, locale) }}</NuxtLink>
            <p class="price-line">
              <span class="sale-price"><PriceText :amount-minor="item.seckillPriceMinor" :currency="currencyOf(item.product)" /></span>
              <s class="original-price"><PriceText :amount-minor="priceMinorOf(item.product)" :currency="currencyOf(item.product)" /></s>
            </p>
            <div class="progress-line">
              <div class="progress-track"><span :style="{ width: `${item.soldPct}%` }"></span></div>
              <span>{{ t("marketing.progress", { n: item.soldPct }) }}</span>
            </div>
            <NuxtLink :to="`/goods/${item.product.slug}`" class="mbtn red grab-button">{{ t("marketing.buyNow") }}</NuxtLink>
          </div>
        </article>
      </div>
      <UiEmptyState v-else :text="t('marketing.noSeckillProducts')" />
    </section>
  </div>
</template>

<style scoped>
.seckill-page {
  padding-bottom: 60px;
}
.marketing-section {
  background: #fff;
}
.section-heading {
  border: 1px solid var(--mall-line);
  border-bottom: 0;
  background: #fafafa;
  padding: 14px 18px;
}
.section-heading h1 {
  margin: 0;
  border-left: 3px solid var(--mall-red);
  padding-left: 10px;
  font-size: 17px;
  font-weight: 500;
}
.session-tabs {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  border: 1px solid var(--mall-line);
  border-bottom: 0;
}
.session-tab {
  display: flex;
  min-height: 70px;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  border: 0;
  border-right: 1px solid var(--mall-line);
  background: #fff;
  color: var(--mall-muted);
  cursor: pointer;
}
.session-tab:last-child {
  border-right: 0;
}
.session-tab strong {
  color: var(--mall-ink);
  font-size: 19px;
  font-weight: 600;
}
.session-tab span {
  margin-top: 4px;
  font-size: 12px;
}
.session-tab.active {
  background: var(--mall-red);
  color: #fff;
}
.session-tab.active strong {
  color: #fff;
}
.session-tab.ended {
  color: var(--mall-faint);
}
.session-tab.ended strong {
  color: var(--mall-faint);
}
.countdown {
  margin: 0;
  border: 1px solid var(--mall-line);
  border-top: 0;
  padding: 10px;
  color: var(--mall-red);
  font-size: 13px;
  text-align: center;
}
.seckill-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 16px;
  margin-top: 20px;
}
.seckill-card {
  min-width: 0;
  border: 1px solid var(--mall-line);
  background: #fff;
}
.product-image {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 205px;
  padding: 14px;
}
.product-image img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}
.product-body {
  padding: 0 14px 14px;
}
.product-name {
  display: block;
  height: 38px;
  overflow: hidden;
  color: var(--mall-ink);
  font-size: 13px;
  line-height: 1.45;
  text-decoration: none;
}
.product-name:hover {
  color: var(--mall-red);
}
.price-line {
  display: flex;
  align-items: baseline;
  gap: 8px;
  margin: 10px 0;
}
.sale-price {
  color: var(--mall-red);
  font-size: 19px;
  font-weight: 700;
}
.original-price {
  color: var(--mall-faint);
  font-size: 12px;
}
.progress-line {
  display: flex;
  align-items: center;
  gap: 8px;
  color: var(--mall-faint);
  font-size: 11px;
}
.progress-track {
  height: 7px;
  flex: 1;
  overflow: hidden;
  border-radius: 4px;
  background: #f5d9db;
}
.progress-track span {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: var(--mall-red);
}
.grab-button {
  display: block;
  margin-top: 13px;
  text-align: center;
}
@media (max-width: 1240px) {
  .w1200 {
    width: calc(100% - 32px);
  }
}
@media (max-width: 840px) {
  .seckill-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
@media (max-width: 520px) {
  .session-tab {
    min-height: 62px;
  }
  .session-tab strong {
    font-size: 15px;
  }
  .seckill-grid {
    grid-template-columns: 1fr;
  }
}
</style>