VAVABUY/components/play.vue

<template>
	<view style="overflow: hidden;" :style="{ height: height + 'px' }">
		<swiper class="swiper" :style="{ height: height + 'px' }" :show-scrollbar="false" vertical :circular="false"
			:current="current" @change="onSwiperChange">
			<swiper-item v-for="(item, i) in list" :key="i" :style="{ 'height': height - 1 + 'px' }">
				<oVideo :ref="el => setItemRef(el, i)" :id="'video' + i" :height="height - 1" :current="current" :item="item"
					:index="i" @showPinglun="comment(item)" @play="onPlay" @like="like(item, i)" @collect="collect(item, i)"
					@follow="follow(item, i)" />
			</swiper-item>
		</swiper>
		<!-- 评论弹框 -->
		<commentDialog ref="dialogRef" :video_id="video_id" />
	</view>
</template>

<script setup>
import { ref, onMounted, computed } from "vue";
import oVideo from "@/components/y-video";
import { onShow } from "@dcloudio/uni-app"
import { useVideoStore, useUserStore } from "@/store"
import { VIDEO_VIEWS, VIDEO_COLLECTS, VIDEO_GOODS, DISCOVER_FOLLOW } from "@/api"
import { Toast } from "@/utils"
import commentDialog from '@/components/commentDialog'

const useUser = useUserStore();
const userInfo = computed(() => useUser.getuserInfo)
const dialogRef = ref(null);
const useVideo = useVideoStore();
let systemInfo = uni.getSystemInfoSync();
const top = systemInfo.statusBarHeight + uni.upx2px(30);
const height = systemInfo.screenHeight;
const scrollHeight = systemInfo.screenHeight * 0.8 - uni.upx2px(100);
const current = ref(0);
const newCurrent = ref(0);
const info = {
	name: '测试标题',
	pic: 'https://img.lzzyimg.com/upload/vod/20240312-1/e3d0aaa1748d757b03fab599abf156d8.jpg'
}
const paging = ref(null)
const video_id = ref(null)
// const newList = ref([]);
// const list = ref([{
// 	title: "第18集",
// 	src: "http://vjs.zencdn.net/v/oceans.mp4",
// 	desc: '测试内容'
// }, {
// 	title: "第19集",
// 	src: "https://cloud.video.taobao.com/play/u/3007761989/p/2/e/6/t/1/451969495179.mp4?appKey=38829",
// 	desc: '测试内容2'
// }, {
// 	title: "第20集",
// 	src: "http://vjs.zencdn.net/v/oceans.mp4",
// 	desc: '测试内容2'
// }, {
// 	title: "第21集",
// 	src: "http://vjs.zencdn.net/v/oceans.mp4",
// 	desc: '测试内容'
// }, {
// 	title: "第22集",
// 	src: "https://cloud.video.taobao.com/play/u/3007761989/p/2/e/6/t/1/451969495179.mp4?appKey=38829",
// 	desc: '测试内容2'
// }, {
// 	title: "第23集",
// 	src: "http://vjs.zencdn.net/v/oceans.mp4",
// 	desc: '测试内容2'
// }, {
// 	title: "第24集",
// 	src: "https://cloud.video.taobao.com/play/u/3007761989/p/2/e/6/t/1/451969495179.mp4?appKey=38829",
// 	desc: '测试内容2'
// }, {
// 	title: "第25集",
// 	src: "http://vjs.zencdn.net/v/oceans.mp4",
// 	desc: '测试内容2'
// }, {
// 	title: "第26集",
// 	src: "https://cloud.video.taobao.com/play/u/3007761989/p/2/e/6/t/1/451969495179.mp4?appKey=38829",
// 	desc: '测试内容2'
// }, {
// 	title: "第27集",
// 	src: "http://vjs.zencdn.net/v/oceans.mp4",
// 	desc: '测试内容2'
// }, {
// 	title: "第28集",
// 	src: "https://cloud.video.taobao.com/play/u/3007761989/p/2/e/6/t/1/451969495179.mp4?appKey=38829",
// 	desc: '测试内容2'
// }, {
// 	title: "第29集",
// 	src: "http://vjs.zencdn.net/v/oceans.mp4",
// 	desc: '测试内容2'
// }, {
// 	title: "第30集",
// 	src: "https://cloud.video.taobao.com/play/u/3007761989/p/2/e/6/t/1/451969495179.mp4?appKey=38829",
// 	desc: '测试内容2'
// }, {
// 	title: "第31集",
// 	src: "http://vjs.zencdn.net/v/oceans.mp4",
// 	desc: '测试内容2'
// }])
const list = computed(() => useVideo.getVideoList)


