siyu_app/pages/course/video/living-applet.vue

<template>
	<view class="container">
		
<!-- 	  <mescroll-body ref="mescrollRef"  @init="mescrollInit"  top="0"  bottom="0"  :down="downOption" @down="downCallback" :up="upOption"
	  	 @up="upCallback" @emptyclick="emptyClick">	 -->
		 
	<!-- 	 <scroll-view
		       class="scroll-view"
		       scroll-y="true"
		       refresher-enabled="true"
		       @refresher-pull="onRefresherPull"
		       @refresher-refresh="onRefresherRefresh"
		       @refresher-restore="onRefresherRestore"
		       :refresher-triggered="isRefresherTriggered"
			   
		      > -->
			  
	          <swiper :vertical="true"  @change="change" :style="{'height':viewHeight+'px'}"  
			     @animationfinish="viewChange" @transition='swiper_trans' :current="index" :autoplay="false" >
				  <swiper-item v-for="(item,i) in dataList" :key="i">
					<view class="swiper-item-video" :style="{'height':(viewHeight)+'px'}">
						<!-- 注意：只有切换到当前内容后才能显示视频播放器 -->
						<video :src="item.src"
							:controls="false"  
							:poster="item.cover"
							:show-center-play-btn="false"
							:ref="'myVideo'+i"
							:id="'myVideo'+i"
							v-if="index==i"
							:autoplay="false"
							loop>
						</video>
						
						<image style="width: 100%;height: 100%;" mode="aspectFit" v-else :src="item.cover"></image>
						
						<view :ref="'videoHover'+i" class="videoHover" @click="tapVideoHover(item.state,$event)" >
							<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="item es es-ac es-pc es-mt-33">
								<view class="es-icon-90 es-br">
									<image class="es-icon-90" :src="item.headImg"></image>
								</view>
							</view>
							<view class="item es es-ver es-ac es-pc es-mt-33" @tap="doLike(item,index)">
								<view class="es-icon-76">
									<image class="es-icon-76" :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="item es es-ver es-ac es-pc es-mt-33"  @tap="openComment(item)">
								<view class="es-icon-76">
									<image class="es-icon-76" 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="item es es-ver es-ac es-pc es-mt-33" @tap="doFavorite(item,index)">
								<view class="es-icon-76">
									<image class="es-icon-76" :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="item es es-ver es-ac es-pc es-mt-33" @tap="doShare(item)">
								<view class="es-icon-72">
									<image class="es-icon-72" src="@/static/images/other/video/share1.png"></image>
								</view>
								<view><text class="es-c-white es-fs-22 es-fw-500">{{item.shares}}</text></view>
							</view>
							
							<!-- <view class="item es-ver 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-h-74 es es-ac">
								<view class="es-f1 es es-ac" id="w">					
									<view class="bg">
										<image src="/static/images/other/video/bg.png" :style="{width:w+'px'}" style="height: 74rpx;" ></image>
									</view>
									
									<!-- <view class="es-icon-77" style="z-index: 1;">
										<image class="es-icon-77" src="/static/images/other/video/rank.png"></image>
									</view>
									<view class="rank-text es-fs-26 es-fw-500 es-c-white" style="z-index: 1;"><text
											class="es-c-white es-fw-500 es-fs-26">精选热销榜·第二名</text></view>
									<view class="es-w-30"></view> -->
									
								</view>
							</view>
							<view class="goods">
								<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">
							<view class="bottombox">
								<!-- <view  class="txtTitle" :class="showExpand?'text-clamp':''" :style="defTitStyle" :id="'txtTitle'+index" :ref="'txtTitle'+index">{{index==0?'酢浆草，这种长出水晶小萝卜的植物，你有没有把它当城市绿化带的四叶草？酢浆草，这种长出水晶小萝卜的植物，你有没有把它当城市绿化带的四叶草？':item.title}}</view> -->
								<view  class="txtTitle" :class="showExpand?'text-clamp':''" :style="defTitStyle" :id="'txtTitle'+i" :ref="'txtTitle'+i">{{item.title}}</view>
								<view v-if="showExpand" class="expandBtn"  @tap="clickExpand">{{ titIsExpand?'收起':'展开' }}</view>
							</view>
						</view>
						
					</view>
				 </swiper-item>
	          </swiper>
		  <!-- <view :style="'width: '+ windowWidth +'px;background-color:'+bgColor+';padding-top:'+statusBarHeight+'px'" class="tabbar1">
		  	<view class="search-box" :style="'width: '+ windowWidth +'px;padding: 0 24rpx'">
		  		<image class="backicon" src="@/static/images/back_white_icon.png" mode="aspectFill"></image>
		  		<u-search 
		  		:showAction="false" 
		  		v-model="keyword" 
		  		bgColor="rgba(255,255,255,0.4)" 
		  		searchIconColor="#fff" 
		  		color="#fff" 
		  		placeholderColor="#fff" 
		  		:inputStyle="{background: 'transparent'}" 
		  		:disabled="true"></u-search>
		  		<view class="backmask" :style="'width: '+ windowWidth +'px;'" @click="navBack"></view>
		  	</view>
		  </view>
		  <view>dsfdfg</view> -->
			   <view class="view_Refresh" :style="{top:Math.abs(viewDy)+10+'px'}" v-show="viewNum==0&&viewDy<0">
					 <view  class="dot  dot-1"></view>
					 <view  class="dot  dot-2"></view>
					 <view  class="dot  dot-3"></view>
			   </view>
				
				
				<!-- 评论弹窗 -->
				<popupBottom ref="mescrollItem" :visible.sync="specVisible"   @close="closePop" :cmdId="videoId" :smsNum="pingCount"  :title="pingCount+'条评论'"  radius="32"  maxHeight="1200">
				</popupBottom>
				
			 

		<!--  </scroll-view> -->
		  
	  <!-- </mescroll-body>	 -->
	  <!-- 下载app弹窗 -->
	  <!-- <uni-popup ref="downappPop" type="center" is-mask-click="false">
		  <view class="downappPop">
				<uni-icons class="closebtn" type="closeempty" size="27" color="#bbb" @click="$refs.downappPop.close()"></uni-icons>
				<image src="/static/logo.png" class="es-w-100 es-h-100"></image>
				<view>请下载App观看</view>
				<view class="es-w-250 es-bc es es-pc es-ac es-fw-bold es-fs-30" style="min-height: 80rpx;border-radius: 10rpx;" @tap="openApp()">
					<view class="es-ml-30 es-mr-30">下载App</view>
				</view>
		  </view>
	  </uni-popup> -->
	  <h5DownAppPopup ref="h5downappPop"></h5DownAppPopup>
	</view>
