video curcse

frontend/src/pages/VCCourseDetail.jsx

@@ -106,6 +106,16 @@ const VCCourseDetail = () => {
             message.success('支付成功！报名已完成。');
             setTimeout(() => {
                 setIsModalOpen(false);
+                // 刷新课程详情以获取解锁后的视频URL
+                const fetchDetail = async () => {
+                  try {
+                    const res = await getVCCourseDetail(id);
+                    setCourse(res.data);
+                  } catch (error) {
+                    console.error("Failed to refresh course detail:", error);
+                  }
+                };
+                fetchDetail();
             }, 2000); // Wait 2 seconds before closing
             clearInterval(timer);
           }
@@ -115,7 +125,7 @@ const VCCourseDetail = () => {
       }, 3000);
     }
     return () => clearInterval(timer);
-  }, [payMode, paySuccess, currentOrderId]);
+  }, [payMode, paySuccess, currentOrderId, id]);
 
   const handleEnroll = async (values) => {
       setSubmitting(true);
@@ -396,7 +406,9 @@ const VCCourseDetail = () => {
                         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>
+                        <Title level={3} style={{ color: '#fff', marginTop: 0 }}>
+                            {course.is_video_course ? '购买课程' : '报名咨询'}
+                        </Title>
                         
                         <div style={{ display: 'flex', alignItems: 'baseline', marginBottom: 20 }}>
                             {parseFloat(course.price) > 0 ? (
@@ -412,7 +424,7 @@ const VCCourseDetail = () => {
                             type="primary" 
                             size="large" 
                             block 
-                            icon={<FormOutlined />}
+                            icon={course.is_video_course ? <PlayCircleOutlined /> : <FormOutlined />}
                             style={{ 
                                 height: 50, 
                                 background: '#00f0ff', 
@@ -423,10 +435,12 @@ const VCCourseDetail = () => {
                             }}
                             onClick={() => setIsModalOpen(true)}
                         >
-                            立即报名 / 咨询
+                            {course.is_video_course ? '购买视频课程' : '立即报名 / 咨询'}
                         </Button>
                         <p style={{ color: '#666', marginTop: 15, fontSize: 12, textAlign: 'center' }}>
-                            * 提交后我们的顾问将尽快与您联系确认
+                            {course.is_video_course 
+                                ? '* 支付成功后自动解锁视频内容' 
+                                : '* 提交后我们的顾问将尽快与您联系确认'}
                         </p>
                     </div>
                 </div>
@@ -436,7 +450,7 @@ const VCCourseDetail = () => {
 
       {/* Enroll Modal */}
       <Modal
-        title={payMode ? '微信扫码支付' : `报名/咨询 - ${course.title}`}
+        title={payMode ? '微信扫码支付' : `${course.is_video_course ? '购买课程' : '报名/咨询'} - ${course.title}`}
         open={isModalOpen}
         onCancel={() => setIsModalOpen(false)}
         footer={null}
@@ -463,14 +477,18 @@ const VCCourseDetail = () => {
                         <p style={{ marginTop: 20, fontSize: 16, fontWeight: 'bold' }}>¥{course.price}</p>
                         <p style={{ color: '#666', marginTop: 10 }}>请使用微信扫一扫支付</p>
                         <div style={{ marginTop: 20, fontSize: 12, color: '#999' }}>
-                            支付完成后将自动完成报名
+                            支付完成后将自动{course.is_video_course ? '解锁视频' : '完成报名'}
                         </div>
                     </>
                 )}
             </div>
         ) : (
             <>
-                <p style={{ marginBottom: 20, color: '#666' }}>请填写您的联系方式，我们将为您安排课程顾问。</p>
+                <p style={{ marginBottom: 20, color: '#666' }}>
+                    {course.is_video_course 
+                        ? '请确认您的联系方式，以便我们记录您的购买信息。' 
+                        : '请填写您的联系方式，我们将为您安排课程顾问。'}
+                </p>
                 <Form
                   form={form}
                   layout="vertical"