增加视频列表组件-h5

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

@@ -1,26 +1,249 @@
 <template>
-	<view>
+	<view class="u-flex-1">
 		<!-- #ifdef H5 -->
-		<swiper :indicator-dots="false" :autoplay="false" :duration="500">
+		<swiper @change="swiperChange" :current="current" :circular="true" vertical class="u-flex-1"
-			<swiper-item v-for="(item,index) in list" :key="index">
+			@transition="transition" :indicator-dots="false" :autoplay="false" :interval="0" :duration="200">
-				<view class="swiper-item"></view>
+			<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>