</template>

<script>
	import h5DownAppPopup from '@/components/h5-down-app-tip/h5-down-app-popup.vue'
	import popupBottom from '@/components/popupBottom/popupBottom.vue'
	import MescrollCompMixin from "@/uni_modules/mescroll-uni/components/mescroll-uni/mixins/mescroll-comp.js";
	import { getVideoList,doFavorite,doLike } from '@/api/shortvideo'
	export default {
		mixins: [MescrollCompMixin],
		components: {
			popupBottom,
			h5DownAppPopup
		},
		data() {
			return {
				list:[
					{type:2,},
					{type:1,},
					{type:2,},
					{type:1,}
				],
				mescroll:null,
				downOption: {
					auto: false // 不自动加载 (mixin已处理第一个tab触发downCallback)
				},
				upOption: {
					auto: false, // 不自动加载
					page: {
						num: 0, // 当前页码,默认0,回调之前会加1,即callback(page)会从1开始
						size: 10 // 每页数据的数量
					},
					noMoreSize: 4, //如果列表已无数据,可设置列表的总数量要大于半页才显示无更多数据;避免列表数据过少(比如只有一条数据),显示无更多数据会不好看; 默认5
				    toTop:{
				    	width:0,
				    }
				},
				timers:null,
				leftTimers:"",
				autoplay: true,
				interval: 2000,
				duration: 500,
				index:-1,
				dataList: [], //用于数据循环的列表🌟💗
				keyword:"",
				pageNum:1,
				pageSize:2,
				isLastPage:false,
				viewHeight:0,
				viewDy:0,
				viewNum:0,
				changeFlag:true,
				videoMuted:false,
				havIngReq:true,
				isPostBack:false,
				changeFst:true,
				specVisible: false,
				videoId:0,
				reqVideoId:null,
				pingCount:0,
				zIndex:10,
				showExpand:false,
				titIsExpand:false,
				lines:2,
				lineCount:0,
				titOpacity:0,
				defTitStyle:{'opacity':0},
				smsCount:0,
				isH5: true,
				flagTip: false,
				// 查看视频详情的idnex
				searchIndex: 0,
				pageUrl:"",
			}
		},
		onLoad(options) {
			this.pageUrl = '/pages/course/video/living-app'
			this.keyword = options.keyword || ''
			this.pageNum = options.pageNum || 1
			this.pageSize = options.pageSize || 10
			this.searchIndex = Number(options.index || 0)
			this.index = 0
			const systemInfo = uni.getSystemInfoSync();
			this.viewHeight=systemInfo.windowHeight; 
			if(options.videoId){
				this.reqVideoId=options.videoId;
			}
			let that=this;
			uni.$on('refreshTitle', (pingCount) => {
				that.pingCount=pingCount;
				let item=that.dataList[that.index];
				item.smsNum=pingCount;
			}); 
			uni.$on('openReply', (data) => {
				that.openComementDialog(data);
			}); 
		},
		onShow() {
			//#ifdef H5
			    this.isH5=true;
			//#endif
			//#ifndef H5
			    this.isH5=false;
			//#endif
		},
		mounted() {
			this.requestData(1);
		},
		methods: {
			// 播放视频
			play(index) {
				const videoContext=uni.createVideoContext("myVideo"+index,this);
				videoContext.play();
				this.dataList[this.index].state = 'play'
			},
			requestData(type){
				//联网加载数据
				var that = this;
				var params = {  "keyword":this.keyword};
				if(this.reqVideoId!=null){
					params["videoId"]=this.reqVideoId;
				}
				getVideoList(params,this.pageNum,this.pageSize).then(res => {
					if(res.code==200){
						const datas=res.data.list;
						const tempDatas=[];
						this.isLastPage=res.data.isLastPage;  
						datas.forEach((e,  index)  =>  {
							e.videoId=e.id;
							e.src=e.src.replace("obs.shouzhujue.com","obs.jy.cc");
							e.src=e.src.replace("cdn.ylrzcloud.com","tcpv.ylrzcloud.com");
							e.id = 'A'+e.id+''+parseInt(Math.random()*1000);
							if(this.pageNum==1 && index==0 && !this.isPostBack){
								this.isPostBack=true;
								e.state='pause';
								e.isShowPlayIcon=true;
							}
							tempDatas.push(e);
						});
						// 如果是H5列表只展示两个视频；H5查看视频详情过来，数据取列表searchIndex和searchIndex+1的两条，index为0
						if(this.pageNum == 1){
							this.dataList = this.isH5&&type== 1 ? tempDatas.splice(this.searchIndex,2) : tempDatas; //如果是第一页需手动制空列表
							setTimeout(()=>{
								this.index = 0
								this.checkTextLines(0);
								//uni.$emit('checkTextLines',0);
								this.havIngReq=false;
							},200);
						
							setTimeout(()=>{
							// 	const videoContext=uni.createVideoContext("myVideo0",this);
							// 	videoContext.play();
							//	this.play(this.index)
							},300);
							
							this.leftTimers=setTimeout(e=>{
								this.dataList[0].isShowGoods=true;
							},3000);
						} else{
							this.dataList= this.isH5&&type== 1 ? tempDatas.splice(this.searchIndex,2) : this.dataList.concat(tempDatas); //追加新数据
							this.havIngReq=false;
						}
					}else{
						uni.showToast({icon:'none',title: "请求失败"});
						this.dataList = [];
						this.havIngReq=false;
					}
				}).catch(()=>{
					//联网失败, 结束加载
					this.havIngReq=false;
				});	
			},
			// 监听移动
			swiper_trans(e) {
				if(!this.isH5) {
					this.viewDy = Math.ceil(e.detail.dy);
					//console.log("qxj viewDy:"+e.detail.dy)
					if (this.changeFlag&&this.viewNum == 0 && e.detail.dy < -20) {
						this.changeFlag=false;
						this.pageNum = 1;
						this.index=-1;
						this.requestData();
					}
				}
			},
			// 视频切换
			viewChange(e) {
				this.changeFlag=true;
				if(!this.havIngReq){
					this.viewNum = e.detail.current;
				}
				if(!this.isH5) {
					if (this.index + 2 == this.dataList.length) {
						this.havIngReq=true;
						if(this.isLastPage){
							this.pageNum=1;
							this.requestData();
						}else{
							this.pageNum++;
							this.requestData()
						}
					}
				} else {
					if(!this.flagTip) {
						this.flagTip=true
						return
					}
					if(this.index >= 1&&this.flagTip) {
						if(!this.$isLogin()){   //切换小节需要登录
							this.$showLoginPage();
						} else {
							// uni.showToast({title: "请下载App观看",icon: 'error'});
							console.log(this.$refs.h5downappPop)
							this.$refs.h5downappPop.openPop()
						}
					}
				}
			},
			change:function(e){
				this.flagTip = false
				if(!this.havIngReq){
					this.index = e.detail.current;
					let data=this.dataList[this.index];
					this.videoId=data.videoId;
					this.pingCount=data.smsNum;
				}
				setTimeout(e=>{
					console.log("qxj change index:"+this.index);
					if(!this.changeFst){
						this.changeFst=true;
					}else{
						this.play(this.index);
					}
					this.checkTextLines(this.index);
				},50);
			},
			tapVideoHover(state,event){
				console.log('kkkk=>'+this.index+" state:"+state);
				this.dataList[this.index].isShowimage = false
				this.dataList[this.index].isShowProgressBarTime = false
				this.ProgressBarOpacity = 0.5
				this.dotWidth = 0
				// 1.启用双击点赞 --- start
				if(state=='play'||state=='continue'){
					 this.dataList[this.index].state = 'pause';
				}
				else if(state=='reset'){
					this.dataList[this.index].state = 'reset';
				}
				else{
					this.dataList[this.index].state = 'continue';
				}
				this.dataList[this.index].isShowPlayIcon = true;
				console.log('xxx 编号:'+this.index+" state:"+this.dataList[this.index].state);
				if(this.dataList[this.index].state == 'continue'){
					console.log('播放数据',this.dataList[this.index].id);
					//this.$refs["myVideo"+this.index].play();
					uni.createVideoContext("myVideo"+this.index,this).play();
				}
				if(this.dataList[this.index].state == 'pause'){
					//暂停以后继续播放
					//this.$refs["myVideo"+this.index].pause();
					uni.createVideoContext("myVideo"+this.index,this).pause();
				}
				if(this.dataList[this.index].state == 'reset'){
					// this.$refs["myVideo"+this.index].seek(0);
					// this.$refs["myVideo"+this.index].play();
					uni.createVideoContext("myVideo"+this.index,this).seek(0);
					uni.createVideoContext("myVideo"+this.index,this).pause();//暂停以后继续播放
					this.dataList[this.index].state = 'continue';
				}
			},
			openComment(item){
				 console.log("qxj openComment");
				  this.videoId=item.videoId;
				  this.specVisible=true;
			     //this.$refs.mescrollItem.showBotBar(item.smsNum);
				//this.$emit("openComment",item);
			},
			closePop(){
	            this.specVisible=false;
				//this.$refs.mescrollItem.hideBotBar();
			},
			doLike(item,index){
				if(!this.$isLogin()){
					this.$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()
						}
					},
					rej => {}
				);
			},
			doFavorite(item,index){
				if(!this.$isLogin()){  
					this.$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()
						}
					},
					rej => {}
				);
			},
			checkTextLines()  {
				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"+this.index];
				this.defTitStyle={'opacity':0}
				this.showExpand=false;
				this.$nextTick(()=>{
					uni.createSelectorQuery().select("#txtTitle"+this.index).boundingClientRect(rect => {
						 console.log("qxj checkTextLines height:"+JSON.stringify(rect));
						 if(rect!=null){
							 this.defTitStyle={'opacity':1};
							 this.showExpand=rect.height>40;
						 }
					}).exec();
				})
			},
			clickExpand(){
				this.titIsExpand=!this.titIsExpand;
				this.defTitStyle={'opacity':1,'-webkit-line-clamp':this.titIsExpand?1000:2};
			},
			openComementDialog(data) {
				this.$refs.inputDialog.open()
			},
			dialogInputConfirm(val) {
				
			},
			showToast(title){
				uni.showToast({icon:'none',title: title ,duration:5000});
			}
		}
	}
