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

<script setup lang="ts">
import type { Product } 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 activeTab = ref<"product" | "store">("product");
const favorites = ref(MOCK_FAVORITES.map((item) => ({ ...item })));

const tabs = computed(() => [
  { key: "product", label: t("user.favoriteProductsTab") },
  { key: "store", 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,
      };
    }),
);

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

function removeProductFavorite(productId: string): void {
  favorites.value = favorites.value.filter((item) => !(item.kind === "product" && item.refId === productId));
}

function removeStoreFavorite(storeId: string): void {
  favorites.value = favorites.value.filter((item) => !(item.kind === "store" && item.refId === storeId));
}


</script>

<template>
  <section class="mpanel favorites-panel">
    <h1 class="mpanel-title">{{ t("user.favoritesTitle") }}</h1>
    <UiTabs v-model="activeTab" :tabs="tabs">
      <template #default>
        <div v-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">
              <NuxtLink :to="`/goods/${item.product.slug}`" class="cover">
                <img :src="item.product.images[0] || '/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>
              </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="store in storeRows" :key="store.id" class="store-row">
              <img :src="store.logo" :alt="pick(store.name, locale)" />
              <div class="store-main">
                <strong>{{ pick(store.name, locale) }}</strong>
                <span>{{ store.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>
              </div>
            </article>
          </div>
        </div>
      </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 {
  width: 56px;
  height: 56px;
  border: 1px solid var(--mall-line);
  border-radius: 4px;
  object-fit: cover;
}
.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>