pc-10584/app/pages/goods-item/[id].vue

<template>
  <main class="detail">
    <section class="mx-auto max-w-screen-xl px-4 py-8">
      <a-breadcrumb class="detail-breadcrumb">
        <a-breadcrumb-item>
          <NuxtLink to="/">首页</NuxtLink>
        </a-breadcrumb-item>
        <a-breadcrumb-item>
          <span>商品</span>
        </a-breadcrumb-item>
        <a-breadcrumb-item>{{ title }}</a-breadcrumb-item>
      </a-breadcrumb>
    </section>

    <section class="mx-auto max-w-screen-xl px-4 pb-12">
      <a-card class="detail-card" :bordered="false">
        <a-skeleton v-if="pending" active :paragraph="{ rows: 10 }" />

        <a-result
          v-else-if="loadError"
          status="error"
          title="商品加载失败"
          :sub-title="loadError.message"
        >
          <template #extra>
            <a-space>
              <a-button type="primary" @click="refresh()">重试</a-button>
              <a-button @click="goBack">返回</a-button>
            </a-space>
          </template>
        </a-result>

        <a-result
          v-else-if="!goods"
          status="404"
          title="商品不存在"
          sub-title="未找到对应的商品信息。"
        >
          <template #extra>
            <a-space>
              <a-button type="primary" @click="navigateTo('/')">返回首页</a-button>
              <a-button @click="goBack">返回</a-button>
            </a-space>
          </template>
        </a-result>

        <template v-else>
          <a-row :gutter="[24, 24]">
            <a-col :xs="24" :lg="10">
              <div class="detail-cover-wrap">
                <img
                  class="detail-cover"
                  :src="coverUrl"
                  :alt="title"
                  loading="lazy"
                  @error="onImgError"
                />
              </div>

              <div v-if="galleryUrls.length" class="mt-4 grid grid-cols-4 gap-3">
                <button
                  v-for="u in galleryUrls"
                  :key="u"
                  type="button"
                  class="thumb"
                  @click="coverUrl = u"
                >
                  <img class="thumb-img" :src="u" :alt="title" loading="lazy" @error="onImgError" />
                </button>
              </div>
            </a-col>

            <a-col :xs="24" :lg="14">
              <div class="detail-title-row">
                <a-typography-title :level="2" class="!mb-2">{{ title }}</a-typography-title>
                <div class="detail-tags">
                  <a-tag v-if="unitName" color="blue">{{ unitName }}</a-tag>
                  <a-tag v-if="typeof sales === 'number'" color="default">销量 {{ sales }}</a-tag>
                  <a-tag v-if="typeof stock === 'number'" color="default">库存 {{ stock }}</a-tag>
                </div>
              </div>

              <div class="detail-price">
                <span class="detail-price-main">{{ formatMoney(price) }}</span>
                <span v-if="unitName" class="detail-price-unit">/ {{ unitName }}</span>
              </div>

              <div class="mt-4">
                <a-descriptions bordered size="small" :column="2">
                  <a-descriptions-item label="商品ID">{{ goodsId }}</a-descriptions-item>
                  <a-descriptions-item label="分类ID">{{ categoryIdText }}</a-descriptions-item>
                  <a-descriptions-item label="创建时间">{{ createTime }}</a-descriptions-item>
                  <a-descriptions-item label="更新时间">{{ updateTime }}</a-descriptions-item>
                </a-descriptions>
              </div>

              <div class="mt-4">
                <a-space>
                  <a-button @click="goBack">返回</a-button>
                  <a-button type="primary" @click="navigateTo('/')">首页</a-button>
                </a-space>
              </div>
            </a-col>
          </a-row>

          <a-divider class="!my-6" />

          <a-typography-title :level="4" class="!mb-3">商品详情</a-typography-title>
          <a-alert v-if="!content" type="info" show-icon message="暂无详情内容" class="mb-4" />
          <RichText v-else :content="content" />
        </template>
      </a-card>
    </section>
  </main>
</template>

<script setup lang="ts">
import { getShopGoods } from '@/api/shop/shopGoods'
import type { ShopGoods } from '@/api/shop/shopGoods/model'

const route = useRoute()
const router = useRouter()

const id = computed(() => {
  const raw = route.params.id
  const text = Array.isArray(raw) ? raw[0] : raw
  const n = Number(text)
  return Number.isFinite(n) ? n : NaN
})

const {
  data: goods,
  pending,
  error: loadError,
  refresh
} = await useAsyncData<ShopGoods | null>(
  () => `shop-goods-${String(route.params.id)}`,
  async () => {
    if (!Number.isFinite(id.value)) return null
    return await getShopGoods(id.value)
  },
  { watch: [id] }
)

function pickString(obj: unknown, key: string) {
  if (!obj || typeof obj !== 'object') return ''
  const record = obj as Record<string, unknown>
  const value = record[key]
  return typeof value === 'string' ? value.trim() : ''
}

function pickNumber(obj: unknown, key: string): number | undefined {
  if (!obj || typeof obj !== 'object') return undefined
  const record = obj as Record<string, unknown>
  const value = record[key]
  if (typeof value === 'number' && Number.isFinite(value)) return value
  if (typeof value === 'string' && value.trim() && Number.isFinite(Number(value))) return Number(value)
  return undefined
}

const title = computed(() => {
  const g = goods.value as unknown as Record<string, unknown> | null
  if (!g) return '商品详情'
  return (
    pickString(g, 'goodsName') ||
    pickString(g, 'name') ||
    pickString(g, 'code') ||
    `商品 ${String(route.params.id)}`
  )
})