</script>

<style scoped>
	.container{
		position: fixed;
		width: 100%;
		height: 100%;
		background-color: #000;
	}
	swiper,swiper-item{
		width: 100%;
		height: 100%;
	}
	
	
	/deep/.uni-swiper-slide-frame{
		background: #000000;
	}
	
	.swiper-item-video,.swiper-item-video video{
		width: 100%;
		height: 100%;
		background-color: #000000;
	}
	
	.videoHover {
		position: absolute;
		top: 0;
		left: 0;
		flex: 1;
		background-color: rgba(0, 0, 0, 0.1);
		
		justify-content: center;
		align-items: center;
		width: 100%;
		height: 100%;
		z-index: 2;
		display: flex;
		justify-content: center;
		align-items: center;
	
	    /* border-style: dashed;
		border-color: #DD524D;
		border-width: 1px; */
	}
	
	.playState {
		width: 80rpx;
		height: 80rpx;
		opacity: 0.9;
	}
	
	.view_Refresh {
		position: absolute;
		top: 150rpx;
		left:calc(50% - 50rpx);
		width: 100rpx;
		height:  30rpx;
		
		display:  flex;
		justify-content:  center;
		align-items:  center;
		 .dot  {
			  width:  20rpx;
			  height:  20rpx;
			  border-radius:  50%;
			  margin:  0  10rpx;
			  animation: loading 1s;
		   }
		 .dot-1  { animation-delay: -0.2s;background-color:  #FF5C03; }
		 .dot-2  {animation-delay:  -0.4s;background-color:  #FFFFFF; }
		 .dot-3  {animation-delay:  -0.6s;background-color:  #FF5C03;}
		  @keyframes  loading  {
			 0%,  100%  {
				 transform:  scale(1);
				 background-color:  #FF5C03;  /*  动画结束时的颜色为黑色  */
			 }
			 50%  {
				 transform:  scale(0.5);
				 background-color:  #FFFFFF;  /*  动画中间的颜色为白色  */
			 }
		  }
}
     .right,.left {
     	position: absolute;
		z-index: 10;
     	bottom: 150rpx;
     	padding-bottom: env(safe-area-inset-bottom);
     }
     
     .right {
     	right: 20rpx;
     }
     
     .right .item {
     	width: 100rpx;
     }
     
     .right image {
     	width: 100%;
     	height: 100%;
     	border-radius:50% ;
     }
     
     .left {
     	left: 30rpx;
     }
     
     .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;
     }
     
     .bottom {
     	position: absolute;
     	left: 0;
     	bottom: 120rpx;
     	right: 150rpx;
		z-index: 10;
     	padding-bottom: env(safe-area-inset-bottom);
     }
     
	 .bottombox{
		  position: relative;
		  display: inline-block;
		  padding:2rpx 10rpx;
		  margin-left:20rpx;
		  border-radius: 10rpx;
		  background-color: rgba(0, 0, 0, 0.2);
	  }
	 
     .txtTitle{  
     	line-height: 20px;
     	/*  超出两行显示省略号，如果是text标签需要设置为1  */ 
     	color: #fff;
     	font-weight: 500;
     	font-size: 30rpx;
     	/* margin-left:20rpx;
     	background: rgba(0, 0, 0, 0.2);
     	padding:2rpx;
     	border-radius: 10rpx; */
     }
     
     .text-clamp{
        display: -webkit-box;
         -webkit-line-clamp: 2; /* 显示的行数 */
         -webkit-box-orient: vertical; /* 内容会垂直堆叠 */
         overflow: hidden; /* 隐藏溢出的内容 */
         text-overflow: ellipsis; /* 当内容被裁剪时显示省略号 */
     }
     
     .expandBtn{
     	position: absolute;
     	right: 10rpx;
     	bottom: 2rpx;
     	font-weight: 600;
     	color: #fff;
     	font-size: 30rpx;
     	width: 100rpx;
     	text-align: right;
        background: linear-gradient(90deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 1) 50%);
     }
	 
	 .bgblack{
		 background: #000;
	 }
     
	
</style>