113 lines
2.9 KiB
JavaScript
113 lines
2.9 KiB
JavaScript
/**
|
||
* EventDetail - 事件详情页面
|
||
* 使用 DynamicNewsDetailPanel 组件展示事件详情
|
||
*/
|
||
|
||
import React, { useState, useEffect } from 'react';
|
||
import { useParams, useSearchParams } from 'react-router-dom';
|
||
import {
|
||
Box,
|
||
Container,
|
||
Spinner,
|
||
Center,
|
||
Alert,
|
||
AlertIcon,
|
||
AlertTitle,
|
||
AlertDescription,
|
||
Text,
|
||
} from '@chakra-ui/react';
|
||
import { decodeEventId } from '@/utils/idEncoder';
|
||
import { eventService } from '@/services/eventService';
|
||
import { DynamicNewsDetailPanel } from '@/views/Community/components/DynamicNewsDetail';
|
||
import { logger } from '@/utils/logger';
|
||
|
||
const EventDetail = () => {
|
||
const { eventId: pathEventId } = useParams();
|
||
const [searchParams] = useSearchParams();
|
||
|
||
// 优先从查询参数获取加密 ID，兼容旧的路径参数
|
||
const encodedId = searchParams.get('id');
|
||
const eventId = encodedId ? decodeEventId(encodedId) : pathEventId;
|
||
|
||
// 状态
|
||
const [eventData, setEventData] = useState(null);
|
||
const [loading, setLoading] = useState(true);
|
||
const [error, setError] = useState(null);
|
||
|
||
// 加载事件基础数据
|
||
useEffect(() => {
|
||
const loadEventData = async () => {
|
||
if (!eventId) {
|
||
setError('无效的事件ID');
|
||
setLoading(false);
|
||
return;
|
||
}
|
||
|
||
try {
|
||
setLoading(true);
|
||
setError(null);
|
||
const response = await eventService.getEventDetail(eventId);
|
||
setEventData(response.data);
|
||
} catch (err) {
|
||
logger.error('EventDetail', 'loadEventData', err, { eventId });
|
||
setError(err.message || '加载事件数据失败');
|
||
} finally {
|
||
setLoading(false);
|
||
}
|
||
};
|
||
|
||
loadEventData();
|
||
}, [eventId]);
|
||
|
||
// 加载状态
|
||
if (loading) {
|
||
return (
|
||
<Box minH="100vh" w="100%">
|
||
<Center py={20}>
|
||
<Spinner size="xl" color="blue.500" />
|
||
</Center>
|
||
</Box>
|
||
);
|
||
}
|
||
|
||
// 错误状态
|
||
if (error) {
|
||
return (
|
||
<Box minH="100vh" w="100%" p={4}>
|
||
<Container maxW="7xl" py={8}>
|
||
<Center minH="60vh">
|
||
<Alert
|
||
status="error"
|
||
borderRadius="lg"
|
||
maxW="md"
|
||
flexDirection="column"
|
||
textAlign="center"
|
||
p={6}
|
||
>
|
||
<AlertIcon boxSize="40px" mr={0} />
|
||
<AlertTitle mt={4} mb={2} fontSize="lg">
|
||
加载失败
|
||
</AlertTitle>
|
||
<AlertDescription maxWidth="sm">
|
||
{error}
|
||
{eventId && (
|
||
<Text mt={2} fontSize="sm" color="gray.500">
|
||
事件ID: {eventId}
|
||
</Text>
|
||
)}
|
||
</AlertDescription>
|
||
</Alert>
|
||
</Center>
|
||
</Container>
|
||
</Box>
|
||
);
|
||
}
|
||
|
||
// 主内容
|
||
return (
|
||
<Box maxW="7xl" mx="auto"><DynamicNewsDetailPanel event={eventData} showHeader={true} /></Box>
|
||
);
|
||
};
|
||
|
||
export default EventDetail;
|