new
This commit is contained in:
212
frontend/src/pages/activity/Detail.jsx
Normal file
212
frontend/src/pages/activity/Detail.jsx
Normal file
@@ -0,0 +1,212 @@
|
||||
|
||||
import React, { useState, useEffect } from 'react';
|
||||
import { useParams, useNavigate } from 'react-router-dom';
|
||||
import { useQuery, useMutation, useQueryClient } from '@tanstack/react-query';
|
||||
import { motion, useScroll, useTransform } from 'framer-motion';
|
||||
import { ArrowLeftOutlined, ShareAltOutlined, CalendarOutlined, ClockCircleOutlined, EnvironmentOutlined } from '@ant-design/icons';
|
||||
import confetti from 'canvas-confetti';
|
||||
import { message, Spin, Button, Result } from 'antd';
|
||||
import { getActivityDetail, signUpActivity } from '../../api';
|
||||
import styles from '../../components/activity/activity.module.less';
|
||||
import { pageTransition, buttonTap } from '../../animation';
|
||||
|
||||
const ActivityDetail = () => {
|
||||
const { id } = useParams();
|
||||
const navigate = useNavigate();
|
||||
const queryClient = useQueryClient();
|
||||
const { scrollY } = useScroll();
|
||||
|
||||
// Header animation: transparent to white with shadow
|
||||
const headerBg = useTransform(scrollY, [0, 60], ['rgba(255,255,255,0)', 'rgba(255,255,255,1)']);
|
||||
const headerShadow = useTransform(scrollY, [0, 60], ['none', '0 2px 8px rgba(0,0,0,0.1)']);
|
||||
const headerColor = useTransform(scrollY, [0, 60], ['rgba(255,255,255,1)', 'rgba(0,0,0,0.85)']);
|
||||
|
||||
const { data: activity, isLoading, error } = useQuery({
|
||||
queryKey: ['activity', id],
|
||||
queryFn: async () => {
|
||||
try {
|
||||
const res = await getActivityDetail(id);
|
||||
return res.data;
|
||||
} catch (err) {
|
||||
throw new Error(err.response?.data?.detail || 'Failed to load activity');
|
||||
}
|
||||
},
|
||||
staleTime: 5 * 60 * 1000,
|
||||
});
|
||||
|
||||
const signUpMutation = useMutation({
|
||||
mutationFn: () => signUpActivity(id),
|
||||
onSuccess: () => {
|
||||
message.success('报名成功！');
|
||||
confetti({
|
||||
particleCount: 150,
|
||||
spread: 70,
|
||||
origin: { y: 0.6 },
|
||||
colors: ['#00b96b', '#1890ff', '#ffffff']
|
||||
});
|
||||
queryClient.invalidateQueries(['activity', id]);
|
||||
queryClient.invalidateQueries(['activities']);
|
||||
},
|
||||
onError: (err) => {
|
||||
message.error(err.response?.data?.detail || '报名失败，请稍后重试');
|
||||
}
|
||||
});
|
||||
|
||||
const handleShare = async () => {
|
||||
const url = window.location.href;
|
||||
if (navigator.share) {
|
||||
try {
|
||||
await navigator.share({
|
||||
title: activity?.title,
|
||||
text: '来看看这个精彩活动！',
|
||||
url: url
|
||||
});
|
||||
} catch (err) {
|
||||
console.log('Share canceled');
|
||||
}
|
||||
} else {
|
||||
navigator.clipboard.writeText(url);
|
||||
message.success('链接已复制到剪贴板');
|
||||
}
|
||||
};
|
||||
|
||||
if (isLoading) {
|
||||
return (
|
||||
<div style={{ display: 'flex', justifyContent: 'center', alignItems: 'center', height: '100vh', background: '#1f1f1f' }}>
|
||||
<Spin size="large" tip="加载活动详情..." />
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
if (error) {
|
||||
return (
|
||||
<div style={{ padding: 40, background: '#1f1f1f', minHeight: '100vh', display: 'flex', justifyContent: 'center', alignItems: 'center' }}>
|
||||
<Result
|
||||
status="error"
|
||||
title="加载失败"
|
||||
subTitle={error.message}
|
||||
extra={[
|
||||
<Button type="primary" key="back" onClick={() => navigate(-1)}>
|
||||
返回列表
|
||||
</Button>
|
||||
]}
|
||||
/>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
return (
|
||||
<motion.div
|
||||
initial="initial"
|
||||
animate="animate"
|
||||
exit="exit"
|
||||
variants={pageTransition}
|
||||
style={{ background: '#1f1f1f', minHeight: '100vh', color: '#fff' }}
|
||||
>
|
||||
{/* Sticky Header */}
|
||||
<motion.div
|
||||
style={{
|
||||
position: 'fixed',
|
||||
top: 0,
|
||||
left: 0,
|
||||
right: 0,
|
||||
height: 60,
|
||||
zIndex: 100,
|
||||
display: 'flex',
|
||||
justifyContent: 'space-between',
|
||||
alignItems: 'center',
|
||||
padding: '0 20px',
|
||||
background: headerBg,
|
||||
boxShadow: headerShadow,
|
||||
}}
|
||||
>
|
||||
<motion.div
|
||||
onClick={() => navigate(-1)}
|
||||
style={{ cursor: 'pointer', color: headerColor, fontSize: 20 }}
|
||||
>
|
||||
<ArrowLeftOutlined />
|
||||
</motion.div>
|
||||
<motion.div
|
||||
style={{ color: headerColor, fontWeight: 600, opacity: useTransform(scrollY, [100, 200], [0, 1]) }}
|
||||
>
|
||||
{activity.title}
|
||||
</motion.div>
|
||||
<motion.div
|
||||
onClick={handleShare}
|
||||
style={{ cursor: 'pointer', color: headerColor, fontSize: 20 }}
|
||||
>
|
||||
<ShareAltOutlined />
|
||||
</motion.div>
|
||||
</motion.div>
|
||||
|
||||
{/* Hero Image with LayoutId for shared transition */}
|
||||
<div className={styles.detailHeader}>
|
||||
<motion.img
|
||||
layoutId={`activity-card-${id}`}
|
||||
src={activity.display_banner_url || activity.banner_url || activity.cover_image || 'https://via.placeholder.com/800x600'}
|
||||
alt={activity.title}
|
||||
className={styles.detailImage}
|
||||
/>
|
||||
<div style={{
|
||||
position: 'absolute',
|
||||
bottom: 0,
|
||||
left: 0,
|
||||
width: '100%',
|
||||
height: '50%',
|
||||
background: 'linear-gradient(to top, #1f1f1f, transparent)'
|
||||
}} />
|
||||
</div>
|
||||
|
||||
{/* Content */}
|
||||
<div className={styles.detailContent}>
|
||||
<div className={styles.infoCard}>
|
||||
<h1 style={{ fontSize: 28, marginBottom: 16, color: '#fff' }}>{activity.title}</h1>
|
||||
|
||||
<div style={{ display: 'flex', gap: 20, marginBottom: 16, color: 'rgba(255,255,255,0.7)' }}>
|
||||
<div style={{ display: 'flex', alignItems: 'center', gap: 8 }}>
|
||||
<CalendarOutlined />
|
||||
<span>{activity.start_time ? new Date(activity.start_time).toLocaleDateString() : 'TBD'}</span>
|
||||
</div>
|
||||
<div style={{ display: 'flex', alignItems: 'center', gap: 8 }}>
|
||||
<EnvironmentOutlined />
|
||||
<span>{activity.location || '线上活动'}</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div style={{ display: 'flex', gap: 10 }}>
|
||||
<span className={styles.statusTag}>
|
||||
{activity.status || (new Date() < new Date(activity.start_time) ? '报名中' : '已结束')}
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className={styles.richText}>
|
||||
<h3>活动详情</h3>
|
||||
<div dangerouslySetInnerHTML={{ __html: activity.content || '<p>暂无详情描述</p>' }} />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Fixed Footer */}
|
||||
<div className={styles.fixedFooter}>
|
||||
<div style={{ display: 'flex', flexDirection: 'column' }}>
|
||||
<span style={{ fontSize: 12, color: 'rgba(255,255,255,0.5)' }}>距离报名截止</span>
|
||||
<span style={{ color: '#00b96b', fontWeight: 'bold' }}>
|
||||
{/* Simple countdown placeholder */}
|
||||
3天 12小时
|
||||
</span>
|
||||
</div>
|
||||
<motion.button
|
||||
className={styles.actionBtn}
|
||||
variants={buttonTap}
|
||||
whileTap="tap"
|
||||
onClick={handleSignUp}
|
||||
disabled={signUpMutation.isPending || activity.is_signed_up}
|
||||
>
|
||||
{signUpMutation.isPending ? '提交中...' : activity.is_signed_up ? '已报名' : '立即报名'}
|
||||
</motion.button>
|
||||
</div>
|
||||
</motion.div>
|
||||
);
|
||||
};
|
||||
|
||||
export default ActivityDetail;
|
||||
Reference in New Issue
Block a user