更新：课程视频播放改成原生video组件

pages/course/details/chapter.vue

@@ -7,21 +7,18 @@
     <view class="page-content" :style="{ height: contentHeight }">
       <!-- 视频播放器 -->
       <view v-if="videoList.length > 0" class="video-section">
-        <!-- <VideoPlayer
+        <VideoPlayer
           ref="videoPlayerRef"
-          :videoList="videoList"
-          :currentIndex="currentVideoIndex"
-          :noRecored="noRecored"
-          @end="handleVideoEnd"
-          @fullscreen="handleFullscreen"
-          @change="handleVideoChange"
-        /> -->
-        <AliyunPlayer
+          v-model:current-index="currentVideoIndex"
+          :video-list="videoList"
+          :countdown-seconds="5"
+        />
+        <!-- <AliyunPlayer
           ref="videoPlayerRef"
           :currentVideo="videoList[currentVideoIndex]"
           :currentVideoList="videoList"
           @unlockChangeVideo="changeVideoLock = false"
-        />
+        /> -->
       </view>
       
       <!-- 课程和章节信息 -->
@@ -48,12 +45,6 @@
           >
             <view class="video-info">
               <text class="video-title">【{{ video.type == "2" ? "音频" : "视频" }}】{{ index + 1 }}</text>
-              <!-- <wd-icon 
-                v-if="currentVideoIndex === index" 
-                name="play-circle" 
-                color="#258feb" 
-                size="14px"
-              /> -->
             </view>
           </view>
         </view>
@@ -113,11 +104,10 @@
 </template>
 
 <script setup lang="ts">
-import { ref, computed, onMounted, onUnmounted, nextTick } from 'vue'
-import { onLoad, onShow, onHide, onUnload } from '@dcloudio/uni-app'
+import { ref, computed } from 'vue'
+import { onLoad, onShow, onHide } from '@dcloudio/uni-app'
 import { courseApi } from '@/api/modules/course'
-// import VideoPlayer from '@/components/course/VideoPlayer.vue'
-import AliyunPlayer from '@/components/ali-video/index.vue'
+import VideoPlayer from '@/components/video-player/index.vue'
 import type { IChapterDetail, IVideo } from '@/types/course'
 
 // 页面参数
@@ -131,6 +121,7 @@ const noRecored = ref(false)
 const chapterDetail = ref<IChapterDetail | null>(null)
 const videoList = ref<IVideo[]>([])
 const currentVideoIndex = ref(0)
+const activeVideoIndex = ref(0)
 const currentTab = ref(0)
 const isFullScreen = ref(false)
 
@@ -184,20 +175,9 @@ const loadChapterDetail = async () => {
         const index = videoList.value.findIndex(v => v.id === res.data.current)
         if (index !== -1) {
           currentVideoIndex.value = index
+          activeVideoIndex.value = index
         }
       }
-
-      // 使用 nextTick 确保组件已经渲染完成
-      await nextTick()
-      if (videoPlayerRef.value) {
-        console.log('准备调用 init 方法')
-        await videoPlayerRef.value.init({
-          currentVideo: videoList.value[currentVideoIndex.value],
-          currentVideoList: videoList.value
-        }, false)
-      } else {
-        console.error('videoPlayerRef.value 为空，无法初始化播放器')
-      }
     }
   } catch (error) {
     console.error('加载章节详情失败:', error)
@@ -209,46 +189,7 @@ const loadChapterDetail = async () => {
  */
 const selectVideo = async (index: number) => {
   if (index === currentVideoIndex.value) return
-  
-  console.log('切换视频:', index, videoList.value[index])
   currentVideoIndex.value = index
-  
-  // 调用播放器的 changeVideo 方法
-  if (videoPlayerRef.value) {
-    await videoPlayerRef.value.changeVideo(videoList.value[index])
-  }
-}
-
-/**
- * 视频切换
- */
-const handleVideoChange = (index: number) => {
-  currentVideoIndex.value = index
-}
-
-/**
- * 视频播放结束
- */
-const handleVideoEnd = () => {
-  // 视频播放结束的处理已在 VideoPlayer 组件中完成
-}
-
-/**
- * 全屏变化
- */
-const handleFullscreen = (fullscreen: boolean) => {
-  isFullScreen.value = fullscreen
-  
-  // 全屏时锁定屏幕方向
-  // #ifdef APP-PLUS
-  if (fullscreen) {
-    plus.screen.unlockOrientation()
-    plus.screen.lockOrientation('landscape-primary')
-  } else {
-    plus.screen.unlockOrientation()
-    plus.screen.lockOrientation('portrait-primary')
-  }
-  // #endif
 }
 
 /**
@@ -267,42 +208,6 @@ const previewImage = (url: string) => {
     current: url
   })
 }
-
-/**
- * 页面显示
- */
-onShow(() => {
-  // 锁定竖屏
-  // #ifdef APP-PLUS
-  plus.screen.unlockOrientation()
-  plus.screen.lockOrientation('portrait-primary')
-  // #endif
-})
-
-/**
- * 页面隐藏
- */
-onHide(() => {
-  // 暂停视频
-  if (videoPlayerRef.value) {
-    videoPlayerRef.value.pause()
-  }
-})
-
-/**
- * 页面卸载
- */
-onUnload(() => {
-  // 停止视频
-  if (videoPlayerRef.value) {
-    videoPlayerRef.value.stop()
-  }
-  
-  // 解锁屏幕方向
-  // #ifdef APP-PLUS
-  plus.screen.unlockOrientation()
-  // #endif
-})
 </script>
 
 <style lang="scss" scoped>
@@ -362,7 +267,7 @@ onUnload(() => {
     gap: 10rpx;
 
     .video-item {
-      padding: 20rpx;
+      padding: 18rpx;
       margin-bottom: 10rpx;
       background-color: #f7f8f9;
       border-radius: 8rpx;

pages/course/details/course.vue

@@ -32,8 +32,10 @@
         :chapters="chapterList"
         :catalogue="currentCatalogue"
         :userVip="userVip"
+        :showRenewBtn="showRenewBtn"
         @purchase="handlePurchase"
         @toVip="goToVip"
+        @renew="handleRenew"
         @click="handleChapterClick"
       />
     </view>