siyu_app/pages/course/video/living-app.nvue

<template>
	<view class="es">
		
		<view :style="'width: '+ windowWidth +'px; height: '+ boxStyle.height +'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: '+ (boxStyle.height) +'px;padding-top:'+statusBarHeight+'px' " ref="listBox" :pagingEnabled="true" :scrollable="true">
				<refresh @pullingdown='onpullingdown' @refresh="onrefresh" :display=" refreshing ? 'show' : 'hide' " class="refresh x-c ">
					<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(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">
								<view class="item1 es es-ac es-pc es-mt-33">
									<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 v-if="isShowTab" :style="'width: '+ windowWidth +'px;background-color:'+bgColor" class="tabbar1">
			<n-tabs style="background: transparent;"  v-model="tabIndex" :tabs="mtabs" :height="88" @change="tabChange" :tab-width="134" @search="handleShowSearch"></n-tabs>
			<view class="search-box view-animation" :style="'width: '+ windowWidth +'px;height:'+searchHeight+'rpx'">
				<uni-search-bar radius="72" v-model="keyword"  placeholder="搜索内容" clearButton="auto" cancelButton="none" @confirm="search" />
			</view>
		</view>
		
		 <view class="redpacked x-c es-br-ban" v-if="!iserr && !showGuide" @click.stop="tapRedpacked">
				<gb-progress class="es x-c es-br-ban" :radius="43" :startPosDegree="0" originalColor="#222222" 
					 processColor="#FF5C03" 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>
		 
		  <!-- 新手指引 -->
		  <view class="guide"  :style="'width: '+ windowWidth +'px; height: '+ boxStyle.height +'px;'"   v-if="showGuide"  @touchmove.stop.prevent>
			  <view class="guide-box" style="width: 100%; height:100%; left: 0px; top: 0px;box-shadow: rgb(33 33 33 / 80%) 0px 0px 0px 0px, rgb(33 33 33 / 50%) 0px 0px 0px 5000px;" >
				     <view class="tips" id="guidetips" :style="'width: '+ windowWidth +'px; height: '+ boxStyle.height +'px;' "  style="top: 0px; left: 0px;" @click="nextGuide">
				     	  <view class="liveguide" >
				     	  	<image class="phone_icon" src="@/static/images/guide/phone_icon.png" mode="aspectFill"></image>
				     	  	<image class="hand_icon" :class="{origin: !goSwipe, target: goSwipe}"   src="@/static/images/guide/hand_icon.png" mode="aspectFill"></image>
				     	  	<text class="liveguide-tip">上滑查看更多视频</text>
				     	  </view>
				     </view>
			  </view>
			  <!-- 遮罩层，防止点击 -->
			  <view class="v-model" @click="nextGuide"></view>
		 </view>
			
	
		<!-- 分享弹窗 -->
		<u-popup :show="showShare" @close="showShare = false" >
			<share-box :shareItem="shareItem"  @closeShare='showShare = false' ></share-box>
		</u-popup>
	
	</view>
</template>

<script>
    import { getVideoList,doFavorite,doLike } from '@/api/shortvideo'
	import { addIntegral } from '@/api/integral'
	import { isLogin,updateMsgDot } 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');
	// #endif
	
	export default {
		components: {
			shareBox
		},
		data() {
			return {
				animate: true,
				animateInterval: null,
				bgColor: '',
				searchFlag: false,
				searchHeight: 0,
				showSearch: false,
				isEmpty: false,
				step: {
					name: 'liveguide',
					guideList: [{
						el: '',
						tips: '上滑查看更多视频',
						next: '',
					}]
				},
				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,
				showGuide:true,
				goSwipe: false,
				countNum:false,
				guideTimer:null
			}
		},
		created: function() {
			// setTimeout(e => {
			// 	uni.createSelectorQuery().select('#w').boundingClientRect(r2 => {
			// 		this.w = r2.width;
			// 	}).exec();
			// }, 50)
		},
		onLoad(options) {
			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();
			
			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()
			}); 
			
			const guide = uni.getStorageSync(this.step.name);
			console.log("qxj guide:"+guide);
			if (!guide) {
				this.showGuide = true;
			} else {
				this.showGuide = false;
			}
			this.guideTimer=setInterval(() => {
				if(this.countNum%2==0){
					this.goSwipe=true;
				}
				else{
					this.goSwipe=false;
				}
				this.countNum++;
			}, 900)
		},
		onShow(){
			if(!isLogin()){
				uni.navigateTo({
					url: '/pages/auth/loginIndex'
				})
				return;
			} 
			updateMsgDot()
			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('回到后台');
		},
		destroyed() {
			uni.$off("refreshVideoComment");
		},
		watch:{
			k(k,old_k){
				//监听 k 值的变化，可以控制视频的播放与暂停
				//console.log(k)
				// 清理定时器
				//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).seek(0)
					uni.createVideoContext(this.dataList[old_k].id,this).pause()
					console.log('预留第' + (old_k + 1) + '个视频：' + this.dataList[old_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: {
			changeAnimate() {
				this.animateInterval = setInterval(()=>{
					this.animate = !this.animate
				},500)
			},
			handleShowSearch() {
				uni.navigateTo({
					url: "/pages/index/searchInfo?type=2"
				})
				// this.showSearch = !this.showSearch
				// this.searchHeight = this.showSearch ? '116' : 0
				// this.bgColor = this.showSearch ? 'rgba(0,0,0,0.2)' : 'rgba(0,0,0,0)'
				// this.keyword = ""
				// if(!this.showSearch && this.searchFlag) {
				// 	this.searchFlag = false
				// 	this.pageNum=1;
				// 	this.getData('showLoading');
				// }
			},
			search() {
				this.searchFlag = true
				this.pageNum=1;
				this.getData('showLoading');
			},
			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) {
			    console.log('onRefreshing...');
			     this.refreshing = true;
				 this.isShowTab=false;
			 	 this.pageNum=1;
			     this.getData();
			     if (this.refreshing) return;
			 },
			getData:function(flag){
				// userList.forEach(e=>{
				// 	e.id = 'A'+e.id+''+parseInt(Math.random()*1000);
				// 	this.dataList.push(e);
				// });
				// if(this.isLastPage){
				// 	return;
				// }
				let that=this;
				const params={"keyword":this.keyword};
				if(flag == 'showLoading') {
					uni.showLoading({
						title: '加载中...',
					})
				}
				this.isEmpty = false
				getVideoList(params,this.pageNum,this.pageSize).then(res => {
						this.refreshing = false;
						this.isShowTab=true;
						if(res.code==200&& res.data &&res.data.list&&res.data.list.length > 0){
							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(this.pageNum==1){
								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();//暂停以后继续播放
				}
				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) {
				this.isDragging = event.isDragging;
				if (!event.isDragging) {//isDragging：判断用户是不是在滑动，滑动：true，停止滑动：false。我们要用户停止滑动时才给 k 赋值，这样就可以避免很多麻烦
					var i = Math.round(Math.abs(event.contentOffset.y) / (this.wHeight - this.deleteHeight - this.statusBarHeight   + 1))//先用绝对值取出滑动的距离，然后除以屏幕高度，取一个整，就知道你现在滑动到哪一个视频了
					//console.log("qxj k:"+this.k+" i:"+i);
					if(i !== this.k){
						//这里加判断是因为这个方法会执行很多次，会造成重复请求，所以这里写一个限制
						let num = 0;
						clearTimeout(this.timers);
						this.timers = setTimeout(()=>{
							this.k = i;//判断了用户没有滑动，确认了用户的确是在看这个视频，然后就赋值啦
							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:function(){
				
			},
			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];
				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){  
				console.log(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.showGuide){
								return;
							}
							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(){
				
			},
			nextGuide(){
				console.log("qxj nextGuide");
				clearInterval(this.guideTimer);
				this.guideTimer=null;
				this.showGuide = false;
				uni.setStorageSync(this.step.name, 'true');
				uni.createVideoContext(this.dataList[this.k].id,this).pause();//暂停以后继续播放
				setTimeout(e=>{
					uni.switchTab({url: '/pages/index/index' });	
				},500);
				
			}
			
		}
	}
</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;
	}
	.search-box {
		box-sizing: border-box;
		border-radius: 10rpx;
		position: relative;
		overflow: hidden;
	}
	.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: 0;
		padding-top: 44px;
		z-index: 999; 
		// height:44px;
		/* background-color:rgba(0,0,0,0.2) ; */
	}
	
	.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);
	}

	.guide {
		left: 0;
		top: 0;
		position: absolute;
		z-index: 10001;
		.guide-box {
			position: absolute;
			z-index: 10001;
			background-color: rgba(0, 0, 0, 0.6);
			// transition: all 0.2s; 
			.arrow {
				width: 28rpx;
				height: 28rpx;
				background: #fff;
				position: absolute;
				top: 0;
				left: 48rpx;
				z-index: 10000;
				transform: rotate(45deg);
			}
			.guide-step-tips {
				width: 424rpx;
				padding: 0 24rpx 24rpx 24rpx;
				box-sizing: border-box;
				border-radius: 12rpx;
				background-color: #fff;
				font-family: PingFang SC, PingFang SC;
				font-weight: 400;
				font-size: 26rpx;
				color: #757575;
				position: relative;
			}
			.tips {
				position: absolute;
				top: 0;
				left: 0;
				z-index: 10001;
				.text {}
				.tool-btn {
					margin-top: 20rpx;
					display: flex;
					flex-direction: row;
					align-items: center;
					justify-content:space-between;
					font-weight: 400;
					font-size: 26rpx;
					color: #757575;
					.next {
						width: 128rpx;
						height: 68rpx;
						line-height: 68rpx;
						text-align: center;
						background: #FF5C03;
						border-radius: 8rpx 8rpx 8rpx 8rpx;
						font-family: PingFang SC, PingFang SC;
						font-weight: 400;
						font-size: 26rpx;
						color: #FFFFFF;
					}
				}
			}
		}
	}
	
	.liveguide {
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		flex: 1;
		.phone_icon {
			width: 144rpx;
			height: 262rpx;
			
		}
	}
	
	
	.hand_icon {
		height: 177rpx;
		width: 177rpx;
		margin-top: -100rpx;
		margin-left: 118rpx;
		margin-bottom: 20rpx;
		// animation: moveUpDown 1.8s ease-in-out infinite;  /* 使用简写属性 */
		// animation-name: moveUpDown;
		// animation-duration: 1.8s;
		// animation-timing-function: ease-in-out;
		// animation-iteration-count: infinite;
		// /* 以下是其他可选属性，默认值已设置 */
		// animation-delay: 0s; /* 默认值 */
		// animation-direction: normal; /* 默认值 */
		// animation-fill-mode: none; /* 默认值 */
		// animation-play-state: running; /* 默认值 */
	}
	
	
	   .target { 
			transform: translateY(20px);
			transition:transform .9s ;
		}
		.origin {  
			transform: translateY(0px);
			transition-property:transform;
			transition-duration: .9s;
		}

		.liveguide-tip {
			font-family: PingFang SC, PingFang SC;
			font-weight: 600;
			font-size: 36rpx;
			color: #ffffff !important;
		}

</style>