new_app/components/my-video-list/my-video-list.vue

<template>
	<view class="u-flex-1">
		<!-- #ifdef H5 -->
		<swiper @change="swiperChange" :current="current" :circular="true" vertical class="u-flex-1"
			@transition="transition" :indicator-dots="false" :autoplay="false" :interval="0" :duration="200">
			<swiper-item v-for="(item,index) in videoList" :key="index">

				<video class="u-flex-1 video" :show-fullscreen-btn="false" @controlstoggle="controlstoggles"
					v-if="current === index && item.videoUrl" @waiting="waiting()" object-fit="cover"
					@play="videoPlay('myVideo'+item.courseDetailsId,item.courseDetailsId)" :play-strategy="2"
					:show-loading="true" codec="software" :muted="false" :show-center-play-btn="true" :loop="false"
					:enable-progress-gesture="false" :poster="item.titleImg" :ref="'myVideo'+item.courseDetailsId"
					@ended="ended" :id="'myVideo'+item.courseDetailsId" :src="item.videoUrl"
					:autoplay="item.autoPlay"></video>

				<image class="poster" v-else @click="openShowPay(current,index,item.videoUrl)" :src="item.titleImg"
					mode="aspectFill"></image>

				<view class="info">
					<text v-if="item.courseDetailsName">{{item.courseDetailsName}}</text>
					<view v-if="item.content" v-html="item.content"></view>
					<text class="u-m-t-20">
						{{item.courseDetailsName}}（共{{list.length}}集）选集 >
					</text>
				</view>
				<view class="right">
					<view class="love u-m-b-40 u-flex-y-center u-flex-x-center u-text-center">
						<up-icon name="heart-fill" v-if="item.isGood==1" color="red" size="30"></up-icon>
						<up-icon name="heart-fill" v-else color="#ffffff" size="30"></up-icon>
						<text class="text">{{item.goodNum}}</text>
					</view>
					<view class="share u-m-b-40 u-flex-y-center u-flex-x-center u-text-center" @click="share(item)">
						<image class="icon" src="@/static/images/share.png" mode=""></image>
						<text class="text">分享</text>
					</view>
					<view class="zhuiju u-m-b-40 u-flex-y-center u-flex-x-center u-text-center" @click="zhuijuClick">
						<image class="icon" v-if="isCollect" src="@/static/images/shuqian.png" mode=""></image>
						<image class="icon" v-else src="@/static/images/shuqian_s.png" mode=""></image>
						<text class="text">{{isCollect?'已追':'追剧'}}</text>
					</view>
				</view>
			</swiper-item>
		</swiper>
		<!-- #endif -->
		
	</view>
</template>

<script setup>
	import {returnShareUrl} from '@/commons/config.js'
	import {
		computed,
		reactive,
		ref,
		watch
	} from 'vue';

	const props = defineProps({
		list: {
			type: Array,
			default: () => {
				[]
			}
		},
		isCollect: {
			type: Boolean,
			default: false
		}
	})
	
	function posterError(){
		
	}
	
	function posterSuccess(){
		
	}
	
	const posterData=reactive({
		posterShow:false
	})
	

	let videoList = ref(props.list.slice(0, 3))
	watch(() => props.list.length, (newval) => {
		init()
	})

	function init() {
		if (current.value === 0 && nowIndex.value == 0) {
			videoList.value = [props.list[0], props.list[1], props.list[props.list.length - 1]]
		} else {
			videoList.value = props.list.slice(0, 3)
		}
	}
	const emits = defineEmits(['zhuijuClick'])

	function zhuijuClick() {
		emits(['zhuijuClick', 'swiperChange','share'])
	}

	let showControls = ref(false)

	function openShowPay(current, index, videoUrl) {
		showControls.value = true
	}

	let current = ref(0)

	function controlstoggles() {

	}

	function videoPlay(videoId, courseDetailsId) {

	}

	function ended() {

	}

	function share(item) {
		emits('share',item)
		const urls = returnShareUrl() + '/me/detail/detail?id=' + item.courseId + '&courseDetailsId=' + item
			.courseDetailsId + '&invitation=' + uni.getStorageSync('invitationCode') + '&qdCode=' + this.qdCode;
		console.log(urls);
	}
	let nowIndex = ref(0)

	function swiperChange(e) {
		console.log(e);
		const direction = e.detail.current > current.value ? 'down' : 'up'
		current.value = e.detail.current
		const item = videoList.value[e.detail.current]
		const listLen = props.list.length
		const lastIndex = listLen - 1
		const index = props.list.findIndex(v => v.courseDetailsId == item.courseDetailsId)
		nowIndex.value = index
		let position = ''
		if (index === 0) {
			position = 'start'
		}
		if (index === props.list.length - 1) {
			position = 'end'
		}
		console.log(position);
		if (current.value == 0) {
			if (position === 'start') {
				videoList.value = [item, props.list[index + 1], props.list[lastIndex]]
			} else if (position === 'end') {
				videoList.value = [item, props.list[0], props.list[lastIndex]]
			} else {
				videoList.value = [item, props.list[index + 1], props.list[index - 1]]
			}
		}
		if (current.value == 1) {
			if (position === 'start') {
				videoList.value = [props.list[lastIndex], item, props.list[index + 1]]
			} else if (position === 'end') {
				videoList.value = [props.list[lastIndex - 1], item, props.list[0]]
			} else {
				videoList.value = [props.list[index - 1], item, props.list[index + 1]]
			}
		}
		if (current.value == 2) {
			if (position === 'start') {
				videoList.value = [props.list[1], props.list[lastIndex], item]
			} else if (position === 'end') {
				videoList.value = [props.list[0], props.list[lastIndex - 1], item]
			} else {
				videoList.value = [props.list[index + 1], props.list[index - 1], item]
			}
		}
		console.log(videoList.value);
	}

	function transition(e) {
		if (e.detail.dy > 0) {
			//down
		} else {
			//up
		}
	}

	function waiting() {

	}
</script>

<style lang="scss">
	.u-flex-1 {
		flex: 1;
		width: 100%;
		height: 100%;
	}

	.video {
		width: 100%;
		height: 100%;
	}

	.poster {
		position: absolute;
		width: 100%;
		height: 90%;
		top: 50%;
		left: 50%;
		transform: translate(-50%, -50%);
	}

	.u-text-center {
		text-align: center;
	}

	.info {
		width: 80%;
		height: auto;
		position: absolute !important;
		bottom: 50px;
		left: 10px;
		color: #ffffff;
		font-size: 15px;
		z-index: 9999;
	}

	.right {
		width: 60rpx;
		position: absolute !important;
		right: 20rpx;
		top: 50%;
		transform: translate(0, -50%);
		z-index: 999;
		color: #fff;
		font-size: 24rpx;

		.icon {
			width: 60rpx;
			height: 60rpx;
		}

		.share {
			.text {
				white-space: nowrap;
			}
		}

		.zhuiju {}
	}
</style>