siyu_app/components/es-video-pop/es-video-pop.vue

<template>
	<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">
				<text  class="txtTitle" :class="showExpand?'text-clamp':''" :style="defTitStyle" :id="'txtTitle'+index" :ref="'txtTitle'+index">{{index==0?'酢浆草，这种长出水晶小萝卜的植物，你有没有把它当城市绿化带的四叶草？酢浆草，这种长出水晶小萝卜的植物，你有没有把它当城市绿化带的四叶草？':item.title}}</text>
				<text  v-if="showExpand"  class="expandBtn"  @tap="clickExpand">{{ titIsExpand?'收起':'展开' }}</text>
			</view>
	
   </view>
   
</template>

<script>
	import { doFavorite,doLike } from '@/api/shortvideo'
	export default {
		name: "es-video-pop",
		props: {
			item: {
				type: Object,
				default() {
					return { };
				}
			},
			index: {
				type: Number,
				default: 0
			},
			videoId: {
				type: Number,
				default: 0
			},
		},
		data() {
			return {
				w:0,
				showExpand:false,
				titIsExpand:false,
				lines:2,
				lineCount:0,
				titOpacity:0,
				defTitStyle:{'opacity':0}
			};
		},
		created: function() {
			// setTimeout(e => {
			// 	uni.createSelectorQuery().select('#w').boundingClientRect(r2 => {
			// 		this.w = r2.width;
			// 	}).exec();
			// }, 50)
		},
		mounted() {
			let that=this;
			uni.$on('checkTextLines', (index) => {
				that.checkTextLines(index);
			}); 
		},
		methods:{
			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;
				uni.createSelectorQuery().select("#txtTitle"+this.index).boundingClientRect(rect => {
					 console.log("qxj checkTextLines height:"+rect.height);
					 setTimeout(e=>{
						this.defTitStyle={'opacity':1};
						this.showExpand=rect.height>40;
					 },50);
				}).exec();
				
			},
			clickExpand(){
				this.titIsExpand=!this.titIsExpand;
				this.defTitStyle={'opacity':1,'-webkit-line-clamp':this.titIsExpand?1000:2};
			},
			openComment(item){
				this.$emit("openComment",item);
			},
		},
		onUnload: function() {
			uni.$off("checkTextLines");
		},
		destroyed() {
			// 注销全局配置监听
			console.log("qxj checkTextLines  destroyed");
			uni.$off("checkTextLines");
		},
		beforeDestroy() {
		    console.log("qxj checkTextLines beforeDestroy");
		    uni.$off('checkTextLines');
		}
	}
</script>

<style>
	.right,
	.left {
		position: absolute;
		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;
		padding-bottom: env(safe-area-inset-bottom);
		
	}
	
	.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: 0rpx;
		bottom: 0rpx;
		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%);
	
	}
	
	
</style>