const unitName = computed(() => {
  const g = goods.value as unknown as Record<string, unknown> | null
  return g ? pickString(g, 'unitName') : ''
})

const price = computed(() => {
  const g = goods.value as unknown as Record<string, unknown> | null
  if (!g) return undefined
  return (
    pickNumber(g, 'salePrice') ??
    pickNumber(g, 'price') ??
    pickNumber(g, 'chainStorePrice') ??
    pickNumber(g, 'originPrice') ??
    pickNumber(g, 'buyingPrice')
  )
})

const sales = computed(() => {
  const g = goods.value as unknown as Record<string, unknown> | null
  return g ? pickNumber(g, 'sales') : undefined
})

const stock = computed(() => {
  const g = goods.value as unknown as Record<string, unknown> | null
  return g ? pickNumber(g, 'stock') : undefined
})

const goodsId = computed(() => {
  const g = goods.value as unknown as Record<string, unknown> | null
  return g ? pickNumber(g, 'goodsId') : undefined
})

const categoryIdText = computed(() => {
  const g = goods.value as unknown as Record<string, unknown> | null
  const n = g ? pickNumber(g, 'categoryId') : undefined
  return typeof n === 'number' ? String(n) : '-'
})

const createTime = computed(() => {
  const g = goods.value as unknown as Record<string, unknown> | null
  return g ? pickString(g, 'createTime') || '-' : '-'
})

const updateTime = computed(() => {
  const g = goods.value as unknown as Record<string, unknown> | null
  return g ? pickString(g, 'updateTime') || '-' : '-'
})

const content = computed(() => {
  const g = goods.value as unknown as Record<string, unknown> | null
  if (!g) return ''
  return pickString(g, 'content')
})

function parseGalleryUrls(g: ShopGoods | null | undefined) {
  if (!g) return []
  const anyG = g as unknown as Record<string, unknown>
  const files = typeof anyG.files === 'string' ? anyG.files.trim() : ''
  const image = typeof anyG.image === 'string' ? anyG.image.trim() : ''
  const urls: string[] = []
  if (image) urls.push(image)

  if (files) {
    if (files.startsWith('[')) {
      try {
        const parsed = JSON.parse(files) as unknown
        if (Array.isArray(parsed)) {
          for (const it of parsed) {
            const url = typeof (it as any)?.url === 'string' ? String((it as any).url).trim() : ''
            if (url) urls.push(url)
          }
        }
      } catch {
        // ignore JSON parse errors
      }
    } else {
      for (const part of files.split(',')) {
        const u = part.trim()
        if (u) urls.push(u)
      }
    }
  }

  return Array.from(new Set(urls)).filter(Boolean)
}

const galleryUrls = computed(() => parseGalleryUrls(goods.value))
const coverUrl = ref('')

watch(
  () => galleryUrls.value,
  (list) => {
    coverUrl.value =
      list[0] ||
      'https://oss.wsdns.cn/20251226/675876f9f5a84732b22efc02b275440a.png'
  },
  { immediate: true }
)

function onImgError(e: Event) {
  const img = e.target as HTMLImageElement | null
  if (!img) return
  img.onerror = null
  img.src = 'https://oss.wsdns.cn/20251226/675876f9f5a84732b22efc02b275440a.png'
}

function formatMoney(value: unknown) {
  if (typeof value === 'number' && Number.isFinite(value)) return `¥${value.toFixed(2)}`
  const v = typeof value === 'string' ? value.trim() : ''
  if (!v) return '-'
  const n = Number(v)
  if (!Number.isFinite(n)) return `¥${v}`
  return `¥${n.toFixed(2)}`
}

function goBack() {
  if (import.meta.client && window.history.length > 1) {
    router.back()
    return
  }
  navigateTo('/')
}

const seoTitle = computed(() => title.value)
const seoDescription = computed(() => `${title.value}，价格 ${formatMoney(price.value)}${unitName.value ? '/' + unitName.value : ''}`)

useSeoMeta({
  title: seoTitle,
  description: seoDescription,
  ogTitle: seoTitle,
  ogDescription: seoDescription,
  ogType: 'product'
})

const canonicalUrl = computed(() => {
  if (import.meta.client) return window.location.href
  try {
    return useRequestURL().href
  } catch {
    return ''
  }
})

useHead(() => ({
  link: canonicalUrl.value ? [{ rel: 'canonical', href: canonicalUrl.value }] : []
}))
</script>

<style scoped>
.detail {
  background: #f4f6f8;
}

.detail-breadcrumb {
  color: rgba(0, 0, 0, 0.6);
}

.detail-card {
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 10px 28px rgba(0, 0, 0, 0.06);
}

.detail-cover-wrap {
  width: 100%;
  border-radius: 12px;
  overflow: hidden;
  background: #f3f4f6;
  border: 1px solid rgba(0, 0, 0, 0.06);
}

.detail-cover {
  width: 100%;
  height: 360px;
  object-fit: cover;
  display: block;
}

.thumb {
  border: 0;
  padding: 0;
  background: transparent;
  cursor: pointer;
  border-radius: 10px;
  overflow: hidden;
  border: 1px solid rgba(0, 0, 0, 0.06);
}

.thumb-img {
  width: 100%;
  height: 70px;
  object-fit: cover;
  display: block;
  background: #f3f4f6;
}

.detail-title-row {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.detail-tags {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}

.detail-price {
  margin-top: 8px;
  display: flex;
  align-items: baseline;
  gap: 8px;
  flex-wrap: wrap;
}

.detail-price-main {
  color: #16a34a;
  font-size: 28px;
  font-weight: 900;
}

.detail-price-unit {
  color: rgba(0, 0, 0, 0.6);
  font-weight: 700;
}
</style>