baiyuApp/pages/expert/video.nvue

<template>
	<view class="es">
		
		<view :style="'width: '+ windowWidth +'px; height: '+ boxStyle.height +'px;background:#000;padding-top:'+statusBarHeight+'px'">
			<view class="emptybox x-c" :style="'width: '+ windowWidth +'px; height: '+ boxStyle.height +'px;' " v-if="isEmpty">
				<image class="emptybox-img" src="https://www.mescroll.com/img/mescroll-empty.png" mode="aspectFill"></image>
				<text class="emptybox-tip">~空空如也~</text>
			</view>
			<list  loadmoreoffset="100" @scroll="scrolls" :show-scrollbar="false" v-if="dataList&&dataList.length > 0" :style="'height: '+ (videoStyle.height) +'px;' " ref="listBox" :pagingEnabled="true" :scrollable="true">
				<refresh @pullingdown='onpullingdown' @refresh="onrefresh" :display=" refreshing ? 'show' : 'hide' " class="refresh x-c " :style="'width: '+ windowWidth +'px;'">
					<loading-indicator style="width: 22px;height: 22px;color:#fff;"></loading-indicator>
					<text class="es-fs-32 es-ml-8 es-c-white">{{refreshText}}</text>
				</refresh>
				<cell v-for="(item,i) in dataList" :key="i">
					<view :style="'width: '+ windowWidth +'px;height:'+ (videoStyle.height)+'px;'" :ref="'item'+i" style="position: relative;">
						<view v-if="(k-i)<=1" style="position: relative;" >
							<view class="root" >
									<video  :id="item.id" :loop="true" :src="item.src" :poster="item.cover"
											@play="playIngs(item,i)" :enable-progress-gesture="false" :page-gesture="false"
											:controls="false"  :show-loading="false" :initial-time="0"
											:show-fullscreen-btn="false" :show-center-play-btn="false" :style="videoStyle"
											:object-fit="object_fit" @timeupdate="timeupdate($event,i)"
											 @fullscreenchange="onFullscreenChange" @waiting="onWaiting()" @progress="onProgress()" 
											 @ended="endedPlayNext()" @canplay="onVideoCanPlay" @canplaythrough="onVideoCanPlayThrough" 
											 @loadeddata="onLoadeddata" @loadedmetadata="onLoadedMetadata" @error="onError"
									         >
									</video>
							</view>
							
							<view class="videoHover" @click="tapVideoHover(item.state,$event)"
								@touchstart="touchstartHover" :style="boxStyle">
								<image v-if="item.state=='pause' && item.isShowPlayIcon" class="playState" src="/static/image/course/play.png"></image>
							</view>  
							
							<!-- 审核通过的才能有相关操作 -->
							<view class="right es-c-white" v-if="item.isAudit!=-1&&item.isAudit!=0">
								<view class="item1 es es-ac es-pc es-mt-33" @tap="handleAvatar(item)">
									<view class="es-icon-100 es-br">
										<image class="es-icon-100" style="border-radius: 50rpx;" :src="item.headImg"></image>
									</view>
								</view>
								<view class="item1 es es-ver es-ac es-pc es-mt-33" @tap="doLike(item,i)">
									<view class="es-icon-84">
										<image class="es-icon-84" :src="item.like==1?'/static/images/other/video/zan1_on.png':'/static/images/other/video/zan1.png'"></image>
									</view>
									<view><text class="es-c-white es-fs-22 es-fw-500">{{item.likeNum}}</text></view>
								</view>
								
								<view class="item1 es es-ver es-ac es-pc es-mt-33" @tap="openComment(item)">
									<view class="es-icon-84">
										<image class="es-icon-84" src="/static/images/other/video/comment1.png"></image>
									</view>
									<view><text class="es-c-white es-fs-22 es-fw-500">{{item.smsNum}}</text></view>
								</view>
								
								<view class="item1 es es-ver es-ac es-pc es-mt-33" @tap="doFavorite(item,i)">
									<view class="es-icon-84">
										<image class="es-icon-84" :src="item.favorite==1?'/static/images/other/video/fav1_on.png':'/static/images/other/video/fav1.png'" ></image>
									</view>
									<view><text class="es-c-white es-fs-22 es-fw-500">{{item.favoriteNum}}</text></view>
								</view>
								
								<!-- <view class="item1 es es-ver es-ac es-pc es-mt-33"  @tap="openShare(item)">
									<view class="es-icon-84">
										<image :class="animate ? 'animate-icon':'animate-scale'" src="@/static/image/home1/weixin_icon.png" mode="aspectFill"></image>
									</view>
									<view><text class="es-c-white es-fs-22 es-fw-500">{{item.shares}}</text></view>
								</view> -->
								
								<!-- <view class="item1 es es-ac es-pc es-mt-33">
									<view class="es-br ">
										<text class="es-c-white es-fs-34">{{item.uploadType}}</text>
									</view>
								</view> -->
							</view>
						
							<view class="left" v-if="item.isShowGoods && item.productId!=null" >
								<view class="es-w-40 es-h-40" @tap.stop="closePro(item,i)" style="position: absolute;right:0rpx;top:74rpx;z-index:999">
									<image class="es-w-40 es-h-40"  src="@/static/images/close40.png"></image>
								</view>
								<view class="es-h-74 es es-ac">
									<view class="es-f1 es es-ac" id="w">					
										<view class="bg" style="width: 320rpx;" >
											<image  src="@/static/images/other/video/bg.png"  style="height: 74rpx;width: 100%;" ></image>
										</view>
								
										<view class="es-w-30"></view>
									</view>
								</view>
								
								<view class="goods" @tap="goToPro(item)">
									<view class="icon" style="width: 290rpx;height: 290rpx;">
										<image :src="item.imgUrl" style="width: 290rpx;height: 290rpx;" class="es-br-10"></image>
									</view>
									<view class="es-omit es-mt-19" style="width: 290rpx;"><text class="es-fw es-fs-30">{{item.packageName}}</text></view>
								</view>
							</view>
							
							<view  class="bottom">
								<text  class="txtTitle" :class="showExpand?'ellipsis':''" :style="defTitStyle" :id="'txtTitle'+i" :ref="'txtTitle'+i">{{item.title}}</text>
								<text  v-if="showExpand"  class="expandBtn"  @tap="clickExpand">{{ titIsExpand?'收起':'展开' }}</text>
							</view>
							
						</view>
						
					</view>
				</cell>
			</list>
		</view>
		
		<view :style="'background-color:'+bgColor+';'" class="tabbar1" @click="navBack()">
			<uni-icons type="left" size="20" color="#fff"></uni-icons><text style="color:#fff">返回</text>
		</view>
		
		 <view class="redpacked x-c es-br-ban" v-if="!iserr" @click.stop="tapRedpacked">
				<gb-progress class="es x-c es-br-ban" :radius="43" :startPosDegree="0" originalColor="#222222" 
					 processColor="#ED7263" innerbgColor="#222222" :process="process" :barWidth="5">
					<image class="es-w-50 es-h-50" src="@/static/images/ad/redpacked.png" mode="widthFix" ></image>
				</gb-progress>
		 </view>

		<!-- 分享弹窗 -->
		<u-popup :show="showShare" @close="showShare = false" >
			<share-box :shareItem="shareItem"  @closeShare='showShare = false' ></share-box>
		</u-popup>
	
	</view>
