From a47be29bf1c374db7cb14befb4e436e9239d61c4 Mon Sep 17 00:00:00 2001
From: jeremygan2021 <jeremygan2021@gmail.com>
Date: Fri, 27 Feb 2026 14:09:11 +0800
Subject: [PATCH] video curcse

---
 frontend/src/pages/VCCourseDetail.jsx     | 34 +++++++++++++++++------
 miniprogram/src/pages/courses/detail.scss | 32 ++++++++++++++++++---
 miniprogram/src/pages/courses/detail.tsx  | 13 ++++++---
 miniprogram/src/pages/user/index.tsx      |  2 +-
 4 files changed, 64 insertions(+), 17 deletions(-)

diff --git a/frontend/src/pages/VCCourseDetail.jsx b/frontend/src/pages/VCCourseDetail.jsx
index 289f522..a05d87f 100644
--- a/frontend/src/pages/VCCourseDetail.jsx
+++ b/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"
diff --git a/miniprogram/src/pages/courses/detail.scss b/miniprogram/src/pages/courses/detail.scss
index ca07e5d..3ee85db 100644
--- a/miniprogram/src/pages/courses/detail.scss
+++ b/miniprogram/src/pages/courses/detail.scss
@@ -78,15 +78,39 @@
     height: 420px;
     background-color: #111;
     border-radius: 16px;
-    display: flex;
-    flex-direction: column;
-    align-items: center;
-    justify-content: center;
+    position: relative;
+    overflow: hidden;
     border: 1px solid rgba(255, 255, 255, 0.1);
     
+    .locked-bg {
+        width: 100%;
+        height: 100%;
+        position: absolute;
+        top: 0;
+        left: 0;
+        z-index: 1;
+        opacity: 0.5;
+        filter: blur(4px);
+    }
+    
+    .locked-overlay {
+        position: absolute;
+        top: 0;
+        left: 0;
+        width: 100%;
+        height: 100%;
+        z-index: 2;
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+        justify-content: center;
+        background: rgba(0, 0, 0, 0.6);
+    }
+    
     .lock-icon {
       font-size: 60px;
       margin-bottom: 20px;
+      color: #00f0ff;
     }
     
     .lock-text {
diff --git a/miniprogram/src/pages/courses/detail.tsx b/miniprogram/src/pages/courses/detail.tsx
index 8c7eac6..932ae35 100644
--- a/miniprogram/src/pages/courses/detail.tsx
+++ b/miniprogram/src/pages/courses/detail.tsx
@@ -100,9 +100,12 @@ export default function CourseDetail() {
                         />
                     ) : (
                         <View className='video-locked' onClick={handleLaunch}>
-                            <View className='lock-icon'>🔒</View>
-                            <Text className='lock-text'>购买课程后解锁视频</Text>
-                            <Button className='btn-unlock'>立即解锁</Button>
+                            <Image src={detail.cover_image_url} className='locked-bg' mode='aspectFill' />
+                            <View className='locked-overlay'>
+                                <View className='lock-icon'>🔒</View>
+                                <Text className='lock-text'>购买课程后解锁视频</Text>
+                                <Button className='btn-unlock'>立即解锁</Button>
+                            </View>
                         </View>
                     )}
                 </View>
@@ -193,7 +196,9 @@ export default function CourseDetail() {
             <Text className='label'>总价:</Text>
             <Text className='amount'>¥{detail.price}</Text>
         </View>
-        <Button className='btn-buy' onClick={handleLaunch}>立即报名</Button>
+        <Button className='btn-buy' onClick={handleLaunch}>
+            {detail.is_video_course ? '立即购买' : '立即报名'}
+        </Button>
       </View>
     </View>
   )
diff --git a/miniprogram/src/pages/user/index.tsx b/miniprogram/src/pages/user/index.tsx
index 4178e4c..79cf15d 100644
--- a/miniprogram/src/pages/user/index.tsx
+++ b/miniprogram/src/pages/user/index.tsx
@@ -342,7 +342,7 @@ export default function UserIndex() {
             )}
 
             <Text className='uid'>ID: {userInfo ? (userInfo.phone_number || userInfo.id || '----') : '----'}</Text>
-            {!userInfo && (
+            {!userInfo?.phone_number && (
                 <View className='login-btns'>
                     <Button 
                         className='btn-login primary'