mrr.sj.front/pages/album/components/videoSlide.nvue

<template>
	<view style="z-index: 100;">
		<!-- 视频滑动主容器 -->
		<view class="view-box" :style="viewTopLength">
			<!-- 复用的5个视频容器 - 核心复用节点，不可删减 -->
			<view class="video-box" :style="itemViewTopLength0">
				<video :src="videoInfo_0.src" :style="fillScreen" :autoplay="videoInfo_0.autoplay"
					:loop="videoInfo_0.loop" :controls="videoInfo_0.controls"
					:enable-play-gesture="videoInfo_0.enablePlayGesture" :objectFit="videoInfo_0.objectFit || objectFit"
					:show-fullscreen-btn="videoInfo_0.showFullscreenBtn"
					:enable-progress-gesture="videoInfo_0.enableProgressGesture" @timeupdate="timeupdate(0,$event)"
					@ended='ended' :show-play-btn="videoInfo_0.showPlayBtn" :show-progress="videoInfo_0.showProgress"
					initial-time="0" id='video_id_0' @play="playing(0)" :muted="videoInfo_0.isMuted"
					webkit-playsinline="true" playsinline="true">
				</video>
				<cover-view v-if="!videoInfo_0.flag" :style="stopIcon" class="cover-view-stop" />
				<cover-view v-if="cover && videoInfo_0.coverStatus" :style="fillScreen2" class="video-image">
					<image :mode="videoInfo_0.mode || mode" :src="videoInfo_0.coverUrl" :style="fillScreen"></image>
				</cover-view>
				<view class="video-action" @touchstart.stop='videotouchstart' @touchmove.stop="videotochmove"
					@touchend.stop='videotouchend' @click.stop="videoClick"></view>
				<!-- 视频文本区域 - 每个视频都有 -->
				<view class="video-texts">
					<view class="flex-row-center" style="flex: 1;">
						<text class="video-title">{{ videoInfo_0.src }}</text>
						<text class="video-score">评分 4.8</text>
					</view>
					<view class="flex-row-center-between" style="flex: 1;">
						<text class="video-text">{{videoInfo_0.name}}</text>
						<!-- 声音图标 - 绑定0号视频的状态，点击切换静音 -->
						<image class="video-sound"
							:src="videoInfo_0.isMuted ? '/static/images/icons/sound_no.png' : '/static/images/icons/sound_yes.png'"
							@click.stop="toggleMute(0)"></image>
					</view>
				</view>
			</view>

			<view class="video-box" :style="itemViewTopLength1">
				<video :src="videoInfo_1.src" :style="fillScreen" :autoplay="videoInfo_1.autoplay"
					:loop="videoInfo_1.loop" :controls="videoInfo_1.controls"
					:enable-play-gesture="videoInfo_1.enablePlayGesture" :objectFit="videoInfo_1.objectFit || objectFit"
					:show-fullscreen-btn="videoInfo_1.showFullscreenBtn"
					:enable-progress-gesture="videoInfo_1.enableProgressGesture" @timeupdate="timeupdate(1,$event)"
					@ended='ended' :show-play-btn="videoInfo_1.showPlayBtn" :show-progress="videoInfo_1.showProgress"
					initial-time="0" id='video_id_1' @play="playing(1)" :muted="videoInfo_1.isMuted"
					webkit-playsinline="true" playsinline="true">
				</video>
				<cover-view v-if="!videoInfo_1.flag" :style="stopIcon" class="cover-view-stop" />
				<cover-view v-if="cover && videoInfo_1.coverStatus" :style="fillScreen2" class="video-image">
					<image :mode="videoInfo_1.mode || mode" :src="videoInfo_1.coverUrl" :style="fillScreen"></image>
				</cover-view>
				<view class="video-action" @touchstart='videotouchstart' @touchmove="videotochmove"
					@touchend='videotouchend' @click="videoClick"></view>
				<!-- 视频文本区域 - 1号视频 -->
				<view class="video-texts">
					<view class="flex-row-center" style="flex: 1;">
						<text class="video-title">珍草品汇理疗馆珍馆服务流程11订单</text>
						<text class="video-score">评分 4.8</text>
					</view>
					<view class="flex-row-center-between" style="flex: 1;">
						<text class="video-text">{{videoInfo_1.name}}</text>
						<!-- 声音图标 - 绑定1号视频的状态 -->
						<image class="video-sound"
							:src="videoInfo_1.isMuted ? '/static/images/icons/sound_no.png' : '/static/images/icons/sound_yes.png'"
							@click.stop="toggleMute(1)"></image>
					</view>
				</view>
			</view>

			<view class="video-box" :style="itemViewTopLength2">
				<video :src="videoInfo_2.src" :style="fillScreen" :autoplay="videoInfo_2.autoplay"
					:loop="videoInfo_2.loop" :controls="videoInfo_2.controls"
					:enable-play-gesture="videoInfo_2.enablePlayGesture" :objectFit="videoInfo_2.objectFit || objectFit"
					:show-fullscreen-btn="videoInfo_2.showFullscreenBtn"
					:enable-progress-gesture="videoInfo_2.enableProgressGesture" @timeupdate="timeupdate(2,$event)"
					@ended='ended' :show-play-btn="videoInfo_2.showPlayBtn" :show-progress="videoInfo_2.showProgress"
					initial-time="0" id='video_id_2' @play="playing(2)" :muted="videoInfo_2.isMuted"
					webkit-playsinline="true" playsinline="true">
				</video>
				<cover-view v-if="!videoInfo_2.flag" :style="stopIcon" class="cover-view-stop" />
				<cover-view v-if="cover && videoInfo_2.coverStatus" :style="fillScreen2" class="video-image">
					<image :mode="videoInfo_2.mode || mode" :src="videoInfo_2.coverUrl" :style="fillScreen"></image>
				</cover-view>
				<view class="video-action" @touchstart='videotouchstart' @touchmove="videotochmove"
					@touchend='videotouchend' @click="videoClick"></view>
				<!-- 视频文本区域 - 2号视频 -->
				<view class="video-texts">
					<view class="flex-row-center" style="flex: 1;">
						<text class="video-title">珍草品汇理疗馆珍馆服务流程11订单</text>
						<text class="video-score">评分 4.8</text>
					</view>
					<view class="flex-row-center-between" style="flex: 1;">
						<text class="video-text">{{videoInfo_2.name}}</text>
						<!-- 声音图标 - 绑定2号视频的状态 -->
						<image class="video-sound"
							:src="videoInfo_2.isMuted ? '/static/images/icons/sound_no.png' : '/static/images/icons/sound_yes.png'"
							@click.stop="toggleMute(2)"></image>
					</view>
				</view>
			</view>

			<view class="video-box" :style="itemViewTopLength3">
				<video :src="videoInfo_3.src" :style="fillScreen" :autoplay="videoInfo_3.autoplay"
					:loop="videoInfo_3.loop" :controls="videoInfo_3.controls"
					:enable-play-gesture="videoInfo_3.enablePlayGesture" :objectFit="videoInfo_3.objectFit || objectFit"
					:show-fullscreen-btn="videoInfo_3.showFullscreenBtn"
					:enable-progress-gesture="videoInfo_3.enableProgressGesture" @timeupdate="timeupdate(3,$event)"
					@ended='ended' :show-play-btn="videoInfo_3.showPlayBtn" :show-progress="videoInfo_3.showProgress"
					initial-time="0" id='video_id_3' @play="playing(3)" :muted="videoInfo_3.isMuted"
					webkit-playsinline="true" playsinline="true">
				</video>
				<cover-view v-if="!videoInfo_3.flag" :style="stopIcon" class="cover-view-stop" />
				<cover-view v-if="cover && videoInfo_3.coverStatus" :style="fillScreen2" class="video-image">
					<image :mode="videoInfo_3.mode || mode" :src="videoInfo_3.coverUrl" :style="fillScreen"></image>
				</cover-view>
				<view class="video-action" @touchstart='videotouchstart' @touchmove="videotochmove"
					@touchend='videotouchend' @click="videoClick"></view>
				<!-- 视频文本区域 - 3号视频 -->
				<view class="video-texts">
					<view class="flex-row-center" style="flex: 1;">
						<text class="video-title">珍草品汇理疗馆珍馆服务流程11订单</text>
						<text class="video-score">评分 4.8</text>
					</view>
					<view class="flex-row-center-between" style="flex: 1;">
						<text class="video-text">{{videoInfo_3.name}}</text>
						<!-- 声音图标 - 绑定3号视频的状态 -->
						<image class="video-sound"
							:src="videoInfo_3.isMuted ? '/static/images/icons/sound_no.png' : '/static/images/icons/sound_yes.png'"
							@click.stop="toggleMute(3)"></image>
					</view>
				</view>
			</view>

			<view class="video-box" :style="itemViewTopLength4">
				<video :src="videoInfo_4.src" :style="fillScreen" :autoplay="videoInfo_4.autoplay"
					:loop="videoInfo_4.loop" :controls="videoInfo_4.controls"
					:enable-play-gesture="videoInfo_4.enablePlayGesture" :objectFit="videoInfo_4.objectFit || objectFit"
					:show-fullscreen-btn="videoInfo_4.showFullscreenBtn"
					:enable-progress-gesture="videoInfo_4.enableProgressGesture" @timeupdate="timeupdate(4,$event)"
					@ended='ended' :show-play-btn="videoInfo_4.showPlayBtn" :show-progress="videoInfo_4.showProgress"
					initial-time="0" id='video_id_4' @play="playing(4)" :muted="videoInfo_4.isMuted"
					webkit-playsinline="true" playsinline="true">
				</video>
				<cover-view v-if="!videoInfo_4.flag" :style="stopIcon" class="cover-view-stop" />
				<cover-view v-if="cover && videoInfo_4.coverStatus" :style="fillScreen2" class="video-image">
					<image :mode="videoInfo_4.mode || mode" :src="videoInfo_4.coverUrl" :style="fillScreen"></image>
				</cover-view>
				<view class="video-action" @touchstart='videotouchstart' @touchmove="videotochmove"
					@touchend='videotouchend' @click="videoClick"></view>
				<!-- 视频文本区域 - 4号视频 -->
				<view class="video-texts">
					<view class="flex-row-center" style="flex: 1;">
						<text class="video-title">珍草品汇理疗馆珍馆服务流程11订单</text>
						<text class="video-score">评分 4.8</text>
					</view>
					<view class="flex-row-center-between" style="flex: 1;">
						<text class="video-text">{{videoInfo_4.name}}</text>
						<!-- 声音图标 - 绑定4号视频的状态 -->
						<image class="video-sound"
							:src="videoInfo_4.isMuted ? '/static/images/icons/sound_no.png' : '/static/images/icons/sound_yes.png'"
							@click.stop="toggleMute(4)"></image>
					</view>
				</view>
			</view>

			<view @touchend='progressTouchend' class="progress-view">
				<uv-slider v-if="showSlider" v-model="progressValue" activeColor="#D8D8D8" block-size="6"
					backgroundColor="#494949;" class="progress-slider"></uv-slider>
			</view>

			<!-- 修改：Dot指示器 - 最多显示5个 -->
			<view class="dots" :style="{top:`${0.5*winHeight}px`}" v-if="videoListLength > 1">
				<view class="dots-container">
					<view class="dot-item" v-for="(dotIndex, idx) in visibleDots" :key="idx"
						:class="{ active: dotIndex === videoIndex }" @click="jumpToVideo(dotIndex)"></view>
				</view>
				<text class="pageNumber">
					{{ videoIndex+1 }}/{{ videoListLength }}
				</text>
			</view>

		</view>
	</view>
