hanhai-official-website/src/views/pages/CaseDetail.vue

<script setup>
import { ref, onMounted, computed, watch } from 'vue';
import { useRoute, useRouter } from 'vue-router';
import PageHeader from '../../components/PageHeader.vue';
import { useCasesStore } from '@/stores/cases';

const route = useRoute();
const router = useRouter();
const { selectedCase } = useCasesStore();

// 获取案例ID
const caseId = computed(() => Number(route.params.id));

// 当前案例数据
const currentCase = ref(null);

// 默认的静态案例数据
const defaultCaseData = {
    id: '1923006946802786306',
    title: '智慧校园管理系统',
    description: '为某知名高校开发的一体化校园管理系统，涵盖教学、行政、学生服务等多个模块',
    imageUrl: 'https://images.unsplash.com/photo-1523240795612-9a054b0db644?ixlib=rb-1.2.1&auto=format&fit=crop&w=1350&q=80',
    categoryName: '企业系统',
    categoryId: 1,
    pdfUrl: '/docs/smart-campus-system.pdf',
    designUrl: 'https://www.figma.com/file/smart-campus-design',
    qrcodeUrl: '/images/smart-campus-qrcode.png',
    gallery: [
        {
            imageUrl: 'https://images.unsplash.com/photo-1523050854058-8df90110c9f1?ixlib=rb-1.2.1&auto=format&fit=crop&w=1350&q=80',
            imageTitle: '系统主界面'
        },
        {
            imageUrl: 'https://images.unsplash.com/photo-1562774053-701939374585?ixlib=rb-1.2.1&auto=format&fit=crop&w=1350&q=80',
            imageTitle: '移动端应用界面'
        },
        {
            imageUrl: 'https://images.unsplash.com/photo-1577896851231-70ef18881754?ixlib=rb-1.2.1&auto=format&fit=crop&w=1350&q=80',
            imageTitle: '数据分析仪表盘'
        }
    ]
};

// 获取案例详情
const getCaseDetail = async () => {
    console.log('当前案例ID:', caseId.value);
    console.log('所有案例:', selectedCase.value);
    
    // 尝试从selectedCase中获取数据
    if (selectedCase.value && selectedCase.value.length > 0) {
        const currentCaseData = selectedCase.value[0];
        console.log('使用的案例数据:', currentCaseData);
        
        // 处理图片路径，如果是数组则取第一个
        if (currentCaseData.imageUrl && typeof currentCaseData.imageUrl === 'string') {
            currentCaseData.image = currentCaseData.imageUrl.split(',')[0];
        }
        
        currentCase.value = currentCaseData;
    } else {
        // 如果没有可用数据，使用默认的静态数据
        console.log('使用默认的静态数据');
        currentCase.value = defaultCaseData;
    }
};

// 返回案例列表
const goBackToList = () => {
    router.push('/cases');
};

// 监听路由参数变化
watch(() => route.params.id, () => {
    getCaseDetail();
});

// 页面加载时获取数据
onMounted(() => {
    getCaseDetail();
});
</script>

