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
+302
-86
@@ -1,134 +1,350 @@
|
||||
<script setup lang="ts">
|
||||
import type { Cart, CartItem } from "@vmall/shared";
|
||||
import { t as localized } from "@vmall/shared";
|
||||
import { t as pick } from "@vmall/shared";
|
||||
import type { CartItem } from "@vmall/shared";
|
||||
import { productById, storeById } from "~/mock/data";
|
||||
|
||||
type CartGroup = {
|
||||
shopId: string;
|
||||
store: ReturnType<typeof storeById>;
|
||||
items: CartItem[];
|
||||
};
|
||||
|
||||
const { $api } = useNuxtApp();
|
||||
const { locale } = useI18n();
|
||||
const { currency, convertAmount, formatAmount } = usePrice();
|
||||
const { locale, t } = useI18n();
|
||||
const { currency } = usePrefs();
|
||||
const cartStore = useCartStore();
|
||||
const router = useRouter();
|
||||
|
||||
const cart = ref<Cart | null>(null);
|
||||
const converted = ref<Record<string, number>>({});
|
||||
const subtotalDisplay = ref("");
|
||||
const items = ref<CartItem[]>([]);
|
||||
const selected = reactive<Record<string, boolean>>({});
|
||||
const loading = ref(true);
|
||||
const mutating = ref(false);
|
||||
const error = ref("");
|
||||
const updating = ref<string | null>(null);
|
||||
|
||||
const subtotalMinor = computed(() => (cart.value?.items ?? []).reduce((sum, item) => sum + (converted.value[item.sku_id] ?? 0) * item.qty, 0));
|
||||
const stepLabels = computed(() => [
|
||||
t("cart.steps.cart"),
|
||||
t("cart.steps.order"),
|
||||
t("cart.steps.payment"),
|
||||
t("cart.steps.complete"),
|
||||
]);
|
||||
|
||||
function errorMessage(value: unknown): string {
|
||||
return value instanceof Error ? value.message : $t("mall.loadFailed");
|
||||
const groups = computed<CartGroup[]>(() => {
|
||||
const grouped = new Map<string, CartItem[]>();
|
||||
for (const item of items.value) {
|
||||
const shopId = productById(item.product_id)?.shop_id ?? "unknown";
|
||||
const groupItems = grouped.get(shopId) ?? [];
|
||||
groupItems.push(item);
|
||||
grouped.set(shopId, groupItems);
|
||||
}
|
||||
return Array.from(grouped, ([shopId, groupItems]) => ({
|
||||
shopId,
|
||||
store: shopId === "unknown" ? null : storeById(shopId),
|
||||
items: groupItems,
|
||||
}));
|
||||
});
|
||||
|
||||
const selectedItems = computed(() => items.value.filter((item) => selected[item.sku_id]));
|
||||
const allSelected = computed(
|
||||
() => items.value.length > 0 && items.value.every((item) => selected[item.sku_id]),
|
||||
);
|
||||
const selectedCurrency = computed(() => selectedItems.value[0]?.currency ?? currency.value);
|
||||
const selectedTotalMinor = computed(() =>
|
||||
selectedItems.value.reduce((total, item) => total + item.unit_price_minor * item.qty, 0),
|
||||
);
|
||||
|
||||
function imageFor(item: CartItem): string {
|
||||
return productById(item.product_id)?.images[0] ?? item.image ?? "/mock/product-1.svg";
|
||||
}
|
||||
|
||||
async function refreshPrices(): Promise<void> {
|
||||
if (!cart.value) return;
|
||||
const entries = await Promise.all(cart.value.items.map(async (item) => [item.sku_id, await convertAmount(item.unit_price_minor, item.currency)] as const));
|
||||
converted.value = Object.fromEntries(entries);
|
||||
subtotalDisplay.value = await formatAmount(subtotalMinor.value, currency.value);
|
||||
function maxFor(item: CartItem): number {
|
||||
return productById(item.product_id)?.skus?.find((sku) => sku.id === item.sku_id)?.stock ?? 999;
|
||||
}
|
||||
|
||||
async function loadCart(): Promise<void> {
|
||||
loading.value = true;
|
||||
error.value = "";
|
||||
try {
|
||||
cart.value = await $api.getCart();
|
||||
await refreshPrices();
|
||||
} catch (value) {
|
||||
error.value = errorMessage(value);
|
||||
cart.value = null;
|
||||
const snapshot = await $api.getCart();
|
||||
const previous = { ...selected };
|
||||
for (const skuId of Object.keys(selected)) delete selected[skuId];
|
||||
items.value = snapshot.items;
|
||||
for (const item of items.value) selected[item.sku_id] = previous[item.sku_id] ?? true;
|
||||
} catch {
|
||||
error.value = t("cart.loadError");
|
||||
} finally {
|
||||
loading.value = false;
|
||||
}
|
||||
}
|
||||
|
||||
async function updateQuantity(item: CartItem, value: string | number): Promise<void> {
|
||||
const qty = Math.trunc(Number(value));
|
||||
if (!Number.isFinite(qty) || qty < 1) {
|
||||
error.value = $t("mall.invalidQuantity");
|
||||
return;
|
||||
}
|
||||
updating.value = item.sku_id;
|
||||
function setAllSelected(checked: boolean): void {
|
||||
for (const item of items.value) selected[item.sku_id] = checked;
|
||||
}
|
||||
|
||||
function onSelectionChange(skuId: string, event: Event): void {
|
||||
selected[skuId] = (event.target as HTMLInputElement).checked;
|
||||
}
|
||||
|
||||
async function updateQuantity(item: CartItem, qty: number): Promise<void> {
|
||||
mutating.value = true;
|
||||
error.value = "";
|
||||
try {
|
||||
await $api.updateCartItem(item.sku_id, qty);
|
||||
await loadCart();
|
||||
} catch (value) {
|
||||
error.value = errorMessage(value);
|
||||
await cartStore.refresh();
|
||||
} catch {
|
||||
error.value = t("cart.updateError");
|
||||
} finally {
|
||||
updating.value = null;
|
||||
mutating.value = false;
|
||||
}
|
||||
}
|
||||
|
||||
async function removeItem(item: CartItem): Promise<void> {
|
||||
updating.value = item.sku_id;
|
||||
mutating.value = true;
|
||||
error.value = "";
|
||||
try {
|
||||
await $api.removeCartItem(item.sku_id);
|
||||
await loadCart();
|
||||
} catch (value) {
|
||||
error.value = errorMessage(value);
|
||||
await cartStore.refresh();
|
||||
} catch {
|
||||
error.value = t("cart.updateError");
|
||||
} finally {
|
||||
updating.value = null;
|
||||
mutating.value = false;
|
||||
}
|
||||
}
|
||||
|
||||
watch(currency, () => void refreshPrices());
|
||||
onMounted(() => void loadCart());
|
||||
async function goToCheckout(): Promise<void> {
|
||||
if (selectedItems.value.length === 0) return;
|
||||
await router.push("/checkout");
|
||||
}
|
||||
|
||||
definePageMeta({ middleware: "auth" });
|
||||
onMounted(() => void loadCart());
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<section>
|
||||
<h1 class="page-title">{{ $t("cart.title") }}</h1>
|
||||
<p v-if="loading" class="muted">{{ $t("common.loading") }}</p>
|
||||
<p v-if="error" class="error-text" role="alert">{{ error }}</p>
|
||||
<div v-if="!loading && cart && cart.items.length === 0" class="card empty-state">{{ $t("cart.emptyCart") }}</div>
|
||||
<template v-if="cart && cart.items.length > 0">
|
||||
<div class="card cart-list">
|
||||
<div v-for="item in cart.items" :key="item.sku_id" class="cart-line">
|
||||
<div class="cart-product">
|
||||
<img v-if="item.image" :src="item.image" :alt="localized(item.product_name, locale)">
|
||||
<div v-else class="image-placeholder">{{ $t("mall.noImage") }}</div>
|
||||
<div>
|
||||
<NuxtLink :to="`/products/${item.product_id}`" class="product-name">{{ localized(item.product_name, locale) }}</NuxtLink>
|
||||
<div class="muted">{{ item.sku_code }}</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="unit-price"><PriceText :amount-minor="item.unit_price_minor" :currency="item.currency" /></div>
|
||||
<div class="quantity-field">
|
||||
<label class="sr-only" :for="`qty-${item.sku_id}`">{{ $t("common.qty") }}</label>
|
||||
<input :id="`qty-${item.sku_id}`" :value="item.qty" type="number" min="1" :disabled="updating === item.sku_id" @change="updateQuantity(item, ($event.target as HTMLInputElement).value)">
|
||||
</div>
|
||||
<div class="line-total"><PriceText :amount-minor="(converted[item.sku_id] ?? 0) * item.qty" :currency="currency" /></div>
|
||||
<button class="btn danger sm" :disabled="updating === item.sku_id" @click="removeItem(item)">{{ $t("cart.remove") }}</button>
|
||||
</div>
|
||||
<div class="transaction-page cart-page">
|
||||
<div class="w1200">
|
||||
<UiStepBar :steps="stepLabels" :active="0" />
|
||||
<header class="page-heading">
|
||||
<h1>{{ t("cart.title") }}</h1>
|
||||
</header>
|
||||
|
||||
<p v-if="error" class="error-message">{{ error }}</p>
|
||||
<template v-if="!loading && items.length > 0">
|
||||
<section v-for="group in groups" :key="group.shopId" class="shop-group mpanel">
|
||||
<header class="shop-heading">
|
||||
<span class="shop-label">{{ t("cart.shop") }}</span>
|
||||
<strong>{{ group.store ? pick(group.store.name, locale) : t("cart.unknownStore") }}</strong>
|
||||
</header>
|
||||
<table class="mtable cart-table">
|
||||
<thead>
|
||||
<tr>
|
||||
<th class="check-col" />
|
||||
<th class="product-col">{{ t("cart.product") }}</th>
|
||||
<th>{{ t("cart.spec") }}</th>
|
||||
<th>{{ t("cart.unitPrice") }}</th>
|
||||
<th>{{ t("cart.quantity") }}</th>
|
||||
<th>{{ t("cart.subtotal") }}</th>
|
||||
<th>{{ t("cart.actions") }}</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr v-for="item in group.items" :key="item.sku_id">
|
||||
<td class="check-col">
|
||||
<input
|
||||
:checked="Boolean(selected[item.sku_id])"
|
||||
type="checkbox"
|
||||
:aria-label="pick(item.product_name, locale)"
|
||||
@change="onSelectionChange(item.sku_id, $event)"
|
||||
/>
|
||||
</td>
|
||||
<td class="product-cell">
|
||||
<img :src="imageFor(item)" :alt="pick(item.product_name, locale)" />
|
||||
<span>{{ pick(item.product_name, locale) }}</span>
|
||||
</td>
|
||||
<td class="muted">{{ item.sku_code }}</td>
|
||||
<td><PriceText :amount-minor="item.unit_price_minor" :currency="item.currency" /></td>
|
||||
<td>
|
||||
<UiQtyStepper
|
||||
:model-value="item.qty"
|
||||
:max="maxFor(item)"
|
||||
@update:model-value="updateQuantity(item, $event)"
|
||||
/>
|
||||
</td>
|
||||
<td class="price-strong">
|
||||
<PriceText :amount-minor="item.unit_price_minor * item.qty" :currency="item.currency" />
|
||||
</td>
|
||||
<td>
|
||||
<button type="button" class="text-button" :disabled="mutating" @click="removeItem(item)">
|
||||
{{ t("cart.remove") }}
|
||||
</button>
|
||||
</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</section>
|
||||
|
||||
<footer class="cart-footer mpanel">
|
||||
<label class="select-all">
|
||||
<input :checked="allSelected" type="checkbox" @change="setAllSelected(($event.target as HTMLInputElement).checked)" />
|
||||
<span>{{ t("cart.selectAll") }}</span>
|
||||
</label>
|
||||
<span class="selected-count">{{ t("cart.selectedCount", { n: selectedItems.length }) }}</span>
|
||||
<span class="total-label">{{ t("cart.subtotal") }}:</span>
|
||||
<strong class="total-price"><PriceText :amount-minor="selectedTotalMinor" :currency="selectedCurrency" /></strong>
|
||||
<button class="mbtn red checkout-button" type="button" :disabled="selectedItems.length === 0 || mutating" @click="goToCheckout">
|
||||
{{ t("cart.checkout") }}
|
||||
</button>
|
||||
</footer>
|
||||
</template>
|
||||
|
||||
<div v-else-if="!loading" class="empty-wrap mpanel">
|
||||
<UiEmptyState :text="t('cart.empty')" />
|
||||
<NuxtLink class="mbtn red" to="/">{{ t("cart.continueShopping") }}</NuxtLink>
|
||||
</div>
|
||||
<div class="card summary row between">
|
||||
<strong>{{ $t("cart.subtotal") }}</strong>
|
||||
<strong class="total">{{ subtotalDisplay || $t("common.loading") }}</strong>
|
||||
<NuxtLink class="btn primary" to="/checkout">{{ $t("cart.checkout") }}</NuxtLink>
|
||||
</div>
|
||||
</template>
|
||||
</section>
|
||||
<div v-else class="loading-state">{{ $t("common.loading") }}</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<style scoped>
|
||||
.cart-list { padding: 0; }
|
||||
.cart-line { display: grid; grid-template-columns: minmax(240px, 1fr) 120px 100px 120px auto; gap: 14px; align-items: center; padding: 14px 16px; border-bottom: 1px solid var(--border); }
|
||||
.cart-line:last-child { border-bottom: 0; }
|
||||
.cart-product { display: flex; align-items: center; gap: 10px; min-width: 0; }
|
||||
.cart-product img, .image-placeholder { width: 56px; height: 56px; object-fit: cover; border-radius: var(--radius); background: #eef1f5; }
|
||||
.image-placeholder { display: grid; place-items: center; color: var(--muted); font-size: 10px; text-align: center; }
|
||||
.product-name { font-weight: 600; }
|
||||
.quantity-field { margin: 0; }
|
||||
.quantity-field input { width: 80px; }
|
||||
.line-total, .unit-price, .total { color: var(--primary); font-weight: 600; }
|
||||
.summary { margin-top: 16px; }
|
||||
.empty-state { text-align: center; }
|
||||
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }
|
||||
@media (max-width: 800px) {
|
||||
.cart-line { grid-template-columns: 1fr auto auto; }
|
||||
.unit-price, .line-total { text-align: right; }
|
||||
.cart-product { grid-column: 1 / -1; }
|
||||
.transaction-page {
|
||||
padding: 24px 0 56px;
|
||||
background: #f5f5f5;
|
||||
min-height: 60vh;
|
||||
}
|
||||
.page-heading {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
margin: 0 0 16px;
|
||||
}
|
||||
.page-heading h1 {
|
||||
margin: 0;
|
||||
font-size: 20px;
|
||||
font-weight: 500;
|
||||
}
|
||||
.error-message {
|
||||
margin: 0 0 16px;
|
||||
padding: 10px 14px;
|
||||
color: #b42318;
|
||||
background: #fff1f0;
|
||||
border: 1px solid #ffd6d2;
|
||||
}
|
||||
.shop-group {
|
||||
margin-bottom: 16px;
|
||||
padding: 0;
|
||||
overflow: hidden;
|
||||
}
|
||||
.shop-heading {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
padding: 14px 18px;
|
||||
border-bottom: 1px solid var(--mall-line);
|
||||
font-size: 14px;
|
||||
}
|
||||
.shop-label {
|
||||
color: var(--mall-muted);
|
||||
font-size: 12px;
|
||||
}
|
||||
.cart-table {
|
||||
margin: 0;
|
||||
width: 100%;
|
||||
}
|
||||
.cart-table th,
|
||||
.cart-table td {
|
||||
padding: 14px 10px;
|
||||
vertical-align: middle;
|
||||
}
|
||||
.cart-table th:first-child,
|
||||
.cart-table td:first-child {
|
||||
padding-left: 18px;
|
||||
}
|
||||
.cart-table th:last-child,
|
||||
.cart-table td:last-child {
|
||||
padding-right: 18px;
|
||||
}
|
||||
.check-col {
|
||||
width: 42px;
|
||||
text-align: center;
|
||||
}
|
||||
.product-col {
|
||||
width: 34%;
|
||||
}
|
||||
.product-cell {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 12px;
|
||||
min-height: 60px;
|
||||
line-height: 1.5;
|
||||
}
|
||||
.product-cell img {
|
||||
width: 60px;
|
||||
height: 60px;
|
||||
flex: 0 0 60px;
|
||||
object-fit: cover;
|
||||
border: 1px solid var(--mall-line);
|
||||
background: #fff;
|
||||
}
|
||||
.muted {
|
||||
color: var(--mall-muted);
|
||||
font-size: 12px;
|
||||
}
|
||||
.price-strong,
|
||||
.total-price {
|
||||
color: var(--mall-red);
|
||||
font-weight: 600;
|
||||
}
|
||||
.text-button {
|
||||
border: 0;
|
||||
background: transparent;
|
||||
color: var(--mall-muted);
|
||||
cursor: pointer;
|
||||
padding: 4px;
|
||||
}
|
||||
.text-button:hover {
|
||||
color: var(--mall-red);
|
||||
}
|
||||
.text-button:disabled {
|
||||
cursor: not-allowed;
|
||||
opacity: 0.5;
|
||||
}
|
||||
.cart-footer {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 18px;
|
||||
padding: 14px 18px;
|
||||
}
|
||||
.select-all {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: 7px;
|
||||
cursor: pointer;
|
||||
}
|
||||
.selected-count {
|
||||
color: var(--mall-muted);
|
||||
font-size: 13px;
|
||||
}
|
||||
.total-label {
|
||||
margin-left: auto;
|
||||
color: var(--mall-muted);
|
||||
font-size: 13px;
|
||||
}
|
||||
.total-price {
|
||||
font-size: 18px;
|
||||
}
|
||||
.checkout-button {
|
||||
min-width: 112px;
|
||||
}
|
||||
.empty-wrap {
|
||||
padding-bottom: 28px;
|
||||
text-align: center;
|
||||
}
|
||||
.empty-wrap :deep(.empty) {
|
||||
padding-bottom: 20px;
|
||||
}
|
||||
.loading-state {
|
||||
padding: 70px 0;
|
||||
text-align: center;
|
||||
color: var(--mall-muted);
|
||||
}
|
||||
</style>
|
||||
|
||||
Reference in New Issue
Block a user