</template>

<script>
	let VIDEO_LIST = []
	let initVideoInfo = {
		src: "",
		coverStatus: true,
		coverUrl: "",
		flag: false,
		objectFit: "",
		mode: "",
		isMuted: false, // 默认不静音
		autoplay: false,
		loop: true,
		controls: false,
		enablePlayGesture: true,
		showFullscreenBtn: false,
		enableProgressGesture: false,
		showPlayBtn: false,
		showProgress: false
	}
	export default {
		props: {
			popVideoList: {
				type: Array,
				default: [] // 默认值设为空数组JSON，避免parse报错
			},
			marginTop: {
				type: String,
				default: "88" // 默认值设为空数组JSON，避免parse报错
			}
		},
		data() {
			return {
				playSetTime:null,
				showSlider: true,
				progressTime: 0,
				progressValue: 0,
				boxHeight: 0,
				objectFit: "fill",
				mode: "scaleToFill",
				winWidth: 1,
				winHeight: 1,
				videoIndex: 0,
				viewTop: 0,
				viewTopPostion: 0,
				videoList: [],
				videoListLength: 0,
				itemViewTop0: 0,
				itemViewTop1: 0,
				itemViewTop2: 0,
				itemViewTop3: 0,
				itemViewTop4: 0,
				videoInfo_0: initVideoInfo,
				videoInfo_1: initVideoInfo,
				videoInfo_2: initVideoInfo,
				videoInfo_3: initVideoInfo,
				videoInfo_4: initVideoInfo,
				stopIcon: '',
				videotouchstartTimestamp: 0,
				videotouchendTimestamp: 0,
				moveView: true,
				cover: true,
				slidingStatus: false,
				videoPlayingStatus: false,
				preloadedIndex: [],
				startPageY: 0,
				endPageY: 0,
				// 新增：控制可视dot的数组
				visibleDots: [],
			};
		},
		watch: {
			// videoList: {
			// 	handler(newVal, oldVal) {


			// 	},
			// 	immediate: true, // 可选：组件初始化时立即执行一次（即使值未变化）
			// 	deep: false // 普通类型无需深度监听，默认false
			// }
		},
		created(options) {
			//#ifdef APP-PLUS
			plus.screen.lockOrientation("portrait-primary")
			//#endif
			if (this.popVideoList.length) {
				try {
					VIDEO_LIST = []
					this.popVideoList.forEach((item, index) => {
						let obj = {
							"src": "",
							"coverStatus": true,
							"coverUrl": "",
							"flag": false,
							"objectFit": "contain",
							"mode": "aspectFit",
							"isMuted": false, // 默认不静音
							"autoplay": false,
							"loop": true,
							"controls": false,
							"enablePlayGesture": true,
							"showFullscreenBtn": false,
							"enableProgressGesture": false,
							"showPlayBtn": false,
							"showProgress": false,
							"name": ""
						}
						obj.name = item.name
						obj.src = item.url
						obj.coverUrl = item.url +
							`?x-oss-process=video/snapshot,t_1000,m_fast,f_jpg,w_600,ar_auto`
						VIDEO_LIST.push(obj)
						if (index == 0) {
							initVideoInfo = obj
						}
					})
				} catch (e) {}
				this.getSystemInfo();
				this.videoList = VIDEO_LIST;
				this.videoListLength = this.videoList.length;
				this.boxHeight = this.videoListLength * this.winHeight;
				for (let i = 0; i < 5; i++) {
					if (this.videoList[i]) {
						this['videoInfo_' + i] = this.videoList[i]
					}
				}
				// 初始化可视dot范围
				this.updateVisibleDots();
				// setTimeout(() => {
				// 	this.playVideo(0)
				// }, 500)
			}
		},
		onUnload() {
			for (let i = 0; i < 5; i++) {
				this.unloadVideo(i)
			}
		},
		computed: {
			getVideoTop() {
				return uni.upx2px(this.marginTop)
			},
			viewTopLength() {
				return `height:${this.boxHeight}px;top:${this.viewTop}px;`
			},
			fillScreen() {
				let style = `height:${this.winHeight}px;width:${this.winWidth}px;`
				return style
			},
			fillScreen2() {
				let style = `height:auto;width:${this.winWidth}px;`
				return style
			},
			itemViewTopLength0() {
				return `height:${this.winHeight}px;top:${this.itemViewTop0}px;`
			},
			itemViewTopLength1() {
				return `height:${this.winHeight}px;top:${this.itemViewTop1}px;`
			},
			itemViewTopLength2() {
				return `height:${this.winHeight}px;top:${this.itemViewTop2}px;`
			},
			itemViewTopLength3() {
				return `height:${this.winHeight}px;top:${this.itemViewTop3}px;`
			},
			itemViewTopLength4() {
				return `height:${this.winHeight}px;top:${this.itemViewTop4}px;`
			}
		},
		methods: {
			// 新增：切换视频静音状态
			toggleMute(videoNum) {
				// 1. 切换数据层状态
				this['videoInfo_' + videoNum].isMuted = !this['videoInfo_' + videoNum].isMuted;
				// 2. 同步视频实例静音状态（恢复并完善原有注释代码，加容错）
				const videoCtx = uni.createVideoContext("video_id_" + videoNum, this);
				if (videoCtx) {
					videoCtx.mute(this['videoInfo_' + videoNum].isMuted);
				}
			},
			// 修改：点击dot跳转 - 传真实的视频索引
			jumpToVideo(targetIndex) {
				if (targetIndex === this.videoIndex || this.slidingStatus) return;
				this.stopVideo(this.videoIndex % 5, true);
				const diff = targetIndex - this.videoIndex;
				this.videoIndex = targetIndex;
				this.viewTopPostion = -this.videoIndex * this.winHeight;
				this.viewTop = this.viewTopPostion;
				if (this.videoListLength > 5) {
					this.sortItemView(diff > 0 ? -1 : 1);
				}
				// 更新可视dot范围
				this.updateVisibleDots();
				setTimeout(() => {
					this.playVideo(this.videoIndex % 5);
				}, 400);
			},
			// 核心：更新可视dot范围 - 最多显示5个
			updateVisibleDots() {
				const maxShow = 5;
				const total = this.videoListLength;
				// 视频总数 ≤ 5，显示全部
				if (total <= maxShow) {
					this.visibleDots = Array.from({
						length: total
					}, (_, i) => i);
					return;
				}
				// 视频总数 > 5，显示包含当前索引的5个dot
				// 计算起始索引，避免越界
				let start = Math.max(0, Math.min(this.videoIndex - 2, total - maxShow));
				// 生成5个连续的索引
				this.visibleDots = Array.from({
					length: maxShow
				}, (_, i) => start + i);
			},
			progressTouchend() {
				let s = Math.round(this.progressValue / 100 * this.time)
				let i = this.videoIndex % 5
				uni.createVideoContext("video_id_" + i, this).seek(s)
				uni.createVideoContext("video_id_" + i, this).play()
			},
			sliderchanging(e) {
				console.log(3333, e)
			},
			getSystemInfo() {
				var _this = this;
				uni.getSystemInfo({
					success: function(res) {
						_this.winWidth = res.windowWidth;
						_this.winHeight = res.windowHeight;
						let p = uni.upx2px(150)
						_this.stopIcon = `left:${(res.windowWidth - p)/2}px;top:${(res.windowHeight - p)/2}px;`
						_this.itemViewTop1 = res.windowHeight
						_this.itemViewTop2 = res.windowHeight * 2
						_this.itemViewTop3 = res.windowHeight * 3
						_this.itemViewTop4 = res.windowHeight * 4
					},
				})
			},
			unloadVideo(index) {
				if (index < 0 || index >= this.videoListLength) return;
				const nodeNum = index % 5;
				const videoCtx = uni.createVideoContext("video_id_" + nodeNum, this);
				videoCtx.stop();
				this.preloadedIndex = this.preloadedIndex.filter(item => item !== index);
			},
			playVideo(num) {
				clearTimeout(this.playSetTime)
				uni.$uv.debounce(() => {
					this.videoPlayingStatus = true
					this["videoInfo_" + num].flag = true
					let VideoContext = uni.createVideoContext("video_id_" + num, this)
					this.playSetTime = setTimeout(() => {
						VideoContext.play()
					}, 400)
				}, 30)
			},
			stopVideo(num, control = false) {
				const videoCtx = uni.createVideoContext("video_id_" + num, this);
				if (!control) {
					this['videoInfo_' + num].coverStatus = true;
					videoCtx.stop()
				} else {
					videoCtx.pause()
				}
				this["videoInfo_" + num].flag = false
			},
			nowPlayVideo() {
				clearTimeout(this.playSetTime)
				uni.$uv.debounce(() => {
					this.videoPlayingStatus = true
					this["videoInfo_" + this.videoIndex].flag = true
					let VideoContext = uni.createVideoContext("video_id_" + this.videoIndex, this)
					this.playSetTime = setTimeout(() => {
						VideoContext.play()
					}, 400)
				}, 30)
			},
			nowStopVideo() {
				const videoCtx = uni.createVideoContext("video_id_" + this.videoIndex, this);
				videoCtx.pause()
				this["videoInfo_" + this.videoIndex].flag = false
			},
			videoClick() {
				let num = this.videoIndex % 5
				if (this["videoInfo_" + num].flag) {
					this.stopVideo(num, true)
				} else {
					this.playVideo(num, true)
				}
			},
			videotouchstart(e) {
				this.videotouchendTimestamp = this.videotouchstartTimestamp
				this.videotouchstartTimestamp = e.timestamp
				if ((this.videotouchstartTimestamp - this.videotouchendTimestamp) < 500) return
				if (this.slidingStatus) return
				this.startPageY = e.changedTouches[0].screenY;
			},
			videotochmove(e) {
				if ((this.videotouchstartTimestamp - this.videotouchendTimestamp) < 500) return
				if (this.slidingStatus) return
				this.endPageY = e.changedTouches[0].screenY;
				let sliding = this.endPageY - this.startPageY
				if (sliding > 20 || sliding < -20) {
					this.moveView = false
				} else {
					this.moveView = true
				}
				if (this.videoIndex == 0 && sliding > 50) {
					this.viewTop = 50
				} else if (this.videoIndex == this.videoListLength - 1 && sliding < 0) {
					this.viewTop = this.viewTopPostion
				} else {
					this.viewTop = this.viewTopPostion + sliding
				}
			},
			videotouchend(e) {
				if ((this.videotouchstartTimestamp - this.videotouchendTimestamp) < 500) return
				if (this.slidingStatus) return
				this.moveView = true
				this.endPageY = e.changedTouches[0].screenY;
				let sliding = this.endPageY - this.startPageY
				if ((sliding >= -40 && sliding < 0) || (sliding <= 40 && sliding > 0)) {
					this.slidingStatus = true
					this.videoSlidingReset(sliding)
					return
				}
				if (sliding < -30) {
					this.slidingStatus = true
					if (this.videoIndex == this.videoListLength - 1) {
						this.videoSlidingReset(sliding)
						uni.showToast({
							title: "已经到底了",
							icon: "none"
						})
						return
					}
					this.moveView = false
					this.videoSlidingToTop(sliding)
					return
				}
				if (sliding > 30) {
					this.slidingStatus = true
					if (this.videoIndex == 0) {
						this.videoSlidingReset(sliding)
						return
					}
					this.moveView = false
					this.videoSlidingToBottom(sliding)
				}
			},
			videoSlidingReset(sliding) {
				this.viewTop = this.viewTopPostion
				this.slidingStatus = false
			},
			videoSlidingToTop(sliding) {
				this.stopVideo(this.videoIndex % 5, true)
				this.videoIndex++
				if (this.videoListLength > 5) {
					this.sortItemView(sliding)
				}
				this.viewTopPostion = this.viewTopPostion - this.winHeight
				setTimeout(() => {
					this.playVideo(this.videoIndex % 5)
				}, 5)
				let timer = setInterval(() => {
					this.viewTop = this.viewTop - 35
					if (this.viewTop < (this.viewTopPostion + 10)) {
						this.viewTop = this.viewTopPostion
						clearInterval(timer)
						this.slidingStatus = false
						this.slidingCallback()
					}
				}, 3)
			},
			videoSlidingToBottom(sliding) {
				this.stopVideo(this.videoIndex % 5, true)
				this.videoIndex--
				if (this.videoListLength > 5) {
					this.sortItemView(sliding)
				}
				this.viewTopPostion = this.viewTopPostion + this.winHeight
				setTimeout(() => {
					this.playVideo(this.videoIndex % 5)
				}, 5)
				let timer = setInterval(() => {
					this.viewTop = this.viewTop + 35
					if (this.viewTop > (this.viewTopPostion - 10)) {
						this.viewTop = this.viewTopPostion
						clearInterval(timer)
						this.slidingStatus = false
						this.slidingCallback()
					}
				}, 3)
			},
			// 修改：滑动结束后更新可视dot
			slidingCallback() {
				this.progressValue = 0
				this.updateVisibleDots();
			},
			//滑动组件排序
			sortItemView(silding) {
				// 向上滑动
				if (silding < 0) {
					if (this.videoIndex > 2 && this.videoIndex < this.videoListLength - 2) {
						let i = (this.videoIndex - 3) % 5
						this["itemViewTop" + i] = this["itemViewTop" + i] + this.winHeight * 5
						this['videoInfo_' + i] = this.videoList[this.videoIndex + 2]
					}
					return
				}
				// 向下滑动
				if (silding > 0) {
					if (this.videoIndex > 1 && this.videoIndex < this.videoListLength - 3) {
						let i = (this.videoIndex + 3) % 5
						this["itemViewTop" + i] = this["itemViewTop" + i] - this.winHeight * 5
						this['videoInfo_' + i] = this.videoList[this.videoIndex - 2]
					}
				}
			},
			playing(i) {
				setTimeout(() => {
					this['videoInfo_' + i].coverStatus = false
					this.moveView = true
					this.slidingStatus = false
				}, 600)
			},
			timeupdate(i, e) {
				if (this.videoPlayingStatus) {
					this.slidingStatus = false
					this.videoPlayingStatus = false
					setTimeout(() => {
						this['videoInfo_' + i].coverStatus = false
						this.moveView = true
					}, 200)
				}
				this["videoInfo_" + i].flag = true
				if (e.detail.duration >= this.progressTime) {
					if (this.videoIndex%5 == i) {
						this.time = e.detail.duration
						this.progress = e.detail.currentTime
						this.progressValue = (e.detail.currentTime / e.detail.duration) * 100
					}

					this.showProgress = true
				} else {
					this.showProgress = false
				}
			},
			ended() {
				let num = this.videoIndex % 5
				this["videoInfo_" + num].flag = false
				this.progressValue = 0
			}
		}
	}
