feat: production页的CMS变更
This commit is contained in:
@ -15,7 +15,7 @@
|
||||
}}</NuxtLink>
|
||||
</el-breadcrumb-item>
|
||||
<el-breadcrumb-item class="text-md opactiy-50">{{
|
||||
production.title
|
||||
production.name
|
||||
}}</el-breadcrumb-item>
|
||||
</el-breadcrumb>
|
||||
|
||||
@ -23,9 +23,9 @@
|
||||
<div class="production-header">
|
||||
<div class="production-image">
|
||||
<el-image
|
||||
v-if="production.production_images.length <= 1"
|
||||
:src="useStrapiMedia(production?.cover?.url || '')"
|
||||
:alt="production.title"
|
||||
v-if="production.images.length <= 1"
|
||||
:src="getImageUrl(production.images[0].image)"
|
||||
:alt="production.name"
|
||||
fit="contain"
|
||||
/>
|
||||
<el-carousel
|
||||
@ -37,13 +37,13 @@
|
||||
arrow="always"
|
||||
>
|
||||
<el-carousel-item
|
||||
v-for="(item, index) in production.production_images || []"
|
||||
v-for="(item, index) in production.images || []"
|
||||
:key="index"
|
||||
>
|
||||
<div class="production-carousel-item">
|
||||
<el-image
|
||||
:src="useStrapiMedia(item.url || '')"
|
||||
:alt="item.alternativeText || production.title"
|
||||
:src="getImageUrl(item.image || '')"
|
||||
:alt="production.name"
|
||||
fit="contain"
|
||||
lazy
|
||||
/>
|
||||
@ -56,7 +56,7 @@
|
||||
</div>
|
||||
|
||||
<div class="production-info">
|
||||
<h1>{{ production.title }}</h1>
|
||||
<h1>{{ production.name }}</h1>
|
||||
<p class="summary">{{ production.summary }}</p>
|
||||
</div>
|
||||
</div>
|
||||
@ -65,24 +65,16 @@
|
||||
<div class="production-content">
|
||||
<el-tabs v-model="activeName" class="production-tabs" stretch>
|
||||
<el-tab-pane label="产品详情" name="details">
|
||||
<markdown-renderer
|
||||
:content="production.production_details || ''"
|
||||
/>
|
||||
<markdown-renderer :content="production.description || ''" />
|
||||
</el-tab-pane>
|
||||
<el-tab-pane label="技术规格" name="specs">
|
||||
<spec-table :data="production.production_specs" />
|
||||
<spec-table :data="production.specs" />
|
||||
</el-tab-pane>
|
||||
<el-tab-pane label="常见问题" name="faq">
|
||||
<question-list :questions="production.questions" />
|
||||
<question-list :questions="production.faqs" />
|
||||
</el-tab-pane>
|
||||
<el-tab-pane label="相关文档" name="documents">
|
||||
<document-list
|
||||
:documents="
|
||||
production.production_documents.map(
|
||||
(item) => item.document
|
||||
) || []
|
||||
"
|
||||
/>
|
||||
<document-list :documents="production.documents" />
|
||||
</el-tab-pane>
|
||||
</el-tabs>
|
||||
</div>
|
||||
@ -114,40 +106,130 @@
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { readItem } from '@directus/sdk';
|
||||
const route = useRoute();
|
||||
const { findOne } = useStrapi();
|
||||
const { getStrapiLocale } = useLocalizations();
|
||||
const strapiLocale = getStrapiLocale();
|
||||
|
||||
const { $directus } = useNuxtApp();
|
||||
const { getImageUrl } = useDirectusImage();
|
||||
|
||||
// 获取路由参数（slug 或 id）
|
||||
const documentId = computed(() => route.params.slug as string);
|
||||
|
||||
const { data, pending, error } = useAsyncData(
|
||||
const { data, pending, error } = await useAsyncData(
|
||||
() => `production-${documentId.value}`,
|
||||
() =>
|
||||
findOne<Production>('productions', documentId.value, {
|
||||
populate: {
|
||||
production_specs: {
|
||||
populate: '*',
|
||||
$directus.request(
|
||||
readItem('products', documentId.value, {
|
||||
fields: [
|
||||
'id',
|
||||
{ translations: ['id', 'name', 'summary', 'description'] },
|
||||
{
|
||||
images: [
|
||||
'id',
|
||||
{
|
||||
product_images_id: [
|
||||
'id',
|
||||
'image',
|
||||
{ translations: ['id', 'caption'] },
|
||||
],
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
specs: [
|
||||
'id',
|
||||
{
|
||||
translations: ['*'],
|
||||
},
|
||||
{
|
||||
specs: [
|
||||
'id',
|
||||
{
|
||||
translations: ['id', 'key'],
|
||||
},
|
||||
'value',
|
||||
],
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
faqs: [
|
||||
'id',
|
||||
{
|
||||
questions_id: [
|
||||
'id',
|
||||
{
|
||||
translations: ['id', 'title', 'content'],
|
||||
},
|
||||
],
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
documents: [
|
||||
'id',
|
||||
{
|
||||
product_documents_id: [
|
||||
'id',
|
||||
{
|
||||
file: ['id', 'filesize', 'filename_download'],
|
||||
},
|
||||
{
|
||||
translations: ['id', 'title'],
|
||||
},
|
||||
],
|
||||
},
|
||||
],
|
||||
},
|
||||
],
|
||||
deep: {
|
||||
translations: {
|
||||
_filter: {
|
||||
languages_code: { _eq: strapiLocale },
|
||||
},
|
||||
},
|
||||
images: {
|
||||
product_images_id: {
|
||||
translations: {
|
||||
_filter: {
|
||||
languages_code: { _eq: strapiLocale },
|
||||
},
|
||||
},
|
||||
},
|
||||
},
|
||||
faqs: {
|
||||
questions_id: {
|
||||
translations: {
|
||||
_filter: {
|
||||
languages_code: { _eq: strapiLocale },
|
||||
},
|
||||
},
|
||||
},
|
||||
},
|
||||
documents: {
|
||||
documents_id: {
|
||||
translations: {
|
||||
_filter: {
|
||||
languages_code: { _eq: strapiLocale },
|
||||
},
|
||||
},
|
||||
},
|
||||
},
|
||||
},
|
||||
production_images: {
|
||||
populate: '*',
|
||||
},
|
||||
cover: {
|
||||
populate: '*',
|
||||
},
|
||||
questions: {
|
||||
populate: '*',
|
||||
},
|
||||
production_documents: {
|
||||
populate: 'document',
|
||||
},
|
||||
},
|
||||
locale: strapiLocale,
|
||||
})
|
||||
})
|
||||
)
|
||||
);
|
||||
|
||||
const production = computed(() => data.value?.data ?? null);
|
||||
console.log('Raw Data: ', data.value);
|
||||
|
||||
const rawProduction = computed(() => data.value ?? null);
|
||||
const production = computed(() => {
|
||||
return toProductView(rawProduction.value);
|
||||
});
|
||||
|
||||
console.log('View Data: ', production.value);
|
||||
|
||||
const activeName = ref('details'); // 默认选中概览标签
|
||||
|
||||
@ -159,7 +241,7 @@
|
||||
|
||||
// SEO
|
||||
useHead({
|
||||
title: computed(() => production.value?.title || 'Product Detail'),
|
||||
title: computed(() => production.value?.name || 'Product Detail'),
|
||||
meta: [
|
||||
{
|
||||
name: 'description',
|
||||
|
||||
Reference in New Issue
Block a user