video curcse

2026-02-27 14:09:11 +08:00
parent f9c104452b
commit a47be29bf1
4 changed files with 64 additions and 17 deletions
--- 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"
--- 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 {
--- 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>
  )
--- 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'