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

api/modules/user.ts

@@ -41,9 +41,9 @@ export async function getVipInfo() {
  */
 export async function getOrderList(current: number, limit: number, orderStatus: string) {
   const res = await mainClient.request<IApiResponse<{ orders: IPageData<IOrder> }>>({
-    url: 'bookAbroad/home/getAbroadOrderList',
+    url: 'common/buyOrder/commonBuyOrderList',
     method: 'POST',
-    data: { current, limit, orderStatus }
+    data: { current, limit, orderStatus, come: '10', userId: uni.getStorageSync('userInfo').id }
   })
   return res
 }

api/modules/video.ts

@@ -0,0 +1,60 @@
+// api/modules/video.ts
+import { createRequestClient } from '../request'
+import { SERVICE_MAP } from '../config'
+import type { IApiResponse } from '../types'
+import type { IVideoCheckResponse } from '@/types/video'
+
+const client = createRequestClient({ baseURL: SERVICE_MAP.MAIN })
+
+/**
+ * 视频相关API
+ */
+export const videoApi = {
+  /**
+   * 获取视频播放信息
+   * 接口: sociology/course/checkVideo
+   * 方法: POST
+   */
+  checkVideo(data: {
+    id: number
+  }) {
+    return client.request<IVideoCheckResponse>({
+      url: 'sociology/course/checkVideo',
+      method: 'POST',
+      data
+    })
+  },
+
+  /**
+   * 保存播放进度
+   * 接口: sociology/course/saveCoursePosition
+   * 方法: POST
+   */
+  saveCoursePosition(data: {
+    videoId: number
+    position: number
+  }) {
+    return client.request<IApiResponse>({
+      url: 'sociology/course/saveCoursePosition',
+      method: 'POST',
+      data
+    })
+  },
+
+  /**
+   * 报告错误视频
+   * 接口: medical/course/addErrorCourse
+   * 方法: POST
+   */
+  addErrorCourse(data: {
+    chapterId: number
+    videoId: number
+    sort: number
+  }) {
+    return client.request<IApiResponse>({
+      url: 'medical/course/addErrorCourse',
+      method: 'POST',
+      data
+    })
+  }
+}

components/ali-video/PopupPlayer.vue

@@ -0,0 +1,295 @@
+<template>
+  <view>
+    <u-popup key="1" :show="videoShow" :round="10" @close="closeVideo">
+      <view class="" style="padding: 10px;">
+        <view>
+          <view class="container">
+            <div
+              ref="videoContent"
+              @tap="renderScript.handleClick"
+              id="url-player-test"
+              :videoData="videoData"
+              :opname="opname"
+              :change:opname="renderScript.opnameChange"
+              :change:videoData="renderScript.receiveMsg"
+            ></div>
+          </view>
+        </view>
+        
+        <div class="fullScreenButton-container">
+          <div
+            :class="`prism-fullscreen-btn ${isFullScreen ? 'fullscreen' : ''}`"
+            @tap="renderScript.changeVideoScreen"
+          ></div>
+        </div>
+        
+        <view class="btn" style="text-align: center;">
+          <button type="primary" @click="closeVideo" size="mini">关闭视频</button>
+        </view>
+      </view>
+    </u-popup>
+  </view>
+</template>
+
+<script setup lang="ts">
+import { ref, nextTick } from 'vue'
+import type { IVideoData } from '@/types/video'
+
+// Props 定义
+interface Props {
+  videoData: IVideoData
+}
+
+const props = defineProps<Props>()
+
+// Emits 定义
+const emit = defineEmits<{
+  close: []
+}>()
+
+// 响应式数据
+const videoShow = ref(true)
+const isFullScreen = ref(false)
+const opname = ref('')
+
+// 方法: 关闭视频
+const closeVideo = () => {
+  opname.value = 'close'
+  nextTick(() => {
+    emit('close')
+  })
+}
+</script>
+
+<script module="renderScript" lang="renderjs">
+// RenderJS 模块 - 保持 Vue2 写法
+// jQuery 在 RenderJS 中通过全局变量访问
+var $ = window.jQuery || window.$
+
+export default {
+  mounted() {
+    console.log(this.options, '这是monted')
+  },
+  
+  data() {
+    return {
+      player: null,
+      curTime: null,
+      curStatus: null
+    }
+  },
+  
+  watch: {
+    curTime(val) {
+      if (this.curTime !== null && this.curStatus !== null) {
+        // 可以添加逻辑
+      }
+    }
+  },
+  
+  methods: {
+    handleClick(event, ownerInstance) {
+      console.log('event at line 165:', event)
+    },
+    
+    emitData(event, ownerInstance) {
+      ownerInstance.callMethod('recordTime', {
+        time: this.curTime,
+        status: this.curStatus
+      })
+    },
+    
+    changeVideoScreen(event, ownerInstance) {
+      var status = this.player.fullscreenService.getIsFullScreen()
+      
+      ownerInstance.callMethod('screenChange', {
+        status: status,
+        primary: status ? 'portrait' : 'landscape'
+      })
+      
+      if (status) {
+        setTimeout(() => {
+          plus.screen.lockOrientation('portrait-primary')
+          this.player.fullscreenService.cancelFullScreen()
+        }, 100)
+      } else {
+        this.player.fullscreenService.requestFullScreen()
+        setTimeout(() => {
+          plus.screen.lockOrientation('landscape-primary')
+        }, 100)
+      }
+    },
+    
+    endEmitData(event, ownerInstance) {
+      ownerInstance.callMethod('handleEnd')
+    },
+    
+    getLive() {
+      if (this.videoData.type == 1) {
+        var fullScreenButtonComponent = Aliplayer.Component({
+          init: function(status, toAddress) {
+            this.fullScreenStatus = status
+            this.$html = $('.fullScreenButton-container')
+          },
+          
+          createEl: function(el) {
+            this.$html.find('.ad').attr('src', this.adAddress)
+            var $adWrapper = this.$html.find('.ad-wrapper')
+            $adWrapper.attr('href', this.toAddress)
+            $adWrapper.click(function() {})
+            $(el).find('.prism-time-display').after(this.$html)
+          },
+          
+          playing: function(player, e) {
+            this.$html.show()
+          }
+        })
+        
+        console.log('this.currentVideoList at line 456111111111111111111111:', this.videoList)
+        
+        var player = new Aliplayer({
+          id: 'url-player-test',
+          vid: this.videoData.videoId,
+          playauth: this.videoData.playAuth,
+          encryptType: 1,
+          playConfig: {
+            EncryptType: 'AliyunVoDEncryption'
+          },
+          width: '100%',
+          height: '200px',
+          playsinline: true,
+          controlBarVisibility: 'click',
+          cover: '',
+          components: [
+            {
+              name: 'adComponent',
+              type: fullScreenButtonComponent,
+              args: ['http://101.201.146.165:8088/Pf-EH/statics/uploadFile/2024-05-10/b0f420c7-9178-41ad-9dd6-f59a64a6e190.png']
+            }
+          ],
+          skinLayout: [
+            { name: 'bigPlayButton', align: 'blabs', x: 30, y: 80 },
+            { name: 'H5Loading', align: 'cc' },
+            { name: 'errorDisplay', align: 'tlabs', x: 0, y: 0 },
+            { name: 'infoDisplay' },
+            { name: 'tooltip', align: 'blabs', x: 0, y: 56 },
+            { name: 'thumbnail' },
+            {
+              name: 'controlBar',
+              align: 'blabs',
+              x: 0,
+              y: 0,
+              children: [
+                { name: 'progress', align: 'blabs', x: 0, y: 44 },
+                { name: 'playButton', align: 'tl', x: 15, y: 12 },
+                { name: 'timeDisplay', align: 'tl', x: 10, y: 7 },
+                { name: 'prism-speed-selector', align: 'tr', x: 15, y: 12 },
+                { name: 'volume', align: 'tr', x: 5, y: 10 }
+              ]
+            }
+          ]
+        }, function(player) {})
+        
+        this.player = player
+      }
+    },
+    
+    opnameChange(newValue, oldValue, ownerVm, vm) {
+      console.log('opnameChange-----------', newValue)
+      if (newValue == 'close') {
+        if (this.player) {
+          this.player.dispose()
+        }
+      }
+    },
+    
+    receiveMsg(newValue, oldValue, ownerVm, vm) {
+      console.log('数据变化newValue', newValue)
+      if (newValue.playAuth) {
+        this.loadWebPlayerSDK()
+      }
+    },
+    
+    checkValue() {
+      console.log(this.videoData, this.videoData.playAuth, '1111888888')
+      if (!this.videoData.playAuth) {
+        setTimeout(() => {
+          this.checkValue()
+        }, 1000)
+      } else {
+        console.log('this.videoList at line 这是这只只是594:', this.currentVideoList)
+        this.getLive()
+      }
+    },
+    
+    loadWebPlayerSDK() {
+      return new Promise((resolve, reject) => {
+        // 先加载 jQuery
+        if (!window.jQuery && !window.$) {
+          const jquery_tag = document.createElement('script')
+          jquery_tag.type = 'text/javascript'
+          jquery_tag.src = 'https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.min.js'
+          jquery_tag.charset = 'utf-8'
+          jquery_tag.onload = () => {
+            $ = window.jQuery || window.$
+            this.loadAliPlayerSDK(resolve, reject)
+          }
+          jquery_tag.onerror = () => {
+            console.error('jQuery 加载失败')
+            reject(new Error('jQuery 加载失败'))
+          }
+          document.body.appendChild(jquery_tag)
+        } else {
+          $ = window.jQuery || window.$
+          this.loadAliPlayerSDK(resolve, reject)
+        }
+      })
+    },
+    
+    loadAliPlayerSDK(resolve, reject) {
+      const s_tag = document.createElement('script')
+      s_tag.type = 'text/javascript'
+      s_tag.src = 'https://g.alicdn.com/apsara-media-box/imp-web-player/2.20.3/aliplayer-min.js'
+      s_tag.charset = 'utf-8'
+      s_tag.onload = () => {
+        const s_tag1 = document.createElement('script')
+        s_tag1.type = 'text/javascript'
+        s_tag1.src = 'https://player.alicdn.com/aliplayer/presentation/js/aliplayercomponents.min.js'
+        s_tag1.charset = 'utf-8'
+        s_tag1.onload = () => {
+          this.checkValue()
+          resolve()
+        }
+        s_tag1.onerror = () => {
+          console.error('阿里云播放器组件加载失败')
+          reject(new Error('阿里云播放器组件加载失败'))
+        }
+        document.body.appendChild(s_tag1)
+      }
+      s_tag.onerror = () => {
+        console.error('阿里云播放器 SDK 加载失败')
+        reject(new Error('阿里云播放器 SDK 加载失败'))
+      }
+      document.body.appendChild(s_tag)
+      
+      const l_tag = document.createElement('link')
+      l_tag.rel = 'stylesheet'
+      l_tag.href = 'https://g.alicdn.com/apsara-media-box/imp-web-player/2.20.3/skins/default/aliplayer-min.css'
+      document.body.appendChild(l_tag)
+    }
+  }
+}
+</script>
+
+<style scoped>
+.fullScreenButton-container {
+  color: #fff;
+  float: right;
+  height: 35px;
+  margin-top: 6px;
+  margin-right: 5px;
+  display: flex;
+  align-items: center;
+  position: relative;
+}
+</style>

components/ali-video/VideoList.vue

@@ -0,0 +1,123 @@
+<template>
+  <view class="richDetail">
+    <view
+      scroll-x="true"
+      class="detail_title video_box"
+      style="background-color: #fff"
+    >
+      <view
+        v-for="(v, i) in dataList"
+        :key="v.id"
+        :class="`video_item ${currentVideo && currentVideo.id == v.id ? 'hot' : ''}`"
+        @click="handleClick(v, i)"
+      >
+        【{{ v.type == '2' ? '音频' : '视频' }}】{{ getNumber(i + 1) }}
+      </view>
+    </view>
+
+    <slot name="richHeadImg"></slot>
+  </view>
+</template>
+
+<script setup lang="ts">
+import type { IVideoInfo, IChapterDetail } from '@/types/video'
+
+// Props 定义
+interface Props {
+  detailInfo: IChapterDetail
+  dataList: IVideoInfo[]
+  currentVideo: IVideoInfo | null
+  changeVideoLock: boolean
+}
+
+const props = defineProps<Props>()
+
+// Emits 定义
+const emit = defineEmits<{
+  open: [video: IVideoInfo]
+}>()
+
+// 方法: 格式化序号为两位数
+const getNumber = (num: number): string => {
+  if (num >= 10) {
+    return num.toString()
+  } else {
+    return `0${num}`
+  }
+}
+
+// 方法: 处理视频点击
+const handleClick = (data: IVideoInfo, index: number) => {
+  if (props.changeVideoLock) {
+    return
+  }
+  console.log('data at line 35:', data)
+  emit('open', data)
+}
+</script>
+
+<style lang="scss" scoped>
+.commonPageBox {
+  padding: 40rpx 0;
+}
+
+.contentBox {
+  .headImage {
+    margin-bottom: 20rpx;
+  }
+
+  .detail_title {
+    padding: 0 20rpx 0;
+    font-size: 26rpx;
+    line-height: 65rpx;
+    font-weight: bold;
+    text-align: center;
+    box-sizing: border-box;
+    margin-bottom: 20rpx;
+    overflow: hidden;
+  }
+
+  .rich_box {
+    padding: 20rpx;
+    box-sizing: border-box;
+
+    p {
+      display: block;
+      text-indent: 2em;
+      letter-spacing: 2px !important;
+      line-height: 46rpx;
+    }
+  }
+}
+
+.richDetail {
+  width: 100%;
+  height: 100%;
+}
+
+.video_box {
+  width: 100%;
+  
+  .video_item {
+    width: 23%;
+    margin-right: 10rpx;
+    margin-bottom: 20rpx;
+    float: left;
+    border: 2rpx solid #2979ff;
+    background: #fff;
+    color: #2979ff;
+    text-align: center;
+    border-radius: 10rpx;
+    box-shadow: 0px 0px 6rpx 0px rgba(255, 255, 255, 1);
+  }
+
+  .video_item:nth-child(4n) {
+    margin-right: 0;
+  }
+}
+
+.hot {
+  background-color: #2979ff !important;
+  color: #fff !important;
+}
+</style>

components/course/ChapterList.vue

@@ -129,6 +129,7 @@ interface Props {
   chapters: IChapter[]
   catalogue: ICatalogue
   userVip: IVipInfo | null
+  showRenewBtn?: boolean
 }
 
 const props = defineProps<Props>()
@@ -136,6 +137,8 @@ const props = defineProps<Props>()
 const emit = defineEmits<{
   click: [chapter: IChapter],
   purchase: [catalogue: ICatalogue],
+  renew: [catalogue: ICatalogue],
+  toVip: [catalogue: ICatalogue],
 }>()
 
 /**
@@ -153,6 +156,16 @@ const goToVip = () => {
   emit('toVip', props.catalogue)
 }
 
+// 续费/复读
+const handleRenew = () => {
+  emit('renew', props.catalogue)
+}
+
+// 领取免费课程
+const handleGetFreeCourse = () => {
+  emit('purchase', props.catalogue)
+}
+
 /**
  * 判断章节是否可以访问
  */

components/course/VideoPlayer.vue

@@ -1,242 +1,394 @@
 <template>
-  <view class="video-player">
-    <!-- 视频播放器 -->
-    <video
-      v-if="currentVideo"
-      :id="videoId"
-      :src="currentVideo.url"
-      :title="currentVideo.title"
-      :controls="true"
-      :show-fullscreen-btn="true"
-      :show-play-btn="true"
-      :enable-progress-gesture="true"
-      :object-fit="objectFit"
-      class="video-element"
-      @fullscreenchange="handleFullscreenChange"
-      @ended="handleVideoEnd"
-      @error="handleVideoError"
-    />
-    
-    <!-- 自动播放下一个提示 -->
-    <view v-if="showCountDown && hasNext" class="countdown-overlay">
-      <view class="countdown-content">
-        <text class="countdown-text">{{ countDownSeconds }}秒后自动播放下一个</text>
-        <wd-button size="small" @click="cancelAutoPlay">
-          取消自动播放
-        </wd-button>
-      </view>
-    </view>
-  </view>
+  <div class="ali-player-wrapper" :style="{ background: '#000' }">
+    <div v-if="showError" class="player-error">{{ errorText }}</div>
+
+    <div ref="playerContainer" class="player-container" :style="{ width: '100%', height: playerHeight }"></div>
+
+    <!-- 倒计时覆盖（可选，父层也可以自行实现） -->
+    <div v-if="showCountDown" class="countdown-overlay">
+      <div class="countdown-text">{{ countDownSeconds }} 秒后播放下一个视频</div>
+      <button class="btn-cancel" @click="cancelNext">取消下一个</button>
+    </div>
+
+    <!-- 控制按钮示例（父层应该控制 UI，我仅提供常用API按钮用于调试） -->
+    <div class="player-controls" style="display:none;">
+      <button @click="play()">播放</button>
+      <button @click="pause()">暂停</button>
+      <button @click="replay()">重播</button>
+      <button @click="enterFullscreen()">全屏</button>
+    </div>
+  </div>
 </template>
 
-<script setup lang="ts">
-import { ref, computed, watch, onMounted, onUnmounted } from 'vue'
-import type { IVideo } from '@/types/course'
+<script lang="ts">
+import { defineComponent, ref, onMounted, onBeforeUnmount, watch, PropType, nextTick } from 'vue';
 
-interface Props {
-  videoList: IVideo[]
-  currentIndex: number
-  noRecored?: boolean  // 是否为试听（不记录进度）
-}
+type Platform = 'web' | 'app-ios' | 'app-android';
 
-const props = defineProps<Props>()
+export default defineComponent({
+  name: 'AliyunPlayer',
+  props: {
+    // videoData: should include fields similar to original: type, m3u8Url, videoUrl, videoId, playAuth, firstTime, id...
+    videoData: { type: Object as PropType<Record<string, any>>, required: true },
+    // platform hint: affects screen lock behavior; default web
+    platform: { type: String as PropType<Platform>, default: 'web' },
+    // height for player area
+    height: { type: String, default: '200px' },
+    // auto start playback
+    autoplay: { type: Boolean, default: true },
+    // how often to auto-save progress in seconds (default 60)
+    autoSaveInterval: { type: Number, default: 60 },
+    // localStorage key prefix for resume data
+    storageKeyPrefix: { type: String, default: 'videoOssList' },
+    // flag: in APP environment should use WebView (true) or try to run player directly in page (false)
+    useWebViewForApp: { type: Boolean, default: false },
+    // urls for loading Aliplayer (allow overriding if needed)
+    playerScriptUrl: { type: String, default: 'https://g.alicdn.com/apsara-media-box/imp-web-player/2.20.3/aliplayer-min.js' },
+    playerComponentsUrl: { type: String, default: 'https://player.alicdn.com/aliplayer/presentation/js/aliplayercomponents.min.js' },
+    playerCssUrl: { type: String, default: 'https://g.alicdn.com/apsara-media-box/imp-web-player/2.20.3/skins/default/aliplayer-min.css' },
+  },
+  emits: [
+    'ready',
+    'play',
+    'pause',
+    'timeupdate',
+    'progress-save', // payload: { videoId, position }
+    'ended',
+    'error',
+    'request-playauth', // in case parent wants to fetch playAuth separately
+    'change-screen',
+    'load-next' // when ended and parent should load next
+  ],
+  setup(props, { emit, expose }) {
+    const playerContainer = ref<HTMLElement | null>(null);
+    const playerInstance = ref<any | null>(null);
+    const scriptLoaded = ref(false);
+    const timerDiff = ref(0);
+    const currentSeconds = ref(0);
+    const pauseTime = ref(0);
+    const saveCounter = ref(0);
+    const autoSaveIntervalId = ref<number | null>(null);
+    const showCountDown = ref(false);
+    const countDownSeconds = ref(5);
+    const countdownTimerId = ref<number | null>(null);
+    const showError = ref(false);
+    const errorText = ref('');
 
-const emit = defineEmits<{
-  end: []
-  fullscreen: [isFullScreen: boolean]
-  change: [index: number]
-}>()
+    const playerHeight = props.height;
 
-const videoId = 'course-video-player'
-const videoContext = ref<any>(null)
-const objectFit = ref<'contain' | 'fill' | 'cover'>('contain')
-const showCountDown = ref(false)
-const countDownSeconds = ref(10)
-const countDownTimer = ref<any>(null)
-
-/**
- * 当前视频
- */
-const currentVideo = computed(() => {
-  if (props.videoList.length === 0) return null
-  return props.videoList[props.currentIndex] || null
-})
-
-/**
- * 是否有下一个视频
- */
-const hasNext = computed(() => {
-  return props.currentIndex < props.videoList.length - 1
-})
-
-/**
- * 初始化视频上下文
- */
-const initVideoContext = () => {
-  videoContext.value = uni.createVideoContext(videoId)
-}
-
-/**
- * 视频播放结束
- */
-const handleVideoEnd = () => {
-  emit('end')
-  
-  // 如果有下一个视频，开始倒计时
-  if (hasNext.value) {
-    startCountDown()
-  }
-}
-
-/**
- * 开始倒计时
- */
-const startCountDown = () => {
-  showCountDown.value = true
-  countDownSeconds.value = 10
-  
-  countDownTimer.value = setInterval(() => {
-    countDownSeconds.value--
-    
-    if (countDownSeconds.value <= 0) {
-      stopCountDown()
-      playNext()
-    }
-  }, 1000)
-}
-
-/**
- * 停止倒计时
- */
-const stopCountDown = () => {
-  if (countDownTimer.value) {
-    clearInterval(countDownTimer.value)
-    countDownTimer.value = null
-  }
-  showCountDown.value = false
-}
-
-/**
- * 取消自动播放
- */
-const cancelAutoPlay = () => {
-  stopCountDown()
-}
-
-/**
- * 播放下一个视频
- */
-const playNext = () => {
-  if (hasNext.value) {
-    emit('change', props.currentIndex + 1)
-  }
-}
-
-/**
- * 全屏变化
- */
-const handleFullscreenChange = (e: any) => {
-  const isFullScreen = e.detail.fullScreen
-  emit('fullscreen', isFullScreen)
-  
-  // 全屏时使用 cover 模式
-  objectFit.value = isFullScreen ? 'cover' : 'contain'
-}
-
-/**
- * 视频错误
- */
-const handleVideoError = (e: any) => {
-  console.error('视频播放错误:', e)
-  uni.showToast({
-    title: '课程视频播放组件正在开发中，现在还不能播放视频',
-    icon: 'none'
-  })
-}
-
-/**
- * 播放视频
- */
-const play = () => {
-  if (videoContext.value) {
-    videoContext.value.play()
-  }
-}
-
-/**
- * 暂停视频
- */
-const pause = () => {
-  if (videoContext.value) {
-    videoContext.value.pause()
-  }
-}
-
-/**
- * 停止视频
- */
-const stop = () => {
-  if (videoContext.value) {
-    videoContext.value.stop()
-  }
-}
-
-// 监听视频变化，重新播放
-watch(() => props.currentIndex, () => {
-  stopCountDown()
-  // 延迟播放，确保视频元素已更新
-  setTimeout(() => {
-    play()
-  }, 300)
-})
-
-onMounted(() => {
-  initVideoContext()
-})
-
-onUnmounted(() => {
-  stopCountDown()
-  stop()
-})
-
-// 暴露方法给父组件
-defineExpose({
-  play,
-  pause,
-  stop,
-  cancelAutoPlay: stopCountDown
-})
-</script>
-
-<style lang="scss" scoped>
-.video-player {
-  position: relative;
-  width: 100%;
-  background-color: #000;
-  
-  .video-element {
-    width: 100%;
-    height: 400rpx;
-  }
-  
-  .countdown-overlay {
-    position: absolute;
-    bottom: 0;
-    left: 0;
-    right: 0;
-    background: rgba(0, 0, 0, 0.7);
-    padding: 20rpx;
-    
-    .countdown-content {
-      display: flex;
-      justify-content: space-between;
-      align-items: center;
-      
-      .countdown-text {
-        color: #fff;
-        font-size: 28rpx;
+    // helper: localStorage save/load (simple array of {id, time})
+    function loadResumeList(): Array<any> {
+      try {
+        const raw = localStorage.getItem(props.storageKeyPrefix);
+        return raw ? JSON.parse(raw) : [];
+      } catch (e) {
+        return [];
       }
     }
+    function saveResumeItem(videoId: any, time: number) {
+      try {
+        const list = loadResumeList();
+        const idx = list.findIndex((i: any) => i.id === videoId);
+        if (idx >= 0) list[idx].time = time;
+        else list.push({ id: videoId, time });
+        localStorage.setItem(props.storageKeyPrefix, JSON.stringify(list));
+      } catch (e) { /* ignore */ }
+    }
+
+    // dynamic load aliplayer script + css
+    function loadAliplayer(): Promise<void> {
+      if ((window as any).Aliplayer) {
+        scriptLoaded.value = true;
+        return Promise.resolve();
+      }
+      return new Promise((resolve, reject) => {
+        // css
+        const link = document.createElement('link');
+        link.rel = 'stylesheet';
+        link.href = props.playerCssUrl;
+        document.head.appendChild(link);
+
+        // main script
+        const s = document.createElement('script');
+        s.src = props.playerScriptUrl;
+        s.onload = () => {
+          // components script
+          const s2 = document.createElement('script');
+          s2.src = props.playerComponentsUrl;
+          s2.onload = () => {
+            scriptLoaded.value = true;
+            resolve();
+          };
+          s2.onerror = () => reject(new Error('aliplayer components load failed'));
+          document.body.appendChild(s2);
+        };
+        s.onerror = () => reject(new Error('aliplayer load failed'));
+        document.body.appendChild(s);
+      });
+    }
+
+    // initialize player with videoData
+    async function initPlayer() {
+      showError.value = false;
+      if (props.useWebViewForApp && props.platform !== 'web') {
+        // In-app recommended to use WebView. Emit event so parent can take over.
+        emit('error', { message: 'App environment required WebView. Set useWebViewForApp=false to attempt in-page' });
+        showError.value = true;
+        errorText.value = 'App environment recommended to use WebView for Aliplayer';
+        return;
+      }
+
+      await loadAliplayer();
+
+      // choose options
+      const v = props.videoData || {};
+      let options: Record<string, any> = {
+        id: (playerContainer.value as HTMLElement).id || 'ali-player-' + Math.random().toString(36).slice(2),
+        width: '100%',
+        height: '100%',
+        autoplay: props.autoplay,
+        isLive: false,
+        rePlay: false,
+        playsinline: true,
+        controlBarVisibility: 'hover',
+        useH5Prism: true,
+        // skinLayout can be extended if needed
+        skinLayout: [
+          { name: 'bigPlayButton', align: 'cc' },
+          { name: 'H5Loading', align: 'cc' },
+          { name: 'errorDisplay', align: 'tlabs' },
+          { name: 'controlBar', align: 'blabs', children: [
+            { name: 'progress', align: 'blabs' },
+            { name: 'playButton', align: 'tl' },
+            { name: 'timeDisplay', align: 'tl' },
+            { name: 'prism-speed-selector', align: 'tr' },
+            { name: 'volume', align: 'tr' }
+          ] }
+        ]
+      };
+
+      // decide source mode
+      if (v.type === 1) {
+        if (!v.m3u8Url) {
+          // private encrypted: require vid+playAuth
+          if (!v.videoId || !v.playAuth) {
+            // parent might need to request playAuth
+            emit('request-playauth', v);
+            showError.value = true;
+            errorText.value = '播放凭证缺失';
+            return;
+          }
+          options = {
+            ...options,
+            vid: v.videoId,
+            playauth: v.playAuth,
+            encryptType: 1,
+            playConfig: { EncryptType: 'AliyunVoDEncryption' }
+          };
+        } else {
+          options = { ...options, source: v.m3u8Url };
+        }
+      } else {
+        // not encrypted
+        options = { ...options, source: v.videoUrl };
+      }
+
+      // add rate component by default
+      options.components = [
+        { name: 'RateComponent', type: (window as any).AliPlayerComponent?.RateComponent }
+      ];
+
+      // create player
+      try {
+        // ensure container has an id
+        if (playerContainer.value && !(playerContainer.value as HTMLElement).id) {
+          (playerContainer.value as HTMLElement).id = 'ali-player-' + Math.random().toString(36).slice(2);
+        }
+        const player = new (window as any).Aliplayer(options, function (p: any) {
+          // ready
+        });
+        playerInstance.value = player;
+
+        // event binds
+        player.on('ready', () => {
+          emit('ready');
+          if (props.autoplay) player.play();
+        });
+
+        player.on('play', () => {
+          emit('play');
+        });
+
+        player.on('pause', () => {
+          pauseTime.value = Math.floor(player.getCurrentTime() || 0);
+          emit('pause');
+        });
+
+        player.on('timeupdate', () => {
+          const t = Math.floor(player.getCurrentTime() || 0);
+          if (currentSeconds.value !== t) {
+            currentSeconds.value = t;
+            emit('timeupdate', { time: t, status: player.getStatus?.() });
+            saveCounter.value++;
+            // every autoSaveInterval seconds -> emit progress-save
+            if (saveCounter.value >= props.autoSaveInterval) {
+              saveCounter.value = 0;
+              emit('progress-save', { videoId: props.videoData.id, position: currentSeconds.value });
+              // also local save
+              saveResumeItem(props.videoData.id, currentSeconds.value);
+            }
+          }
+        });
+
+        player.on('ended', () => {
+          emit('ended', { videoId: props.videoData.id });
+          // default behavior: start countdown then emit load-next
+          startNextCountdown();
+        });
+
+        player.on('error', (e: any) => {
+          showError.value = true;
+          errorText.value = '播放出错';
+          emit('error', e);
+        });
+
+        // seek to resume pos if present
+        nextTick(() => {
+          const list = loadResumeList();
+          const idx = list.findIndex(item => item.id === props.videoData.id);
+          const resumeTime = idx >= 0 ? list[idx].time : (props.videoData.firstTime || 0);
+          const dur = player.getDuration ? Math.floor(player.getDuration() || 0) : 0;
+          if (resumeTime && dur && resumeTime < dur) {
+            player.seek(resumeTime);
+          } else if (resumeTime && !dur) {
+            // if duration unknown yet, attempt seek once canplay
+            player.one && player.one('canplay', () => {
+              const d2 = Math.floor(player.getDuration() || 0);
+              if (resumeTime < d2) player.seek(resumeTime);
+            });
+          }
+        });
+
+        // periodic autosave fallback (in case events miss)
+        if (autoSaveIntervalId.value) window.clearInterval(autoSaveIntervalId.value);
+        autoSaveIntervalId.value = window.setInterval(() => {
+          if (currentSeconds.value > 0) {
+            emit('progress-save', { videoId: props.videoData.id, position: currentSeconds.value });
+            saveResumeItem(props.videoData.id, currentSeconds.value);
+          }
+        }, props.autoSaveInterval * 1000);
+
+      } catch (err) {
+        showError.value = true;
+        errorText.value = '播放器初始化失败';
+        emit('error', err);
+      }
+    }
+
+    // start next countdown
+    function startNextCountdown(seconds = 5) {
+      showCountDown.value = true;
+      countDownSeconds.value = seconds;
+      if (countdownTimerId.value) window.clearInterval(countdownTimerId.value);
+      countdownTimerId.value = window.setInterval(() => {
+        countDownSeconds.value -= 1;
+        if (countDownSeconds.value <= 0) {
+          // trigger parent to load next
+          window.clearInterval(countdownTimerId.value!);
+          showCountDown.value = false;
+          emit('load-next', { videoId: props.videoData.id });
+        }
+      }, 1000);
+    }
+
+    function cancelNext() {
+      showCountDown.value = false;
+      if (countdownTimerId.value) window.clearInterval(countdownTimerId.value);
+      emit('change-screen', { action: 'cancel-next' });
+    }
+
+    // control API exposed
+    function play() {
+      playerInstance.value && playerInstance.value.play && playerInstance.value.play();
+    }
+    function pause() {
+      playerInstance.value && playerInstance.value.pause && playerInstance.value.pause();
+    }
+    function seek(sec: number) {
+      playerInstance.value && playerInstance.value.seek && playerInstance.value.seek(sec);
+    }
+    function replay() {
+      if (playerInstance.value) {
+        playerInstance.value.seek(0);
+        playerInstance.value.play();
+      }
+    }
+    function enterFullscreen() {
+      if (!playerInstance.value) return;
+      const status = playerInstance.value.fullscreenService.getIsFullScreen && playerInstance.value.fullscreenService.getIsFullScreen();
+      if (status) {
+        playerInstance.value.fullscreenService.cancelFullScreen && playerInstance.value.fullscreenService.cancelFullScreen();
+        emit('change-screen', { status: false });
+        // example: lock portrait if in app (needs plus.* or native)
+      } else {
+        playerInstance.value.fullscreenService.requestFullScreen && playerInstance.value.fullscreenService.requestFullScreen();
+        emit('change-screen', { status: true });
+      }
+    }
+
+    // watch videoData changes
+    watch(() => props.videoData, async (nv) => {
+      // dispose old player
+      if (playerInstance.value && playerInstance.value.dispose) {
+        try { playerInstance.value.dispose(); } catch (e) { console.warn(e); }
+        playerInstance.value = null;
+      }
+      // reset states
+      currentSeconds.value = 0;
+      pauseTime.value = 0;
+      showError.value = false;
+      // init new
+      await initPlayer();
+    }, { immediate: true, deep: true });
+
+    onMounted(() => {
+      // ensure container has unique id for Aliplayer
+      if (playerContainer.value && !(playerContainer.value as HTMLElement).id) {
+        (playerContainer.value as HTMLElement).id = 'ali-player-' + Math.random().toString(36).slice(2);
+      }
+    });
+
+    onBeforeUnmount(() => {
+      if (playerInstance.value && playerInstance.value.dispose) {
+        try { playerInstance.value.dispose(); } catch (e) { /* ignore */ }
+      }
+      if (autoSaveIntervalId.value) window.clearInterval(autoSaveIntervalId.value);
+      if (countdownTimerId.value) window.clearInterval(countdownTimerId.value);
+    });
+
+    // expose methods to parent via ref
+    expose({
+      play, pause, seek, replay, startNextCountdown
+    });
+
+    return {
+      playerContainer,
+      playerHeight,
+      play, pause, seek, replay,
+      showCountDown, countDownSeconds, cancelNext,
+      showError, errorText
+    };
   }
+});
+</script>
+
+<style scoped>
+.ali-player-wrapper { position: relative; width: 100%; }
+.player-container { background: #000; }
+.countdown-overlay {
+  position: absolute; top: 0; right: 10px; z-index: 50;
+  background: rgba(0,0,0,0.6); color: #fff; padding: 10px; border-radius: 6px;
 }
+.btn-cancel { margin-top: 8px; background: #fff; color: #000; border: none; padding:6px 12px; border-radius:4px; }
+.player-error { color: #fff; text-align:center; padding: 20px; }
 </style>

components/video-player/components/ControlBar.vue

@@ -0,0 +1,162 @@
+<template>
+  <view class="control-bar" :class="{ 'control-bar--visible': showControls }" @click.stop>
+    <view class="control-bar__top">
+      <!-- 进度条 -->
+      <ProgressBar
+        :current="currentTime"
+        :duration="duration"
+        @seek="handleSeek"
+      />
+    </view>
+
+    <view class="control-bar__bottom">
+      <!-- 播放/暂停按钮 -->
+      <view class="control-button" @click="togglePlay">
+        <text class="icon">{{ isPlaying ? '⏸' : '▶️' }}</text>
+      </view>
+
+      <!-- 时间显示 -->
+      <view class="time-display">
+        <text>{{ formatTime(currentTime) }} / {{ formatTime(duration) }}</text>
+      </view>
+
+      <view class="control-bar__right">
+        <!-- 速率控制 -->
+        <SpeedControl
+          :rate="playbackRate"
+          @change="handleSpeedChange"
+        />
+
+        <!-- 音量控制 -->
+        <VolumeControl
+          :volume="volume"
+          @change="handleVolumeChange"
+        />
+
+        <!-- 全屏按钮 -->
+        <view class="control-button" @click="toggleFullscreen">
+          <text class="icon">{{ isFullscreen ? '⛶' : '⛶' }}</text>
+        </view>
+      </view>
+    </view>
+  </view>
+</template>
+
+<script setup lang="ts">
+import { ref } from 'vue'
+import ProgressBar from './ProgressBar.vue'
+import SpeedControl from './SpeedControl.vue'
+import VolumeControl from './VolumeControl.vue'
+
+interface Props {
+  currentTime: number
+  duration: number
+  isPlaying: boolean
+  isFullscreen: boolean
+  playbackRate: number
+  volume: number
+  showControls: boolean
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  currentTime: 0,
+  duration: 0,
+  isPlaying: false,
+  isFullscreen: false,
+  playbackRate: 1.0,
+  volume: 100,
+  showControls: true
+})
+
+const emit = defineEmits<{
+  'toggle-play': []
+  'seek': [time: number]
+  'toggle-fullscreen': []
+  'speed-change': [rate: number]
+  'volume-change': [volume: number]
+}>()
+
+const formatTime = (seconds: number): string => {
+  if (!seconds || isNaN(seconds)) return '00:00'
+
+  const mins = Math.floor(seconds / 60)
+  const secs = Math.floor(seconds % 60)
+
+  return `${mins.toString().padStart(2, '0')}:${secs.toString().padStart(2, '0')}`
+}
+
+const togglePlay = () => {
+  emit('toggle-play')
+}
+
+const handleSeek = (time: number) => {
+  emit('seek', time)
+}
+
+const toggleFullscreen = () => {
+  emit('toggle-fullscreen')
+}
+
+const handleSpeedChange = (rate: number) => {
+  emit('speed-change', rate)
+}
+
+const handleVolumeChange = (volume: number) => {
+  emit('volume-change', volume)
+}
+</script>
+
+<style lang="scss" scoped>
+.control-bar {
+  position: absolute;
+  bottom: 0;
+  left: 0;
+  right: 0;
+  background: linear-gradient(to top, rgba(0, 0, 0, 0.8), transparent);
+  padding: 20rpx;
+  opacity: 0;
+  transition: opacity 0.3s;
+  z-index: 10;
+
+  &--visible {
+    opacity: 1;
+  }
+}
+
+.control-bar__top {
+  margin-bottom: 20rpx;
+}
+
+.control-bar__bottom {
+  display: flex;
+  align-items: center;
+  gap: 20rpx;
+}
+
+.control-bar__right {
+  display: flex;
+  align-items: center;
+  gap: 20rpx;
+  margin-left: auto;
+}
+
+.control-button {
+  width: 60rpx;
+  height: 60rpx;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  cursor: pointer;
+
+  .icon {
+    font-size: 40rpx;
+    color: #fff;
+  }
+}
+
+.time-display {
+  color: #fff;
+  font-size: 24rpx;
+  white-space: nowrap;
+}
+</style>

components/video-player/components/ProgressBar.vue

@@ -0,0 +1,183 @@
+<template>
+  <view class="progress-bar-container">
+    <view
+      class="progress-bar"
+      @touchstart="handleTouchStart"
+      @touchmove="handleTouchMove"
+      @touchend="handleTouchEnd"
+      @click="handleClick"
+    >
+      <!-- 背景轨道 -->
+      <view class="track"></view>
+
+      <!-- 已播放进度 -->
+      <view class="played" :style="{ width: playedPercent + '%' }"></view>
+
+      <!-- 拖动滑块 -->
+      <view class="thumb" :style="{ left: playedPercent + '%' }"></view>
+
+      <!-- 时间提示 -->
+      <view
+        v-if="showTimeTooltip"
+        class="time-tooltip"
+        :style="{ left: tooltipPosition + '%' }"
+      >
+        {{ formatTime(tooltipTime) }}
+      </view>
+    </view>
+  </view>
+</template>
+
+<script setup lang="ts">
+import { ref, computed } from 'vue'
+
+interface Props {
+  current: number
+  duration: number
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  current: 0,
+  duration: 0
+})
+
+const emit = defineEmits<{
+  seek: [time: number]
+}>()
+
+const isDragging = ref(false)
+const showTimeTooltip = ref(false)
+const tooltipPosition = ref(0)
+const tooltipTime = ref(0)
+const progressBarWidth = ref(0)
+
+const playedPercent = computed(() => {
+  if (!props.duration) return 0
+  return (props.current / props.duration) * 100
+})
+
+const formatTime = (seconds: number): string => {
+  if (!seconds || isNaN(seconds)) return '00:00'
+
+  const mins = Math.floor(seconds / 60)
+  const secs = Math.floor(seconds % 60)
+
+  return `${mins.toString().padStart(2, '0')}:${secs.toString().padStart(2, '0')}`
+}
+
+const handleTouchStart = (e: any) => {
+  isDragging.value = true
+  showTimeTooltip.value = true
+
+  // 获取进度条宽度
+  const query = uni.createSelectorQuery()
+  query.select('.progress-bar').boundingClientRect()
+  query.exec((res) => {
+    if (res[0]) {
+      progressBarWidth.value = res[0].width
+    }
+  })
+}
+
+const handleTouchMove = (e: any) => {
+  if (!isDragging.value || !progressBarWidth.value) return
+
+  const touch = e.touches[0]
+  const query = uni.createSelectorQuery()
+  query.select('.progress-bar').boundingClientRect()
+  query.exec((res) => {
+    if (res[0]) {
+      const rect = res[0]
+      const offsetX = touch.clientX - rect.left
+      const percent = Math.max(0, Math.min(100, (offsetX / rect.width) * 100))
+
+      tooltipPosition.value = percent
+      tooltipTime.value = (percent / 100) * props.duration
+    }
+  })
+}
+
+const handleTouchEnd = (e: any) => {
+  if (!isDragging.value) return
+
+  isDragging.value = false
+  showTimeTooltip.value = false
+
+  // 发送 seek 事件
+  emit('seek', tooltipTime.value)
+}
+
+const handleClick = (e: any) => {
+  const query = uni.createSelectorQuery()
+  query.select('.progress-bar').boundingClientRect()
+  query.exec((res) => {
+    if (res[0]) {
+      const rect = res[0]
+      const offsetX = e.detail.x - rect.left
+      const percent = Math.max(0, Math.min(100, (offsetX / rect.width) * 100))
+      const time = (percent / 100) * props.duration
+
+      emit('seek', time)
+    }
+  })
+}
+</script>
+
+<style lang="scss" scoped>
+.progress-bar-container {
+  width: 100%;
+  padding: 10rpx 0;
+}
+
+.progress-bar {
+  position: relative;
+  width: 100%;
+  height: 6rpx;
+  cursor: pointer;
+}
+
+.track {
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  background-color: rgba(255, 255, 255, 0.3);
+  border-radius: 3rpx;
+}
+
+.played {
+  position: absolute;
+  top: 0;
+  left: 0;
+  height: 100%;
+  background-color: #1989fa;
+  border-radius: 3rpx;
+  transition: width 0.1s;
+}
+
+.thumb {
+  position: absolute;
+  top: 50%;
+  transform: translate(-50%, -50%);
+  width: 24rpx;
+  height: 24rpx;
+  background-color: #fff;
+  border-radius: 50%;
+  box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.3);
+  transition: left 0.1s;
+}
+
+.time-tooltip {
+  position: absolute;
+  bottom: 30rpx;
+  transform: translateX(-50%);
+  padding: 8rpx 16rpx;
+  background-color: rgba(0, 0, 0, 0.8);
+  color: #fff;
+  font-size: 24rpx;
+  border-radius: 8rpx;
+  white-space: nowrap;
+  pointer-events: none;
+}
+</style>

components/video-player/components/SpeedControl.vue

@@ -0,0 +1,122 @@
+<template>
+  <view class="speed-control">
+    <view class="speed-button" @click="toggleMenu">
+      <text class="speed-text">{{ currentRate }}x</text>
+      <text class="arrow">▼</text>
+    </view>
+
+    <view v-if="showMenu" class="speed-menu">
+      <view
+        v-for="rate in rateOptions"
+        :key="rate"
+        class="speed-option"
+        :class="{ active: rate === currentRate }"
+        @click="selectRate(rate)"
+      >
+        {{ rate }}x
+      </view>
+    </view>
+  </view>
+</template>
+
+<script setup lang="ts">
+import { ref, watch } from 'vue'
+
+interface Props {
+  rate: number
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  rate: 1.0
+})
+
+const emit = defineEmits<{
+  change: [rate: number]
+}>()
+
+const rateOptions = [0.5, 0.75, 1.0, 1.25, 1.5, 2.0]
+const showMenu = ref(false)
+const currentRate = ref(props.rate)
+
+watch(
+  () => props.rate,
+  (newRate) => {
+    currentRate.value = newRate
+  }
+)
+
+const toggleMenu = () => {
+  showMenu.value = !showMenu.value
+}
+
+const selectRate = (rate: number) => {
+  currentRate.value = rate
+  showMenu.value = false
+  emit('change', rate)
+}
+</script>
+
+<style lang="scss" scoped>
+.speed-control {
+  position: relative;
+}
+
+.speed-button {
+  display: flex;
+  align-items: center;
+  gap: 8rpx;
+  padding: 10rpx 20rpx;
+  background-color: rgba(255, 255, 255, 0.1);
+  border-radius: 8rpx;
+  cursor: pointer;
+  user-select: none;
+
+  &:hover {
+    background-color: rgba(255, 255, 255, 0.2);
+  }
+}
+
+.speed-text {
+  color: #fff;
+  font-size: 24rpx;
+}
+
+.arrow {
+  color: #fff;
+  font-size: 20rpx;
+}
+
+.speed-menu {
+  position: absolute;
+  bottom: 100%;
+  right: 0;
+  margin-bottom: 10rpx;
+  background-color: rgba(0, 0, 0, 0.9);
+  border-radius: 8rpx;
+  overflow: hidden;
+  box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.3);
+}
+
+.speed-option {
+  padding: 20rpx 40rpx;
+  color: #fff;
+  font-size: 28rpx;
+  text-align: center;
+  cursor: pointer;
+  user-select: none;
+  white-space: nowrap;
+
+  &:hover {
+    background-color: rgba(255, 255, 255, 0.1);
+  }
+
+  &.active {
+    color: #1989fa;
+    background-color: rgba(25, 137, 250, 0.1);
+  }
+
+  &:not(:last-child) {
+    border-bottom: 1rpx solid rgba(255, 255, 255, 0.1);
+  }
+}
+</style>

components/video-player/components/VolumeControl.vue

@@ -0,0 +1,112 @@
+<template>
+  <view class="volume-control">
+    <view class="volume-icon" @click="toggleMute">
+      <text class="icon">{{ isMuted ? '🔇' : '🔊' }}</text>
+    </view>
+
+    <view v-if="showSlider" class="volume-slider-wrapper">
+      <slider
+        class="volume-slider"
+        :value="currentVolume"
+        :min="0"
+        :max="100"
+        @change="handleVolumeChange"
+        @changing="handleVolumeChanging"
+        activeColor="#1989fa"
+        backgroundColor="rgba(255, 255, 255, 0.3)"
+        block-size="12"
+      />
+    </view>
+  </view>
+</template>
+
+<script setup lang="ts">
+import { ref, computed, watch } from 'vue'
+
+interface Props {
+  volume: number
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  volume: 100
+})
+
+const emit = defineEmits<{
+  change: [volume: number]
+}>()
+
+const showSlider = ref(false)
+const currentVolume = ref(props.volume)
+const isMuted = ref(false)
+const volumeBeforeMute = ref(props.volume)
+
+watch(
+  () => props.volume,
+  (newVolume) => {
+    currentVolume.value = newVolume
+    isMuted.value = newVolume === 0
+  }
+)
+
+const toggleMute = () => {
+  if (isMuted.value) {
+    // 取消静音
+    const volume = volumeBeforeMute.value || 50
+    currentVolume.value = volume
+    emit('change', volume)
+    isMuted.value = false
+  } else {
+    // 静音
+    volumeBeforeMute.value = currentVolume.value
+    currentVolume.value = 0
+    emit('change', 0)
+    isMuted.value = true
+  }
+}
+
+const handleVolumeChange = (e: any) => {
+  const volume = e.detail.value
+  currentVolume.value = volume
+  isMuted.value = volume === 0
+  emit('change', volume)
+}
+
+const handleVolumeChanging = (e: any) => {
+  currentVolume.value = e.detail.value
+}
+
+// 点击音量图标时切换滑块显示
+const toggleSlider = () => {
+  showSlider.value = !showSlider.value
+}
+</script>
+
+<style lang="scss" scoped>
+.volume-control {
+  display: flex;
+  align-items: center;
+  gap: 10rpx;
+  position: relative;
+}
+
+.volume-icon {
+  width: 60rpx;
+  height: 60rpx;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  cursor: pointer;
+
+  .icon {
+    font-size: 36rpx;
+  }
+}
+
+.volume-slider-wrapper {
+  width: 150rpx;
+}
+
+.volume-slider {
+  width: 100%;
+}
+</style>

components/video-player/composables/useVideoAPI.ts

@@ -0,0 +1,73 @@
+// components/video-player/composables/useVideoAPI.ts
+import { ref } from 'vue'
+import { videoApi } from '@/api/modules/video'
+import type { IVideoInfo, VideoErrorType } from '@/types/video'
+
+/**
+ * 视频 API 调用管理
+ */
+export function useVideoAPI() {
+  const isLoading = ref(false)
+  const error = ref<{ type: VideoErrorType; message: string } | null>(null)
+
+  /**
+   * 获取视频播放信息
+   */
+  const fetchVideoInfo = async (params: {
+    id: number
+  }): Promise<IVideoInfo | null> => {
+    isLoading.value = true
+    error.value = null
+
+    try {
+      const response = await videoApi.checkVideo(params)
+
+      if (response.code === 0 && response.video) {
+        console.log('Video info fetched:', response.video)
+        return response.video
+      } else {
+        throw new Error(response.msg || '获取视频信息失败')
+      }
+    } catch (err: any) {
+      console.error('Failed to fetch video info:', err)
+      error.value = {
+        type: 'API_ERROR',
+        message: err.message || '获取视频信息失败，请稍后重试'
+      }
+      return null
+    } finally {
+      isLoading.value = false
+    }
+  }
+
+  /**
+   * 报告错误视频
+   */
+  const reportErrorVideo = async (params: {
+    chapterId: number
+    videoId: number
+    sort: number
+  }): Promise<void> => {
+    try {
+      await videoApi.addErrorCourse(params)
+      console.log('Error video reported:', params)
+    } catch (err) {
+      console.error('Failed to report error video:', err)
+    }
+  }
+
+  /**
+   * 清除错误
+   */
+  const clearError = () => {
+    error.value = null
+  }
+
+  return {
+    isLoading,
+    error,
+    fetchVideoInfo,
+    reportErrorVideo,
+    clearError
+  }
+}

components/video-player/composables/useVideoPlayer.ts

@@ -0,0 +1,189 @@
+// components/video-player/composables/useVideoPlayer.ts
+import { ref, computed } from 'vue'
+import { useVideoAPI } from './useVideoAPI'
+import { useVideoProgress } from './useVideoProgress'
+import type { IVideoInfo, IVideoPlayerProps, VideoErrorType } from '@/types/video'
+
+/**
+ * 视频播放器核心逻辑
+ */
+export function useVideoPlayer(props: IVideoPlayerProps) {
+  const videoAPI = useVideoAPI()
+  const videoProgress = useVideoProgress()
+
+  // 状态
+  const currentVideoData = ref<IVideoInfo | null>(null)
+  const currentIndex = ref(props.currentIndex)
+  const isSetFirstTime = ref(false)
+  const isChanging = ref(false)
+  const showError = ref(false)
+  const errorMessage = ref('')
+  const canRetry = ref(false)
+  const platform = ref('')
+
+  // 获取平台信息
+  // #ifdef APP-PLUS
+  platform.value = uni.getSystemInfoSync().platform
+  // #endif
+
+  // #ifdef H5
+  platform.value = 'h5'
+  // #endif
+
+  /**
+   * 计算视频 URL
+   */
+  const videoUrl = computed(() => {
+    if (!currentVideoData.value) return ''
+
+    if (currentVideoData.value.type === 0) {
+      // MP4 视频
+      return currentVideoData.value.mp4Url || currentVideoData.value.videoUrl || ''
+    } else {
+      // M3U8 视频
+      return currentVideoData.value.m3u8Url || ''
+    }
+  })
+
+  /**
+   * 计算封面图 URL
+   */
+  const posterUrl = computed(() => {
+    if (!currentVideoData.value) return ''
+
+    // 如果是 MP4 视频，可以使用 OSS 视频截图功能
+    if (currentVideoData.value.type === 0 && currentVideoData.value.mp4Url) {
+      return `${currentVideoData.value.mp4Url}?x-oss-process=video/snapshot,t_1,f_jpg`
+    }
+
+    return ''
+  })
+
+  /**
+   * 检查视频是否可以播放
+   */
+  const canPlayVideo = (videoInfo: IVideoInfo): boolean => {
+    // iOS 平台检查
+    if (platform.value === 'ios') {
+      if (videoInfo.type === 1 && !videoInfo.m3u8Url) {
+        return false
+      }
+    }
+
+    return true
+  }
+
+  /**
+   * 加载视频
+   */
+  const loadVideo = async (index: number) => {
+    if (index < 0 || index >= props.videoList.length) {
+      showError.value = true
+      errorMessage.value = '视频索引超出范围'
+      canRetry.value = false
+      return
+    }
+
+    const videoItem = props.videoList[index]
+    currentIndex.value = index
+
+    // 重置状态
+    isSetFirstTime.value = false
+    showError.value = false
+    errorMessage.value = ''
+    canRetry.value = false
+
+    // 调用 API 获取视频信息
+    const videoInfo = await videoAPI.fetchVideoInfo({
+      id: videoItem.id
+    })
+
+    if (!videoInfo) {
+      showError.value = true
+      errorMessage.value = videoAPI.error.value?.message || '获取视频信息失败'
+      canRetry.value = true
+      return
+    }
+
+    // 检查视频类型和 URL
+    if (videoInfo.type === 1 && !videoInfo.m3u8Url) {
+      // M3U8 视频但没有 URL，报告错误
+      await videoAPI.reportErrorVideo({
+        chapterId: videoInfo.chapterId,
+        videoId: videoInfo.id,
+        sort: videoInfo.sort
+      })
+
+      showError.value = true
+      errorMessage.value = '抱歉，本视频加密信息错误，已经提交错误信息，请过一段时间再来观看或联系客服'
+      canRetry.value = false
+      return
+    }
+
+    // 设置当前视频数据
+    currentVideoData.value = videoInfo
+
+    // 获取初始播放位置
+    const initialPosition = videoProgress.getInitialPosition(videoInfo)
+    videoProgress.updateCurrentTime(initialPosition)
+
+    return videoInfo
+  }
+
+  /**
+   * 切换视频
+   */
+  const changeVideo = async (newIndex: number) => {
+    if (isChanging.value) return
+
+    isChanging.value = true
+
+    try {
+      // 保存当前视频进度
+      if (currentVideoData.value) {
+        await videoProgress.saveNow(currentVideoData.value)
+      }
+
+      // 停止进度保存
+      videoProgress.stopSaving()
+
+      // 加载新视频
+      await loadVideo(newIndex)
+    } finally {
+      isChanging.value = false
+    }
+  }
+
+  /**
+   * 重试加载视频
+   */
+  const retry = () => {
+    loadVideo(currentIndex.value)
+  }
+
+  return {
+    // 状态
+    currentVideoData,
+    currentIndex,
+    isSetFirstTime,
+    isChanging,
+    showError,
+    errorMessage,
+    canRetry,
+    platform,
+    isLoading: videoAPI.isLoading,
+
+    // 计算属性
+    videoUrl,
+    posterUrl,
+
+    // 方法
+    loadVideo,
+    changeVideo,
+    retry,
+    canPlayVideo,
+
+    // 进度管理
+    videoProgress
+  }
+}

components/video-player/composables/useVideoProgress.ts

@@ -0,0 +1,131 @@
+// components/video-player/composables/useVideoProgress.ts
+import { ref } from 'vue'
+import { videoStorage } from '@/utils/videoStorage'
+import { videoApi } from '@/api/modules/video'
+import type { IVideoInfo } from '@/types/video'
+
+/**
+ * 视频播放进度管理
+ */
+export function useVideoProgress() {
+  const currentTime = ref(0)
+  const isSaving = ref(false)
+  let saveTimer: any = null
+
+  /**
+   * 获取初始播放位置
+   * 合并本地和服务器的播放位置，取较大值
+   * 如果视频已经看完（播放位置 >= 总时长 - 5秒），则从头开始
+   */
+  const getInitialPosition = (videoInfo: IVideoInfo): number => {
+    // 从服务器获取播放位置
+    const serverPosition = videoInfo.userCourseVideoPositionEntity?.position || 0
+
+    // 从本地存储获取播放位置
+    const localPosition = videoStorage.getVideoPosition(videoInfo.id) || 0
+
+    // 返回较大的值
+    let position = Math.max(serverPosition, localPosition)
+
+    // 如果播放位置接近视频结尾（最后5秒内），则从头开始
+    const videoDuration = videoInfo.duration || 0
+    if (videoDuration > 0 && position >= videoDuration - 5) {
+      position = 0
+      console.log('Video already finished, reset to start')
+    }
+
+    console.log('Initial position:', {
+      server: serverPosition,
+      local: localPosition,
+      duration: videoDuration,
+      final: position
+    })
+
+    return position
+  }
+
+  /**
+   * 开始保存进度
+   * 每秒保存到本地
+   */
+  const startSaving = (videoInfo: IVideoInfo) => {
+    // 清除之前的定时器
+    stopSaving()
+
+    // 每秒保存到本地
+    saveTimer = setInterval(() => {
+      if (currentTime.value > 0) {
+        videoStorage.saveVideoPosition(
+          videoInfo.id,
+          Math.floor(currentTime.value),
+          videoInfo
+        )
+      }
+    }, 1000)
+  }
+
+  /**
+   * 停止保存进度
+   */
+  const stopSaving = () => {
+    if (saveTimer) {
+      clearInterval(saveTimer)
+      saveTimer = null
+    }
+  }
+
+  /**
+   * 保存进度到服务器
+   */
+  const saveToServer = async (videoId: number, position: number) => {
+    if (isSaving.value) return
+
+    try {
+      isSaving.value = true
+      await videoApi.saveCoursePosition({
+        videoId,
+        position
+      })
+      console.log('Progress saved to server:', { videoId, position })
+    } catch (error) {
+      console.error('Failed to save progress to server:', error)
+    } finally {
+      isSaving.value = false
+    }
+  }
+
+  /**
+   * 立即保存当前进度
+   */
+  const saveNow = async (videoInfo: IVideoInfo) => {
+    if (currentTime.value > 0) {
+      // 保存到本地
+      videoStorage.saveVideoPosition(
+        videoInfo.id,
+        Math.floor(currentTime.value),
+        videoInfo
+      )
+
+      // 保存到服务器
+      await saveToServer(videoInfo.id, Math.floor(currentTime.value))
+    }
+  }
+
+  /**
+   * 更新当前播放时间
+   */
+  const updateCurrentTime = (time: number) => {
+    currentTime.value = time
+  }
+
+  return {
+    currentTime,
+    isSaving,
+    getInitialPosition,
+    startSaving,
+    stopSaving,
+    saveToServer,
+    saveNow,
+    updateCurrentTime
+  }
+}

components/video-player/index.vue

@@ -0,0 +1,519 @@
+<template>
+  <view class="video-player-container">
+    <!-- 视频播放器 -->
+    <view class="video-wrapper">
+      <video
+        v-if="!player.showError.value && player.videoUrl.value"
+        :id="videoId"
+        :src="player.videoUrl.value"
+        :poster="player.posterUrl.value"
+        :controls="true"
+        :page-gesture="true"
+        :vslide-gesture="true"
+        :vslide-gesture-in-fullscreen="true"
+        :show-center-play-btn="true"
+        :show-fullscreen-btn="true"
+        :show-play-btn="true"
+        :show-progress="true"
+        :enable-play-gesture="true"
+        :enable-progress-gesture="true"
+        :object-fit="objectFit"
+        :autoplay="true"
+        :initial-time="initialTime"
+        class="video-element"
+        @play="play"
+        @pause="pause"
+        @ended="ended"
+        @timeupdate="timeupdate"
+        @error="error"
+        @fullscreenchange="fullscreenChange"
+        @waiting="waiting"
+        @loadedmetadata="loadedmetadata"
+      />
+      
+      <!-- 倒计时遮罩 - 使用 cover-view 在 APP 中显示 -->
+      <cover-view v-if="showCountdown" class="countdown-overlay">
+        <cover-view class="countdown-content">
+          <cover-view class="countdown-timer">
+            <cover-view class="countdown-number">{{ countdownRemaining }}</cover-view>
+            <cover-view class="countdown-text">秒后播放下一个视频</cover-view>
+          </cover-view>
+          
+          <cover-view class="countdown-actions">
+            <cover-view class="btn-cancel" @click="cancelCountdown">取消</cover-view>
+            <cover-view class="btn-replay" @click="replayVideo">重新播放</cover-view>
+            <cover-view class="btn-next" @click="playNext">立即播放</cover-view>
+          </cover-view>
+        </cover-view>
+      </cover-view>
+      
+      <!-- 错误显示 -->
+      <view v-if="player.showError.value" class="error-display">
+        <view class="error-content">
+          <view class="error-message">{{ player.errorMessage.value }}</view>
+          <button v-if="player.canRetry.value" class="btn-retry" @click="retry">重试</button>
+        </view>
+      </view>
+      
+      <!-- 加载中 -->
+      <view v-if="player.isLoading.value" class="loading-display">
+        <view class="loading-spinner"></view>
+        <text class="loading-text">加载中...</text>
+      </view>
+    </view>
+  </view>
+</template>
+
+<script setup lang="ts">
+import { ref, watch, onMounted, onUnmounted, nextTick } from 'vue'
+import { useVideoPlayer } from './composables/useVideoPlayer'
+import { videoStorage } from '@/utils/videoStorage'
+import type { IVideoPlayerProps, IVideoInfo } from '@/types/video'
+
+// 页面生命周期
+// @ts-ignore
+const onHide = typeof uni !== 'undefined' ? uni.onHide || (() => {}) : () => {}
+
+// Props
+const props = withDefaults(defineProps<IVideoPlayerProps>(), {
+  countdownSeconds: 5,
+  showWatermark: false,
+  watermarkText: '本课程版权归天津众妙之门科技有限公司所有，翻版必究!'
+})
+
+// Emits
+const emit = defineEmits<{
+  play: [videoInfo: IVideoInfo]
+  pause: [position: number]
+  fullscreen: [isFullscreen: boolean]
+  error: [error: { type: string; message: string }]
+  ended: [videoInfo: IVideoInfo]
+  timeupdate: [data: { currentTime: number; duration: number }]
+  'video-change': [newIndex: number]
+  'update:current-index': [newIndex: number]
+  'countdown-start': []
+  'countdown-cancel': []
+}>()
+
+// 使用 composables
+const player = useVideoPlayer(props)
+
+// 视频相关状态
+const videoId = 'video-player-' + Date.now()
+const videoContext = ref<any>(null)
+const duration = ref(0)
+const isPlaying = ref(false)
+const isFullScreen = ref(false)
+const showCountdown = ref(false)
+const countdownRemaining = ref(props.countdownSeconds)
+const objectFit = ref<'contain' | 'cover'>('contain')
+const initialTime = ref(0)
+let countdownTimer: any = null
+
+// 生命周期
+onMounted(async () => {
+  // 初始化视频上下文
+  videoContext.value = uni.createVideoContext(videoId)
+
+  // 加载视频信息
+  const videoInfo = await player.loadVideo(props.currentIndex)
+
+  if (videoInfo) {
+    // 设置初始播放位置（loadVideo 内部已经调用过 getInitialPosition）
+    // 这里再次获取是为了确保 initialTime 和 video 组件同步
+    const position = player.videoProgress.getInitialPosition(videoInfo)
+    initialTime.value = position
+    console.log('Set initial time:', position, 'for video:', videoInfo.id)
+    
+    // 如果有历史进度，使用 seek 跳转（因为 initial-time 可能不生效）
+    if (position > 0) {
+      setTimeout(() => {
+        videoContext.value?.seek(position)
+        console.log('Seek to position:', position)
+      }, 500) // 延迟 500ms 确保视频已加载
+    }
+    
+    // 开始保存进度
+    player.videoProgress.startSaving(videoInfo)
+  }
+})
+
+// 页面隐藏时保存进度
+onHide(() => {
+  console.log('Page hidden, saving progress...')
+  if (player.currentVideoData.value && player.videoProgress.currentTime.value > 0) {
+    // 立即保存到本地
+    videoStorage.saveVideoPosition(
+      player.currentVideoData.value.id,
+      Math.floor(player.videoProgress.currentTime.value),
+      player.currentVideoData.value
+    )
+    // 保存到服务器
+    player.videoProgress.saveToServer(
+      player.currentVideoData.value.id,
+      Math.floor(player.videoProgress.currentTime.value)
+    )
+  }
+})
+
+onUnmounted(() => {
+  console.log('Component unmounting, saving progress...')
+  
+  // 停止进度保存
+  player.videoProgress.stopSaving()
+
+  // 立即保存当前播放进度（同步保存到本地，异步保存到服务器）
+  if (player.currentVideoData.value && player.videoProgress.currentTime.value > 0) {
+    // 立即保存到本地
+    videoStorage.saveVideoPosition(
+      player.currentVideoData.value.id,
+      Math.floor(player.videoProgress.currentTime.value),
+      player.currentVideoData.value
+    )
+    // 保存到服务器（不等待完成）
+    player.videoProgress.saveToServer(
+      player.currentVideoData.value.id,
+      Math.floor(player.videoProgress.currentTime.value)
+    )
+  }
+
+  // 清除倒计时
+  if (countdownTimer) {
+    clearInterval(countdownTimer)
+  }
+
+  // 恢复竖屏
+  // #ifdef APP-PLUS
+  plus.screen.lockOrientation('portrait-primary')
+  // #endif
+})
+
+// 监听 currentIndex 变化（仅当外部主动修改时才触发）
+watch(
+  () => props.currentIndex,
+  async (newIndex, oldIndex) => {
+    // 只有当新值与组件内部维护的索引不同时才处理
+    // 这样可以避免组件内部切换视频时触发 watch
+    if (newIndex !== player.currentIndex.value) {
+      await player.changeVideo(newIndex)
+    }
+  }
+)
+
+// 事件处理
+const play = () => {
+  isPlaying.value = true
+  if (player.currentVideoData.value) {
+    emit('play', player.currentVideoData.value)
+  }
+}
+
+const pause = () => {
+  isPlaying.value = false
+  emit('pause', player.videoProgress.currentTime.value)
+  
+  // 暂停时保存进度
+  if (player.currentVideoData.value && player.videoProgress.currentTime.value > 0) {
+    videoStorage.saveVideoPosition(
+      player.currentVideoData.value.id,
+      Math.floor(player.videoProgress.currentTime.value),
+      player.currentVideoData.value
+    )
+    player.videoProgress.saveToServer(
+      player.currentVideoData.value.id,
+      Math.floor(player.videoProgress.currentTime.value)
+    )
+  }
+}
+
+const ended = () => {
+  if (player.currentVideoData.value) {
+    emit('ended', player.currentVideoData.value)
+
+    // 检查是否有下一个视频
+    if (player.currentIndex.value < props.videoList.length - 1) {
+      startCountdown()
+    }
+  }
+}
+
+const timeupdate = (e: any) => {
+  const currentTime = e.detail.currentTime
+  const videoDuration = e.detail.duration
+
+  player.videoProgress.updateCurrentTime(currentTime)
+  duration.value = videoDuration
+
+  emit('timeupdate', {
+    currentTime,
+    duration: videoDuration
+  })
+}
+
+const error = (e: any) => {
+  console.error('Video error:', e)
+  player.showError.value = true
+  player.errorMessage.value = '视频播放出错，请稍后重试'
+  player.canRetry.value = true
+
+  emit('error', {
+    type: 'VIDEO_LOAD_ERROR',
+    message: '视频播放出错'
+  })
+}
+
+const fullscreenChange = (e: any) => {
+  isFullScreen.value = e.detail.fullScreen
+
+  // #ifdef APP-PLUS
+  if (e.detail.fullScreen) {
+    // 进入全屏，锁定横屏
+    setTimeout(() => {
+      plus.screen.lockOrientation('landscape-primary')
+    }, 100)
+  } else {
+    // 退出全屏，恢复竖屏
+    setTimeout(() => {
+      plus.screen.lockOrientation('portrait-primary')
+    }, 100)
+  }
+  // #endif
+
+  emit('fullscreen', isFullScreen.value)
+}
+
+const waiting = () => {
+  // 视频缓冲中
+  console.log('Video waiting...')
+}
+
+const loadedmetadata = (e: any) => {
+  duration.value = e.detail.duration
+  console.log('Video metadata loaded, duration:', duration.value)
+}
+
+// 倒计时相关
+const startCountdown = () => {
+  showCountdown.value = true
+  countdownRemaining.value = props.countdownSeconds
+  emit('countdown-start')
+
+  countdownTimer = setInterval(() => {
+    countdownRemaining.value--
+
+    if (countdownRemaining.value <= 0) {
+      clearInterval(countdownTimer)
+      playNext()
+    }
+  }, 1000)
+}
+
+const cancelCountdown = () => {
+  if (countdownTimer) {
+    clearInterval(countdownTimer)
+    countdownTimer = null
+  }
+  showCountdown.value = false
+  emit('countdown-cancel')
+}
+
+const replayVideo = () => {
+  cancelCountdown()
+
+  // 重置播放位置并播放
+  initialTime.value = 0
+  player.videoProgress.updateCurrentTime(0)
+  
+  // 重新加载当前视频
+  player.loadVideo(player.currentIndex.value)
+}
+
+const playNext = async () => {
+  cancelCountdown()
+
+  const nextIndex = player.currentIndex.value + 1
+  if (nextIndex < props.videoList.length) {
+    await player.changeVideo(nextIndex)
+    
+    // 通知父组件更新 currentIndex
+    emit('update:current-index', nextIndex)
+    emit('video-change', nextIndex)
+
+    // 获取新视频的初始播放位置
+    if (player.currentVideoData.value) {
+      initialTime.value = player.videoProgress.getInitialPosition(player.currentVideoData.value)
+      player.videoProgress.startSaving(player.currentVideoData.value)
+    }
+  }
+}
+
+const retry = () => {
+  player.retry()
+}
+</script>
+
+<style lang="scss" scoped>
+.video-player-container {
+  width: 100%;
+  height: 100%;
+  position: relative;
+  background-color: #000;
+}
+
+.video-wrapper {
+  width: 100%;
+  height: 100%;
+  position: relative;
+}
+
+.video-element {
+  width: 100%;
+  height: 400rpx;
+}
+
+.error-display {
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  background-color: rgba(0, 0, 0, 0.8);
+}
+
+.error-content {
+  text-align: center;
+  padding: 40rpx;
+}
+
+.error-icon {
+  font-size: 80rpx;
+  margin-bottom: 20rpx;
+}
+
+.error-message {
+  color: #fff;
+  font-size: 28rpx;
+  line-height: 1.6;
+  margin-bottom: 30rpx;
+}
+
+.btn-retry {
+  background-color: #1989fa;
+  color: #fff;
+  border: none;
+  padding: 20rpx 40rpx;
+  border-radius: 8rpx;
+  font-size: 28rpx;
+}
+
+.loading-display {
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  background-color: rgba(0, 0, 0, 0.5);
+}
+
+.loading-spinner {
+  width: 60rpx;
+  height: 60rpx;
+  border: 4rpx solid rgba(255, 255, 255, 0.3);
+  border-top-color: #fff;
+  border-radius: 50%;
+  animation: spin 1s linear infinite;
+}
+
+@keyframes spin {
+  to {
+    transform: rotate(360deg);
+  }
+}
+
+.loading-text {
+  color: #fff;
+  font-size: 28rpx;
+  margin-top: 20rpx;
+}
+
+.countdown-overlay {
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  background-color: rgba(0, 0, 0, 0.8);
+  z-index: 9999;
+}
+
+.countdown-content {
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  width: 600rpx;
+  margin-left: -300rpx;
+  margin-top: -150rpx;
+  text-align: center;
+}
+
+.countdown-timer {
+  margin-bottom: 60rpx;
+}
+
+.countdown-number {
+  color: #fff;
+  font-size: 32px;
+  font-weight: bold;
+  line-height: 1.2;
+  text-align: center;
+}
+
+.countdown-text {
+  color: #fff;
+  font-size: 16px;
+  line-height: 50rpx;
+  text-align: center;
+  margin-top: 20rpx;
+}
+
+.countdown-actions {
+  display: flex;
+  flex-direction: row;
+  justify-content: center;
+  align-items: center;
+  width: 100%;
+}
+
+.btn-cancel,
+.btn-replay,
+.btn-next {
+  padding: 0 20px;
+  text-align: center;
+  border-radius: 4px;
+  font-size: 14px;
+  height: 26px;
+  line-height: 26px;
+  color: #fff;
+  margin: 0 5px;
+  background-color: #666;
+}
+
+// .btn-cancel {
+//   background-color: #666;
+// }
+
+// .btn-replay {
+//   background-color: #ff9800;
+// }
+
+// .btn-next {
+//   background-color: #1989fa;
+// }
+</style>

pages/course/details/chapter.vue

@@ -9,13 +9,16 @@
       <view v-if="videoList.length > 0" class="video-section">
         <VideoPlayer
           ref="videoPlayerRef"
-          :videoList="videoList"
-          :currentIndex="currentVideoIndex"
-          :noRecored="noRecored"
-          @end="handleVideoEnd"
-          @fullscreen="handleFullscreen"
-          @change="handleVideoChange"
+          v-model:current-index="currentVideoIndex"
+          :video-list="videoList"
+          :countdown-seconds="5"
         />
+        <!-- <AliyunPlayer
+          ref="videoPlayerRef"
+          :currentVideo="videoList[currentVideoIndex]"
+          :currentVideoList="videoList"
+          @unlockChangeVideo="changeVideoLock = false"
+        /> -->
       </view>
       
       <!-- 课程和章节信息 -->
@@ -42,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>
@@ -107,10 +104,10 @@
 </template>
 
 <script setup lang="ts">
-import { ref, computed, onMounted, onUnmounted } 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 VideoPlayer from '@/components/video-player/index.vue'
 import type { IChapterDetail, IVideo } from '@/types/course'
 
 // 页面参数
@@ -124,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)
 
@@ -166,69 +164,34 @@ onLoad((options: any) => {
  * 加载章节详情
  */
 const loadChapterDetail = async () => {
-  try {
-    uni.showLoading({ title: '加载中...' })
-    
+  try {    
     const res = await courseApi.getChapterDetail(chapterId.value)
     if (res.code === 0 && res.data) {
       chapterDetail.value = res.data.detail
       videoList.value = res.data.videos || []
-      
+
       // 如果有历史播放记录，定位到对应视频
       if (res.data.current) {
         const index = videoList.value.findIndex(v => v.id === res.data.current)
         if (index !== -1) {
           currentVideoIndex.value = index
+          activeVideoIndex.value = index
         }
       }
     }
   } catch (error) {
     console.error('加载章节详情失败:', error)
-  } finally {
-    uni.hideLoading()
   }
 }
 
 /**
  * 选择视频
  */
-const selectVideo = (index: number) => {
+const selectVideo = async (index: number) => {
   if (index === currentVideoIndex.value) return
   currentVideoIndex.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
-}
-
 /**
  * 切换选项卡
  */
@@ -245,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>
@@ -340,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>

pages/user/order/index.vue

@@ -29,7 +29,7 @@
               class="payment-icon"
             />
             <text class="price">{{ order.orderMoney }}</text>
-            <text v-if="order.paymentMethod === '5'" class="currency">NZD</text>
+            <text class="currency">NZD</text>
           </view>
         </view>
         <text class="order-sn">
@@ -90,7 +90,7 @@ const getData = async (page: number, pageSize: number) => {
   try {
     // 添加订单状态参数
     const res = await getOrderList(page, pageSize, orderStatus.value)
-    paging.value.complete(res.orders.records)
+    paging.value.complete(res.data.records)
   } catch (error) {
     paging.value.complete(false)
     console.error('获取订单列表失败:', error)

style/tailwind.css

@@ -8,7 +8,6 @@
     --font-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono",
       "Courier New", monospace;
     --color-red-500: oklch(63.7% 0.237 25.331);
-    --spacing: 0.25rem;
     --ease-in-out: cubic-bezier(0.4, 0, 0.2, 1);
     --default-transition-duration: 150ms;
     --default-transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
@@ -259,15 +258,9 @@
   .bg-\[transparent\] {
     background-color: transparent;
   }
-  .pt-\[5px\] {
-    padding-top: 5px;
-  }
   .pt-\[40px\] {
     padding-top: 40px;
   }
-  .pb-2\.5 {
-    padding-bottom: calc(var(--spacing) * 2.5);
-  }
   .text-center {
     text-align: center;
   }

types/video.d.ts

@@ -0,0 +1,92 @@
+// types/video.d.ts
+
+/**
+ * 视频信息
+ */
+export interface IVideoInfo {
+  id: number
+  chapterId: number
+  type: 0 | 1 // 0: MP4, 1: M3U8
+  video: string // 视频ID
+  sort: number
+  duration: number // 视频时长（秒）
+  createTime: string
+  delFlag: number
+  playAuth?: string // 阿里云播放授权
+  videoUrl?: string // 视频URL（兼容字段）
+  m3u8Url?: string // M3U8流地址
+  mp4Url?: string // MP4视频地址
+  mtsHlsUriToken?: string // M3U8 Token
+  userCourseVideoPositionEntity?: IVideoPosition
+}
+
+/**
+ * 视频播放位置
+ */
+export interface IVideoPosition {
+  id: number
+  userId: number
+  videoId: number
+  position: number // 播放位置（秒）
+  createTime: string
+  updateTime: string
+  delFlag: number
+}
+
+/**
+ * 视频检查接口响应
+ */
+export interface IVideoCheckResponse {
+  msg: string
+  code: number
+  video: IVideoInfo
+}
+
+/**
+ * 视频播放器组件 Props
+ */
+export interface IVideoPlayerProps {
+  videoList: Array<{
+    id: number
+    chapterId: number
+    video: string
+    sort: number
+    type?: 0 | 1
+    duration?: number
+  }>
+  currentIndex: number
+  countdownSeconds?: number
+  showWatermark?: boolean
+  watermarkText?: string
+}
+
+/**
+ * 视频播放器组件状态
+ */
+export interface IVideoPlayerState {
+  currentVideoData: IVideoInfo | null
+  currentTime: number
+  firstTime: number
+  isSetFirstTime: boolean
+  isFullScreen: boolean
+  showCountdown: boolean
+  countdownRemaining: number
+  showError: boolean
+  errorMessage: string
+  isLoading: boolean
+  isChanging: boolean
+  playbackRate: number
+  volume: number
+}
+
+/**
+ * 视频错误类型
+ */
+export enum VideoErrorType {
+  NETWORK_ERROR = 'NETWORK_ERROR',
+  VIDEO_LOAD_ERROR = 'VIDEO_LOAD_ERROR',
+  ENCRYPTION_ERROR = 'ENCRYPTION_ERROR',
+  PLATFORM_NOT_SUPPORTED = 'PLATFORM_NOT_SUPPORTED',
+  INVALID_PARAMS = 'INVALID_PARAMS',
+  API_ERROR = 'API_ERROR'
+}

utils/videoStorage.ts

@@ -0,0 +1,118 @@
+// utils/videoStorage.ts
+
+interface VideoPosition {
+  id: number
+  time: number
+  updateTime: string
+  [key: string]: any
+}
+
+/**
+ * 视频播放位置本地存储服务
+ */
+class VideoStorageService {
+  private readonly STORAGE_KEY = 'videoOssList'
+  private readonly MAX_STORAGE_COUNT = 50
+
+  /**
+   * 获取视频播放位置
+   * @param videoId 视频ID
+   * @returns 播放位置（秒）或 null
+   */
+  getVideoPosition(videoId: number): number | null {
+    const list = this.getVideoList()
+    const video = list.find((v) => v.id === videoId)
+    return video?.time || null
+  }
+
+  /**
+   * 保存视频播放位置
+   * @param videoId 视频ID
+   * @param time 播放位置（秒）
+   * @param videoData 视频数据
+   */
+  saveVideoPosition(videoId: number, time: number, videoData: any): void {
+    const list = this.getVideoList()
+    const index = list.findIndex((v) => v.id === videoId)
+
+    const newItem = {
+      ...videoData,
+      id: videoId,
+      time,
+      updateTime: new Date().toISOString()
+    }
+
+    if (index >= 0) {
+      list[index] = newItem
+    } else {
+      list.push(newItem)
+    }
+
+    this.setVideoList(list)
+    
+    // 自动清理旧数据
+    this.cleanOldData()
+  }
+
+  /**
+   * 清理旧数据（保留最近 50 个）
+   */
+  cleanOldData(): void {
+    const list = this.getVideoList()
+    
+    if (list.length > this.MAX_STORAGE_COUNT) {
+      // 按更新时间排序，保留最新的
+      const sorted = list.sort((a, b) => {
+        const timeA = new Date(b.updateTime || 0).getTime()
+        const timeB = new Date(a.updateTime || 0).getTime()
+        return timeA - timeB
+      })
+      
+      this.setVideoList(sorted.slice(0, this.MAX_STORAGE_COUNT))
+    }
+  }
+
+  /**
+   * 清除指定视频的播放位置
+   * @param videoId 视频ID
+   */
+  clearVideoPosition(videoId: number): void {
+    const list = this.getVideoList()
+    const filtered = list.filter((v) => v.id !== videoId)
+    this.setVideoList(filtered)
+  }
+
+  /**
+   * 清除所有播放位置
+   */
+  clearAll(): void {
+    uni.removeStorageSync(this.STORAGE_KEY)
+  }
+
+  /**
+   * 获取视频列表
+   */
+  private getVideoList(): VideoPosition[] {
+    try {
+      const data = uni.getStorageSync(this.STORAGE_KEY)
+      return data ? JSON.parse(data) : []
+    } catch (error) {
+      console.error('Failed to get video list from storage:', error)
+      return []
+    }
+  }
+
+  /**
+   * 设置视频列表
+   */
+  private setVideoList(list: VideoPosition[]): void {
+    try {
+      uni.setStorageSync(this.STORAGE_KEY, JSON.stringify(list))
+    } catch (error) {
+      console.error('Failed to set video list to storage:', error)
+    }
+  }
+}
+
+// 导出单例
+export const videoStorage = new VideoStorageService()