feat: persist customer product and shop favorites through the live API
Replace mall fixture favorites with customer-scoped endpoints, and send signed-out shoppers back to the page they left after sign-in. Co-authored-by: Cursor <cursoragent@cursor.com>
This commit is contained in:
Chengdong Zhang
co-authored by
Cursor
Cursor
parent
94a64ec712
commit
6c1357ec4d
@@ -1,69 +1,117 @@
|
||||
<script setup lang="ts">
|
||||
import type { Product } from "@vmall/shared";
|
||||
import type { Favorite, Paged, ProductFavorite, ShopFavorite } from "@vmall/shared";
|
||||
import { t as pick } from "@vmall/shared";
|
||||
import { MOCK_FAVORITES, lowestSku, productById, storeById } from "~/mock/data";
|
||||
|
||||
definePageMeta({ middleware: "auth" });
|
||||
|
||||
const { locale, t } = useI18n();
|
||||
const { $api } = useNuxtApp();
|
||||
|
||||
const activeTab = ref<"product" | "store">("product");
|
||||
const favorites = ref(MOCK_FAVORITES.map((item) => ({ ...item })));
|
||||
const activeTab = ref<"product" | "shop">("product");
|
||||
const page = ref(1);
|
||||
const perPage = 12;
|
||||
const loading = ref(true);
|
||||
const error = ref("");
|
||||
const removingId = ref("");
|
||||
const emptyPage: Paged<Favorite> = { items: [], total: 0, page: 1, per_page: perPage };
|
||||
const result = ref<Paged<Favorite>>({ ...emptyPage });
|
||||
let loadVersion = 0;
|
||||
|
||||
const tabs = computed(() => [
|
||||
{ key: "product", label: t("user.favoriteProductsTab") },
|
||||
{ key: "store", label: t("user.favoriteStoresTab") },
|
||||
{ key: "shop", label: t("user.favoriteStoresTab") },
|
||||
]);
|
||||
|
||||
const productRows = computed(() =>
|
||||
favorites.value
|
||||
.filter((favorite) => favorite.kind === "product")
|
||||
.map((favorite) => productById(favorite.refId))
|
||||
.filter((product): product is Product => product !== null)
|
||||
.map((product) => {
|
||||
const sku = lowestSku(product);
|
||||
return {
|
||||
product,
|
||||
amountMinor: sku?.price_minor ?? null,
|
||||
currency: sku?.currency ?? null,
|
||||
};
|
||||
}),
|
||||
result.value.items.filter((row): row is ProductFavorite => row.kind === "product"),
|
||||
);
|
||||
|
||||
const storeRows = computed(() =>
|
||||
favorites.value
|
||||
.filter((favorite) => favorite.kind === "store")
|
||||
.map((favorite) => storeById(favorite.refId))
|
||||
.filter((store): store is NonNullable<ReturnType<typeof storeById>> => store !== null),
|
||||
result.value.items.filter((row): row is ShopFavorite => row.kind === "shop"),
|
||||
);
|
||||
|
||||
function removeProductFavorite(productId: string): void {
|
||||
favorites.value = favorites.value.filter((item) => !(item.kind === "product" && item.refId === productId));
|
||||
async function load(): Promise<Paged<Favorite> | null> {
|
||||
const version = ++loadVersion;
|
||||
const requestedKind = activeTab.value;
|
||||
const requestedPage = page.value;
|
||||
loading.value = true;
|
||||
error.value = "";
|
||||
try {
|
||||
const next = await $api.listFavorites({
|
||||
kind: requestedKind,
|
||||
page: requestedPage,
|
||||
per_page: perPage,
|
||||
});
|
||||
if (version !== loadVersion || activeTab.value !== requestedKind || page.value !== requestedPage) {
|
||||
return null;
|
||||
}
|
||||
result.value = next;
|
||||
return next;
|
||||
} catch {
|
||||
if (version === loadVersion && activeTab.value === requestedKind && page.value === requestedPage) {
|
||||
error.value = t("user.favoriteLoadFailed");
|
||||
result.value = { ...emptyPage };
|
||||
}
|
||||
return null;
|
||||
} finally {
|
||||
if (version === loadVersion) loading.value = false;
|
||||
}
|
||||
}
|
||||
|
||||
function removeStoreFavorite(storeId: string): void {
|
||||
favorites.value = favorites.value.filter((item) => !(item.kind === "store" && item.refId === storeId));
|
||||
watch(activeTab, () => {
|
||||
page.value = 1;
|
||||
});
|
||||
|
||||
watch([activeTab, page], () => {
|
||||
void load();
|
||||
}, { immediate: true });
|
||||
|
||||
async function removeProductFavorite(productId: string): Promise<void> {
|
||||
if (removingId.value) return;
|
||||
removingId.value = productId;
|
||||
try {
|
||||
await $api.removeProductFavorite(productId);
|
||||
const next = await load();
|
||||
if (next) page.value = Math.min(page.value, Math.max(1, Math.ceil(next.total / next.per_page)));
|
||||
} catch {
|
||||
error.value = t("user.favoriteRemoveFailed");
|
||||
} finally {
|
||||
removingId.value = "";
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
async function removeStoreFavorite(storeId: string): Promise<void> {
|
||||
if (removingId.value) return;
|
||||
removingId.value = storeId;
|
||||
try {
|
||||
await $api.removeShopFavorite(storeId);
|
||||
const next = await load();
|
||||
if (next) page.value = Math.min(page.value, Math.max(1, Math.ceil(next.total / next.per_page)));
|
||||
} catch {
|
||||
error.value = t("user.favoriteRemoveFailed");
|
||||
} finally {
|
||||
removingId.value = "";
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<section class="mpanel favorites-panel">
|
||||
<h1 class="mpanel-title">{{ t("user.favoritesTitle") }}</h1>
|
||||
<p v-if="error" class="muted">{{ error }}</p>
|
||||
<UiTabs v-model="activeTab" :tabs="tabs">
|
||||
<template #default>
|
||||
<div v-if="activeTab === 'product'">
|
||||
<div v-if="loading" class="muted">{{ t("common.loading") }}</div>
|
||||
<div v-else-if="activeTab === 'product'">
|
||||
<UiEmptyState v-if="productRows.length === 0" :text="t('user.noFavorites')" />
|
||||
<div v-else class="product-grid">
|
||||
<article v-for="item in productRows" :key="item.product.id" class="product-card hover-lift">
|
||||
<article v-for="item in productRows" :key="item.id" class="product-card hover-lift">
|
||||
<NuxtLink :to="`/goods/${item.product.slug}`" class="cover">
|
||||
<img :src="item.product.images[0] || '/mock/product-1.svg'" :alt="pick(item.product.name, locale)" />
|
||||
<img :src="item.product.image || '/mock/product-1.svg'" :alt="pick(item.product.name, locale)" />
|
||||
</NuxtLink>
|
||||
<div class="content">
|
||||
<NuxtLink :to="`/goods/${item.product.slug}`" class="name">{{ pick(item.product.name, locale) }}</NuxtLink>
|
||||
<PriceText v-if="item.amountMinor !== null && item.currency" :amount-minor="item.amountMinor" :currency="item.currency" />
|
||||
<button class="mbtn" type="button" @click="removeProductFavorite(item.product.id)">{{ t("user.removeFavorite") }}</button>
|
||||
<PriceText v-if="item.product.price_minor !== null && item.product.currency" :amount-minor="item.product.price_minor" :currency="item.product.currency" />
|
||||
<button class="mbtn" type="button" :disabled="removingId === item.product.id" @click="removeProductFavorite(item.product.id)">{{ t("user.removeFavorite") }}</button>
|
||||
</div>
|
||||
</article>
|
||||
</div>
|
||||
@@ -72,19 +120,27 @@ function removeStoreFavorite(storeId: string): void {
|
||||
<div v-else>
|
||||
<UiEmptyState v-if="storeRows.length === 0" :text="t('user.noFavoriteStores')" />
|
||||
<div v-else class="store-list">
|
||||
<article v-for="store in storeRows" :key="store.id" class="store-row">
|
||||
<img :src="store.logo" :alt="pick(store.name, locale)" />
|
||||
<article v-for="item in storeRows" :key="item.id" class="store-row">
|
||||
<img v-if="item.shop.logo" :src="item.shop.logo" :alt="pick(item.shop.name, locale)" />
|
||||
<span v-else class="store-logo-placeholder">{{ pick(item.shop.name, locale).slice(0, 1) }}</span>
|
||||
<div class="store-main">
|
||||
<strong>{{ pick(store.name, locale) }}</strong>
|
||||
<span>{{ store.company }}</span>
|
||||
<strong>{{ pick(item.shop.name, locale) }}</strong>
|
||||
<span>{{ item.shop.company }}</span>
|
||||
</div>
|
||||
<div class="store-actions">
|
||||
<NuxtLink class="mbtn" :to="`/stores/${store.slug}`">{{ t("user.enterStore") }}</NuxtLink>
|
||||
<button class="mbtn" type="button" @click="removeStoreFavorite(store.id)">{{ t("user.removeFavorite") }}</button>
|
||||
<NuxtLink class="mbtn" :to="`/stores/${item.shop.slug}`">{{ t("user.enterStore") }}</NuxtLink>
|
||||
<button class="mbtn" type="button" :disabled="removingId === item.shop.id" @click="removeStoreFavorite(item.shop.id)">{{ t("user.removeFavorite") }}</button>
|
||||
</div>
|
||||
</article>
|
||||
</div>
|
||||
</div>
|
||||
<UiPagination
|
||||
v-if="!loading && result.total > result.per_page"
|
||||
:page="result.page"
|
||||
:total="result.total"
|
||||
:per-page="result.per_page"
|
||||
@change="page = $event"
|
||||
/>
|
||||
</template>
|
||||
</UiTabs>
|
||||
</section>
|
||||
@@ -147,13 +203,22 @@ function removeStoreFavorite(storeId: string): void {
|
||||
.store-row:last-child {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
.store-row img {
|
||||
.store-row img,
|
||||
.store-logo-placeholder {
|
||||
width: 56px;
|
||||
height: 56px;
|
||||
border: 1px solid var(--mall-line);
|
||||
border-radius: 4px;
|
||||
object-fit: cover;
|
||||
}
|
||||
.store-logo-placeholder {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
background: #fafafa;
|
||||
color: var(--mall-muted);
|
||||
font-size: 18px;
|
||||
}
|
||||
.store-main {
|
||||
display: flex;
|
||||
flex: 1;
|
||||
|
||||
@@ -1,7 +1,6 @@
|
||||
<script setup lang="ts">
|
||||
import type { AccountSummary, Order, Product } from "@vmall/shared";
|
||||
import type { AccountSummary, Order, ProductFavorite } from "@vmall/shared";
|
||||
import { t as pick } from "@vmall/shared";
|
||||
import { MOCK_FAVORITES, lowestSku, productById } from "~/mock/data";
|
||||
|
||||
definePageMeta({ middleware: "auth" });
|
||||
|
||||
@@ -9,6 +8,8 @@ const { locale, t } = useI18n();
|
||||
const { $api } = useNuxtApp();
|
||||
const orders = ref<Order[]>([]);
|
||||
const stats = ref<AccountSummary | null>(null);
|
||||
const favoriteProducts = ref<ProductFavorite[]>([]);
|
||||
const favoriteProductTotal = ref(0);
|
||||
const loading = ref(true);
|
||||
|
||||
async function loadOrders(): Promise<void> {
|
||||
@@ -30,9 +31,23 @@ async function loadStats(): Promise<void> {
|
||||
}
|
||||
}
|
||||
|
||||
async function loadFavorites(): Promise<void> {
|
||||
try {
|
||||
const page = await $api.listFavorites({ kind: "product", page: 1, per_page: 8 });
|
||||
favoriteProducts.value = page.items.filter(
|
||||
(row): row is ProductFavorite => row.kind === "product",
|
||||
);
|
||||
favoriteProductTotal.value = page.total;
|
||||
} catch {
|
||||
favoriteProducts.value = [];
|
||||
favoriteProductTotal.value = 0;
|
||||
}
|
||||
}
|
||||
|
||||
onMounted(() => {
|
||||
void loadOrders();
|
||||
void loadStats();
|
||||
void loadFavorites();
|
||||
});
|
||||
|
||||
const counts = computed(() => ({
|
||||
@@ -50,20 +65,6 @@ const statusLinks = computed(() => [
|
||||
{ key: "completed", label: t("user.completed"), count: counts.value.completed, to: "/user/orders?status=completed" },
|
||||
{ key: "afterSale", label: t("user.afterSale"), count: counts.value.afterSale, to: "/user/orders?status=after-sale" },
|
||||
]);
|
||||
|
||||
const favoriteProducts = computed(() =>
|
||||
MOCK_FAVORITES.filter((favorite) => favorite.kind === "product")
|
||||
.map((favorite) => productById(favorite.refId))
|
||||
.filter((product): product is Product => product !== null)
|
||||
.map((product) => {
|
||||
const sku = lowestSku(product);
|
||||
return {
|
||||
product,
|
||||
amountMinor: sku?.price_minor ?? null,
|
||||
currency: sku?.currency ?? null,
|
||||
};
|
||||
}),
|
||||
);
|
||||
</script>
|
||||
|
||||
<template>
|
||||
@@ -123,13 +124,13 @@ const favoriteProducts = computed(() =>
|
||||
</section>
|
||||
|
||||
<section class="mpanel">
|
||||
<h2 class="mpanel-title">{{ t("user.favoriteProducts") }}</h2>
|
||||
<h2 class="mpanel-title">{{ t("user.favoriteProducts") }} ({{ favoriteProductTotal }})</h2>
|
||||
<UiEmptyState v-if="favoriteProducts.length === 0" :text="t('user.noFavorites')" />
|
||||
<div v-else class="favorite-grid">
|
||||
<NuxtLink v-for="item in favoriteProducts" :key="item.product.id" :to="`/goods/${item.product.slug}`" class="favorite-card hover-lift">
|
||||
<img :src="item.product.images[0] || '/mock/product-1.svg'" :alt="pick(item.product.name, locale)" />
|
||||
<NuxtLink v-for="item in favoriteProducts" :key="item.id" :to="`/goods/${item.product.slug}`" class="favorite-card hover-lift">
|
||||
<img :src="item.product.image || '/mock/product-1.svg'" :alt="pick(item.product.name, locale)" />
|
||||
<span>{{ pick(item.product.name, locale) }}</span>
|
||||
<PriceText v-if="item.amountMinor !== null && item.currency" :amount-minor="item.amountMinor" :currency="item.currency" />
|
||||
<PriceText v-if="item.product.price_minor !== null && item.product.currency" :amount-minor="item.product.price_minor" :currency="item.product.currency" />
|
||||
</NuxtLink>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
Reference in New Issue
Block a user