fix: 相关命名修正
- production -> product
This commit is contained in:
244
app/pages/products/[...slug].vue
Normal file
244
app/pages/products/[...slug].vue
Normal file
@ -0,0 +1,244 @@
|
||||
<template>
|
||||
<div class="page-container">
|
||||
<div v-if="!pending">
|
||||
<div v-if="product">
|
||||
<!-- 面包屑导航 -->
|
||||
<el-breadcrumb class="breadcrumb" separator="/">
|
||||
<el-breadcrumb-item class="text-md opacity-50">
|
||||
<NuxtLink :to="$localePath('/')">{{
|
||||
$t('navigation.home')
|
||||
}}</NuxtLink>
|
||||
</el-breadcrumb-item>
|
||||
<el-breadcrumb-item class="text-md opacity-50">
|
||||
<NuxtLink :to="$localePath('/products')">{{
|
||||
$t('navigation.products')
|
||||
}}</NuxtLink>
|
||||
</el-breadcrumb-item>
|
||||
<el-breadcrumb-item class="text-md opactiy-50">{{
|
||||
product.name
|
||||
}}</el-breadcrumb-item>
|
||||
</el-breadcrumb>
|
||||
|
||||
<!-- 产品详情内容 -->
|
||||
<div class="product-header">
|
||||
<div class="product-image">
|
||||
<el-image
|
||||
v-if="product.images.length <= 1"
|
||||
:src="getImageUrl(product.images[0].image)"
|
||||
:alt="product.name"
|
||||
fit="contain"
|
||||
/>
|
||||
<el-carousel
|
||||
v-else
|
||||
class="product-carousel"
|
||||
height="500px"
|
||||
:autoplay="false"
|
||||
:loop="false"
|
||||
arrow="always"
|
||||
>
|
||||
<el-carousel-item
|
||||
v-for="(item, index) in product.images || []"
|
||||
:key="index"
|
||||
>
|
||||
<div class="product-carousel-item">
|
||||
<el-image
|
||||
:src="getImageUrl(item.image || '')"
|
||||
:alt="product.name"
|
||||
fit="contain"
|
||||
lazy
|
||||
/>
|
||||
<p v-if="item.caption" class="product-image-caption">
|
||||
{{ item.caption }}
|
||||
</p>
|
||||
</div>
|
||||
</el-carousel-item>
|
||||
</el-carousel>
|
||||
</div>
|
||||
|
||||
<div class="product-info">
|
||||
<h1>{{ product.name }}</h1>
|
||||
<p class="summary">{{ product.summary }}</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 产品详细描述 -->
|
||||
<div class="product-content">
|
||||
<el-tabs v-model="activeName" class="product-tabs" stretch>
|
||||
<el-tab-pane label="产品详情" name="details">
|
||||
<markdown-renderer :content="product.description || ''" />
|
||||
</el-tab-pane>
|
||||
<el-tab-pane label="技术规格" name="specs">
|
||||
<spec-table :data="product.specs" />
|
||||
</el-tab-pane>
|
||||
<el-tab-pane label="常见问题" name="faq">
|
||||
<question-list :questions="product.faqs" />
|
||||
</el-tab-pane>
|
||||
<el-tab-pane label="相关文档" name="documents">
|
||||
<document-list :documents="product.documents" />
|
||||
</el-tab-pane>
|
||||
</el-tabs>
|
||||
</div>
|
||||
</div>
|
||||
<!-- 未找到产品 -->
|
||||
<div v-else class="not-found">
|
||||
<el-result
|
||||
icon="warning"
|
||||
:title="$t('product-not-found')"
|
||||
:sub-title="$t('product-not-found-desc')"
|
||||
>
|
||||
<template #extra>
|
||||
<el-button type="primary" @click="$router.push('/products')">
|
||||
{{ $t('back-to-products') }}
|
||||
</el-button>
|
||||
</template>
|
||||
</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">
|
||||
const route = useRoute();
|
||||
|
||||
const { getImageUrl } = useDirectusImage();
|
||||
|
||||
// 获取路由参数
|
||||
const id = computed(() => route.params.slug as string);
|
||||
|
||||
const { data, pending, error } = await useProduct(id.value);
|
||||
|
||||
console.log('Raw Data: ', data.value);
|
||||
|
||||
const rawProduct = computed(() => data.value ?? null);
|
||||
const product = computed(() => {
|
||||
return toProductView(rawProduct.value);
|
||||
});
|
||||
|
||||
console.log('View Data: ', product.value);
|
||||
|
||||
const activeName = ref('details'); // 默认选中概览标签
|
||||
|
||||
watch(error, (value) => {
|
||||
if (value) {
|
||||
console.error('数据获取失败: ', value);
|
||||
}
|
||||
});
|
||||
|
||||
// SEO
|
||||
useHead({
|
||||
title: computed(() => product.value?.name || 'Product Detail'),
|
||||
meta: [
|
||||
{
|
||||
name: 'description',
|
||||
content: computed(() => product.value?.summary || ''),
|
||||
},
|
||||
],
|
||||
});
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.page-container {
|
||||
min-height: 80vh;
|
||||
max-width: 1200px;
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
||||
.breadcrumb {
|
||||
padding: 2rem;
|
||||
}
|
||||
|
||||
.product-header {
|
||||
display: grid;
|
||||
grid-template-columns: 2fr 1fr;
|
||||
gap: 3rem;
|
||||
}
|
||||
|
||||
.product-image .el-image {
|
||||
position: relative;
|
||||
width: 100%;
|
||||
height: 500px;
|
||||
border-radius: 8px;
|
||||
}
|
||||
|
||||
.product-image-caption {
|
||||
position: absolute;
|
||||
bottom: 10px;
|
||||
/* left: 10%; */
|
||||
background-color: rgba(0, 0, 0, 0.2);
|
||||
border-radius: 5px;
|
||||
padding: 5px 10px;
|
||||
text-align: center;
|
||||
color: white;
|
||||
font-size: 0.8rem;
|
||||
}
|
||||
|
||||
.product-carousel :deep(.el-carousel__button) {
|
||||
/* 指示器按钮样式 */
|
||||
width: 8px;
|
||||
height: 8px;
|
||||
border-radius: 50%;
|
||||
background-color: #475669;
|
||||
transition: all 0.3s ease;
|
||||
}
|
||||
|
||||
.product-info h1 {
|
||||
margin-top: 2rem;
|
||||
margin-bottom: 1rem;
|
||||
font-size: 2rem;
|
||||
}
|
||||
|
||||
.summary {
|
||||
color: var(--el-color-info);
|
||||
font-size: 1rem;
|
||||
line-height: 1.6;
|
||||
margin-bottom: 2rem;
|
||||
}
|
||||
|
||||
.product-tabs ::v-deep(.el-tabs__nav) {
|
||||
min-width: 30%;
|
||||
float: right;
|
||||
}
|
||||
|
||||
.product-tabs ::v-deep(.el-tabs__content) {
|
||||
padding: 10px;
|
||||
}
|
||||
|
||||
.product-content h2 {
|
||||
color: var(--el-text-color-primary);
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.loading {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
margin-top: 1rem;
|
||||
}
|
||||
|
||||
.not-found {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
min-height: 400px;
|
||||
}
|
||||
|
||||
/* 响应式设计 */
|
||||
@media (max-width: 768px) {
|
||||
.product-header {
|
||||
grid-template-columns: 1fr;
|
||||
gap: 2rem;
|
||||
}
|
||||
|
||||
.product-info h1 {
|
||||
font-size: 2rem;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
163
app/pages/products/index.vue
Normal file
163
app/pages/products/index.vue
Normal file
@ -0,0 +1,163 @@
|
||||
<template>
|
||||
<div class="page-container">
|
||||
<div class="page-header">
|
||||
<h1 class="page-title">{{ $t('our-products') }}</h1>
|
||||
<el-breadcrumb class="breadcrumb">
|
||||
<el-breadcrumb-item class="text-md opacity-50">
|
||||
<NuxtLink :to="$localePath('/')">{{
|
||||
$t('navigation.home')
|
||||
}}</NuxtLink>
|
||||
</el-breadcrumb-item>
|
||||
<el-breadcrumb-item class="text-md opacity-50">
|
||||
<NuxtLink :to="$localePath('/products')">{{
|
||||
$t('navigation.products')
|
||||
}}</NuxtLink>
|
||||
</el-breadcrumb-item>
|
||||
</el-breadcrumb>
|
||||
</div>
|
||||
<div v-if="!pending" class="page-content">
|
||||
<div class="products-container">
|
||||
<el-collapse v-model="activeNames" class="product-collapse">
|
||||
<el-collapse-item
|
||||
v-for="(group, type) in groupedProducts"
|
||||
:key="type"
|
||||
:title="type || '未分类'"
|
||||
:name="type || 'no-category'"
|
||||
>
|
||||
<div class="group-list">
|
||||
<product-card
|
||||
v-for="product in group"
|
||||
:key="product.id"
|
||||
:slug="product.id.toString()"
|
||||
:image-url="getImageUrl(product.cover.toString())"
|
||||
:name="product.name"
|
||||
:description="product.summary || ''"
|
||||
/>
|
||||
</div>
|
||||
</el-collapse-item>
|
||||
</el-collapse>
|
||||
</div>
|
||||
</div>
|
||||
<div v-else>
|
||||
<el-skeleton :rows="6" animated />
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
const { getImageUrl } = useDirectusImage();
|
||||
|
||||
const { data, pending, error } = useProductList();
|
||||
|
||||
const activeNames = ref<string[]>([]);
|
||||
|
||||
const productsRaw = computed(() => data.value ?? []);
|
||||
const products = computed(() =>
|
||||
productsRaw.value.map((item) => toProductListView(item))
|
||||
);
|
||||
|
||||
// 按类型分组
|
||||
// 兼容 product_type 既可能为对象也可能为字符串
|
||||
const groupedProducts = computed(() => {
|
||||
const groups: Record<string, ProductListView[]> = {};
|
||||
for (const prod of products.value) {
|
||||
let typeKey = '';
|
||||
if (typeof prod.product_type === 'string') {
|
||||
typeKey = prod.product_type;
|
||||
} else if (
|
||||
prod.product_type &&
|
||||
typeof prod.product_type === 'object' &&
|
||||
'name' in prod.product_type
|
||||
) {
|
||||
typeKey = prod.product_type || '';
|
||||
}
|
||||
if (!groups[typeKey]) groups[typeKey] = [];
|
||||
groups[typeKey]?.push(prod);
|
||||
}
|
||||
console.log(groups);
|
||||
return groups;
|
||||
});
|
||||
|
||||
watch(groupedProducts, () => {
|
||||
if (groupedProducts.value) {
|
||||
activeNames.value = [
|
||||
...Object.keys(groupedProducts.value),
|
||||
'no-category',
|
||||
];
|
||||
}
|
||||
});
|
||||
|
||||
watch(error, (value) => {
|
||||
if (value) {
|
||||
console.error('数据获取失败: ', value);
|
||||
}
|
||||
});
|
||||
|
||||
watch(pending, (value) => {
|
||||
if (!value) {
|
||||
console.log('AsyncData: ', data.value);
|
||||
}
|
||||
});
|
||||
|
||||
onMounted(async () => {
|
||||
if (groupedProducts.value) {
|
||||
activeNames.value = [
|
||||
...Object.keys(groupedProducts.value),
|
||||
'no-category',
|
||||
];
|
||||
}
|
||||
});
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.page-container {
|
||||
padding: 2rem;
|
||||
margin: 0 auto;
|
||||
max-width: 1200px;
|
||||
}
|
||||
|
||||
.page-header {
|
||||
display: flex;
|
||||
}
|
||||
|
||||
.page-title {
|
||||
font-size: 2rem;
|
||||
font-weight: bold;
|
||||
color: var(--el-color-primary);
|
||||
margin-bottom: 1rem;
|
||||
}
|
||||
|
||||
.breadcrumb {
|
||||
margin-left: auto;
|
||||
}
|
||||
|
||||
.products-container {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 40px;
|
||||
}
|
||||
|
||||
.product-group {
|
||||
margin-bottom: 32px;
|
||||
}
|
||||
|
||||
.group-title {
|
||||
font-size: 1.5rem;
|
||||
font-weight: bold;
|
||||
margin-bottom: 16px;
|
||||
color: var(--el-color-primary);
|
||||
}
|
||||
|
||||
.group-list {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
padding-top: 1rem;
|
||||
gap: 20px;
|
||||
justify-content: flex-start;
|
||||
}
|
||||
|
||||
:deep(.el-collapse-item__header) {
|
||||
padding: 30px auto;
|
||||
font-size: 1.5rem;
|
||||
}
|
||||
</style>
|
||||
Reference in New Issue
Block a user