video curcse

miniprogram/src/pages/courses/detail.scss

@@ -65,6 +65,55 @@
   }
 }
 
+.video-section {
+  .course-video {
+    width: 100%;
+    height: 420px;
+    border-radius: 16px;
+    background-color: #000;
+  }
+
+  .video-locked {
+    width: 100%;
+    height: 420px;
+    background-color: #111;
+    border-radius: 16px;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+    border: 1px solid rgba(255, 255, 255, 0.1);
+    
+    .lock-icon {
+      font-size: 60px;
+      margin-bottom: 20px;
+    }
+    
+    .lock-text {
+      color: #fff;
+      font-size: 32px;
+      margin-bottom: 30px;
+      font-weight: bold;
+    }
+    
+    .btn-unlock {
+      background: linear-gradient(90deg, #00f0ff, #0099ff);
+      color: #000;
+      font-size: 28px;
+      padding: 0 40px;
+      height: 80px;
+      line-height: 80px;
+      border-radius: 40px;
+      font-weight: bold;
+      border: none;
+      
+      &::after {
+        border: none;
+      }
+    }
+  }
+}
+
 .section {
   margin-bottom: 50px;
 

miniprogram/src/pages/courses/detail.tsx

@@ -1,4 +1,4 @@
-import { View, Text, Button, Image, ScrollView } from '@tarojs/components'
+import { View, Text, Button, Image, ScrollView, Video } from '@tarojs/components'
 import Taro, { useLoad, useShareAppMessage, useShareTimeline } from '@tarojs/taro'
 import { useState } from 'react'
 import { getVBCourseDetail } from '../../api'
@@ -86,6 +86,28 @@ export default function CourseDetail() {
                 <Text className='price'>¥{detail.price}</Text>
             </View>
 
+            {/* 视频播放区域 */}
+            {detail.is_video_course && (
+                <View className='section video-section'>
+                    <Text className='section-title'>课程视频</Text>
+                    {detail.video_url ? (
+                        <Video
+                            src={detail.video_url}
+                            className='course-video'
+                            poster={detail.cover_image_url}
+                            controls
+                            autoplay={false}
+                        />
+                    ) : (
+                        <View className='video-locked' onClick={handleLaunch}>
+                            <View className='lock-icon'>🔒</View>
+                            <Text className='lock-text'>购买课程后解锁视频</Text>
+                            <Button className='btn-unlock'>立即解锁</Button>
+                        </View>
+                    )}
+                </View>
+            )}
+
             {/* 讲师信息 */}
             <View className='section instructor-section'>
                 <Text className='section-title'>讲师介绍</Text>