feat(mall): classic B2B2C PC storefront with fixed mock API layer
- Mock adapter implementing @vmall/shared ApiClient (localStorage-persisted cart/orders/invoices), runtime switch via mockApi flag (default on) - Fixed bilingual mock catalog: 3-level categories, 24 products w/ SKUs, stores, brands, banners, floors, seckill/collective/integral, comments, coupons, addresses, seeded orders/shipments/invoices - B2B2C mall shell: top bar, logo/search/cart header, dark nav + category mega-menu, value-prop footer, back-to-top; 1200px grid, #ca151e theme - UI primitives replacing element-plus: carousel, pagination, breadcrumb, qty stepper, rating stars, modal, tabs, step bar, product card - Pages: home floors, search (filters/sort/paging), goods detail (SKU picker, store rail, review tabs), cart -> checkout -> pay -> success, auth pages, user center (dashboard/orders/addresses/favorites/coupons/ invoices), stores, seckill, collective, integral - i18n split into per-domain locale modules (en+zh) - OpenSpec change mall-pc-storefront-replica archived; all specs green
This commit is contained in:
Chengdong Zhang
@@ -0,0 +1,302 @@
|
||||
<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>
|
||||
Reference in New Issue
Block a user