更新：阿里云视频播放器

2025-11-21 10:54:43 +08:00
parent e7fb2c61c1
commit 754865e23e
9 changed files with 2132 additions and 250 deletions
--- a/components/ali-video/VideoList.vue
+++ b/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>