</template>

<script>
	import { getVideoList } from "@/api/expert.js"
    import { doFavorite,doLike } from '@/api/shortvideo'
	import { addIntegral } from '@/api/integral'
	import { isLogin } from '@/utils/common'
	import { showLoginPage } from '@/utils/login'
	import shareBox from "@/components/share-box/share-boxN.vue"
	// #ifdef APP-PLUS
	const dom = weex.requireModule('dom');
	// const dom = uni.requireNativePlugin('dom')
	// #endif
	export default {
		components: {
			shareBox
		},
		data() {
			return {
				talentUserId: '',
				animate: true,
				animateInterval: null,
				bgColor: '',
				isEmpty: false,
				dataList: [], //用于数据循环的列表
				wHeight: 0, //获取的屏幕高度
				boxStyle: { //视频父视图样式
					'height': 0,
					'width': 0,
				},
				videoStyle: { //视频，图片封面样式
					'height': 0,
					'width': 0,
					'marginTop':0
				},
				Heights: 0,
				k: 0, //默认为0
				playIngIds: [], //正在播放的视频id列队，列队用于处理滑动过快导致的跳频问题
				ready: false, //可忽略
				isDragging: false, //false代表停止滑动
				refreshing: false, //用于下拉刷新
				windowWidth: 0, //获取屏幕宽度
				windowHeight: 0,
				dex: [0, 0], //用于判断是上滑还是下滑，第一个存旧值，第二个存新值【目前在1.0.7已经废弃】
				currents: 0, //用于左右滑动，0代表视频界面，1代表右滑界面
				platform: '', //用于获取操作系统：ios、android
				playIng: false, //用于视频初始化时是否播放，默认不播放
				videoTime: '', //视频总时长，这个主要用来截取时间数值
				videoTimes: '', //视频时长，用这个来获取时间值，例如：00:30这个时间值
				changeTime: '', //显示滑动进度条时变化的时间
				isShowimage: false, //是否显示封面【1.0.4已废弃，但是意思需要记住】
				currenttimes: 0, //当前时间
				isShowProgressBarTime: false, //是否拖动进度条，如果拖动（true）则显示进度条时间，否则不显示（false）【1.0.4已废弃，但是意思需要记住】
				ProgressBarOpacity: 0.7, //进度条不拖动时的默认值，就是透明的
				dotWidth: 0, //播放的小圆点，默认没有
				deleteHeight: 0, //测试高度
				statusBarHeight:0,
				percent: 0, //百分小数
				currentPosition: 0, //滑块当前位置//2.0已弃用，现已用于后端参数
				currentPositions: 0, //滑块当前位置的副本//2.0已弃用，现已用于后端参数
				newTime: 0, //跟手滑动后的最新时间
				timeNumber: 0, //
				ProgressBarBottom: 20, //进度条离底部的距离
				object_fit: 'contain', //视频样式默认包含   contain :包含  fill:填充 cover：覆盖
				mode: 'aspectFit', //图片封面样式
				timeout: "", //用来阻止 setTimeout()方法
				voice: "", //用来阻止 setTimeout()方法
				oldVideo: "",
				isAutoplay: false, //是否开启自动播放(默认不开启)
				autoplayText: "开启自动播放",
				timers: "",
				leftTimers:"",
				// 引入评论 - 参数
				heightNum: 1.18,
				// 双击点赞参数
				touchNum: 0,
				aixinLeft: 0,
				aixinTop: 0,
				isShowAixin: false,
				Rotate: 0,
				isShowTab:true,
				isShow1: false, //控制渲染变量1
				isShow2: false, //控制渲染变量2 ： 专门控制 uni-popup
				showPlay: false, //转轮显示控制
				rotates: 0, //转轮旋转角度
				rotateTime: "", //转轮递归事件控制
				xrotats: "",
				player: "",
				top:0,
                w:0,
				showLeft:true,
				keyword:"",
				pageNum:1,
				pageSize:10,
				isLastPage:false,
				refreshText: '↓ 下拉刷新',
				tabIndex: 0, // tab下标
				current: 0,
				mtabs: [
					{id: "tab00",name: ''},
					{id: "tab01",name: ''}
					// {id: "tab00",name: '推荐'},
					// {id: "tab01",name: '热点'}
					// {id: "tab02",name: '直播'},
					// {id: "tab03",name: '健康'}
				],
				specVisible: false,
				esComment:null,
				showExpand:false,
				titIsExpand:false,
				lines:2,
				lineCount:0,
				titOpacity:0,
				defTitStyle:{'opacity':0},
				showShare:false,
				shareItem:{ imageUrl:"",title:"",path:""},
				viewVideoNum:0,
				//圆环倒计时
				iserr:false,
				interval:null,
				process:0,
				processDatas:[],
				isCounting:true,
				isPostBack:true,
				countItem:{"process":0,"isLoad":false},
				doLikeDisabled:false,
				doFavDisabled:false,
				// 点击某个视频进入的列表
				curFlag: false,
				// 1表示达人主页点进来的
				curFlagType: 0,
			}
		},
		created: function() {
			// setTimeout(e => {
			// 	uni.createSelectorQuery().select('#w').boundingClientRect(r2 => {
			// 		this.w = r2.width;
			// 	}).exec();
			// }, 50)
		},
		onLoad(options) {
			this.talentUserId= options.talentUserId
			const curPageNum = Number(options.curPageNum || 1)
			this.pageNum = curPageNum
			this.curFlagType = options.curFlagType
			let i = Number(options.k || 0)
			if(i > this.k) {
				this.curFlag = true
				if(curPageNum>1) {
					i = i - (curPageNum-1)*this.pageSize
				}
			}
			const systemInfo = uni.getSystemInfoSync();
			this.statusBarHeight=systemInfo.statusBarHeight;
		
			this.windowWidth = systemInfo.screenWidth //获取屏幕宽度
			this.boxStyle.width = this.windowWidth + 'px' //给宽度加px
			let tabBarHeight = systemInfo.screenHeight - systemInfo.safeArea.bottom;
			this.wHeight=systemInfo.windowHeight; //获取屏幕高度
			this.boxStyle.height = this.wHeight - this.deleteHeight; //改变视频高度
		
			this.videoStyle.width=this.boxStyle.width;
			this.videoStyle.height=this.boxStyle.height - this.statusBarHeight;
			
			this.getData('onLoad',i);
			
			uni.getSystemInfo({success: (res) => {
					this.top = res.safeArea.top;
				}
			});
			
			let that=this;
			uni.$on('refreshVideoComment', (data) => {
			    let item=that.dataList[that.k];
				item.smsNum=data.smsNum;
				that.dataList[that.k]=item;
				that.$forceUpdate(); // 如果你需要强制刷新，可以调用 $forceUpdate()
			}); 
		},
		onShow(){
			if(!isLogin()){
				uni.navigateTo({
					url: '/pages/auth/loginIndex'
				})
				return;
			} 
			this.animate = true
			this.changeAnimate()
			const systemInfo = uni.getSystemInfoSync();
			if(this.dataList.length !== 0){
				this.dataList[this.k].state = 'play';
				uni.createVideoContext(this.dataList[this.k].id,this).play();
			}
		},
		onHide(){
			clearInterval(this.animateInterval)
			this.animateInterval = null
			this.dataList[this.k].state = 'pause';//界面隐藏也要停止播放视频
			uni.createVideoContext(this.dataList[this.k].id,this).pause();//暂停以后继续播放
			//this.showToast('回到后台');
		},
		beforeDestroy() {
			if(this.animateInterval) {
				clearInterval(this.animateInterval)
				this.animateInterval = null
			}
			this.dataList[this.k].state = 'pause';//界面隐藏也要停止播放视频
			uni.createVideoContext(this.dataList[this.k].id,this).pause();//暂停以后继续播放
			uni.$off("refreshVideoComment");
		},
		watch:{
			k(k,old_k){
				//监听 k 值的变化，可以控制视频的播放与暂停
				if(!this.curFlag) {
					// 清理定时器
					//this.dataList[old_k].state = 'stop'//如果是被滑走的视频，就停止播放
					this.dataList[old_k].playIng = false//如果视频暂停，就加载封面
					this.dataList[old_k].isplay = true
					// console.log("qxj 旧视频暂停");
					
					uni.createVideoContext(this.dataList[old_k].id,this).seek(0);
					uni.createVideoContext(this.dataList[old_k].id,this).play();
								
					clearTimeout(this.oldVideo)
					this.oldVideo = setTimeout(()=>{
						uni.createVideoContext(this.dataList[old_k].id,this).pause()
						// console.log('预留第' + (old_k + 1) + '个视频：' + this.dataList[old_k].id,this.dataList[k].id)
					},10);
				}
				// clearTimeout(this.timeout)
				// this.timeout = setTimeout(()=>{
				// 	uni.createVideoContext(this.dataList[k+1].id,this).seek(0);
				// 	uni.createVideoContext(this.dataList[k+1].id,this).pause();
				// 	console.log('预加载第' + (k+1) + '个视频：' + this.dataList[k+1].id)
				// },50);
				
				// 2.0版本已经去掉了下面这一句，视频不用暂停，只需要把声音禁止就行
				// uni.createVideoContext(this.dataList[old_k].id + '' + old_k,this).stop()//如果视频暂停，那么旧视频停止，这里的this.dataList[old_k].id + '' + old_k，后面加 old_k 是为了每一个视频的 id 值不同，这样就可以大程度的避免串音问题
				this.dataList[k].state = 'play'
				// console.log('已经暂停 --> 第' + (old_k + 1) + '个视频～')//提示
				clearTimeout(this.player);
				this.player = setTimeout(()=>{
					uni.createVideoContext(this.dataList[k].id,this).play();
				},0);
				// 判断是否等于所有视频的长度
				if(k == this.dataList.length-1) {
					(async ()=>{
						console.log("qxj wath isLastPage:"+this.isLastPage);
						var p = k;
						if(this.isLastPage){
							// this.pageNum=1;
							// await this.getData();
							//var p = k;
						}else{
							this.pageNum++;
							await this.getData();
						}
						console.log("qxj after getData listCount:"+this.dataList.length);
						// this.dataList[p].isplay = true
						// setTimeout(()=>{
						// 	uni.createVideoContext(this.dataList[p].id,this).play()
						// 	clearTimeout(this.timeout)
						// 	this.timeout = setTimeout(()=>{
						// 		uni.createVideoContext(this.dataList[p].id,this).seek(0)
						// 		uni.createVideoContext(this.dataList[p].id,this).pause()
						// 		console.log('预加载第' + (p + 1) + '个视频：' + this.dataList[p].id)
						// 	},1000)
						// },20)
						
					})();
				}
				//【此处处理进度条卡住的问题】
				if(uni.getSystemInfoSync().platform !== 'ios'){
					setTimeout(()=>{
						uni.createVideoContext(this.dataList[k].id,this).pause()
						uni.createVideoContext(this.dataList[k].id,this).play()
					},100)
				}
				this.xrotats = setTimeout(()=>{
					this.showPlay = true;
				},200)
			}
		},
		methods: {
			handleAvatar(item) {
				if(this.curFlagType == 1) {
					uni.navigateBack()
				} else {
					uni.navigateTo({
						url:'/pages/expert/index?userId='+item.userId
					})
				}
			},
			changeAnimate() {
				this.animateInterval = setInterval(()=>{
					this.animate = !this.animate
				},500)
			},
			onpullingdown(e) {
			    if (this.refreshing) return;
				if (Math.abs(e.pullingDistance) > Math.abs(e.viewHeight)) {
					this.refreshText = '释放更新'
					this.isShowTab=false;
				} else {
					this.refreshText = '下拉更新'
					this.isShowTab=true;
				}
			 },
			 onrefresh(e) {
				 this.refreshing = true;
				 this.isShowTab=false;
				 setTimeout(()=>{
					 this.refreshing = false;
				 },100)
			    // console.log('onRefreshing...');
			  //    this.refreshing = true;
				 // this.isShowTab=false;
			 	//  this.pageNum=1;
			  //    this.getData();
			  //    if (this.refreshing) return;
			 },
			getData(flag,index){
				let that=this;
				const params={
					keyword:this.keyword,
					userId:this.talentUserId,
					pageNum:this.pageNum,
					pageSize:this.pageSize,
				};
				this.isEmpty = false
				getVideoList(params).then(res => {
						this.refreshing = false;
						this.isShowTab=true;
						if(res.code==200&& res.data &&res.data.list&&res.data.list.length > 0){
							if(this.pageNum==1 || flag =='onLoad') {
								this.dataList = []
							}
							const datas=res.data.list;  
							this.isLastPage=res.data.isLastPage;  
							datas.forEach(e=>{
								e.videoId=e.id;
								e.id = 'A'+e.id+''+parseInt(Math.random()*1000);
								//e.src=e.src.replace("obs.shouzhujue.com","obs.jy.cc");
								//e.src=e.src.replace("cdn.ylrzcloud.com","tcpv.ylrzcloud.com");
								this.dataList.push(e);
							});
							if(flag =='onLoad') {
								const eventParam = {
									isDragging: false
								}
								this.scrolls(eventParam,'scroll',index)
							}
							const i = flag =='onLoad'? this.k : 0
							if(this.pageNum==1 || flag =='onLoad'){
								setTimeout(e=>{
									this.tapVideoHover("reset");
									this.checkTextLines(0);
								},100)
								this.leftTimers=setTimeout(e=>{
									this.dataList[0].isShowGoods=true;
								},3000);
							}
							if(this.isPostBack){
								this.isPostBack=false;
								this.getBrowse();
							}
						}else{
							this.isEmpty = true
							this.dataList = []
							this.refreshing = false;
							this.isShowTab=true;
						}
					},
					rej => {
						uni.hideLoading()
					}
				).catch(()=>{
					uni.hideLoading()
					//联网失败, 结束加载
					this.refreshing = false;
					this.isShowTab=true;
				});
			},
			touchstart(event) {
				this.dataList[this.k].isShowimage = true //刚触摸的时候就要显示预览视频图片了
				this.dataList[this.k].isShowProgressBarTime = true //显示时间线
				this.ProgressBarOpacity = 1 //让滑块显示起来更明显一点
				this.dotWidth = 10 //让点显示起来更明显一点
			},
			touchend() { //当手松开后，跳到最新时间
				console.log('touchEnd');
				uni.createVideoContext(this.dataList[this.k].id, this).seek(this.newTime)
				if (this.dataList[this.k].state == 'pause') {
					this.dataList[this.k].state = 'play'
					uni.createVideoContext(this.dataList[this.k].id, this).play();
					console.log('touchEnd 播放数据',this.k,this.dataList[this.k].id);
				}
				this.dataList[this.k].isShowProgressBarTime = false //触摸结束后，隐藏时间线
				this.dataList[this.k].isShowimage = false //触摸结束后，隐藏时间预览
				this.ProgressBarOpacity = 0.5 //隐藏起来进度条，不那么明显了
				this.dotWidth = 0 //隐藏起来进度条，不那么明显了
			},
			touchmove(event) { //当手移动滑块时，计算位置、百分小数、新的时间
				var msg = []
				if (this.videoTime !== '') {
					msg = this.videoTime.split(':')
				}
				var timeNumber = Number(msg[0]) * 60 + Number(msg[1])
				this.currentPositions = event.changedTouches[0].screenX
				this.percent = this.currentPositions / this.windowWidth
				this.newTime = this.percent * timeNumber
				this.currenttimes = parseInt(this.newTime)
				let theTime = this.newTime
				let middle = 0; // 分
				if (theTime > 60) {
					middle = parseInt(theTime / 60);
					theTime = parseInt(theTime % 60);
				}
				this.changeTime = `${Math.round(middle)>9?Math.round(middle):'0'+Math.round(middle)}:${Math.round(theTime)>9?Math.round(theTime):'0'+Math.round(theTime)}`
			},
			tapVideoHover(state,event){
				this.dataList[this.k].isShowimage = false
				this.dataList[this.k].isShowProgressBarTime = false
				this.ProgressBarOpacity = 0.5
				this.dotWidth = 0
				// 1.启用双击点赞 --- start
				if(state=='play'||state=='continue'){
					this.dataList[this.k].state = 'pause';
				}
				else if(state=='reset'){
					this.dataList[this.k].state = 'reset';
				}
				else{
					this.dataList[this.k].state = 'continue';
				}
				this.dataList[this.k].isShowPlayIcon = true;
				//console.log('xxx',this.dataList[this.k].state);
				if(this.dataList[this.k].state == 'continue'){
					//console.log('播放数据',this.dataList[this.k].id);
					uni.createVideoContext(this.dataList[this.k].id,this).play();//暂停以后继续播放
				}
				if(this.dataList[this.k].state == 'pause'){
					uni.createVideoContext(this.dataList[this.k].id,this).pause();//暂停以后继续播放
				}
				// console.log("暂停以后继续播放====",this.k,this.dataList[this.k])
				if(this.dataList[this.k].state == 'reset'){
					uni.createVideoContext(this.dataList[this.k].id,this).seek(0);
					uni.createVideoContext(this.dataList[this.k].id,this).play();//暂停以后继续播放
					this.dataList[this.k].state = 'continue';
				}
			},
			scrolls (event,type,index) {
				this.isDragging = event.isDragging;
				if (!event.isDragging) {//isDragging：判断用户是不是在滑动，滑动：true，停止滑动：false。我们要用户停止滑动时才给 k 赋值，这样就可以避免很多麻烦
					var i = 0//先用绝对值取出滑动的距离，然后除以屏幕高度，取一个整，就知道你现在滑动到哪一个视频了
					if(type&&type=='scroll'){
						i = index
					
					} else {
						i = Math.round(Math.abs(event.contentOffset.y) / (this.wHeight - this.deleteHeight - this.statusBarHeight + 1))
					}
					if(i !== this.k){
						//这里加判断是因为这个方法会执行很多次，会造成重复请求，所以这里写一个限制
						let num = 0;
						clearTimeout(this.timers);
						this.timers = setTimeout(()=>{
							this.k = i;//判断了用户没有滑动，确认了用户的确是在看这个视频，然后就赋值啦
							if(type&&type=='scroll') {
								this.$nextTick(()=>{
									try {
										const el = this.$refs['item'+this.k][0]
										dom.scrollToElement(el, {
											animated: false
										})
										this.curFlag = false
									} catch(err) {
										console.log(err)
									}
								})
							}
							this.dataList[this.k].state = 'play';
							console.log('正在播放 --> 第' + (this.k + 1) + '个视频～');
							this.checkTextLines(i);
							this.getBrowse();
						},num);
						if(!isLogin()){
							if(this.viewVideoNum%2==0){
								showLoginPage();
							}
							this.viewVideoNum++;
						}
						clearTimeout(this.leftTimers);
						this.leftTimers=setTimeout(e=>{
							this.dataList[this.k].isShowGoods=true;
						},3000);
					}
				}
			},
			handleDoLike(item,index){
				  if (this.doLikeDisabled) return;
				  this.doLikeDisabled = true;
				  this.doLike(item, i);
				  setTimeout(() => {
					this.doLikeDisabled = false;
				  }, 1000); // 1秒后重新启用方法
			},
			doLike(item,index){
				if(!isLogin()){
					showLoginPage();
					return;
				}
				doLike(item.videoId).then(res => {
						if(res.code==200){
							if(item.like==0){
								item.like=1;
								item.likeNum+=1;
							}else{
								item.like=0;
								item.likeNum-=1;
							}
							this.dataList[index]=item;
							this.$forceUpdate(); // 如果你需要强制刷新，可以调用 $forceUpdate()
						}else{
							this.showToast(res.msg);
						}
					},
					rej => {}
				);
			},
			doFavorite(item,index){
				if(!isLogin()){  
					showLoginPage();
					return;
				}
				doFavorite(item.videoId).then(res => {
						if(res.code==200){
							if(item.favorite==0){
								item.favorite=1;
								item.favoriteNum+=1;
							}else{
								item.favorite=0;
								item.favoriteNum-=1;
							}
							this.dataList[index]=item;
							this.$forceUpdate(); // 如果你需要强制刷新，可以调用 $forceUpdate()
						}
						else{
							this.showToast(res.msg);
						}
					},
					rej => {}
				);
			},
			addIntegral(){
				if(!isLogin()){  
					return;
				}
				addIntegral(2).then(res => {
						if(res.code==200){
							uni.showToast({icon:'none',title:res.msg,duration:3000,position:'bottom'});
						}
					},
					rej => {}
				);
			},
			tabChange (index) {
				this.tabIndex=index;
				
			},
			playIngs(item,i){
				item.state='play'
				item.isShowPlayIcon = true
			},
			openComment(item){
				const subNVue = uni.getSubNVueById('videoComment');
				subNVue.show('slide-in-bottom', 250);
				uni.$emit('videoComment', {  
				    videoId: item.videoId,
					smsNum:item.smsNum,
					subNVueName: 'videoComment'
				});
			},
			closePro(item,index){
				item.isShowGoods=false;
				this.dataList[index]=item;
				this.$forceUpdate(); 
			},
			goToPro(item){  //跳转疗法页面
				uni.navigateTo({
					url: "/pages/store/packageDetails?packageId="+item.productId
				});
			},
			click:function(){
				
			},
			onClickItem(e) {
				if (this.tabIndex !== e.currentIndex) {
					this.tabIndex = e.currentIndex
				}
			},
			getRichText(content) {
				content = new HTMLParser(content.trim())
				return content
			},
			checkTextLines(index)  {  
				var system = uni.getSystemInfoSync();
				let textWidth=system.screenWidth-uni.upx2px(150+20);
				let fontSize=uni.upx2px(30);
				let screenWidth=system.screenWidth;
				let that=this;
				let txtTitle=this.$refs["txtTitle"+index][0];
				if(txtTitle) {
					this.defTitStyle={'opacity':0}
					this.showExpand=false;
					uni.createSelectorQuery().select("#txtTitle"+index).boundingClientRect(rect => {
						 setTimeout(e=>{
							this.defTitStyle={'opacity':1};
							this.showExpand=rect.height>40;
						 },50);
					}).exec();
				}
			},
			linechange(event){  
				const  lineCount = event.detail.lineCount //行数  
				this.lineCount = lineCount   
				if(lineCount>3){ //如果大于3行，显示展开阅读  
					this.showExpand = true  
				}  
			},  
			clickExpand(){
				this.titIsExpand=!this.titIsExpand;
				this.defTitStyle={'opacity':1,'lines':this.titIsExpand?1000:2};
			},
			openShare(item){
				this.shareItem.videoId = item.videoId;
				this.shareItem.title=item.title;
				this.shareItem.imageUrl=item.cover;
				this.shareItem.compressImage = 1
				this.shareItem.summary="";
				let cdn=uni.getStorageSync('h5Path');
				this.shareItem.url=cdn+"/pages/course/video/living-applet?videoId="+item.videoId;
				this.showShare=true;
			},
		    getBrowse() {  // 倒计时  
				this.countItem=this.processDatas[this.k];
				if(this.countItem==null){
					this.countItem={"process":0,"isLoad":false};
					this.process=0;
				}
				this.process=this.countItem.isLoad?100:0;
				if(this.interval==null){
					this.interval = setInterval(() => {
							if (this.process < 100) {
								if (this.isCounting) {
									this.process = this.process + 1;
									this.countItem.process=this.process;
									if(this.processDatas[this.k]!=undefined){
										this.processDatas.splice(this.k,1,this.countItem);
									}else{
										this.processDatas.push(this.countItem);
									}
								}
							} 
							else {
								if(!this.countItem.isLoad){
									this.addIntegral();
								}
								clearInterval(this.interval); 
								this.interval=null;
								this.countItem.isLoad=true;
								if(this.processDatas[this.k]!=undefined){
									this.processDatas.splice(this.k,1,this.countItem);
								}else{
									this.processDatas.push(this.countItem);
								}
							}
					  }, 100);
				}
			 },
			onProgress() {
			    //console.log("------qxj onProgress");
			},
			timeupdate(){
				//console.log("------qxj onTimeupdate");
			},
			onLoadeddata() {
			    console.log('------qxj 视频缓冲完成');
			},
			onVideoCanPlay() {
			    console.log('------qxj 视频可以开始播放，但可能需要缓冲');
			},
			onVideoCanPlayThrough() {
			     console.log('------qxj 视频可以无暂停地播放');
			},
			onLoadedMetadata(e) {
			   //console.log("------qxj onLoadedMetadata");
			},
		 
			endedPlayNext(){
				 //console.log("------qxj endedPlayNext");
			},
			onWaiting(){
				 ////console.log("------qxj onWaiting");
				 //this.tapVideoHover("");
			},
			onError(){
				 console.log("------qxj onError 当前视频播放出错");
				 uni.showToast({title: "当前视频播放出错",icon: 'none',position:'bottom'});
			},
			showToast(title){
				uni.showToast({icon:'none',title: title ,duration:3000});
			},
			tapRedpacked(){
				
			},
			navBack() {
				uni.navigateBack()
			}
		}
	}
