vmall/apps/mall/pages/stores/[id].vue

<script setup lang="ts">
import { t as pick } from "@vmall/shared";
import type { Paged, Product } from "@vmall/shared";
import { lowestSku } from "~/utils/product";

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

const slug = computed(() => {
  const raw = route.params.id;
  return typeof raw === "string" ? raw : raw?.[0] ?? "";
});

// A rejected read (unknown or suspended slug) leaves this null, which renders
// the "unknown store" branch rather than an invented profile.
const { data: shop } = await useAsyncData("shop-profile", () => $api.getShop(slug.value), {
  watch: [slug],
  default: () => null,
});
const store = computed(() => shop.value);

const favorite = ref(false);
// Only sorts the catalog model can answer; sales and comments have no model.
const sortMode = ref<"default" | "price">("default");
const sortOrder = ref<"asc" | "desc">("desc");
const page = ref(1);
const perPage = 12;
const emptyPage: Paged<Product> = { items: [], total: 0, page: 1, per_page: perPage };

const { data: productResult } = await useAsyncData(
  "shop-products",
  () => {
    const current = store.value;
    if (!current) return Promise.resolve(emptyPage);
    return $api.listProducts({
      shop_id: current.id,
      sort: sortMode.value === "price" ? "price" : undefined,
      order: sortMode.value === "price" ? sortOrder.value : undefined,
      page: page.value,
      per_page: perPage,
    });
  },
  { watch: [store, sortMode, sortOrder, page], default: () => emptyPage },
);

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") },
]);

/** Only the scores the platform actually set; nothing is defaulted. */
const rateRows = computed(() => {
  const current = store.value;
  if (!current) return [];
  const rows = [
    { label: t("stores.score"), value: current.score_rating },
    { label: t("stores.agreement"), value: current.score_agreement },
    { label: t("stores.service"), value: current.score_service },
    { label: t("stores.speed"), value: current.score_speed },
  ];
  return rows.filter((row): row is { label: string; value: number } => typeof row.value === "number");
});

function priceMinorOf(product: Product): number {
  return lowestSku(product)?.price_minor ?? 0;
}

function currencyOf(product: Product): string {
  return lowestSku(product)?.currency ?? "USD";
}

function chooseSort(mode: "default" | "price"): 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 v-if="store.banner" 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 v-if="store.logo" :src="store.logo" :alt="pick(store.name, locale)" />
              <span v-else class="store-logo-placeholder" aria-hidden="true">{{ pick(store.name, locale).slice(0, 1) }}</span>
              <div>
                <h1>{{ pick(store.name, locale) }}</h1>
                <p>{{ t("stores.positiveRate") }}</p>
              </div>
            </div>
            <div v-if="rateRows.length" 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 v-if="store.company"><dt>{{ t("stores.company") }}</dt><dd>{{ store.company }}</dd></div>
              <div v-if="store.region"><dt>{{ t("stores.region") }}</dt><dd>{{ store.region }}</dd></div>
              <div v-if="store.address"><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 v-if="store.notice || store.after_sale" class="mpanel notice-card">
            <template v-if="store.notice">
              <h2 class="rail-title">{{ t("stores.notice") }}</h2>
              <p>{{ pick(store.notice, locale) }}</p>
            </template>
            <template v-if="store.after_sale">
              <h2 class="rail-title">{{ t("stores.afterSale") }}</h2>
              <p>{{ pick(store.after_sale, locale) }}</p>
            </template>
          </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>
            </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>