vmall/apps/mall/pages/user/favorites.vue

<script setup lang="ts">
import type { Favorite, Paged, ProductFavorite, ShopFavorite } from "@vmall/shared";
import { t as pick } from "@vmall/shared";

definePageMeta({ middleware: "auth" });

const { locale, t } = useI18n();
const { $api } = useNuxtApp();

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: "shop", label: t("user.favoriteStoresTab") },
]);

const productRows = computed(() =>
  result.value.items.filter((row): row is ProductFavorite => row.kind === "product"),
);
const storeRows = computed(() =>
  result.value.items.filter((row): row is ShopFavorite => row.kind === "shop"),
);

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;
  }
}

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="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.id" class="product-card hover-lift">
              <NuxtLink :to="`/goods/${item.product.slug}`" class="cover">
                <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.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>
        </div>

        <div v-else>
          <UiEmptyState v-if="storeRows.length === 0" :text="t('user.noFavoriteStores')" />
          <div v-else class="store-list">
            <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(item.shop.name, locale) }}</strong>
                <span>{{ item.shop.company }}</span>
              </div>
              <div class="store-actions">
                <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>
</template>

<style scoped>
.favorites-panel {
  min-height: 560px;
}
.product-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
}
.product-card {
  border: 1px solid var(--mall-line);
  background: #fff;
}
.cover {
  display: block;
  border-bottom: 1px solid var(--mall-line);
}
.cover img {
  display: block;
  width: 100%;
  height: 150px;
  object-fit: contain;
}
.content {
  padding: 10px;
}
.name {
  display: block;
  margin-bottom: 8px;
  color: var(--mall-ink);
  text-decoration: none;
  font-size: 13px;
  line-height: 1.4;
  height: 36px;
  overflow: hidden;
}
.name:hover {
  color: var(--mall-red);
}
.content :deep(.price) {
  display: block;
  margin-bottom: 10px;
  color: var(--mall-red);
  font-size: 16px;
  font-weight: 600;
}
.store-row {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 12px;
  border: 1px solid var(--mall-line);
  margin-bottom: 10px;
}
.store-row:last-child {
  margin-bottom: 0;
}
.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;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
}
.store-main strong {
  color: var(--mall-ink);
  font-size: 14px;
}
.store-main span {
  color: var(--mall-faint);
  font-size: 12px;
}
.store-actions {
  display: flex;
  gap: 8px;
}
@media (max-width: 760px) {
  .product-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .store-row {
    align-items: flex-start;
    flex-direction: column;
  }
}
</style>