<template>
    <div v-if="currentCase" class="case-detail-page">
        <!-- 页面头部 -->
        <PageHeader 
            :title="currentCase.title" 
            :subtitle="currentCase.description" 
            :backgroundImage="currentCase.image || (currentCase.imageUrl && currentCase.imageUrl.split(',')[0])"
            height="50vh">
            <template #header-cta>
                <div class="header-cta" data-aos="fade-up" data-aos-delay="200">
                    <button @click="goBackToList" class="btn-outline">
                        <i class="fas fa-arrow-left"></i> 返回案例列表
                    </button>
                </div>
            </template>
        </PageHeader>

        <!-- 案例资源链接 -->
        <section class="case-resources">
            <div class="container">
                <div class="resources-grid">
                    <!-- PDF文档 -->
                    <div class="resource-item" v-if="currentCase.pdfUrl" data-aos="fade-up">
                        <div class="resource-icon">
                            <i class="fas fa-file-pdf"></i>
                        </div>
                        <h3>功能说明文档</h3>
                        <p>查看完整的项目功能说明文档</p>
                        <a :href="currentCase.pdfUrl" target="_blank" class="btn-primary">
                            查看文档
                        </a>
                    </div>

                    <!-- 设计稿链接 -->
                    <div class="resource-item" v-if="currentCase.designUrl" data-aos="fade-up" data-aos-delay="100">
                        <div class="resource-icon">
                            <i class="fas fa-paint-brush"></i>
                        </div>
                        <h3>设计稿</h3>
                        <p>浏览完整的项目设计方案</p>
                        <a :href="currentCase.designUrl" target="_blank" class="btn-primary">
                            查看设计
                        </a>
                    </div>

                    <!-- 小程序二维码 -->
                    <div class="resource-item" v-if="currentCase.qrcodeUrl" data-aos="fade-up" data-aos-delay="200">
                        <div class="resource-icon">
                            <i class="fas fa-qrcode"></i>
                        </div>
                        <h3>小程序体验</h3>
                        <p>扫码立即体验项目</p>
                        <img :src="currentCase.qrcodeUrl" alt="小程序二维码" class="qrcode-image">
                    </div>
                </div>
            </div>
        </section>
        
        <!-- 项目展示图片 -->
        <section class="case-gallery" v-if="currentCase.gallery && currentCase.gallery.length > 0">
            <div class="container">
                <h3>设计展示</h3>
                <div class="gallery-grid">
                    <div v-for="(image, index) in currentCase.gallery" 
                         :key="index" 
                         class="gallery-item" 
                         data-aos="fade-up"
                         :data-aos-delay="index * 100">
                        <img :src="image.imageUrl" :alt="image.imageTitle">
                        <div class="image-caption">{{ image.imageTitle }}</div>
                    </div>
                </div>
            </div>
        </section>
    </div>
</template>

<style scoped>
.case-detail-page {
    background-color: #f8f9fa;
}

.case-resources {
    padding: 60px 0;
    background-color: white;
}

.resources-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 30px;
    max-width: 1200px;
    margin: 0 auto;
}

.resource-item {
    text-align: center;
    padding: 30px;
    background: white;
    border-radius: 12px;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
    transition: transform 0.3s ease;
}

.resource-item:hover {
    transform: translateY(-5px);
}

.resource-icon {
    font-size: 2.5rem;
    color: #007bff;
    margin-bottom: 20px;
}

.resource-item h3 {
    margin-bottom: 10px;
    color: #333;
}

.resource-item p {
    color: #666;
    margin-bottom: 20px;
}

.btn-primary {
    display: inline-block;
    padding: 10px 20px;
    background-color: #007bff;
    color: white;
    border-radius: 6px;
    text-decoration: none;
    transition: background-color 0.3s ease;
}

.btn-primary:hover {
    background-color: #0056b3;
}

.qrcode-image {
    max-width: 200px;
    margin: 0 auto;
    border-radius: 8px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.case-gallery {
    padding: 60px 0;
    background-color: #f8f9fa;
}

.gallery-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 30px;
    margin-top: 30px;
}

.gallery-item {
    position: relative;
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}

.gallery-item img {
    width: 100%;
    height: 250px;
    object-fit: cover;
    transition: transform 0.3s ease;
}

.gallery-item:hover img {
    transform: scale(1.05);
}

.image-caption {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    padding: 15px;
    background: rgba(0, 0, 0, 0.7);
    color: white;
    font-size: 0.9rem;
}

.container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 20px;
}

h3 {
    text-align: center;
    margin-bottom: 30px;
    color: #333;
}

@media (max-width: 768px) {
    .resources-grid {
        grid-template-columns: 1fr;
    }

    .gallery-grid {
        grid-template-columns: 1fr;
    }

    .case-resources {
        padding: 40px 0;
    }

    .case-gallery {
        padding: 40px 0;
    }
}
</style>