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>
|
||||
@@ -0,0 +1,35 @@
|
||||
<script setup lang="ts">
|
||||
defineProps<{ items: { label: string; to?: string }[] }>();
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<nav class="crumbs w1200" aria-label="breadcrumb">
|
||||
<template v-for="(item, i) in items" :key="i">
|
||||
<NuxtLink v-if="item.to" :to="item.to">{{ item.label }}</NuxtLink>
|
||||
<span v-else class="here">{{ item.label }}</span>
|
||||
<span v-if="i < items.length - 1" class="sep">/</span>
|
||||
</template>
|
||||
</nav>
|
||||
</template>
|
||||
|
||||
<style scoped>
|
||||
.crumbs {
|
||||
margin: 20px auto;
|
||||
font-size: 13px;
|
||||
color: var(--mall-muted);
|
||||
}
|
||||
a {
|
||||
color: var(--mall-muted);
|
||||
text-decoration: none;
|
||||
}
|
||||
a:hover {
|
||||
color: var(--mall-red);
|
||||
}
|
||||
.sep {
|
||||
margin: 0 8px;
|
||||
color: var(--mall-faint);
|
||||
}
|
||||
.here {
|
||||
color: var(--mall-ink);
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,82 @@
|
||||
<script setup lang="ts">
|
||||
const props = withDefaults(defineProps<{ images: { image: string; url?: string }[]; height?: number; interval?: number }>(), {
|
||||
height: 450,
|
||||
interval: 4000,
|
||||
});
|
||||
|
||||
const index = ref(0);
|
||||
let timer: ReturnType<typeof setInterval> | null = null;
|
||||
|
||||
function go(i: number): void {
|
||||
index.value = (i + props.images.length) % props.images.length;
|
||||
}
|
||||
onMounted(() => {
|
||||
if (props.images.length > 1) {
|
||||
timer = setInterval(() => {
|
||||
index.value = (index.value + 1) % props.images.length;
|
||||
}, props.interval);
|
||||
}
|
||||
});
|
||||
onBeforeUnmount(() => {
|
||||
if (timer) clearInterval(timer);
|
||||
});
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="carousel" :style="{ height: `${height}px` }">
|
||||
<NuxtLink
|
||||
v-for="(img, i) in images"
|
||||
v-show="i === index"
|
||||
:key="img.image"
|
||||
:to="img.url || '#'"
|
||||
class="slide"
|
||||
:style="{ backgroundImage: `url(${img.image})` }"
|
||||
/>
|
||||
<div v-if="images.length > 1" class="dots">
|
||||
<button
|
||||
v-for="(_, i) in images"
|
||||
:key="i"
|
||||
type="button"
|
||||
:class="{ on: i === index }"
|
||||
:aria-label="`slide ${i + 1}`"
|
||||
@click="go(i)"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<style scoped>
|
||||
.carousel {
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
width: 100%;
|
||||
}
|
||||
.slide {
|
||||
display: block;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background-position: center;
|
||||
background-size: cover;
|
||||
}
|
||||
.dots {
|
||||
position: absolute;
|
||||
bottom: 14px;
|
||||
left: 0;
|
||||
right: 0;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
gap: 8px;
|
||||
}
|
||||
.dots button {
|
||||
width: 10px;
|
||||
height: 10px;
|
||||
border-radius: 50%;
|
||||
border: 0;
|
||||
background: rgba(255, 255, 255, 0.55);
|
||||
cursor: pointer;
|
||||
padding: 0;
|
||||
}
|
||||
.dots button.on {
|
||||
background: var(--mall-red);
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,22 @@
|
||||
<script setup lang="ts">
|
||||
withDefaults(defineProps<{ text?: string }>(), { text: "" });
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="empty">
|
||||
<div class="icon">∅</div>
|
||||
<p>{{ text || $t("common.empty") }}</p>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<style scoped>
|
||||
.empty {
|
||||
padding: 60px 0;
|
||||
text-align: center;
|
||||
color: var(--mall-faint);
|
||||
}
|
||||
.icon {
|
||||
font-size: 40px;
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,65 @@
|
||||
<script setup lang="ts">
|
||||
defineProps<{ open: boolean; title?: string }>();
|
||||
const emit = defineEmits<{ close: [] }>();
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<Teleport to="body">
|
||||
<div v-if="open" class="mask" @click.self="emit('close')">
|
||||
<div class="dialog">
|
||||
<header v-if="title" class="head">
|
||||
<span>{{ title }}</span>
|
||||
<button type="button" class="x" :aria-label="$t('common.cancel')" @click="emit('close')">×</button>
|
||||
</header>
|
||||
<div class="body">
|
||||
<slot />
|
||||
</div>
|
||||
<footer v-if="$slots.footer" class="foot">
|
||||
<slot name="footer" />
|
||||
</footer>
|
||||
</div>
|
||||
</div>
|
||||
</Teleport>
|
||||
</template>
|
||||
|
||||
<style scoped>
|
||||
.mask {
|
||||
position: fixed;
|
||||
inset: 0;
|
||||
background: rgba(0, 0, 0, 0.4);
|
||||
z-index: 900;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
.dialog {
|
||||
background: #fff;
|
||||
min-width: 420px;
|
||||
max-width: 720px;
|
||||
border-radius: 4px;
|
||||
box-shadow: var(--mall-shadow);
|
||||
}
|
||||
.head {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
padding: 14px 20px;
|
||||
border-bottom: 1px solid var(--mall-line);
|
||||
font-size: 15px;
|
||||
}
|
||||
.x {
|
||||
border: 0;
|
||||
background: none;
|
||||
font-size: 20px;
|
||||
cursor: pointer;
|
||||
color: var(--mall-muted);
|
||||
}
|
||||
.body {
|
||||
padding: 20px;
|
||||
}
|
||||
.foot {
|
||||
padding: 12px 20px;
|
||||
border-top: 1px solid var(--mall-line);
|
||||
text-align: right;
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,59 @@
|
||||
<script setup lang="ts">
|
||||
const props = defineProps<{ page: number; total: number; perPage: number }>();
|
||||
const emit = defineEmits<{ change: [page: number] }>();
|
||||
|
||||
const pages = computed(() => Math.max(1, Math.ceil(props.total / props.perPage)));
|
||||
const window_ = computed(() => {
|
||||
const p = props.page;
|
||||
const n = pages.value;
|
||||
const start = Math.max(1, Math.min(p - 2, n - 4));
|
||||
const out: number[] = [];
|
||||
for (let i = start; i <= Math.min(n, start + 4); i++) out.push(i);
|
||||
return out;
|
||||
});
|
||||
|
||||
function go(p: number): void {
|
||||
if (p >= 1 && p <= pages.value && p !== props.page) emit("change", p);
|
||||
}
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<nav v-if="pages > 1" class="pager">
|
||||
<button type="button" :disabled="page <= 1" @click="go(page - 1)">{{ $t("common.prev") }}</button>
|
||||
<button
|
||||
v-for="p in window_"
|
||||
:key="p"
|
||||
type="button"
|
||||
:class="{ on: p === page }"
|
||||
@click="go(p)"
|
||||
>{{ p }}</button>
|
||||
<button type="button" :disabled="page >= pages" @click="go(page + 1)">{{ $t("common.next") }}</button>
|
||||
</nav>
|
||||
</template>
|
||||
|
||||
<style scoped>
|
||||
.pager {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
gap: 6px;
|
||||
margin: 30px 0;
|
||||
}
|
||||
button {
|
||||
min-width: 34px;
|
||||
height: 34px;
|
||||
border: 1px solid var(--mall-line-dark);
|
||||
background: #fff;
|
||||
font-size: 13px;
|
||||
cursor: pointer;
|
||||
border-radius: var(--mall-radius);
|
||||
}
|
||||
button.on {
|
||||
background: var(--mall-red);
|
||||
border-color: var(--mall-red);
|
||||
color: #fff;
|
||||
}
|
||||
button:disabled {
|
||||
opacity: 0.4;
|
||||
cursor: not-allowed;
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,89 @@
|
||||
<script setup lang="ts">
|
||||
import type { Product } from "@vmall/shared";
|
||||
import { t as pick } from "@vmall/shared";
|
||||
import { commentCountOf, lowestSku, salesOf } from "~/mock/data";
|
||||
|
||||
const props = defineProps<{ product: Product }>();
|
||||
const { locale } = useI18n();
|
||||
|
||||
const sku = computed(() => lowestSku(props.product));
|
||||
const sales = computed(() => salesOf(props.product));
|
||||
const comments = computed(() => commentCountOf(props.product));
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<NuxtLink :to="`/goods/${product.slug}`" class="card hover-lift">
|
||||
<div class="img">
|
||||
<img :src="product.images[0] || '/mock/product-1.svg'" :alt="pick(product.name, locale)" loading="lazy" />
|
||||
</div>
|
||||
<div class="body">
|
||||
<p class="name">{{ pick(product.name, locale) }}</p>
|
||||
<p class="sub">{{ pick(product.description, locale) }}</p>
|
||||
<p class="price-row">
|
||||
<span v-if="sku" class="price"><PriceText :amount-minor="sku.price_minor" :currency="sku.currency" /></span>
|
||||
<s v-if="sku" class="market"><PriceText :amount-minor="sku.price_minor + 10000" :currency="sku.currency" /></s>
|
||||
</p>
|
||||
<p class="meta">{{ $t("product.salesCount", { n: sales }) }} · {{ $t("product.commentCount", { n: comments }) }}</p>
|
||||
</div>
|
||||
</NuxtLink>
|
||||
</template>
|
||||
|
||||
<style scoped>
|
||||
.card {
|
||||
display: block;
|
||||
background: #fff;
|
||||
text-decoration: none;
|
||||
color: inherit;
|
||||
border: 1px solid var(--mall-line);
|
||||
}
|
||||
.img {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
padding: 16px;
|
||||
}
|
||||
.img img {
|
||||
width: 180px;
|
||||
height: 180px;
|
||||
object-fit: contain;
|
||||
}
|
||||
.body {
|
||||
padding: 0 14px 14px;
|
||||
}
|
||||
.name {
|
||||
font-size: 13px;
|
||||
line-height: 1.4;
|
||||
height: 37px;
|
||||
overflow: hidden;
|
||||
margin: 0;
|
||||
}
|
||||
.card:hover .name {
|
||||
color: var(--mall-red);
|
||||
}
|
||||
.sub {
|
||||
font-size: 12px;
|
||||
color: var(--mall-faint);
|
||||
margin: 4px 0 8px;
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
.price-row {
|
||||
margin: 0;
|
||||
}
|
||||
.price {
|
||||
color: var(--mall-red);
|
||||
font-size: 16px;
|
||||
font-weight: 700;
|
||||
margin-right: 8px;
|
||||
}
|
||||
.market {
|
||||
color: var(--mall-faint);
|
||||
font-size: 12px;
|
||||
}
|
||||
.meta {
|
||||
margin: 6px 0 0;
|
||||
font-size: 12px;
|
||||
color: var(--mall-faint);
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,57 @@
|
||||
<script setup lang="ts">
|
||||
const props = withDefaults(defineProps<{ modelValue: number; max?: number }>(), { max: 999 });
|
||||
const emit = defineEmits<{ "update:modelValue": [v: number] }>();
|
||||
|
||||
function set(v: number): void {
|
||||
const next = Math.min(props.max, Math.max(1, Math.floor(v) || 1));
|
||||
emit("update:modelValue", next);
|
||||
}
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="stepper">
|
||||
<button type="button" :disabled="modelValue <= 1" @click="set(modelValue - 1)">−</button>
|
||||
<input
|
||||
:value="modelValue"
|
||||
type="number"
|
||||
:min="1"
|
||||
:max="max"
|
||||
@change="set(Number(($event.target as HTMLInputElement).value))"
|
||||
/>
|
||||
<button type="button" :disabled="modelValue >= max" @click="set(modelValue + 1)">+</button>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<style scoped>
|
||||
.stepper {
|
||||
display: inline-flex;
|
||||
border: 1px solid var(--mall-line-dark);
|
||||
border-radius: var(--mall-radius);
|
||||
overflow: hidden;
|
||||
}
|
||||
button {
|
||||
width: 30px;
|
||||
height: 32px;
|
||||
border: 0;
|
||||
background: #fafafa;
|
||||
cursor: pointer;
|
||||
font-size: 14px;
|
||||
}
|
||||
button:disabled {
|
||||
opacity: 0.4;
|
||||
cursor: not-allowed;
|
||||
}
|
||||
input {
|
||||
width: 48px;
|
||||
height: 32px;
|
||||
border: 0;
|
||||
border-left: 1px solid var(--mall-line);
|
||||
border-right: 1px solid var(--mall-line);
|
||||
text-align: center;
|
||||
font-size: 13px;
|
||||
outline: none;
|
||||
}
|
||||
input::-webkit-inner-spin-button {
|
||||
display: none;
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,19 @@
|
||||
<script setup lang="ts">
|
||||
const props = withDefaults(defineProps<{ value: number; size?: number }>(), { size: 14 });
|
||||
const stars = computed(() => [1, 2, 3, 4, 5].map((i) => i <= Math.round(props.value)));
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<span class="stars" :style="{ fontSize: `${size}px` }">
|
||||
<span v-for="(on, i) in stars" :key="i" :class="{ on }">★</span>
|
||||
</span>
|
||||
</template>
|
||||
|
||||
<style scoped>
|
||||
.stars span {
|
||||
color: #ddd;
|
||||
}
|
||||
.stars span.on {
|
||||
color: var(--mall-red);
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,50 @@
|
||||
<script setup lang="ts">
|
||||
defineProps<{ steps: string[]; active: number }>();
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<ol class="steps">
|
||||
<li v-for="(s, i) in steps" :key="s" :class="{ done: i < active, on: i === active }">
|
||||
<span class="n">{{ i + 1 }}</span>
|
||||
<span class="label">{{ s }}</span>
|
||||
</li>
|
||||
</ol>
|
||||
</template>
|
||||
|
||||
<style scoped>
|
||||
.steps {
|
||||
display: flex;
|
||||
list-style: none;
|
||||
margin: 0 0 20px;
|
||||
padding: 14px 0;
|
||||
background: #fafafa;
|
||||
border: 1px solid var(--mall-line);
|
||||
}
|
||||
li {
|
||||
flex: 1;
|
||||
text-align: center;
|
||||
color: var(--mall-faint);
|
||||
font-size: 13px;
|
||||
}
|
||||
.n {
|
||||
display: inline-block;
|
||||
width: 22px;
|
||||
height: 22px;
|
||||
line-height: 22px;
|
||||
border-radius: 50%;
|
||||
background: #ddd;
|
||||
color: #fff;
|
||||
margin-right: 8px;
|
||||
font-size: 12px;
|
||||
}
|
||||
li.on {
|
||||
color: var(--mall-red);
|
||||
font-weight: 600;
|
||||
}
|
||||
li.on .n {
|
||||
background: var(--mall-red);
|
||||
}
|
||||
li.done .n {
|
||||
background: var(--mall-green);
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,45 @@
|
||||
<script setup lang="ts">
|
||||
defineProps<{ tabs: { key: string; label: string }[]; modelValue: string }>();
|
||||
const emit = defineEmits<{ "update:modelValue": [key: string] }>();
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="tabs">
|
||||
<div class="tab-head">
|
||||
<button
|
||||
v-for="tab in tabs"
|
||||
:key="tab.key"
|
||||
type="button"
|
||||
:class="{ on: tab.key === modelValue }"
|
||||
@click="emit('update:modelValue', tab.key)"
|
||||
>{{ tab.label }}</button>
|
||||
</div>
|
||||
<div class="tab-body">
|
||||
<slot :active="modelValue" />
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<style scoped>
|
||||
.tab-head {
|
||||
display: flex;
|
||||
border-bottom: 1px solid var(--mall-line);
|
||||
}
|
||||
.tab-head button {
|
||||
border: 0;
|
||||
background: none;
|
||||
padding: 12px 24px;
|
||||
font-size: 14px;
|
||||
cursor: pointer;
|
||||
color: var(--mall-muted);
|
||||
border-bottom: 2px solid transparent;
|
||||
}
|
||||
.tab-head button.on {
|
||||
color: var(--mall-red);
|
||||
border-bottom-color: var(--mall-red);
|
||||
font-weight: 600;
|
||||
}
|
||||
.tab-body {
|
||||
padding: 20px 0;
|
||||
}
|
||||
</style>
|
||||
Reference in New Issue
Block a user