</script>

<style scoped lang="less">
	.view-box {
		// position: fixed;
		// left: 0;
		// right: 0;
		background-color: #000;
		// z-index: 900;
	}

	.video-box {
		position: absolute;
		left: 0;
		right: 0;
		z-index: 2000;
	}

	.video-image {
		position: absolute;
		left: 0;
		top: 0;
		right: 0;
		bottom: 0;
		z-index: 2001;
	}

	.video-action {
		position: absolute;
		left: 0;
		top: 0;
		right: 0;
		bottom: 0;
		z-index: 2008;
	}

	.video-texts {
		position: absolute;
		left: 30rpx;
		right: 30rpx;
		bottom: 120rpx;
		z-index: 2009; // 确保在视频上方显示

		.video-title {
			font-weight: 500;
			font-size: 24rpx;
			color: #FFFFFF;
			text-align: left;
			font-style: normal;
			lines: 1;
			max-width: 240rpx;
		}

		.video-score {
			font-weight: 500;
			font-size: 24rpx;
			color: #FFFFFF;
			text-align: left;
			font-style: normal;
			margin-left: 20rpx;
		}

		.video-text {
			font-weight: 400;
			font-size: 28rpx;
			color: #FFFFFF;
			text-align: left;
			font-style: normal;
		}

		.video-sound {
			width: 44rpx;
			height: 42rpx;
			cursor: pointer; // 点击指针，提示可点击
		}
	}

	.cover-view-stop {
		position: absolute;
		z-index: 9999;
		width: 150rpx;
		height: 200rpx;
		background-color: rgba(0, 0, 0, 0.3);
		border-radius: 50%;
	}

	.progress-view {
		z-index: 9999;
		position: fixed;
		left: 30rpx;
		right: 30rpx;
		bottom: 80rpx;

		.progress-slider {}
	}

	// 修改：Dot指示器样式 - 最多显示5个 + 过渡动画
	.dots {
		position: fixed;
		left: 20rpx;
		top: 0;
		transform: translateY(-50%);
		z-index: 9999;
		flex-direction: row;

		.dots-container {
			// 限制最多显示5个，超出隐藏
			width: fit-content;
			overflow: hidden;
			margin: auto 0;

			.dot-item {
				width: 10rpx;
				height: 10rpx;
				background: #FFFFFF;
				border-radius: 50%;
				// 核心：过渡动画，切换更丝滑
				transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
				cursor: pointer;
				margin-bottom: 10rpx;

				&.active {
					width: 10rpx;
					height: 30rpx;
					background: #FFFFFF;
					border-radius: 5rpx;
				}
			}
		}

		.pageNumber {
			font-weight: bold;
			font-size: 28rpx;
			color: #FFFFFF;
			line-height: 36rpx;
			text-align: left;
			font-style: normal;
			margin-left: 6rpx;
		}
	}

	.flex-row-center-between {
		display: flex;
		flex-direction: row;
		align-items: center;
		justify-content: space-between;
	}

	.flex-row-start-between {
		display: flex;
		flex-direction: row;
		align-items: flex-start;
		justify-content: space-between;
	}

	.flex-row-center-center {
		display: flex;
		flex-direction: row;
		align-items: center;
		justify-content: center;
	}

	.flex-row-center {
		display: flex;
		flex-direction: row;
		align-items: center;
	}

	.flex-row-start {
		display: flex;
		flex-direction: row;
		align-items: flex-start;
	}

	.flex-row-end-between {
		display: flex;
		flex-direction: row;
		align-items: flex-end;
		justify-content: space-between;
	}
</style>