let pages = 5;
const newList = computed(() => {
	let _list = [];
	let start = 0;
	let end = 0
	let half = Math.floor(newCurrent.value / pages)
	// console.log(half);


	start = half - 1 < 0 ? 0 : start + half;
	end = half - 1 < 0 ? pages : half * pages + current.value;
	// if (current.value < 4) {
	// }
	// else {
	// 	start = (newCurrent.value + 1) % pages * pages + current.value
	// 	end = start + pages;
	// }
	_list = list.value.slice(start, end)
	console.log(start, end);

	return _list
})
const videoContexts = ref([]);
onMounted(() => {
	if (videoContexts.value[current.value]) {
		videoContexts.value[current.value].play()
	}

})
const setItemRef = (el, index) => {
	if (el) {
		videoContexts.value[index] = el
	}
}
const onPlay = async (item) => {
	try {
		await VIDEO_VIEWS(item.id)
	} catch (error) { }
}

const onSwiperChange = (e) => {
	const newIndex = e.detail.current;
	if (videoContexts.value[current.value]) {
		videoContexts.value[current.value].pause()
	}
	if (newIndex == list.value.length - 2) {
		useVideo.setVideoList(true)
	}

	current.value = newIndex;
	if (videoContexts.value[newIndex]) {
		videoContexts.value[newIndex].play()
	}
}

const like = async (item, index) => {
	let obj = {};
	try {
		const res = await VIDEO_GOODS(item.id);
		obj = { ...item, goods: res.data.goods, is_goods: item.goods == 0 ? 1 : 0 };
		useVideo.setList(obj, index);
	} catch (error) {
		Toast(error.msg)
	}
}
const collect = async (item, index) => {
	let obj = {};
	try {
		const res = await VIDEO_COLLECTS(item.id);
		obj = { ...item, collects: res.data.collects, is_collect: item.is_collect == 0 ? 1 : 0 };
		useVideo.setList(obj, index);
	} catch (error) {
		Toast(error.msg)
	}
}

const follow = async (item, index) => {
	let obj = {};
	try {
		const res = await DISCOVER_FOLLOW(item.userid);
		obj = { ...item, is_follow: item.is_follow == 0 ? 1 : 0 };
		useVideo.setList(obj, index);
	} catch (error) {
		Toast(error.msg)
	}
}
const comment = (item) => {
	video_id.value = item.id;
	dialogRef.value && dialogRef.value.open();
}
onShow(() => {
})
</script>

<style lang="scss" scoped>
.pop {
	position: fixed;
	width: 750rpx;
	background-color: #fff;
	border-radius: 30rpx 30rpx 0 0;
	left: 0;
	transition-property: top;
	transition-duration: 150ms;
	transition-timing-function: ease-in-out;
	z-index: 999;

	.title {
		padding: 30rpx 30rpx 0;
		align-items: center;
		justify-content: center;
		line-height: 40rpx;
	}

	&--close-btn {
		height: 40rpx;
		width: 40rpx;
		position: absolute;
		right: 30rpx;
		top: 30rpx;
	}
}

.border-bottom {
	width: 750rpx;
	border-bottom: 1rpx solid #e8e8e8;
	transform: scaleY(.5);
	margin-top: 30rpx;
}

.pinglun {
	flex-direction: row;
	align-items: flex-start;
	padding: 30rpx;

	.touxiang {
		height: 60rpx;
		width: 60rpx;
		border-radius: 50%;
	}
}

.list_cont {
	uni-view {
		position: relative;
	}
}

.mulu {
	padding-left: 30rpx;
	padding-right: 30rpx;

	.touxiang {
		height: 114.8rpx;
		width: 78.4rpx;
		border-radius: 10rpx;
	}

	.title {
		color: rgba(0, 0, 0, .85);
		padding: 0;
	}

	.active {
		.title {
			color: #f85400;
		}
	}

	.tag {
		background-color: #f85400;
		padding: 7rpx 12rpx;
		border-radius: 10rpx;

		.text {
			color: #fff;
		}
	}
}

.flex-1 {
	flex: 1;
}

.lh-40 {
	line-height: 40rpx;
}

@for $i from 20 to 40 {
	.fs-#{$i} {
		font-size: $i + rpx;
	}
}
</style>