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,371 @@
|
||||
<script setup lang="ts">
|
||||
import { t as pick } from "@vmall/shared";
|
||||
import { lowestSku, salesOf, searchMockProducts, storeDetail } from "~/mock/data";
|
||||
|
||||
const route = useRoute();
|
||||
const { locale, t } = useI18n();
|
||||
const storeId = computed(() => {
|
||||
const raw = route.params.id;
|
||||
return typeof raw === "string" ? raw : raw?.[0] ?? "";
|
||||
});
|
||||
const detail = computed(() => storeDetail(storeId.value));
|
||||
const store = computed(() => detail.value?.store ?? null);
|
||||
const favorite = ref(false);
|
||||
const sortMode = ref<"default" | "price" | "sales" | "comments">("default");
|
||||
const sortOrder = ref<"asc" | "desc">("desc");
|
||||
const page = ref(1);
|
||||
const perPage = 12;
|
||||
|
||||
const productResult = computed(() => {
|
||||
if (!store.value) return { items: [], total: 0, page: 1, per_page: perPage };
|
||||
return searchMockProducts({
|
||||
shopId: store.value.id,
|
||||
sort: sortMode.value,
|
||||
order: sortOrder.value,
|
||||
page: page.value,
|
||||
perPage,
|
||||
});
|
||||
});
|
||||
|
||||
const breadcrumb = computed(() => [
|
||||
{ label: t("stores.breadcrumbHome"), to: "/" },
|
||||
{ label: t("stores.directory"), to: "/stores" },
|
||||
{ label: store.value ? pick(store.value.name, locale.value) : t("stores.unknownStore") },
|
||||
]);
|
||||
|
||||
const rateRows = computed(() => {
|
||||
if (!store.value) return [];
|
||||
return [
|
||||
{ label: t("stores.score"), value: store.value.rate.score },
|
||||
{ label: t("stores.agreement"), value: store.value.rate.agree },
|
||||
{ label: t("stores.service"), value: store.value.rate.service },
|
||||
{ label: t("stores.speed"), value: store.value.rate.speed },
|
||||
];
|
||||
});
|
||||
|
||||
function priceMinorOf(product: Parameters<typeof lowestSku>[0]): number {
|
||||
return lowestSku(product)?.price_minor ?? 0;
|
||||
}
|
||||
|
||||
function currencyOf(product: Parameters<typeof lowestSku>[0]): string {
|
||||
return lowestSku(product)?.currency ?? "USD";
|
||||
}
|
||||
const salesRank = computed(() => detail.value?.salesRank ?? []);
|
||||
|
||||
function chooseSort(mode: "default" | "price" | "sales" | "comments"): void {
|
||||
if (sortMode.value === mode && mode !== "default") {
|
||||
sortOrder.value = sortOrder.value === "asc" ? "desc" : "asc";
|
||||
} else {
|
||||
sortMode.value = mode;
|
||||
sortOrder.value = mode === "price" ? "asc" : "desc";
|
||||
}
|
||||
page.value = 1;
|
||||
}
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="store-page">
|
||||
<UiBreadcrumb :items="breadcrumb" />
|
||||
<template v-if="store">
|
||||
<div class="w1200 store-banner">
|
||||
<img :src="store.banner" :alt="pick(store.name, locale)" />
|
||||
</div>
|
||||
<div class="w1200 store-layout">
|
||||
<aside class="store-rail">
|
||||
<section class="mpanel store-card">
|
||||
<div class="store-heading">
|
||||
<img :src="store.logo" :alt="pick(store.name, locale)" />
|
||||
<div>
|
||||
<h1>{{ pick(store.name, locale) }}</h1>
|
||||
<p>{{ t("stores.positiveRate") }}</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="rate-list">
|
||||
<div v-for="row in rateRows" :key="row.label" class="rate-row">
|
||||
<span>{{ row.label }}</span>
|
||||
<UiRatingStars :value="row.value" :size="13" />
|
||||
<strong>{{ row.value.toFixed(1) }}</strong>
|
||||
</div>
|
||||
</div>
|
||||
<dl class="store-info">
|
||||
<div><dt>{{ t("stores.company") }}</dt><dd>{{ store.company }}</dd></div>
|
||||
<div><dt>{{ t("stores.region") }}</dt><dd>{{ store.region }}</dd></div>
|
||||
<div><dt>{{ t("stores.address") }}</dt><dd>{{ pick(store.address, locale) }}</dd></div>
|
||||
</dl>
|
||||
<button type="button" class="mbtn favorite-button" :class="{ selected: favorite }" @click="favorite = !favorite">
|
||||
{{ favorite ? t("stores.favorited") : t("stores.favorite") }}
|
||||
</button>
|
||||
</section>
|
||||
|
||||
<section class="mpanel sales-card">
|
||||
<h2 class="rail-title">{{ t("stores.salesRank") }}</h2>
|
||||
<NuxtLink v-for="(product, index) in salesRank" :key="product.id" :to="`/goods/${product.slug}`" class="rank-item">
|
||||
<span class="rank-number">{{ index + 1 }}</span>
|
||||
<img :src="product.images[0]" :alt="pick(product.name, locale)" loading="lazy" />
|
||||
<span class="rank-copy">
|
||||
<span class="rank-name">{{ pick(product.name, locale) }}</span>
|
||||
<span class="rank-sales">{{ t("product.salesCount", { n: salesOf(product) }) }}</span>
|
||||
</span>
|
||||
<span class="rank-price"><PriceText :amount-minor="priceMinorOf(product)" :currency="currencyOf(product)" /></span>
|
||||
</NuxtLink>
|
||||
</section>
|
||||
</aside>
|
||||
|
||||
<section class="store-products">
|
||||
<header class="product-toolbar">
|
||||
<h2>{{ t("stores.storeProducts") }}</h2>
|
||||
<div class="product-sorts" role="tablist">
|
||||
<button type="button" :class="{ active: sortMode === 'default' }" @click="chooseSort('default')">{{ t("stores.sortDefault") }}</button>
|
||||
<button type="button" :class="{ active: sortMode === 'price' }" @click="chooseSort('price')">{{ t("stores.sortPrice") }}</button>
|
||||
<button type="button" :class="{ active: sortMode === 'sales' }" @click="chooseSort('sales')">{{ t("stores.sortSales") }}</button>
|
||||
<button type="button" :class="{ active: sortMode === 'comments' }" @click="chooseSort('comments')">{{ t("stores.sortComments") }}</button>
|
||||
</div>
|
||||
</header>
|
||||
<div v-if="productResult.items.length" class="product-grid">
|
||||
<UiProductCard v-for="product in productResult.items" :key="product.id" :product="product" />
|
||||
</div>
|
||||
<UiEmptyState v-else :text="t('stores.noProducts')" />
|
||||
<UiPagination :page="productResult.page" :total="productResult.total" :per-page="productResult.per_page" @change="page = $event" />
|
||||
</section>
|
||||
</div>
|
||||
</template>
|
||||
<div v-else class="w1200 missing-store">
|
||||
<UiEmptyState :text="t('stores.unknownStore')" />
|
||||
<NuxtLink to="/stores" class="mbtn">{{ t("stores.backToStores") }}</NuxtLink>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<style scoped>
|
||||
.store-page {
|
||||
padding-bottom: 60px;
|
||||
}
|
||||
.store-banner {
|
||||
height: 350px;
|
||||
overflow: hidden;
|
||||
background: var(--mall-bg);
|
||||
}
|
||||
.store-banner img {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
object-fit: cover;
|
||||
}
|
||||
.store-layout {
|
||||
display: grid;
|
||||
grid-template-columns: 270px 1fr;
|
||||
gap: 20px;
|
||||
margin-top: 20px;
|
||||
align-items: start;
|
||||
}
|
||||
.store-rail {
|
||||
min-width: 0;
|
||||
}
|
||||
.mpanel {
|
||||
padding: 16px;
|
||||
border: 1px solid var(--mall-line);
|
||||
}
|
||||
.store-card {
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
.store-heading {
|
||||
display: flex;
|
||||
gap: 11px;
|
||||
align-items: center;
|
||||
padding-bottom: 13px;
|
||||
border-bottom: 1px solid var(--mall-line);
|
||||
}
|
||||
.store-heading img {
|
||||
width: 58px;
|
||||
height: 58px;
|
||||
border: 1px solid var(--mall-line);
|
||||
object-fit: contain;
|
||||
}
|
||||
.store-heading h1 {
|
||||
margin: 0;
|
||||
font-size: 15px;
|
||||
line-height: 1.45;
|
||||
}
|
||||
.store-heading p {
|
||||
margin: 4px 0 0;
|
||||
color: var(--mall-red);
|
||||
font-size: 12px;
|
||||
}
|
||||
.rate-list {
|
||||
padding: 12px 0 4px;
|
||||
border-bottom: 1px solid var(--mall-line);
|
||||
}
|
||||
.rate-row {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
min-height: 25px;
|
||||
gap: 5px;
|
||||
color: var(--mall-muted);
|
||||
font-size: 12px;
|
||||
}
|
||||
.rate-row > span:first-child {
|
||||
width: 64px;
|
||||
}
|
||||
.rate-row strong {
|
||||
margin-left: auto;
|
||||
color: var(--mall-red);
|
||||
font-weight: 500;
|
||||
}
|
||||
.store-info {
|
||||
margin: 12px 0;
|
||||
color: var(--mall-muted);
|
||||
font-size: 12px;
|
||||
}
|
||||
.store-info > div {
|
||||
display: grid;
|
||||
grid-template-columns: 42px 1fr;
|
||||
gap: 7px;
|
||||
margin: 8px 0;
|
||||
}
|
||||
.store-info dt {
|
||||
color: var(--mall-faint);
|
||||
}
|
||||
.store-info dd {
|
||||
min-width: 0;
|
||||
margin: 0;
|
||||
line-height: 1.4;
|
||||
overflow-wrap: anywhere;
|
||||
}
|
||||
.favorite-button {
|
||||
width: 100%;
|
||||
}
|
||||
.favorite-button.selected {
|
||||
border-color: var(--mall-red);
|
||||
color: var(--mall-red);
|
||||
}
|
||||
.rail-title {
|
||||
margin: 0 0 12px;
|
||||
border-left: 3px solid var(--mall-red);
|
||||
padding-left: 9px;
|
||||
font-size: 14px;
|
||||
font-weight: 500;
|
||||
}
|
||||
.rank-item {
|
||||
display: grid;
|
||||
grid-template-columns: 18px 48px 1fr;
|
||||
gap: 6px;
|
||||
align-items: center;
|
||||
position: relative;
|
||||
padding: 9px 0;
|
||||
border-top: 1px solid var(--mall-line);
|
||||
color: inherit;
|
||||
text-decoration: none;
|
||||
}
|
||||
.rank-number {
|
||||
color: var(--mall-red);
|
||||
font-size: 12px;
|
||||
text-align: center;
|
||||
}
|
||||
.rank-item img {
|
||||
width: 48px;
|
||||
height: 48px;
|
||||
object-fit: contain;
|
||||
}
|
||||
.rank-copy {
|
||||
min-width: 0;
|
||||
}
|
||||
.rank-name,
|
||||
.rank-sales {
|
||||
display: block;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
}
|
||||
.rank-name {
|
||||
font-size: 12px;
|
||||
}
|
||||
.rank-sales {
|
||||
margin-top: 4px;
|
||||
color: var(--mall-faint);
|
||||
font-size: 11px;
|
||||
}
|
||||
.rank-price {
|
||||
grid-column: 2 / 4;
|
||||
color: var(--mall-red);
|
||||
font-size: 12px;
|
||||
text-align: right;
|
||||
}
|
||||
.store-products {
|
||||
min-width: 0;
|
||||
}
|
||||
.product-toolbar {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
border: 1px solid var(--mall-line);
|
||||
background: #fafafa;
|
||||
padding: 12px 16px;
|
||||
}
|
||||
.product-toolbar h2 {
|
||||
margin: 0;
|
||||
border-left: 3px solid var(--mall-red);
|
||||
padding-left: 9px;
|
||||
font-size: 15px;
|
||||
font-weight: 500;
|
||||
}
|
||||
.product-sorts {
|
||||
display: flex;
|
||||
}
|
||||
.product-sorts button {
|
||||
border: 0;
|
||||
border-right: 1px solid var(--mall-line-dark);
|
||||
background: transparent;
|
||||
padding: 2px 12px;
|
||||
color: var(--mall-muted);
|
||||
font-size: 12px;
|
||||
cursor: pointer;
|
||||
}
|
||||
.product-sorts button:last-child {
|
||||
border-right: 0;
|
||||
padding-right: 0;
|
||||
}
|
||||
.product-sorts button.active {
|
||||
color: var(--mall-red);
|
||||
font-weight: 700;
|
||||
}
|
||||
.product-grid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(4, minmax(0, 1fr));
|
||||
gap: 14px;
|
||||
margin-top: 15px;
|
||||
}
|
||||
.product-grid :deep(.card) {
|
||||
min-width: 0;
|
||||
}
|
||||
.missing-store {
|
||||
min-height: 360px;
|
||||
padding-top: 60px;
|
||||
text-align: center;
|
||||
}
|
||||
@media (max-width: 1240px) {
|
||||
.w1200 {
|
||||
width: calc(100% - 32px);
|
||||
}
|
||||
}
|
||||
@media (max-width: 840px) {
|
||||
.store-layout {
|
||||
grid-template-columns: 1fr;
|
||||
}
|
||||
.product-grid {
|
||||
grid-template-columns: repeat(2, minmax(0, 1fr));
|
||||
}
|
||||
}
|
||||
@media (max-width: 520px) {
|
||||
.store-banner {
|
||||
height: 220px;
|
||||
}
|
||||
.product-toolbar {
|
||||
align-items: flex-start;
|
||||
flex-direction: column;
|
||||
gap: 10px;
|
||||
}
|
||||
.product-sorts button {
|
||||
padding-left: 7px;
|
||||
padding-right: 7px;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
Reference in New Issue
Block a user