优化播放开始请求接口增加防抖

api/video/index.js

@@ -55,13 +55,13 @@ export function getJinbiBili(data) {
 
 //获取推荐视频
 export function tuijianVideo(data){
-	const randomNum=5+  Math.ceil(Math.random()*30)
+	const randomNum=10+  Math.ceil(Math.random()*20)
 	return http.request({
 		url: 'course/selectCourseDetailsList',
 		method:'GET',
 		data:{
 			page: 1,
-			limit: 5,
+			limit: 10,
 			randomNum: randomNum
 		}
 	})

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

@@ -2,8 +2,7 @@
 	<view class="item" @appear="appear" @disappear="disappear" @click.stop>
 
 		<video class="u-flex-1 video" :show-fullscreen-btn="false" @controlstoggle="controlstoggles" v-if="showVideo"
-		@timeupdate="timeupdate"
-			@waiting="waiting()" object-fit="cover" @pause="onpause" @click="videoClick()"
+			@timeupdate="timeupdate" @waiting="waiting()" object-fit="cover" @pause="onpause" @click="videoClick()"
 			@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"
@@ -134,7 +133,7 @@
 	let autoplay = ref(props.item.videoUrl ? true : false)
 
 	const emits = defineEmits(['controlstoggles', 'disappear', 'appear', 'waiting', 'videoPlay', 'ended', 'dianzanClick',
-		'share', 'zhuijuClick', 'popupShow', 'itemMounted', 'toDetail', 'showInfo'
+		'share', 'zhuijuClick', 'popupShow', 'itemMounted', 'toDetail', 'showInfo', 'playStatusChange'
 	])
 
 	function controlstoggles(e) {
@@ -158,43 +157,48 @@
 		console.log(newval);
 		emits('showInfo', newval)
 	})
-	
-	
+
+
 	//是否是第一次加载时的播放，不是暂停再播放
-	let isFirstPlay=true
-	let isPlayFinish=false//是否播放完成	
+	let isFirstPlay = true
+	let isPlayFinish = false //是否播放完成	
 	/**
 	 * @param {type}  = [start,end] 
 	 */
-	function sendPlayStatus(type='start'){
-		Api.playStatus({
-			courseId:props.item.courseId,
-			courseDetailsId:props.item.courseDetailsId,
+	function sendPlayStatus(type = 'start') {
+		emits('playStatusChange', {
+			courseId: props.item.courseId,
+			courseDetailsId: props.item.courseDetailsId,
 			type
 		})
+		// Api.playStatus({
+		// 	courseId:props.item.courseId,
+		// 	courseDetailsId:props.item.courseDetailsId,
+		// 	type
+		// })
 	}
-	
-	function timeupdate(e){
+
+	function timeupdate(e) {
 		//隐藏loding
 		// #ifdef H5
 		uni.hideLoading()
 		// #endif
-		if(isPlayFinish){
-			return 
+		if (isPlayFinish) {
+			return
 		}
 		if (e.detail.currentTime > e.detail.duration * 0.9) {
 			if (!isFirstPlay) {
 				sendPlayStatus('end')
-				isPlayFinish=true
+				isPlayFinish = true
 			}
 		}
 	}
-	
+
 	function videoPlay() {
-		if(isFirstPlay&&!isPlayFinish){
+		if (isFirstPlay && !isPlayFinish) {
 			sendPlayStatus('start')
 		}
-		isFirstPlay=false
+		isFirstPlay = false
 		isPlying.value = true
 		// #ifdef H5
 		emits('controlstoggles', {
@@ -304,18 +308,18 @@
 		}
 	})
 	watch(() => showVideo.value, (newval) => {
-		console.log('showVideo change:'+newval);
+		console.log('showVideo change:' + newval);
 		if (newval) {
-			isFirstPlay=true
-			isPlayFinish=false
-			nextTick(()=>{
+			isFirstPlay = true
+			isPlayFinish = false
+			nextTick(() => {
 				init()
 			})
 		} else {
 			video = null
 		}
 	})
-	
+
 
 	const infoStyle = computed(() => {
 		return {
@@ -328,8 +332,6 @@
 			transform: `translateX(${(!isPlying.value||!props.item.videoUrl)?'0':60}px)`
 		}
 	})
-	
-	
 </script>
 
 <style lang="scss" scoped>

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

@@ -6,6 +6,7 @@
 			@transition="transition" :indicator-dots="false" :autoplay="false" :interval="0" :duration="200">
 			<swiper-item v-for="(item,index) in videoList" :key="index">
 				<list-item-vue :total="list.length" :item="item" :isCommand="isCommand"
+				@playStatusChange="playStatusChange"
 					:showControls="control.showControls" :current="current" :isCollect="isCollect"
 					@toDetail="toDetail(item,index)" @controlstoggles="controlstoggles" :playSpeeds="playSpeeds"
 					:index="index" :nowIndex="nowIndex" @dianzanClick="dianzanClick(item,index)" @share="share(item)"
@@ -21,6 +22,7 @@
 		<cell v-for="(item,index) in list" :key="item.courseDetailsId" :ref="setRefList(index)">
 			<view class="swipers-items" :style="boxStyle" @longpress="popupShow('speed')">
 				<list-item-vue :total="list.length" :item="item" :current="current" :isCollect="isCollect"
+				@playStatusChange="playStatusChange"
 					:isCommand="isCommand" :showControls="control.showControls" @toDetail="toDetail(item,index)"
 					@itemMounted="itemMounted" @controlstoggles="controlstoggles" :index="index" :instance="instance"
 					:nowIndex="nowIndex" @appear="appear($event,item,index)" :playSpeeds="playSpeeds"
@@ -47,14 +49,11 @@
 				</view>
 				<up-icon name="close" :size="16" color="#333" bold @click="popupClose('show')"></up-icon>
 			</view>
-			<scroll-view scroll-y="true" class="u-m-t-30 xuanji-scroll" 
-			ref="refXuanjiList"
-			:style="{height:xuanjiData.height+'px'}"
-			@scroll="xuanjiScroll"
-				:scroll-top="xuanjiData.scrollTop" scroll-with-animation :show-scrollbar="false">
+			<scroll-view scroll-y="true" class="u-m-t-30 xuanji-scroll" ref="refXuanjiList"
+				:style="{height:xuanjiData.height+'px'}" @scroll="xuanjiScroll" :scroll-top="xuanjiData.scrollTop"
+				scroll-with-animation :show-scrollbar="false">
 				<view class="ji-list u-flex u-flex-row u-flex-wrap">
 					<view class="ji-item u-flex-xy-center u-text-center" @click="jiClick(item,index)"
-						
 						:class="[nowIndex==index?'active':'',(index+1)%3==0?'mr-0':'','ji-item'+index]"
 						v-for="(item,index) in list" :key="index">
 						<text class="u-font-28" :class="{'color-fff':nowIndex==index}">第{{index+1}}集</text>
@@ -321,42 +320,45 @@
 		scrollTop: 0,
 		items: [],
 		scrollHeight: 0,
-		height:400
+		height: 400
 	})
-	const refXuanjiList=ref(null)
-	function xuanjiScroll(e){
+	const refXuanjiList = ref(null)
+
+	function xuanjiScroll(e) {
 		console.log(e);
 	}
 	async function xuanjiInit() {
 		// #ifdef APP
-		const height=44
-		const marginBottom=10
-		const oneItemHeight=height+marginBottom
-		xuanjiData.scrollTop=Math.ceil((nowIndex.value+1)/3) * oneItemHeight - (xuanjiData.height)/2+oneItemHeight/2
+		const height = 44
+		const marginBottom = 10
+		const oneItemHeight = height + marginBottom
+		xuanjiData.scrollTop = Math.ceil((nowIndex.value + 1) / 3) * oneItemHeight - (xuanjiData.height) / 2 +
+			oneItemHeight / 2
 		return
 		// #endif
-	
+
 		if (!xuanjiData.items[props.list.length - 1]) {
 			const res = await getElRect('ji-list', instance, {
 				rect: true
 			})
 			xuanjiData.scrollHeight = res.height
-			let firstItemTop=0
+			let firstItemTop = 0
 			for (let i in props.list) {
 				const res1 = await getElRect('ji-item' + i, instance, {
 					rect: true
 				})
-				if(i==0){
-					firstItemTop=res1.top
+				if (i == 0) {
+					firstItemTop = res1.top
 				}
 				xuanjiData.items[i] = {
 					height: res1.height,
-					top: i==0?0: res1.top-firstItemTop
+					top: i == 0 ? 0 : res1.top - firstItemTop
 				}
 			}
 		}
-		xuanjiData.scrollTop =xuanjiData.items[nowIndex.value].top-(xuanjiData.height)/2+(xuanjiData.items[nowIndex.value].height)/2 
-			console.log(xuanjiData);
+		xuanjiData.scrollTop = xuanjiData.items[nowIndex.value].top - (xuanjiData.height) / 2 + (xuanjiData.items[
+			nowIndex.value].height) / 2
+		console.log(xuanjiData);
 	}
 
 
@@ -549,7 +551,7 @@
 			// #ifdef APP
 			xuanjiInit()
 			// #endif
-			
+
 		}
 		popup[key] = true
 		if (item) {
@@ -811,6 +813,19 @@
 			return item ? item : v
 		})
 	}
+
+
+
+
+	/**
+	 * @param {type}  = [start,end] 
+	 */
+	const playStatusChange = debounce((data) => {
+			Api.playStatus(data)
+	}, 2000)
+	
+	
+
 	defineExpose({
 		videoListUpdata
 	})

pages/pays/pays.vue

@@ -31,6 +31,7 @@
 		getOrderInfo({
 			orderId: state.orderId
 		}).then(res => {
+			console.log(res);
 			if (res == 1) {
 				uni.hideLoading()
 				const sysInfo = uni.getSystemInfoSync();