</script>

<style scoped lang="scss">
	.animate-icon {
		width:70rpx;
		height:70rpx;
		transition-duration: 0.5s;
		transform:scale(1);
		transition-timing-function: linear;
	}
	.animate-scale{
		width:70rpx;
		height:70rpx;
		transition-duration: 0.5s;
		transform:scale(0.88);
		transition-timing-function: linear;
	}
	.emptybox {
		align-items: center;
		&-img {
			width: 320rpx;
			height: 240rpx;
		}
		&-tip {
			margin-top: 80rpx;
			font-size: 30rpx;
			color: gray;
		}
	}
	.view-animation{
		transition-duration: 0.2s;
		transition-property: height;
	}
	.container {
		background-color: #000000;
	}

	.item {
		/* width : 750rpx; */
		background-color: #000000;
		position: relative;
	}

	.videoHover {
		position: absolute;
		top: 0;
		left: 0;
		flex: 1;
		background-color: rgba(0, 0, 0, 0.1);
		justify-content: center;
		align-items: center;

	    /* border-style: dashed;
		border-color: #DD524D;
		border-width: 1px; */
	}

	.playState {
		width: 80rpx;
		height: 80rpx;
		opacity: 0.9;
	}

	.userInfo {
		position: absolute;
		bottom: 80px;
		right: 10px;
		flex-direction: column;

	}

	.userAvatar {
		border-radius: 500%;
		margin-bottom: 15px;
		border-style: solid;
		border-width: 2px;
		border-color: #ffffff;
	}

	.userAvatar {
		width: 100rpx;
		height: 100rpx;
	}

	.likeIco,
	.shareIco,
	.commentIco {
		width: 60rpx;
		height: 60rpx;
		margin-top: 15px;
	}

	.likeNum,
	.commentNum,
	.shareTex {
		color: #ffffff;
		font-size: 30rpx;
		text-align: center;
		margin: 5px;
	}

	.likeNumActive {
		color: red;
	}

	.content {
		width: 610rpx;
		z-index: 99;
		position: absolute;
		bottom: 30px;
		/* background-color: #007AFF; */
		/* justify-content: center; */
		padding: 15rpx;
		flex-direction: column;
		justify-content: flex-start;
		color: #ffffff;
	}

	.userName {
		font-size: 30rpx;
		color: #ffffff;
		margin-top: 80upx;
	}

	.words {
		margin-top: 10rpx;
		font-size: 30rpx;
		color: #ffffff;
	}

	.root {
	    background-color: #000000; 
		/* background-color: #00ffff; */
	}
	
	.person {
		position: absolute;
		right: 0;
		height: 88rpx;
	}
	
	.person .num {
		background-color: rgba(255, 100, 3, 1);
		height: 58rpx;
		border-radius: 100rpx 0 0 100rpx;
		padding: 0 20rpx;
	} 

	.right,.left {
		position: absolute;
		bottom: 180rpx;
		padding-bottom: env(safe-area-inset-bottom);
	}
	
	.right {
		right: 30rpx;
		bottom: 100rpx;
	}
	
	.right .item1 {
		width: 100rpx;
	}
	
	.right image {
		width: 100%;
		height: 100%;
	}
	
	.left {left: 20rpx;}

	.goods .icon,.goods .icon image {
		width: 290rpx;
		height: 290rpx;
	}
	
	.bg {
		/* background-image: url(/static/images/other/video/bg.png); */
		position: absolute;
		left: 0;
		top: 0;
		width: 100%;
		height: 74rpx;
	}
	
	.goods {
		width: 330rpx;
		background-color: rgba(255, 255, 255, 0.4);
		padding: 20rpx;
		border-radius: 20rpx;
		margin-top: 20rpx;
	}
	
	.tabbar1{
		position: absolute;
		top: 44px;
		left: 30rpx;
		z-index: 999; 
		display: inline-flex;
		flex-direction: row;
		align-items: center;
		padding: 8rpx 16rpx;
		border-radius: 30rpx;
		background-color:rgba(0,0,0,0.2) ;
		color: #fff;
		font-weight: 400;
		font-size: 26rpx;
	}
	
	.border1{
		border-width: 1px;border-color: green;border-style: solid;
	}
	
	.border2{
		border-width: 1px;border-color: yellow;border-style: solid;
	}
	
	.refresh {
		display: flex;
		flex-direction: row; 
	    justify-content: center;
		height: 50px;
	}
	
	.bottom {
		position: absolute;
		left: 0;
		bottom: 60rpx;
		right: 150rpx;
		padding-bottom: env(safe-area-inset-bottom);
	}
	
	.txtTitle{  
		line-height: 20px;
		/*  超出两行显示省略号，如果是text标签需要设置为1  */ 
		color: #fff;
		font-weight: 500;
		font-size: 30rpx;
		margin-left:20rpx;
		
	}
	
	.ellipsis{
		lines:2;
		/*  确保文本不会自动换行  */
		/* white-space:  nowrap; */
		
		/*  设置文本溢出时显示省略号  */
		text-overflow:  ellipsis;
		/*  限制显示的行数为2  */
		overflow:  hidden;
		white-space:  nowrap;  /*  不换行  */
		padding-right:  20px;  /*  设置右边距为20px，实现末尾缩进  */
		box-sizing:  border-box;  /*  包含padding在内的总宽度  */
	}
	
	.expandBtn{
		position: absolute;
		right: 0rpx;
		bottom: 0rpx;
		font-weight: 600;
		color: #fff;
		font-size: 30rpx;
        /* background: linear-gradient(90deg, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 1) 50%); */
	}
	
	.redpacked{
		position: fixed; 
		width: 86rpx;
		height: 86rpx;
		top: 300rpx;
		z-index: 999;
		left: 30rpx; 
		background-color: rgba(0, 0, 0, 0.4);
	}

</style>