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,134 @@
|
||||
<script setup lang="ts">
|
||||
import { topCategories, childCategories } from "~/mock/data";
|
||||
import { t as pick } from "@vmall/shared";
|
||||
|
||||
const { locale } = useI18n();
|
||||
const open = ref(false);
|
||||
const hoverId = ref<string | null>(null);
|
||||
|
||||
const cats = computed(() =>
|
||||
topCategories().map((c) => ({
|
||||
cat: c,
|
||||
children: childCategories(c.id).map((cc) => ({ cat: cc, grandchildren: childCategories(cc.id) })),
|
||||
})),
|
||||
);
|
||||
|
||||
const active = computed(() => cats.value.find((g) => g.cat.id === hoverId.value) ?? null);
|
||||
|
||||
defineExpose({ open });
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="catmenu" @mouseleave="hoverId = null">
|
||||
<ul class="lvl1">
|
||||
<li
|
||||
v-for="g in cats"
|
||||
:key="g.cat.id"
|
||||
:class="{ on: hoverId === g.cat.id }"
|
||||
@mouseenter="hoverId = g.cat.id"
|
||||
>
|
||||
<NuxtLink :to="`/search?category=${g.cat.id}`" class="c1">{{ pick(g.cat.name, locale) }}</NuxtLink>
|
||||
<span class="c2s">
|
||||
<NuxtLink
|
||||
v-for="cc in g.children.slice(0, 3)"
|
||||
:key="cc.cat.id"
|
||||
:to="`/search?category=${cc.cat.id}`"
|
||||
class="c2"
|
||||
>{{ pick(cc.cat.name, locale) }}</NuxtLink>
|
||||
</span>
|
||||
</li>
|
||||
</ul>
|
||||
<div v-if="active" class="sub">
|
||||
<div v-for="cc in active.children" :key="cc.cat.id" class="sub-row">
|
||||
<NuxtLink :to="`/search?category=${cc.cat.id}`" class="sub-title">{{ pick(cc.cat.name, locale) }}</NuxtLink>
|
||||
<div class="sub-items">
|
||||
<NuxtLink
|
||||
v-for="gc in cc.grandchildren"
|
||||
:key="gc.id"
|
||||
:to="`/search?category=${gc.id}`"
|
||||
>{{ pick(gc.name, locale) }}</NuxtLink>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<style scoped>
|
||||
.catmenu {
|
||||
position: absolute;
|
||||
top: 40px;
|
||||
left: 0;
|
||||
z-index: 700;
|
||||
display: flex;
|
||||
width: 960px;
|
||||
}
|
||||
.lvl1 {
|
||||
width: 240px;
|
||||
margin: 0;
|
||||
padding: 8px 0;
|
||||
list-style: none;
|
||||
background: rgba(30, 30, 30, 0.92);
|
||||
min-height: 434px;
|
||||
}
|
||||
.lvl1 li {
|
||||
padding: 10px 15px;
|
||||
cursor: pointer;
|
||||
}
|
||||
.lvl1 li.on {
|
||||
background: #fff;
|
||||
}
|
||||
.lvl1 li.on .c1,
|
||||
.lvl1 li.on .c2 {
|
||||
color: var(--mall-red);
|
||||
}
|
||||
.c1 {
|
||||
display: block;
|
||||
color: #fff;
|
||||
font-size: 14px;
|
||||
text-decoration: none;
|
||||
}
|
||||
.c2s {
|
||||
display: block;
|
||||
margin-top: 2px;
|
||||
}
|
||||
.c2 {
|
||||
color: #bbb;
|
||||
font-size: 12px;
|
||||
margin-right: 8px;
|
||||
text-decoration: none;
|
||||
}
|
||||
.c2:hover {
|
||||
color: #fff;
|
||||
}
|
||||
.sub {
|
||||
flex: 1;
|
||||
background: #fff;
|
||||
box-shadow: var(--mall-shadow);
|
||||
padding: 20px 30px;
|
||||
min-height: 434px;
|
||||
}
|
||||
.sub-row {
|
||||
display: flex;
|
||||
border-bottom: 1px solid var(--mall-line);
|
||||
padding: 12px 0;
|
||||
}
|
||||
.sub-row:last-child {
|
||||
border-bottom: 0;
|
||||
}
|
||||
.sub-title {
|
||||
width: 120px;
|
||||
font-weight: 600;
|
||||
color: var(--mall-ink);
|
||||
text-decoration: none;
|
||||
}
|
||||
.sub-items a {
|
||||
display: inline-block;
|
||||
margin: 0 18px 8px 0;
|
||||
color: var(--mall-muted);
|
||||
font-size: 13px;
|
||||
text-decoration: none;
|
||||
}
|
||||
.sub-items a:hover {
|
||||
color: var(--mall-red);
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,73 @@
|
||||
<script setup lang="ts">
|
||||
const { t } = useI18n();
|
||||
const visible = ref(false);
|
||||
|
||||
function onScroll(): void {
|
||||
visible.value = window.scrollY > 400;
|
||||
}
|
||||
function toTop(): void {
|
||||
window.scrollTo({ top: 0, behavior: "smooth" });
|
||||
}
|
||||
onMounted(() => window.addEventListener("scroll", onScroll, { passive: true }));
|
||||
onBeforeUnmount(() => window.removeEventListener("scroll", onScroll));
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<footer class="foot">
|
||||
<div class="w1200">
|
||||
<ul class="props">
|
||||
<li>{{ t("shell.footer.v1") }}</li>
|
||||
<li>{{ t("shell.footer.v2") }}</li>
|
||||
<li>{{ t("shell.footer.v3") }}</li>
|
||||
<li>{{ t("shell.footer.v4") }}</li>
|
||||
</ul>
|
||||
<div class="copyright">
|
||||
<p>{{ t("shell.footer.copyright") }}</p>
|
||||
<p>{{ t("shell.footer.icp") }}</p>
|
||||
</div>
|
||||
</div>
|
||||
<button v-show="visible" class="backtop" type="button" :aria-label="t('shell.backToTop')" @click="toTop">↑</button>
|
||||
</footer>
|
||||
</template>
|
||||
|
||||
<style scoped>
|
||||
.foot {
|
||||
padding-top: 10px;
|
||||
text-align: center;
|
||||
}
|
||||
.props {
|
||||
margin: 40px auto 0;
|
||||
width: 720px;
|
||||
border-top: 1px solid var(--mall-line);
|
||||
padding: 40px 0 0;
|
||||
list-style: none;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
font-size: 14px;
|
||||
}
|
||||
.copyright {
|
||||
font-size: 12px;
|
||||
line-height: 28px;
|
||||
color: var(--mall-muted);
|
||||
padding: 30px 0 20px;
|
||||
}
|
||||
.backtop {
|
||||
position: fixed;
|
||||
right: 40px;
|
||||
bottom: 60px;
|
||||
width: 44px;
|
||||
height: 44px;
|
||||
border: 1px solid var(--mall-line-dark);
|
||||
background: #fff;
|
||||
border-radius: 4px;
|
||||
cursor: pointer;
|
||||
font-size: 18px;
|
||||
color: var(--mall-muted);
|
||||
z-index: 800;
|
||||
}
|
||||
.backtop:hover {
|
||||
color: #fff;
|
||||
background: var(--mall-red);
|
||||
border-color: var(--mall-red);
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,223 @@
|
||||
<script setup lang="ts">
|
||||
const { t, locale, locales, setLocale } = useI18n();
|
||||
const { currency } = usePrefs();
|
||||
const cart = useCartStore();
|
||||
const route = useRoute();
|
||||
const router = useRouter();
|
||||
|
||||
const keywords = ref(typeof route.query.q === "string" ? route.query.q : "");
|
||||
watch(
|
||||
() => route.query.q,
|
||||
(q) => {
|
||||
keywords.value = typeof q === "string" ? q : "";
|
||||
},
|
||||
);
|
||||
|
||||
function search(): void {
|
||||
const q = keywords.value.trim();
|
||||
void router.push({ path: "/search", query: q ? { q } : {} });
|
||||
}
|
||||
|
||||
const currencies = ref<string[]>(["USD"]);
|
||||
const { $api } = useNuxtApp();
|
||||
onMounted(async () => {
|
||||
try {
|
||||
const list = await $api.listCurrencies();
|
||||
if (list.length > 0) currencies.value = list.filter((c) => c.enabled).map((c) => c.code);
|
||||
} catch {
|
||||
/* keep default */
|
||||
}
|
||||
void cart.refresh();
|
||||
});
|
||||
|
||||
const menuOpen = ref(false);
|
||||
const isHome = computed(() => route.path === "/");
|
||||
const collapsed = ref(false);
|
||||
onMounted(() => {
|
||||
const onScroll = (): void => {
|
||||
collapsed.value = window.scrollY > 200;
|
||||
};
|
||||
window.addEventListener("scroll", onScroll, { passive: true });
|
||||
});
|
||||
const showMenu = computed(() => menuOpen.value || (isHome.value && !collapsed.value));
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<header class="hdr">
|
||||
<div v-show="!collapsed" class="w1200 hdr-top">
|
||||
<NuxtLink to="/" class="logo">VMall</NuxtLink>
|
||||
<div class="search-box">
|
||||
<input
|
||||
v-model="keywords"
|
||||
class="search-input"
|
||||
type="text"
|
||||
:placeholder="t('shell.searchPlaceholder')"
|
||||
@keyup.enter="search"
|
||||
/>
|
||||
<button class="search-btn" type="button" :aria-label="t('common.search')" @click="search">
|
||||
<svg viewBox="0 0 24 24" width="18" height="18" fill="currentColor">
|
||||
<path d="M15.5 14h-.79l-.28-.27a6.5 6.5 0 10-.7.7l.27.28v.79l5 4.99L20.49 19l-4.99-5zm-6 0A4.5 4.5 0 1114 9.5 4.5 4.5 0 019.5 14z" />
|
||||
</svg>
|
||||
</button>
|
||||
<div class="cart-links">
|
||||
<NuxtLink to="/user" class="cart-link">{{ t("shell.myMall") }}</NuxtLink>
|
||||
<NuxtLink to="/cart" class="cart-link">
|
||||
{{ t("shell.myCart") }}
|
||||
<span v-if="cart.count > 0" class="dot">{{ cart.count }}</span>
|
||||
</NuxtLink>
|
||||
</div>
|
||||
</div>
|
||||
<div class="prefs">
|
||||
<select :value="currency" :aria-label="t('common.currency')" @change="currency = ($event.target as HTMLSelectElement).value">
|
||||
<option v-for="c in currencies" :key="c" :value="c">{{ c }}</option>
|
||||
</select>
|
||||
<select :value="locale" :aria-label="t('common.language')" @change="setLocale(($event.target as HTMLSelectElement).value as 'en' | 'zh')">
|
||||
<option v-for="l in locales" :key="l.code" :value="l.code">{{ l.name }}</option>
|
||||
</select>
|
||||
</div>
|
||||
</div>
|
||||
<nav class="nav">
|
||||
<div class="w1200 nav-in">
|
||||
<div
|
||||
class="nav-cats"
|
||||
@mouseenter="menuOpen = true"
|
||||
@mouseleave="menuOpen = false"
|
||||
>
|
||||
{{ t("shell.allCategories") }}
|
||||
<ShellCategoryMenu v-show="showMenu" />
|
||||
</div>
|
||||
<ul class="nav-links">
|
||||
<li><NuxtLink to="/">{{ t("shell.nav.home") }}</NuxtLink></li>
|
||||
<li><NuxtLink to="/stores">{{ t("shell.nav.stores") }}</NuxtLink></li>
|
||||
<li><NuxtLink to="/seckill">{{ t("shell.nav.seckill") }}</NuxtLink></li>
|
||||
<li><NuxtLink to="/collective">{{ t("shell.nav.collective") }}</NuxtLink></li>
|
||||
<li><NuxtLink to="/integral">{{ t("shell.nav.integral") }}</NuxtLink></li>
|
||||
<li><NuxtLink to="/user">{{ t("shell.nav.help") }}</NuxtLink></li>
|
||||
</ul>
|
||||
</div>
|
||||
</nav>
|
||||
</header>
|
||||
</template>
|
||||
|
||||
<style scoped>
|
||||
.hdr {
|
||||
background: #fff;
|
||||
}
|
||||
.hdr-top {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 40px;
|
||||
padding: 24px 0;
|
||||
}
|
||||
.logo {
|
||||
font-size: 34px;
|
||||
font-weight: 800;
|
||||
color: var(--mall-red);
|
||||
text-decoration: none;
|
||||
letter-spacing: 1px;
|
||||
}
|
||||
.search-box {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
.search-input {
|
||||
width: 434px;
|
||||
height: 38px;
|
||||
padding: 10px;
|
||||
outline: 0;
|
||||
border: 1px solid var(--mall-line);
|
||||
border-right: none;
|
||||
box-sizing: border-box;
|
||||
font-size: 12px;
|
||||
}
|
||||
.search-btn {
|
||||
border: 1px solid var(--mall-line);
|
||||
width: 38px;
|
||||
height: 38px;
|
||||
background: #fff;
|
||||
cursor: pointer;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
.search-btn:hover {
|
||||
color: #fff;
|
||||
background: var(--mall-nav);
|
||||
}
|
||||
.cart-links {
|
||||
display: flex;
|
||||
height: 38px;
|
||||
border: 1px solid var(--mall-line);
|
||||
margin-left: 30px;
|
||||
box-sizing: border-box;
|
||||
font-size: 12px;
|
||||
line-height: 38px;
|
||||
padding: 0 20px;
|
||||
gap: 20px;
|
||||
}
|
||||
.cart-link {
|
||||
position: relative;
|
||||
color: inherit;
|
||||
text-decoration: none;
|
||||
}
|
||||
.cart-link:hover {
|
||||
color: var(--mall-red);
|
||||
}
|
||||
.dot {
|
||||
position: absolute;
|
||||
top: -12px;
|
||||
right: -14px;
|
||||
line-height: 16px;
|
||||
background: var(--mall-red);
|
||||
padding: 0 4px;
|
||||
color: #fff;
|
||||
border-radius: 4px;
|
||||
font-size: 11px;
|
||||
}
|
||||
.prefs {
|
||||
display: flex;
|
||||
gap: 8px;
|
||||
}
|
||||
.prefs select {
|
||||
height: 30px;
|
||||
min-width: 76px;
|
||||
padding: 0 6px;
|
||||
border: 1px solid var(--mall-line);
|
||||
background: #fff;
|
||||
font-size: 12px;
|
||||
}
|
||||
.nav {
|
||||
height: 40px;
|
||||
background: var(--mall-nav);
|
||||
font-size: 14px;
|
||||
line-height: 40px;
|
||||
color: #fff;
|
||||
}
|
||||
.nav-in {
|
||||
display: flex;
|
||||
}
|
||||
.nav-cats {
|
||||
position: relative;
|
||||
cursor: pointer;
|
||||
width: 240px;
|
||||
background: var(--mall-red);
|
||||
box-sizing: border-box;
|
||||
padding-left: 15px;
|
||||
}
|
||||
.nav-links {
|
||||
display: flex;
|
||||
list-style: none;
|
||||
margin: 0;
|
||||
padding: 0 0 0 20px;
|
||||
}
|
||||
.nav-links a {
|
||||
line-height: 40px;
|
||||
padding: 0 30px;
|
||||
color: #fff;
|
||||
display: block;
|
||||
text-decoration: none;
|
||||
}
|
||||
.nav-links a:hover {
|
||||
background: #000;
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,79 @@
|
||||
<script setup lang="ts">
|
||||
const session = useSessionStore();
|
||||
const { t } = useI18n();
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="topbar">
|
||||
<div class="w1200 topbar-in">
|
||||
<ul class="left">
|
||||
<li><NuxtLink to="/">{{ t("shell.officialSite") }}</NuxtLink></li>
|
||||
<li>|</li>
|
||||
<li><NuxtLink to="/">{{ t("shell.mallHome") }}</NuxtLink></li>
|
||||
<li>|</li>
|
||||
<li><NuxtLink to="/">{{ t("shell.contact") }}</NuxtLink></li>
|
||||
<li>|</li>
|
||||
<li><NuxtLink to="/">{{ t("shell.about") }}</NuxtLink></li>
|
||||
<li>|</li>
|
||||
<li class="city">{{ t("shell.city") }}</li>
|
||||
</ul>
|
||||
<ul class="right">
|
||||
<template v-if="session.isLoggedIn">
|
||||
<li>{{ t("shell.welcome") }}<NuxtLink to="/user" class="red">{{ session.user?.display_name }}</NuxtLink></li>
|
||||
<li>|</li>
|
||||
<li><NuxtLink to="/user">{{ t("shell.userCenter") }}</NuxtLink></li>
|
||||
<li>|</li>
|
||||
<li class="clickable" @click="session.logout()">{{ t("shell.logout") }}</li>
|
||||
</template>
|
||||
<template v-else>
|
||||
<li><NuxtLink to="/login" class="red">{{ t("shell.login") }}</NuxtLink></li>
|
||||
<li><NuxtLink to="/register">{{ t("shell.register") }}</NuxtLink></li>
|
||||
</template>
|
||||
<li>|</li>
|
||||
<li><NuxtLink to="/stores" class="red">{{ t("shell.sellerJoin") }}</NuxtLink></li>
|
||||
<li>|</li>
|
||||
<li><NuxtLink to="/">{{ t("shell.mobile") }}</NuxtLink></li>
|
||||
<li>|</li>
|
||||
<li><NuxtLink to="/">{{ t("shell.appDownload") }}</NuxtLink></li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<style scoped>
|
||||
.topbar {
|
||||
border-bottom: 1px solid var(--mall-line);
|
||||
height: 30px;
|
||||
background: #f9f9f9;
|
||||
font-size: 12px;
|
||||
line-height: 30px;
|
||||
}
|
||||
.topbar-in {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
}
|
||||
ul {
|
||||
display: flex;
|
||||
list-style: none;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
li {
|
||||
padding: 0 5px;
|
||||
}
|
||||
a {
|
||||
color: inherit;
|
||||
text-decoration: none;
|
||||
}
|
||||
a:hover,
|
||||
.clickable:hover {
|
||||
color: var(--mall-red);
|
||||
cursor: pointer;
|
||||
}
|
||||
.red {
|
||||
color: var(--mall-red);
|
||||
}
|
||||
.city {
|
||||
color: var(--mall-red);
|
||||
}
|
||||
</style>
|
||||
Reference in New Issue
Block a user