47 lines
1.1 KiB
Vue
47 lines
1.1 KiB
Vue
<script setup lang="ts">
|
|
const route = useRoute()
|
|
const casePath = `/cases/${route.params.slug}`
|
|
|
|
const { data: caseDoc } = await useAsyncData(`case-${route.params.slug}`, () => {
|
|
return queryCollection('cases').path(casePath).first()
|
|
})
|
|
|
|
if (!caseDoc.value) {
|
|
throw createError({
|
|
statusCode: 404,
|
|
statusMessage: `Case not found: ${route.params.slug}`
|
|
})
|
|
}
|
|
|
|
useSeo({
|
|
title: caseDoc.value.title,
|
|
description: caseDoc.value.description,
|
|
keywords: caseDoc.value.keywords,
|
|
ogImage: caseDoc.value.cover,
|
|
canonicalPath: casePath
|
|
})
|
|
|
|
const breadcrumbItems = [
|
|
{ label: '首页', to: '/' },
|
|
{ label: '客户案例', to: '/cases' },
|
|
{ label: caseDoc.value.title }
|
|
]
|
|
|
|
const relatedProducts = (caseDoc.value.relatedProducts || []).map((item) => ({
|
|
to: item,
|
|
label: item
|
|
}))
|
|
</script>
|
|
|
|
<template>
|
|
<ProductDetailLayout
|
|
:title="caseDoc!.title"
|
|
:description="caseDoc!.summary"
|
|
:banner-image="caseDoc!.cover"
|
|
:breadcrumb-items="breadcrumbItems"
|
|
:related-products="relatedProducts"
|
|
>
|
|
<ContentRenderer :value="caseDoc" />
|
|
</ProductDetailLayout>
|
|
</template>
|