feat(SSR): 为站点添加SSR机制 #38
@ -1,6 +1,6 @@
|
||||
<template>
|
||||
<div class="page-container">
|
||||
<div v-if="content">
|
||||
<div v-if="!pending">
|
||||
<el-breadcrumb class="breadcrumb" separator="/">
|
||||
<el-breadcrumb-item class="text-md opacity-50">
|
||||
<NuxtLink :to="$localePath('/')">
|
||||
@ -40,27 +40,19 @@
|
||||
<script setup lang="ts">
|
||||
const { findOne } = useStrapi();
|
||||
const { getStrapiLocale } = useLocalizations();
|
||||
|
||||
const strapiLocale = getStrapiLocale();
|
||||
|
||||
const content = ref<string | null>(null);
|
||||
|
||||
onMounted(async () => {
|
||||
try {
|
||||
const response = await findOne<StrapiCompanyProfile>(
|
||||
'company-profile',
|
||||
undefined,
|
||||
{
|
||||
const { data, pending, error } = useAsyncData('company-profile', () =>
|
||||
findOne<StrapiCompanyProfile>('company-profile', undefined, {
|
||||
locale: strapiLocale,
|
||||
}
|
||||
})
|
||||
);
|
||||
if (response.data) {
|
||||
content.value = response.data.content || '';
|
||||
} else {
|
||||
console.warn('No company profile data found');
|
||||
}
|
||||
} catch (error) {
|
||||
console.error('Failed to fetch company profile:', error);
|
||||
|
||||
const content = computed(() => data.value?.data.content);
|
||||
|
||||
watch(error, (value) => {
|
||||
if (value) {
|
||||
console.error('数据获取失败: ', value);
|
||||
}
|
||||
});
|
||||
</script>
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
<template>
|
||||
<div class="homepage">
|
||||
<div v-if="!pending" class="carousel">
|
||||
<section v-if="!pending" class="carousel-section">
|
||||
<el-carousel
|
||||
class="homepage-carousel"
|
||||
height="auto"
|
||||
@ -8,7 +8,7 @@
|
||||
arrow="never"
|
||||
autoplay
|
||||
>
|
||||
<el-carousel-item v-for="(item, index) in carouselImages" :key="index">
|
||||
<el-carousel-item v-for="(item, index) in carousel" :key="index">
|
||||
<div class="carousel-item">
|
||||
<el-image
|
||||
class="carousel-image"
|
||||
@ -23,11 +23,17 @@
|
||||
</div>
|
||||
</el-carousel-item>
|
||||
</el-carousel>
|
||||
</section>
|
||||
<section v-else>
|
||||
<el-skeleton :rows="5" animated />
|
||||
</section>
|
||||
|
||||
<section class="homepage-section">
|
||||
<h2>推荐产品</h2>
|
||||
<p>
|
||||
探索我们的精选产品，满足您的各种需求。无论是创新技术还是经典设计，我们都为您提供优质选择。
|
||||
</p>
|
||||
<div v-if="!pending">
|
||||
<el-carousel
|
||||
class="recommend-carousel"
|
||||
height="auto"
|
||||
@ -72,10 +78,15 @@
|
||||
</div>
|
||||
</el-carousel-item>
|
||||
</el-carousel>
|
||||
</div>
|
||||
<div v-else>
|
||||
<el-skeleton :rows="4" animated />
|
||||
</div>
|
||||
</section>
|
||||
<section class="homepage-section">
|
||||
<h2>推荐解决方案</h2>
|
||||
<p>了解我们的定制解决方案，帮助您优化业务流程，提高效率。</p>
|
||||
<div v-if="!pending">
|
||||
<el-carousel
|
||||
class="recommend-carousel"
|
||||
height="auto"
|
||||
@ -120,12 +131,12 @@
|
||||
</div>
|
||||
</el-carousel-item>
|
||||
</el-carousel>
|
||||
</div>
|
||||
<div v-else>
|
||||
<el-skeleton :rows="4" animated />
|
||||
</div>
|
||||
</section>
|
||||
</div>
|
||||
<div v-else class="loading">
|
||||
<el-skeleton :rows="3" animated />
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
@ -133,15 +144,8 @@
|
||||
const { getStrapiLocale } = useLocalizations();
|
||||
const strapiLocale = getStrapiLocale();
|
||||
|
||||
const carouselImages = ref<StrapiImage[]>([]);
|
||||
const recommend_productions = ref<Production[]>([]);
|
||||
const recommend_solutions = ref<Solution[]>([]);
|
||||
|
||||
const pending = ref(true);
|
||||
|
||||
onMounted(async () => {
|
||||
try {
|
||||
const response = await findOne<StrapiHomepage>('homepage', undefined, {
|
||||
const { data, pending, error } = useAsyncData('homepage', () =>
|
||||
findOne<StrapiHomepage>('homepage', undefined, {
|
||||
populate: {
|
||||
carousel: {
|
||||
populate: '*',
|
||||
@ -162,18 +166,20 @@
|
||||
},
|
||||
},
|
||||
locale: strapiLocale,
|
||||
});
|
||||
if (response.data) {
|
||||
carouselImages.value = response.data.carousel || [];
|
||||
recommend_productions.value = response.data.recommend_productions || [];
|
||||
recommend_solutions.value = response.data.recommend_solutions || [];
|
||||
console.log('推荐产品:', recommend_productions.value);
|
||||
console.log('推荐解决方案:', recommend_solutions.value);
|
||||
}
|
||||
} catch (error) {
|
||||
console.error('Error fetching homepage data:', error);
|
||||
} finally {
|
||||
pending.value = false;
|
||||
})
|
||||
);
|
||||
|
||||
const carousel = computed(() => data.value?.data.carousel || []);
|
||||
const recommend_productions = computed(
|
||||
() => data.value?.data.recommend_productions || []
|
||||
);
|
||||
const recommend_solutions = computed(
|
||||
() => data.value?.data.recommend_solutions || []
|
||||
);
|
||||
|
||||
watch(error, (value) => {
|
||||
if (value) {
|
||||
console.error('数据获取失败: ', value);
|
||||
}
|
||||
});
|
||||
|
||||
@ -213,6 +219,10 @@
|
||||
line-height: 1.6;
|
||||
}
|
||||
|
||||
.carousel-section {
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
.homepage-carousel .el-carousel__item {
|
||||
width: 100%;
|
||||
height: 33vw;
|
||||
|
||||
@ -1,5 +1,6 @@
|
||||
<template>
|
||||
<div class="page-container">
|
||||
<div v-if="!pending">
|
||||
<div v-if="production">
|
||||
<!-- 面包屑导航 -->
|
||||
<el-breadcrumb class="breadcrumb" separator="/">
|
||||
@ -53,6 +54,7 @@
|
||||
</el-carousel-item>
|
||||
</el-carousel>
|
||||
</div>
|
||||
|
||||
<div class="production-info">
|
||||
<h1>{{ production.title }}</h1>
|
||||
<p class="summary">{{ production.summary }}</p>
|
||||
@ -63,7 +65,9 @@
|
||||
<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.production_details || ''"
|
||||
/>
|
||||
</el-tab-pane>
|
||||
<el-tab-pane label="技术规格" name="specs">
|
||||
<spec-table :data="production.production_specs" />
|
||||
@ -74,25 +78,15 @@
|
||||
<el-tab-pane label="相关文档" name="documents">
|
||||
<document-list
|
||||
:documents="
|
||||
production.production_documents.map((item) => item.document) ||
|
||||
[]
|
||||
production.production_documents.map(
|
||||
(item) => item.document
|
||||
) || []
|
||||
"
|
||||
/>
|
||||
</el-tab-pane>
|
||||
</el-tabs>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 加载状态 -->
|
||||
<div v-else-if="pending" class="loading">
|
||||
<el-skeleton style="--el-skeleton-circle-size: 400px">
|
||||
<template #template>
|
||||
<el-skeleton-item variant="circle" />
|
||||
</template>
|
||||
</el-skeleton>
|
||||
<el-skeleton :rows="5" animated />
|
||||
</div>
|
||||
|
||||
<!-- 未找到产品 -->
|
||||
<div v-else class="not-found">
|
||||
<el-result
|
||||
@ -108,6 +102,15 @@
|
||||
</el-result>
|
||||
</div>
|
||||
</div>
|
||||
<div v-else class="loading">
|
||||
<el-skeleton style="--el-skeleton-circle-size: 400px">
|
||||
<template #template>
|
||||
<el-skeleton-item variant="circle" />
|
||||
</template>
|
||||
</el-skeleton>
|
||||
<el-skeleton :rows="5" animated />
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
@ -116,20 +119,13 @@
|
||||
const { getStrapiLocale } = useLocalizations();
|
||||
const strapiLocale = getStrapiLocale();
|
||||
|
||||
const production = ref<Production | null>(null);
|
||||
const pending = ref(true);
|
||||
|
||||
const activeName = ref('details'); // 默认选中概览标签
|
||||
|
||||
// 获取路由参数（slug 或 id）
|
||||
const documentId = computed(() => route.params.slug as string);
|
||||
|
||||
onMounted(async () => {
|
||||
try {
|
||||
const response = await findOne<Production>(
|
||||
'productions',
|
||||
documentId.value,
|
||||
{
|
||||
const { data, pending, error } = useAsyncData(
|
||||
() => `production-${documentId.value}`,
|
||||
() =>
|
||||
findOne<Production>('productions', documentId.value, {
|
||||
populate: {
|
||||
production_specs: {
|
||||
populate: '*',
|
||||
@ -148,19 +144,16 @@
|
||||
},
|
||||
},
|
||||
locale: strapiLocale,
|
||||
}
|
||||
})
|
||||
);
|
||||
if (response.data) {
|
||||
const item = response.data;
|
||||
production.value = {
|
||||
...item,
|
||||
};
|
||||
console.log('Fetched production:', production.value);
|
||||
}
|
||||
} catch (error) {
|
||||
console.error('Failed to fetch production:', error);
|
||||
} finally {
|
||||
pending.value = false;
|
||||
|
||||
const production = computed(() => data.value?.data ?? null);
|
||||
|
||||
const activeName = ref('details'); // 默认选中概览标签
|
||||
|
||||
watch(error, (value) => {
|
||||
if (value) {
|
||||
console.error('数据获取失败: ', value);
|
||||
}
|
||||
});
|
||||
|
||||
|
||||
@ -15,7 +15,7 @@
|
||||
</el-breadcrumb-item>
|
||||
</el-breadcrumb>
|
||||
</div>
|
||||
<div class="page-content">
|
||||
<div v-if="!pending" class="page-content">
|
||||
<div class="productions-container">
|
||||
<el-collapse v-model="activeNames" class="production-collapse">
|
||||
<el-collapse-item
|
||||
@ -38,18 +38,44 @@
|
||||
</el-collapse>
|
||||
</div>
|
||||
</div>
|
||||
<div v-else>
|
||||
<el-skeleton :rows="6" animated />
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
const { find } = useStrapi();
|
||||
const { getStrapiLocale } = useLocalizations();
|
||||
|
||||
const strapiLocale = getStrapiLocale();
|
||||
|
||||
const { data, pending, error } = useAsyncData(
|
||||
'productions',
|
||||
() =>
|
||||
find<Production>('productions', {
|
||||
populate: {
|
||||
cover: {
|
||||
populate: '*',
|
||||
},
|
||||
production_type: {
|
||||
populate: '*',
|
||||
},
|
||||
},
|
||||
filters: {
|
||||
show_in_production_list: {
|
||||
$eq: true,
|
||||
},
|
||||
},
|
||||
locale: strapiLocale,
|
||||
}),
|
||||
{
|
||||
lazy: true,
|
||||
}
|
||||
);
|
||||
|
||||
const activeNames = ref<string[]>([]);
|
||||
|
||||
const productions = ref<Production[]>([]);
|
||||
const productions = computed(() => data.value?.data ?? []);
|
||||
|
||||
// 按类型分组
|
||||
// 兼容 production_type 既可能为对象也可能为字符串
|
||||
@ -72,34 +98,27 @@
|
||||
return groups;
|
||||
});
|
||||
|
||||
onMounted(async () => {
|
||||
try {
|
||||
const response = await find<Production>('productions', {
|
||||
populate: {
|
||||
cover: {
|
||||
populate: '*',
|
||||
},
|
||||
production_type: {
|
||||
populate: '*',
|
||||
},
|
||||
},
|
||||
filters: {
|
||||
show_in_production_list: {
|
||||
$eq: true, // 只获取在产品列表中显示的产品
|
||||
},
|
||||
},
|
||||
locale: strapiLocale,
|
||||
watch(groupedProductions, () => {
|
||||
if (groupedProductions.value) {
|
||||
activeNames.value = [
|
||||
...Object.keys(groupedProductions.value),
|
||||
'no-category',
|
||||
];
|
||||
}
|
||||
});
|
||||
productions.value = response.data.map((item: Production) => ({
|
||||
...item,
|
||||
// 保持 production_type 原始类型，兼容对象或字符串
|
||||
production_type: item.production_type,
|
||||
}));
|
||||
// 默认展开所有分组
|
||||
activeNames.value = Object.keys(groupedProductions.value);
|
||||
activeNames.value.push('no-category'); // 展开未分类
|
||||
} catch (error) {
|
||||
console.error('Failed to fetch productions:', error);
|
||||
|
||||
watch(error, (value) => {
|
||||
if (value) {
|
||||
console.error('数据获取失败: ', value);
|
||||
}
|
||||
});
|
||||
|
||||
onMounted(() => {
|
||||
if (groupedProductions.value) {
|
||||
activeNames.value = [
|
||||
...Object.keys(groupedProductions.value),
|
||||
'no-category',
|
||||
];
|
||||
}
|
||||
});
|
||||
</script>
|
||||
|
||||
@ -101,12 +101,23 @@
|
||||
const localePath = useLocalePath();
|
||||
|
||||
// 搜索相关
|
||||
const loading = ref(true);
|
||||
const { search } = useMeilisearch();
|
||||
const keyword = ref('');
|
||||
const activeRequestId = ref(0);
|
||||
|
||||
const sections = ref<SearchSection[]>([]);
|
||||
const {
|
||||
data: sections,
|
||||
pending: loading,
|
||||
error,
|
||||
} = await useAsyncData(
|
||||
() => `search-${route.query.query ?? ''}`,
|
||||
async () => {
|
||||
const q = String(route.query.query ?? '').trim();
|
||||
if (!q) return [];
|
||||
return await search(q, { limit: 12 });
|
||||
}
|
||||
);
|
||||
|
||||
// 本地化+空Section过滤
|
||||
const filteredSections = computed(() =>
|
||||
sections.value
|
||||
@ -137,7 +148,7 @@
|
||||
return map;
|
||||
});
|
||||
|
||||
// 分类控制
|
||||
// 分页控制
|
||||
const currentPage = ref(1);
|
||||
|
||||
const hasResults = computed(() =>
|
||||
@ -165,7 +176,6 @@
|
||||
return;
|
||||
}
|
||||
|
||||
loading.value = true;
|
||||
try {
|
||||
const results = await search(trimmed, { limit: 12 });
|
||||
if (requestId === activeRequestId.value) {
|
||||
@ -178,10 +188,6 @@
|
||||
if (requestId === activeRequestId.value) {
|
||||
sections.value = [];
|
||||
}
|
||||
} finally {
|
||||
if (requestId === activeRequestId.value) {
|
||||
loading.value = false;
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
@ -203,15 +209,17 @@
|
||||
}
|
||||
);
|
||||
|
||||
onMounted(() => {
|
||||
if (typeof route.query.query === 'string' && route.query.query.trim()) {
|
||||
keyword.value = route.query.query;
|
||||
performSearch(route.query.query);
|
||||
} else {
|
||||
loading.value = false;
|
||||
watch(error, (value) => {
|
||||
if (value) {
|
||||
console.error('数据获取失败: ', value);
|
||||
}
|
||||
});
|
||||
|
||||
onMounted(() => {
|
||||
if (typeof route.query.query === 'string' && route.query.query.trim())
|
||||
keyword.value = route.query.query;
|
||||
});
|
||||
|
||||
useHead(() => ({
|
||||
title: t('search.head-title'),
|
||||
}));
|
||||
|
||||
@ -1,5 +1,6 @@
|
||||
<template>
|
||||
<div class="page-container">
|
||||
<div v-if="!pending">
|
||||
<div v-if="solution">
|
||||
<div class="page-header">
|
||||
<el-breadcrumb class="breadcrumb" separator="/">
|
||||
@ -23,7 +24,8 @@
|
||||
<h1>{{ solution.title }}</h1>
|
||||
<div class="solution-meta">
|
||||
<span class="solution-date">
|
||||
CreatedAt: {{ new Date(solution.createdAt).toLocaleDateString() }}
|
||||
CreatedAt:
|
||||
{{ new Date(solution.createdAt).toLocaleDateString() }}
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
@ -33,6 +35,20 @@
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div v-else class="not-found">
|
||||
<el-result
|
||||
icon="warning"
|
||||
:title="$t('solution-not-found')"
|
||||
:sub-title="$t('solution-not-found-desc')"
|
||||
>
|
||||
<template #extra>
|
||||
<el-button type="primary" @click="$router.push('/productions')">
|
||||
{{ $t('back-to-solutions') }}
|
||||
</el-button>
|
||||
</template>
|
||||
</el-result>
|
||||
</div>
|
||||
</div>
|
||||
<div v-else class="loading">
|
||||
<el-skeleton :rows="5" animated />
|
||||
</div>
|
||||
@ -45,27 +61,23 @@
|
||||
const { getStrapiLocale } = useLocalizations();
|
||||
const strapiLocale = getStrapiLocale();
|
||||
|
||||
const solution = ref<Solution | null>(null);
|
||||
|
||||
// 获取路由参数(documentId)
|
||||
const documentId = computed(() => route.params.slug as string);
|
||||
|
||||
onMounted(async () => {
|
||||
try {
|
||||
const response = await findOne<Solution>('solutions', documentId.value, {
|
||||
const { data, pending, error } = useAsyncData(
|
||||
() => `solution-${documentId.value}`,
|
||||
() =>
|
||||
findOne<Solution>('solutions', documentId.value, {
|
||||
populate: '*',
|
||||
locale: strapiLocale,
|
||||
});
|
||||
if (response.data) {
|
||||
solution.value = {
|
||||
...response.data,
|
||||
// 确保 solution_type 保持原始类型
|
||||
solution_type: response.data.solution_type,
|
||||
};
|
||||
}
|
||||
console.log('Fetched Solution:', solution.value);
|
||||
} catch (error) {
|
||||
console.error('Failed to fetch solution:', error);
|
||||
})
|
||||
);
|
||||
|
||||
const solution = computed(() => data.value?.data ?? null);
|
||||
|
||||
watch(error, (value) => {
|
||||
if (value) {
|
||||
console.error('数据获取失败: ', value);
|
||||
}
|
||||
});
|
||||
</script>
|
||||
@ -127,4 +139,11 @@
|
||||
align-items: center;
|
||||
margin-top: 1rem;
|
||||
}
|
||||
|
||||
.not-found {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
min-height: 400px;
|
||||
}
|
||||
</style>
|
||||
|
||||
@ -15,7 +15,7 @@
|
||||
</el-breadcrumb-item>
|
||||
</el-breadcrumb>
|
||||
</div>
|
||||
<div class="solutions-container">
|
||||
<div v-if="!pending" class="solutions-container">
|
||||
<el-tabs v-model="activeName" class="solutions-tabs">
|
||||
<el-tab-pane :label="$t('all')" name="all">
|
||||
<div class="solution-list">
|
||||
@ -48,18 +48,34 @@
|
||||
</el-tab-pane>
|
||||
</el-tabs>
|
||||
</div>
|
||||
<div v-else>
|
||||
<el-skeleton :rows="6" animated />
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
const { find } = useStrapi();
|
||||
const { getStrapiLocale } = useLocalizations();
|
||||
|
||||
const strapiLocale = getStrapiLocale();
|
||||
|
||||
const { data, pending, error } = useAsyncData('solutions', () =>
|
||||
find<Solution>('solutions', {
|
||||
populate: {
|
||||
cover: {
|
||||
populate: '*',
|
||||
},
|
||||
solution_type: {
|
||||
populate: '*',
|
||||
},
|
||||
},
|
||||
locale: strapiLocale,
|
||||
})
|
||||
);
|
||||
|
||||
const activeName = ref<string>('all');
|
||||
|
||||
const solutions = ref<Solution[]>([]);
|
||||
const solutions = computed(() => data.value?.data ?? []);
|
||||
|
||||
// 按类型分组
|
||||
const groupedSolutions = computed(() => {
|
||||
@ -81,27 +97,9 @@
|
||||
return gourps;
|
||||
});
|
||||
|
||||
onMounted(async () => {
|
||||
try {
|
||||
const response = await find<Solution>('solutions', {
|
||||
populate: {
|
||||
cover: {
|
||||
populate: '*',
|
||||
},
|
||||
solution_type: {
|
||||
populate: '*',
|
||||
},
|
||||
},
|
||||
locale: strapiLocale,
|
||||
});
|
||||
solutions.value = response.data.map((item: Solution) => ({
|
||||
...item,
|
||||
solution_type: item.solution_type,
|
||||
}));
|
||||
console.log('Fetched Solutions:', solutions.value);
|
||||
console.log('Grouped Solutions:', groupedSolutions.value);
|
||||
} catch (error) {
|
||||
console.error('Failed to fetch solutions:', error);
|
||||
watch(error, (value) => {
|
||||
if (value) {
|
||||
console.error('数据获取失败: ', value);
|
||||
}
|
||||
});
|
||||
</script>
|
||||
|
||||
@ -1,6 +1,5 @@
|
||||
<template>
|
||||
<div class="page-container">
|
||||
<div v-if="content">
|
||||
<support-tabs model-value="contact-us" />
|
||||
<div class="page-header">
|
||||
<h1 class="page-title">{{ $t('navigation.contact-info') }}</h1>
|
||||
@ -23,10 +22,9 @@
|
||||
</el-breadcrumb>
|
||||
</div>
|
||||
|
||||
<div class="page-content">
|
||||
<div v-if="!pending" class="page-content">
|
||||
<markdown-renderer :content="content || ''" />
|
||||
</div>
|
||||
</div>
|
||||
<div v-else class="loading">
|
||||
<el-skeleton :rows="5" animated />
|
||||
</div>
|
||||
@ -36,28 +34,20 @@
|
||||
<script setup lang="ts">
|
||||
const { findOne } = useStrapi();
|
||||
const { getStrapiLocale } = useLocalizations();
|
||||
|
||||
const strapiLocale = getStrapiLocale();
|
||||
|
||||
const content = ref<string>('');
|
||||
|
||||
onMounted(async () => {
|
||||
try {
|
||||
const response = await findOne<StrapiContactInfo>(
|
||||
'contact-info',
|
||||
undefined,
|
||||
{
|
||||
const { data, pending, error } = useAsyncData('contact-info', () =>
|
||||
findOne<StrapiContactInfo>('contact-info', undefined, {
|
||||
populate: '*',
|
||||
locale: strapiLocale,
|
||||
}
|
||||
})
|
||||
);
|
||||
if (response.data) {
|
||||
content.value = response.data.content || '';
|
||||
} else {
|
||||
console.warn('No contact info data found');
|
||||
}
|
||||
} catch (error) {
|
||||
console.error('Failed to fetch contact info:', error);
|
||||
|
||||
const content = computed(() => data.value?.data.content ?? '');
|
||||
|
||||
watch(error, (value) => {
|
||||
if (value) {
|
||||
console.error('数据获取失败: ', value);
|
||||
}
|
||||
});
|
||||
</script>
|
||||
|
||||
@ -37,26 +37,23 @@
|
||||
const { getStrapiLocale } = useLocalizations();
|
||||
const strapiLocale = getStrapiLocale();
|
||||
|
||||
const pending = ref(true);
|
||||
|
||||
const documents = ref<StrapiMedia[]>([]);
|
||||
|
||||
onMounted(async () => {
|
||||
try {
|
||||
const response = await find<ProductionDocument>('production-documents', {
|
||||
locale: strapiLocale,
|
||||
const { data, pending, error } = useAsyncData('documents', () =>
|
||||
find<ProductionDocument>('production-documents', {
|
||||
populate: 'document',
|
||||
});
|
||||
if (response.data) {
|
||||
documents.value =
|
||||
response.data.map((item) => ({
|
||||
locale: strapiLocale,
|
||||
})
|
||||
);
|
||||
|
||||
const documents = computed(
|
||||
() =>
|
||||
data.value?.data.map((item) => ({
|
||||
...item.document,
|
||||
})) || [];
|
||||
}
|
||||
} catch (error) {
|
||||
console.error('Error fetching documents:', error);
|
||||
} finally {
|
||||
pending.value = false;
|
||||
})) || []
|
||||
);
|
||||
|
||||
watch(error, (value) => {
|
||||
if (value) {
|
||||
console.error('数据获取失败: ', value);
|
||||
}
|
||||
});
|
||||
</script>
|
||||
|
||||
@ -1,7 +1,7 @@
|
||||
<template>
|
||||
<div class="page-container">
|
||||
<div v-if="pending" class="flex justify-center items-center h-64">
|
||||
<el-spinner />
|
||||
<el-skeleton :rows="6" animated />
|
||||
</div>
|
||||
<div v-else>
|
||||
<support-tabs model-value="faq" />
|
||||
@ -37,22 +37,17 @@
|
||||
const { getStrapiLocale } = useLocalizations();
|
||||
const strapiLocale = getStrapiLocale();
|
||||
|
||||
const questions = ref<Question[]>([]);
|
||||
|
||||
const pending = ref(true);
|
||||
|
||||
onMounted(async () => {
|
||||
try {
|
||||
const faqData = await find<Question>('questions', {
|
||||
const { data, pending, error } = useAsyncData('questions', () =>
|
||||
find<Question>('questions', {
|
||||
locale: strapiLocale,
|
||||
});
|
||||
if (faqData) {
|
||||
questions.value = faqData.data || [];
|
||||
}
|
||||
} catch (error) {
|
||||
console.error('Failed to fetch FAQ data:', error);
|
||||
} finally {
|
||||
pending.value = false;
|
||||
})
|
||||
);
|
||||
|
||||
const questions = computed(() => data.value?.data ?? null);
|
||||
|
||||
watch(error, (value) => {
|
||||
if (value) {
|
||||
console.error('数据获取失败: ', value);
|
||||
}
|
||||
});
|
||||
</script>
|
||||
|
||||
@ -51,6 +51,9 @@
|
||||
"product-not-found": "Product Not Found",
|
||||
"product-not-found-desc": "Sorry, the product you are looking for does not exist or has been removed.",
|
||||
"back-to-productions": "Back to Products",
|
||||
"solution-not-found": "Solution Not Found",
|
||||
"solution-not-found-desc": "Sorry, the solution you are lokking for does not exist or has been removed.",
|
||||
"back-to-solutions": "Back to Solutions",
|
||||
"no-content-available": "No detailed information available",
|
||||
"loading": "Loading...",
|
||||
"our-productions": "Our Productions",
|
||||
|
||||
@ -51,6 +51,9 @@
|
||||
"product-not-found": "产品未找到",
|
||||
"product-not-found-desc": "抱歉，您访问的产品不存在或已被删除。",
|
||||
"back-to-productions": "返回产品列表",
|
||||
"solution-not-found": "解决方案未找到",
|
||||
"solution-not-found-desc": "抱歉，您访问的解决方案不存在或已被删除",
|
||||
"back-to-solutions": "返回解决方案列表",
|
||||
"no-content-available": "暂无详细信息",
|
||||
"loading": "加载中...",
|
||||
"our-productions": "我们的产品",
|
||||
|
||||
Reference in New Issue
Block a user