feat(mall): live flash-sale page and activity price snapshots
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.
This commit is contained in:
+88
-58
@@ -1,12 +1,16 @@
|
||||
<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";
|
||||
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 products = seckillProducts();
|
||||
const loading = ref(true);
|
||||
const addingSkuId = ref("");
|
||||
const error = ref("");
|
||||
let countdownTimer: ReturnType<typeof setInterval> | undefined;
|
||||
|
||||
const breadcrumb = computed(() => [
|
||||
@@ -14,31 +18,20 @@ const breadcrumb = computed(() => [
|
||||
{ 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;
|
||||
}
|
||||
const activeSession = computed<PublicFlashSaleSession | null>(
|
||||
() => sessions.value[activeSessionIndex.value] ?? sessions.value[0] ?? null,
|
||||
);
|
||||
|
||||
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();
|
||||
if (!session) {
|
||||
remainingSeconds.value = 0;
|
||||
return;
|
||||
}
|
||||
remainingSeconds.value = seconds;
|
||||
remainingSeconds.value = Math.max(
|
||||
0,
|
||||
Math.ceil((new Date(session.ends_at).getTime() - Date.now()) / 1000),
|
||||
);
|
||||
}
|
||||
|
||||
function formatCountdown(seconds: number): string {
|
||||
@@ -49,29 +42,42 @@ function formatCountdown(seconds: number): string {
|
||||
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 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);
|
||||
}
|
||||
|
||||
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;
|
||||
// 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 = "";
|
||||
}
|
||||
}
|
||||
|
||||
function currencyOf(product: Product): string {
|
||||
return lowestSku(product)?.currency ?? "USD";
|
||||
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(() => {
|
||||
setCurrentSession();
|
||||
updateCountdown();
|
||||
onMounted(async () => {
|
||||
await load();
|
||||
countdownTimer = setInterval(updateCountdown, 1000);
|
||||
});
|
||||
|
||||
@@ -89,37 +95,49 @@ onBeforeUnmount(() => {
|
||||
</header>
|
||||
<div class="session-tabs" role="tablist">
|
||||
<button
|
||||
v-for="(session, index) in SECKILL_SESSIONS"
|
||||
:key="session.label"
|
||||
v-for="(session, index) in sessions"
|
||||
:key="session.id"
|
||||
type="button"
|
||||
class="session-tab"
|
||||
:class="{ active: sessionState(index) === 'current', ended: sessionState(index) === 'ended' }"
|
||||
:class="{ active: index === activeSessionIndex }"
|
||||
role="tab"
|
||||
:aria-selected="sessionState(index) === 'current'"
|
||||
|
||||
:aria-selected="index === activeSessionIndex"
|
||||
@click="activeSessionIndex = index; updateCountdown()"
|
||||
>
|
||||
<strong>{{ session.label }}</strong>
|
||||
<span>{{ sessionStateLabel(index) }}</span>
|
||||
<strong>{{ pick(session.label, locale) }}</strong>
|
||||
<span>{{ index === activeSessionIndex ? t("marketing.currentSession") : t("marketing.upcoming") }}</span>
|
||||
</button>
|
||||
</div>
|
||||
<p class="countdown" aria-live="polite">{{ t("marketing.countdown", { time: formatCountdown(remainingSeconds) }) }}</p>
|
||||
<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="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" />
|
||||
<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>
|
||||
<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>
|
||||
<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: `${item.soldPct}%` }"></span></div>
|
||||
<span>{{ t("marketing.progress", { n: item.soldPct }) }}</span>
|
||||
<div class="progress-track"><span :style="{ width: `${soldPct(item)}%` }"></span></div>
|
||||
<span>{{ t("marketing.progress", { n: soldPct(item) }) }}</span>
|
||||
</div>
|
||||
<NuxtLink :to="`/goods/${item.product.slug}`" class="mbtn red grab-button">{{ t("marketing.buyNow") }}</NuxtLink>
|
||||
<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>
|
||||
@@ -191,6 +209,18 @@ onBeforeUnmount(() => {
|
||||
.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);
|
||||
|
||||
Reference in New Issue
Block a user