hjc-web/app/templates/template-09/pages/ProductList.vue

<template>
  <div class="min-h-screen bg-white pb-16">
    <div class="t9-container">
      <h1 class="t9-section-title">{{ pageTitle }}</h1>

      <div v-if="pending" class="flex justify-center py-12">
        <SiteLoading />
      </div>
      <SiteError v-else-if="error" message="获取产品列表失败" />

      <!-- 圆形头像网格（对齐原站「名家经典」板块） -->
      <div v-else class="flex flex-wrap justify-center gap-x-7 gap-y-8">
        <NuxtLink
          v-for="item in products"
          :key="item.id ?? item.productId"
          :to="`/product/${item.id ?? item.productId}`"
          class="w-[110px] sm:w-[130px] group"
        >
          <div
            class="w-[110px] h-[110px] sm:w-[130px] sm:h-[130px] rounded-full overflow-hidden bg-[var(--t9-bg-gray)] border-2 border-transparent transition-colors group-hover:border-[var(--t9-primary)]"
          >
            <img
              :src="itemImage(item)"
              :alt="item.productName"
              class="w-full h-full object-cover"
              loading="lazy"
              @error="onImgError"
            >
          </div>
          <p
            class="mt-2.5 text-sm text-center leading-snug t9-clamp-2 transition-colors group-hover:text-[var(--t9-primary)]"
            style="color: var(--t9-text)"
          >{{ item.productName }}</p>
        </NuxtLink>
      </div>

      <!-- 空状态 -->
      <div v-if="!pending && !error && products.length === 0" class="text-center py-20">
        <svg class="w-16 h-16 mx-auto mb-4" style="color: var(--t9-muted-light)" fill="none" viewBox="0 0 24 24" stroke="currentColor">
          <path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M20 7l-8-4-8 4m16 0l-8 4m8-4v10l-8 4m0-10L4 7m8 4v10M4 7v10l8 4" />
        </svg>
        <p style="color: var(--t9-text-secondary)">暂无内容</p>
      </div>

      <!-- 分页 -->
      <div v-if="totalPages > 1" class="flex justify-center mt-12">
        <nav class="flex items-center gap-1.5 flex-wrap justify-center">
          <button
            v-for="p in totalPages"
            :key="p"
            class="min-w-[36px] h-9 px-2 text-sm border transition-colors"
            :style="p === currentPage
              ? 'background-color: var(--t9-primary); border-color: var(--t9-primary); color: #fff'
              : 'background-color: #fff; border-color: var(--t9-border); color: var(--t9-text)'"
            @click="currentPage = p"
          >
            {{ p }}
          </button>
        </nav>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import type { Product, PageResult, ApiEnvelope, CmsNavigation } from '~/types'
import { collectDescendantNavIds } from '~/utils/nav-tree'
import { getCompressedImageUrl } from '~/utils/image'

/**
 * 模板 9 - 产品列表页（墨绿文化出版风）
 * 渲染为圆形头像网格，对齐原站「名家经典」板块
 */
const { allNavigations, fetchSiteInfo } = useSite()
const route = useRoute()

await fetchSiteInfo()

/**
 * 栏目 navigationId：从查询参数或路由参数读取。
 * 优先级（2026-07-21 修正）：route.query.navId > route.params.id
 * （子分类下拉切换通过 ?navId= 传入，必须优先于路径参数，否则切换不生效）
 */
const navigationId = computed<number | undefined>(() => {
  // 1. 查询参数优先（导航子分类下拉切换时传入）
  const qid = route.query.navId as string
  if (qid) {
    const n = Number(qid)
    if (!Number.isNaN(n)) return n
  }
  // 2. 路由参数（/product/:navigationId）
  const pid = route.params.id as string
  if (pid) {
    const n = Number(pid)
    if (!Number.isNaN(n)) return n
  }
  return undefined
})

// 聚合：父栏目访问时递归收集自身 + 所有后代栏目 navigationId，交给后端 IN 查询
const categoryIds = computed<string | undefined>(() => {
  const ids = collectDescendantNavIds(navigationId.value, allNavigations.value || [])
  return ids.length ? ids.join(',') : undefined
})

const currentPage = ref(1)
const limit = 12

const { data, pending, error } = await useFetch<
  ApiEnvelope<PageResult<Product>> | PageResult<Product>
>('/api/product/list', {
  key: `product-list-${categoryIds.value ?? navigationId.value ?? 'all'}-p${currentPage.value}`,
  query: {
    page: currentPage,
    limit,
    ...(categoryIds.value
      ? { categoryIds: categoryIds.value }
      : (navigationId.value ? { navigationId: navigationId.value } : {}))
  },
  watch: [currentPage, categoryIds, navigationId]
})

const products = computed<Product[]>(() => {
  const envelope = data.value as ApiEnvelope<PageResult<Product>>
  const direct = data.value as PageResult<Product>
  return envelope?.data?.list || direct?.list || []
})

const totalCount = computed(() => {
  const envelope = data.value as ApiEnvelope<PageResult<Product>>
  const direct = data.value as PageResult<Product>
  return envelope?.data?.count || envelope?.data?.total || direct?.count || direct?.total || 0
})
const totalPages = computed(() => Math.max(1, Math.ceil(totalCount.value / limit)))

// 切换栏目时回到第 1 页
watch([categoryIds, navigationId], () => {
  currentPage.value = 1
})

/** 页面标题：取当前栏目名称，兜底「名家经典」 */
const pageTitle = computed(() => {
  const navs = allNavigations.value || []
  const findNav = (items: CmsNavigation[]): CmsNavigation | undefined => {
    for (const item of items) {
      if (item.navigationId === navigationId.value) return item
      if (item.children?.length) {
        const found = findNav(item.children)
        if (found) return found
      }
    }
    return undefined
  }
  return findNav(navs)?.title || '名家经典'
})

/** 头像图：兼容 cover / photo / image / images[0] */
const FALLBACK_IMAGE = '/images/template-09/news-default.jpg'
function itemImage(item: Product): string {
  const anyItem = item as Record<string, unknown>
  const raw = (anyItem.cover || anyItem.photo || anyItem.image
    || (Array.isArray(anyItem.images) ? (anyItem.images as string[])[0] : '')) as string
  return raw ? getCompressedImageUrl(raw, { width: 800 }) : FALLBACK_IMAGE
}
function onImgError(e: Event) {
  const el = e.target as HTMLImageElement
  if (el && !el.src.endsWith(FALLBACK_IMAGE)) el.src = FALLBACK_IMAGE
}
</script>