video curcse

frontend/src/pages/VCCourseDetail.jsx

@@ -1,7 +1,7 @@
 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, CalendarOutlined } from '@ant-design/icons';
+import { ArrowLeftOutlined, ClockCircleOutlined, UserOutlined, BookOutlined, FormOutlined, CalendarOutlined, PlayCircleOutlined, LockOutlined } from '@ant-design/icons';
 import { getVCCourseDetail, createOrder, nativePay, queryOrderStatus } from '../api';
 import { useAuth } from '../context/AuthContext';
 import { QRCodeSVG } from 'qrcode.react';
@@ -214,6 +214,62 @@ const VCCourseDetail = () => {
                         {course.description}
                     </Paragraph>
                     
+                    {/* 视频课程播放区域 */}
+                    {course.is_video_course && (
+                        <div style={{
+                            margin: '30px 0',
+                            background: '#000',
+                            borderRadius: 16,
+                            overflow: 'hidden',
+                            border: '1px solid rgba(0, 240, 255, 0.2)',
+                            boxShadow: '0 8px 32px rgba(0,0,0,0.3)',
+                            position: 'relative',
+                            aspectRatio: '16/9'
+                        }}>
+                            {course.video_url ? (
+                                <video 
+                                    src={course.video_url} 
+                                    controls 
+                                    style={{ width: '100%', height: '100%', objectFit: 'contain' }}
+                                    poster={course.cover_image_url}
+                                >
+                                    您的浏览器不支持视频播放。
+                                </video>
+                            ) : (
+                                <div style={{
+                                    display: 'flex',
+                                    flexDirection: 'column',
+                                    alignItems: 'center',
+                                    justifyContent: 'center',
+                                    height: '100%',
+                                    color: '#fff',
+                                    background: `linear-gradient(rgba(0,0,0,0.7), rgba(0,0,0,0.7)), url(${course.cover_image_url}) no-repeat center/cover`
+                                }}>
+                                    <LockOutlined style={{ fontSize: 48, color: '#00f0ff', marginBottom: 20 }} />
+                                    <Title level={4} style={{ color: '#fff', marginBottom: 10 }}>课程视频内容已锁定</Title>
+                                    <p style={{ color: '#ccc', fontSize: 16 }}>
+                                        请购买或报名该课程以解锁完整视频内容
+                                    </p>
+                                    <Button 
+                                        type="primary" 
+                                        icon={<PlayCircleOutlined />}
+                                        size="large"
+                                        style={{ 
+                                            marginTop: 20,
+                                            background: '#00f0ff',
+                                            borderColor: '#00f0ff',
+                                            color: '#000',
+                                            fontWeight: 'bold'
+                                        }}
+                                        onClick={() => setIsModalOpen(true)}
+                                    >
+                                        立即解锁观看
+                                    </Button>
+                                </div>
+                            )}
+                        </div>
+                    )}
+
                     <div style={{ 
                         marginTop: 30, 
                         background: 'rgba(255,255,255,0.03)',