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,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