james
2125ae437f
The flash-sale page loads active sessions and their items through the shared client with live sale price, remaining activity stock, sell-through, and a countdown, and adds the SKU to the existing cart so checkout resolves the authoritative price. Payment and order detail tag and render the snapshotted activity unit price. The flash-sale fixtures leave the page; the fixed-data adapter still serves the domain as the rollback path.
333 lines
8.3 KiB
Vue
333 lines
8.3 KiB
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="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 sessions"
|
|
:key="session.id"
|
|
type="button"
|
|
class="session-tab"
|
|
:class="{ active: index === activeSessionIndex }"
|
|
role="tab"
|
|
:aria-selected="index === activeSessionIndex"
|
|
@click="activeSessionIndex = index; updateCountdown()"
|
|
>
|
|
<strong>{{ pick(session.label, locale) }}</strong>
|
|
<span>{{ index === activeSessionIndex ? t("marketing.currentSession") : t("marketing.upcoming") }}</span>
|
|
</button>
|
|
</div>
|
|
<p v-if="activeSession" class="countdown" aria-live="polite">
|
|
{{ t("marketing.countdown", { time: formatCountdown(remainingSeconds) }) }}
|
|
</p>
|
|
<p v-if="error" class="seckill-error" role="alert">{{ error }}</p>
|
|
|
|
<div v-if="loading" class="muted">{{ t("common.loading") }}</div>
|
|
<div v-else-if="activeSession && activeSession.items.length" class="seckill-grid">
|
|
<article v-for="item in activeSession.items" :key="item.id" class="seckill-card hover-lift">
|
|
<NuxtLink :to="`/goods/${item.product_slug}`" class="product-image">
|
|
<img :src="item.image || '/mock/product-1.svg'" :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.sale_price_minor" :currency="item.currency" /></span>
|
|
<s class="original-price"><PriceText :amount-minor="item.original_price_minor" :currency="item.original_currency" /></s>
|
|
</p>
|
|
<div class="progress-line">
|
|
<div class="progress-track"><span :style="{ width: `${soldPct(item)}%` }"></span></div>
|
|
<span>{{ t("marketing.progress", { n: soldPct(item) }) }}</span>
|
|
</div>
|
|
<p class="stock-line">{{ t("marketing.stock", { n: item.reserved_stock }) }}</p>
|
|
<button
|
|
type="button"
|
|
class="mbtn red grab-button"
|
|
:disabled="item.reserved_stock <= 0 || addingSkuId === item.sku_id"
|
|
@click="addToCart(item)"
|
|
>
|
|
{{ addingSkuId === item.sku_id ? t("common.loading") : t("marketing.buyNow") }}
|
|
</button>
|
|
</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);
|
|
}
|
|
.seckill-error {
|
|
margin: 12px 0 0;
|
|
padding: 10px 14px;
|
|
color: #b42318;
|
|
background: #fff1f0;
|
|
border: 1px solid #ffd6d2;
|
|
}
|
|
.stock-line {
|
|
margin: 8px 0 10px;
|
|
color: var(--mall-faint);
|
|
font-size: 12px;
|
|
}
|
|
.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>
|