286 lines
13 KiB
JavaScript
286 lines
13 KiB
JavaScript
import React, { useEffect, useState } from 'react';
|
||
import { useParams, useNavigate, useSearchParams } from 'react-router-dom';
|
||
import { Typography, Button, Spin, Empty, Descriptions, Tag, Row, Col, Modal, Form, Input, message } from 'antd';
|
||
import { ArrowLeftOutlined, ClockCircleOutlined, UserOutlined, BookOutlined, FormOutlined } from '@ant-design/icons';
|
||
import { getVCCourseDetail, createOrder } from '../api';
|
||
import { motion } from 'framer-motion';
|
||
|
||
const { Title, Paragraph } = Typography;
|
||
|
||
const VCCourseDetail = () => {
|
||
const { id } = useParams();
|
||
const navigate = useNavigate();
|
||
const [searchParams] = useSearchParams();
|
||
const [course, setCourse] = useState(null);
|
||
const [loading, setLoading] = useState(true);
|
||
const [isModalOpen, setIsModalOpen] = useState(false);
|
||
const [submitting, setSubmitting] = useState(false);
|
||
const [form] = Form.useForm();
|
||
|
||
// 优先从 URL 获取，如果没有则从 localStorage 获取
|
||
const refCode = searchParams.get('ref') || localStorage.getItem('ref_code');
|
||
|
||
useEffect(() => {
|
||
const fetchDetail = async () => {
|
||
try {
|
||
const response = await getVCCourseDetail(id);
|
||
setCourse(response.data);
|
||
} catch (error) {
|
||
console.error("Failed to fetch course detail:", error);
|
||
} finally {
|
||
setLoading(false);
|
||
}
|
||
};
|
||
fetchDetail();
|
||
}, [id]);
|
||
|
||
const handleEnroll = async (values) => {
|
||
setSubmitting(true);
|
||
try {
|
||
const orderData = {
|
||
course: course.id,
|
||
customer_name: values.customer_name,
|
||
phone_number: values.phone_number,
|
||
ref_code: refCode,
|
||
quantity: 1,
|
||
// 将其他信息放入收货地址字段中
|
||
shipping_address: `[课程报名] 微信号: ${values.wechat_id || '无'}, 邮箱: ${values.email || '无'}, 备注: ${values.message || '无'}`
|
||
};
|
||
|
||
await createOrder(orderData);
|
||
message.success('报名咨询已提交，我们的课程顾问将尽快与您联系！');
|
||
setIsModalOpen(false);
|
||
} catch (error) {
|
||
console.error(error);
|
||
message.error('提交失败，请重试');
|
||
} finally {
|
||
setSubmitting(false);
|
||
}
|
||
};
|
||
|
||
if (loading) {
|
||
return (
|
||
<div style={{ textAlign: 'center', padding: '100px 0' }}>
|
||
<Spin size="large" />
|
||
<div style={{ marginTop: 20 }}>Loading...</div>
|
||
</div>
|
||
);
|
||
}
|
||
|
||
if (!course) {
|
||
return (
|
||
<div style={{ textAlign: 'center', padding: '100px 0' }}>
|
||
<Empty description="Course not found" />
|
||
<Button type="primary" onClick={() => navigate('/courses')} style={{ marginTop: 20 }}>
|
||
Return to Courses
|
||
</Button>
|
||
</div>
|
||
);
|
||
}
|
||
|
||
return (
|
||
<div style={{ padding: '20px 0', minHeight: '80vh' }}>
|
||
<Button
|
||
type="text"
|
||
icon={<ArrowLeftOutlined />}
|
||
style={{ color: '#fff', marginBottom: 20 }}
|
||
onClick={() => navigate('/courses')}
|
||
>
|
||
返回课程列表
|
||
</Button>
|
||
|
||
<motion.div
|
||
initial={{ opacity: 0, y: 20 }}
|
||
animate={{ opacity: 1, y: 0 }}
|
||
transition={{ duration: 0.5 }}
|
||
>
|
||
<Row gutter={[40, 40]}>
|
||
<Col xs={24} md={16}>
|
||
<div style={{ textAlign: 'left', marginBottom: 40 }}>
|
||
<div style={{ display: 'flex', gap: '10px', marginBottom: 10 }}>
|
||
{course.tag && <Tag color="volcano">{course.tag}</Tag>}
|
||
<Tag color={course.course_type === 'hardware' ? 'purple' : 'cyan'}>
|
||
{course.course_type_display || (course.course_type === 'hardware' ? '硬件课程' : '软件课程')}
|
||
</Tag>
|
||
</div>
|
||
<Title level={1} style={{ color: '#fff', marginTop: 0 }}>
|
||
{course.title}
|
||
</Title>
|
||
<Paragraph style={{ color: '#888', fontSize: 18 }}>
|
||
{course.description}
|
||
</Paragraph>
|
||
|
||
<div style={{
|
||
marginTop: 30,
|
||
background: 'rgba(255,255,255,0.03)',
|
||
padding: '24px',
|
||
borderRadius: 16,
|
||
border: '1px solid rgba(255,255,255,0.08)',
|
||
backdropFilter: 'blur(10px)',
|
||
boxShadow: '0 8px 32px rgba(0,0,0,0.2)'
|
||
}}>
|
||
<Title level={4} style={{ color: '#fff', marginBottom: 20, display: 'flex', alignItems: 'center' }}>
|
||
<div style={{ width: 4, height: 18, background: '#00f0ff', marginRight: 10, borderRadius: 2 }} />
|
||
课程信息
|
||
</Title>
|
||
<Descriptions
|
||
column={{ xs: 1, sm: 2, md: 3 }}
|
||
labelStyle={{ color: '#888', fontWeight: 'normal' }}
|
||
contentStyle={{ color: '#fff', fontWeight: '500' }}
|
||
>
|
||
<Descriptions.Item label={<span style={{ display: 'flex', alignItems: 'center' }}><UserOutlined style={{ marginRight: 8, color: '#00f0ff' }} /> 讲师</span>}>
|
||
<div style={{ display: 'flex', alignItems: 'center' }}>
|
||
{course.instructor_avatar_url && (
|
||
<img src={course.instructor_avatar_url} alt="avatar" style={{ width: 24, height: 24, borderRadius: '50%', marginRight: 8, objectFit: 'cover' }} />
|
||
)}
|
||
<span>{course.instructor}</span>
|
||
{course.instructor_title && (
|
||
<span style={{
|
||
fontSize: 12,
|
||
background: 'rgba(0, 240, 255, 0.1)',
|
||
color: '#00f0ff',
|
||
padding: '2px 6px',
|
||
borderRadius: 4,
|
||
marginLeft: 8
|
||
}}>
|
||
{course.instructor_title}
|
||
</span>
|
||
)}
|
||
</div>
|
||
</Descriptions.Item>
|
||
<Descriptions.Item label={<span style={{ display: 'flex', alignItems: 'center' }}><ClockCircleOutlined style={{ marginRight: 8, color: '#00f0ff' }} /> 时长</span>}>
|
||
{course.duration}
|
||
</Descriptions.Item>
|
||
<Descriptions.Item label={<span style={{ display: 'flex', alignItems: 'center' }}><BookOutlined style={{ marginRight: 8, color: '#00f0ff' }} /> 课时</span>}>
|
||
{course.lesson_count} 课时
|
||
</Descriptions.Item>
|
||
</Descriptions>
|
||
|
||
{/* 讲师简介 */}
|
||
{course.instructor_desc && (
|
||
<div style={{ marginTop: 20, paddingTop: 20, borderTop: '1px solid rgba(255,255,255,0.05)', color: '#aaa', fontSize: 14 }}>
|
||
<span style={{ color: '#666', marginRight: 10 }}>讲师简介:</span>
|
||
{course.instructor_desc}
|
||
</div>
|
||
)}
|
||
</div>
|
||
|
||
{/* 课程详细内容区域 */}
|
||
{course.content && (
|
||
<div style={{ marginTop: 40 }}>
|
||
<Title level={3} style={{ color: '#fff', marginBottom: 20 }}>课程大纲与详情</Title>
|
||
<div style={{ color: '#ccc', lineHeight: '1.8', fontSize: '16px', whiteSpace: 'pre-line' }}>
|
||
{course.content}
|
||
</div>
|
||
</div>
|
||
)}
|
||
</div>
|
||
|
||
{course.display_detail_image ? (
|
||
<div style={{
|
||
width: '100%',
|
||
maxWidth: '900px',
|
||
margin: '40px auto 0',
|
||
background: '#111',
|
||
borderRadius: 12,
|
||
overflow: 'hidden',
|
||
boxShadow: `0 10px 40px rgba(0, 240, 255, 0.1)`,
|
||
border: `1px solid rgba(0, 240, 255, 0.2)`
|
||
}}>
|
||
<img
|
||
src={course.display_detail_image}
|
||
alt={course.title}
|
||
style={{ width: '100%', display: 'block', height: 'auto' }}
|
||
/>
|
||
</div>
|
||
) : null}
|
||
</Col>
|
||
|
||
<Col xs={24} md={8}>
|
||
<div style={{ position: 'sticky', top: 100 }}>
|
||
<div style={{
|
||
background: '#1f1f1f',
|
||
padding: 30,
|
||
borderRadius: 16,
|
||
border: `1px solid rgba(0, 240, 255, 0.2)`,
|
||
boxShadow: `0 0 20px rgba(0, 240, 255, 0.05)`
|
||
}}>
|
||
<Title level={3} style={{ color: '#fff', marginTop: 0 }}>报名咨询</Title>
|
||
|
||
<div style={{ display: 'flex', alignItems: 'baseline', marginBottom: 20 }}>
|
||
{parseFloat(course.price) > 0 ? (
|
||
<>
|
||
<span style={{ fontSize: 36, color: '#00f0ff', fontWeight: 'bold' }}>¥{course.price}</span>
|
||
</>
|
||
) : (
|
||
<span style={{ fontSize: 36, color: '#00f0ff', fontWeight: 'bold' }}>免费咨询</span>
|
||
)}
|
||
</div>
|
||
|
||
<Button
|
||
type="primary"
|
||
size="large"
|
||
block
|
||
icon={<FormOutlined />}
|
||
style={{
|
||
height: 50,
|
||
background: '#00f0ff',
|
||
borderColor: '#00f0ff',
|
||
color: '#000',
|
||
fontWeight: 'bold',
|
||
fontSize: '16px'
|
||
}}
|
||
onClick={() => setIsModalOpen(true)}
|
||
>
|
||
立即报名 / 咨询
|
||
</Button>
|
||
<p style={{ color: '#666', marginTop: 15, fontSize: 12, textAlign: 'center' }}>
|
||
* 提交后我们的顾问将尽快与您联系确认
|
||
</p>
|
||
</div>
|
||
</div>
|
||
</Col>
|
||
</Row>
|
||
</motion.div>
|
||
|
||
{/* Enroll Modal */}
|
||
<Modal
|
||
title={`报名/咨询 - ${course.title}`}
|
||
open={isModalOpen}
|
||
onCancel={() => setIsModalOpen(false)}
|
||
footer={null}
|
||
destroyOnHidden
|
||
>
|
||
<p style={{ marginBottom: 20, color: '#666' }}>请填写您的联系方式，我们将为您安排课程顾问。</p>
|
||
<Form
|
||
form={form}
|
||
layout="vertical"
|
||
onFinish={handleEnroll}
|
||
>
|
||
<Form.Item label="您的姓名" name="customer_name" rules={[{ required: true, message: '请输入姓名' }]}>
|
||
<Input placeholder="例如：李同学" />
|
||
</Form.Item>
|
||
<Form.Item label="联系电话" name="phone_number" rules={[{ required: true, message: '请输入电话' }]}>
|
||
<Input placeholder="13800000000" />
|
||
</Form.Item>
|
||
<Form.Item label="微信号" name="wechat_id">
|
||
<Input placeholder="选填，方便微信沟通" />
|
||
</Form.Item>
|
||
<Form.Item label="电子邮箱" name="email" rules={[{ type: 'email' }]}>
|
||
<Input placeholder="example@email.com" />
|
||
</Form.Item>
|
||
<Form.Item label="备注/留言" name="message">
|
||
<Input.TextArea rows={4} placeholder="您想了解的任何问题..." />
|
||
</Form.Item>
|
||
|
||
<div style={{ display: 'flex', justifyContent: 'flex-end', gap: 10, marginTop: 20 }}>
|
||
<Button onClick={() => setIsModalOpen(false)}>取消</Button>
|
||
<Button type="primary" htmlType="submit" loading={submitting}>提交报名</Button>
|
||
</div>
|
||
</Form>
|
||
</Modal>
|
||
</div>
|
||
);
|
||
};
|
||
|
||
export default VCCourseDetail; |