sadjv3_user/pages/videoCircle/index.vue

<template>
	<view>
		<!-- 视频 id 切记是字符串类型 -->
		<!-- <image v-if="isShowAixin" src="@/static/img/index/aixining.png" :style="'position: fixed; margin-left: '+ aixinLeft +'px; margin-top: '+ aixinTop +'px; width: 70px; height: 65px; transform: rotate('+ Rotate +'deg);'"></image> -->
		<swiper v-if="dataList.length>0" :style="'width: '+ windowWidth +'px; height: '+ windowHeight +'px; background-color: #000000;'" :vertical="true" @animationfinish="animationfinish" @change="change" :current="current" :indicator-dots="false" :duration="duration">
			<swiper-item v-for="(list,index) in dataList" :key="index">
				<view v-if="Math.abs(k-index)<=1">
					<view>
						<!-- 
						1.v-if：用于控制视频在节点的渲染数
						2.muted的默认值是 false，代表默认是禁音视频的
						3.http-cache默认开启视频缓存
						4.poster（封面（方案一））：这里的封面默认处理存储在阿里云的视频
						5.show-loading：这里默认去掉播放转圈的标志
						v-if="Math.abs(k-index)<=1"
						 -->
						<video
						v-if="isShow"
						:id="list.id+''+index"
						:loop="true"
						:muted="list.isplay"
						:controls="false"
						:http-cache="true"
						:autoplay="false"
						:page-gesture="false"
						:show-fullscreen-btn="false"
						:show-loading="false"
						:show-center-play-btn="false"
						:enable-progress-gesture="false"
						:src="list.filePath"
						@ended="ended"
						@click="tapVideoHover(list.state,$event)"
						@timeupdate="timeupdate($event,index)"
						:style="'width: '+ windowWidth +'px; height: '+ windowHeight +'px; background-color: #000000; z-index: 8;'"
						:poster="list.filePath"
						></video>
						<!-- 
						1.这里是封面（方案二）：这里的封面可以自定义。
						2.也在代码中做了批注，两种方案可以共存，不会相互影响。
						-->
						<image
						v-if="!list.playIng"
						:src="list.filePath+'?x-oss-process=video/snapshot,t_100,f_jpg'"
						:style="'width: '+ windowWidth +'px; height: '+ windowHeight +'px; position: absolute; z-index: 6;'"
						mode="aspectFit"
						></image>
					</view>
					<!-- 播放状态：pause 的时候就会暂停 -->
					<view class="videoHover" @click="tapVideoHover(list.state,$event)" @touchstart="touchstartHover" :style="'width: '+ windowWidth +'px; height: '+ windowHeight +'px;z-index:14;'">
						<image v-if="list.state=='pause'" class="playState" src="@/static/img/index/play.png"></image>
					</view>
					<view class="userInfo">
						<!-- 1.头像 -->
						<image @click="tozuozhe(list)" class="userAvatar" :src="list.artificerImg" mode="aspectFill"></image>
						<!-- 2.点赞 -->
						<view class="list-view" @click="cLike(list.sfdz);" style="opacity: 0.9; margin-top: 17px;">
							<image v-if="list.sfdz==1" src="@/static/img/index/xin.png" style="width: 40px; height: 40px; position: absolute; right: 6px;"></image>
							<image  v-if="list.sfdz==0" src="@/static/img/index/xin-2.png" style="width: 40px; height: 40px; position: absolute; right: 6px;"></image>
							<text style="color: #FFFFFF; margin-top: 5px; font-size: 14px; text-align: center; margin-top: 40px; font-weight: bold;" :class="{'likeNumActive':list.sfdz}">{{list.dzs}}</text>
						</view>
						<!-- 3.评论 -->
						<view class="comment list-view" @click="toComment(index)" style="opacity: 0.9; margin-top: 17px;">
							<image src="@/static/img/index/liaotian-2.png" style="width: 35px; height: 35px; position: absolute; right: 7px;"></image>
							<text style="color: #FFFFFF; margin-top: 5px; font-size: 14px; font-weight: bold; text-align: center; margin-top: 40px;">{{list.pls}}</text>
						</view>
						<!-- 4.分享 -->
						<!-- <view @click="share" class="list-view" style="opacity: 0.9; margin-top: 17px;">
							<image src="@/static/img/index/share-fill.png" style="width: 40px; height: 40px; position: absolute; right: 5px;"></image>
							<text style="color: #FFFFFF; margin-top: 5px; font-size: 14px; text-align: center; font-weight: bold; margin-top: 40px;">分享</text>
						</view> -->
						<!-- <view @click="dealVoice" class="list-view" style="margin-top: 17px;">
							<view style="width: 48px; height: 48px; border-radius: 50px; position: absolute; right: 2.5px;">
								<image :style="'width: 48px; height: 48px; border-radius: 50px; transform: rotate('+ rotates +'deg);'" src="@/static/img/index/bfq.png" mode="aspectFill"></image>
								<image v-if="showPlay" :style="'width: 30px; height: 30px; margin-top: 9px; margin-left: 9px; position: absolute; border-radius: 50px; transform: rotate('+ rotates +'deg);'" :src="list.href" mode="aspectFill"></image>
							</view>
						</view> -->
					</view>
					<!-- 最底下的文字部分 -->
					<view class="content" style="display: flex;flex-direction: column;">
						<!-- <text class="userName" :style="'width: '+ (windowWidth - 90) +'px;'">{{list.title}}</text> -->
						{{list.content}}
						<!-- <text class="words" :style="'width: '+ (windowWidth - 90) +'px;'"></text> -->
					</view>
					<!-- 进度条 -->
					<view v-if="k === index" @touchstart="touchstart" @touchmove="touchmove" @touchend="touchend" :style="'width: '+ (windowWidth - (windowWidth*0.10)) +'px; margin-left: '+ (windowWidth * 0.05) +'px; height: 40px; position: absolute;bottom: 0px;margin-bottom: 6px;z-index: 14;'">
						<!-- 不拖动情况下 -->
						<view>
							<!-- 1.底部背景进度条 -->
							<view :style="'width: '+ (windowWidth - (windowWidth*0.10)) +'px; margin-top: 18px; height: 5px; border-radius: 10px; background-color: #999999; opacity: 0.6;'"></view>
							<!-- 2.播放的进度条 -->
							<view v-if="isTouch==false" :style="'width: '+ ((windowWidth - (windowWidth*0.10)) * progressBarPercent) +'px; position: absolute;top: 0; margin-top: 18px;  height: 5px; border-radius: 10px; background-color: #e6e4e7; '"></view>
							<!--  -->
							<view v-if="isTouch==true" :style="'width: '+ (videoStartPositon + addPositon) +'px; position: absolute;top: 0; margin-top: 18px; height: 5px; border-radius: 10px; background-color: #e6e4e7; '"></view>
						</view>
					</view>
				</view>
			</swiper-item>
		</swiper>
		<uni-popup class="uni-popup" type="bottom" ref="pinglun" @touchmove.stop.prevent="moveHandle">
			<view class="popup-content" :style="'width: '+ windowWidth +'px; height: '+ (boxStyle.height/heightNum) +'px;'">
				    <CComment ref="ccRef" :showPopup="showPopup" :userInfo="userInfo" :tableData="tableData" :tableTotal="tableTotal" likeFun="likeFun" @replyFun="replyFun" @deleteFun="deleteFun" :deleteMode="deleteMode"></CComment>
						<div class="btn" @click="openComment">发一条新评论</div>
				<!-- <douyin-scrollview
				:Width="windowWidth"
				:Height="(boxStyle.height/1.23)"
				:deleteIOSHeight="36"
				:deleteAndroidHeight="15"
				@closeScrollview="closeScrollview"
				></douyin-scrollview> -->
			</view>
		</uni-popup>
		<empty v-if="dataList.length==0"></empty>
	</view>
</template>

<script>
	// import userList from '../new_index/data.js'//这个是假数据
	let audo = uni.createInnerAudioContext()
	audo.loop = true
	import douyinScrollview from '@/components/douyin-scrollview/douyin-scrollview.vue'
	import empty from '@/components/empty.vue'
	import CComment from "@/components/XJ-comment/index";
	export default {
		components:{
			douyinScrollview,
			CComment,
			empty
		},
		data() {
			return {
				isLiked:false,
				dianzhan:0,
				showPopup:false,
				ccRef: null,
				userInfo: {
					id: 120,
					user_name: "🍁",
					user_avatar: "https://pic1.zhimg.com/80/v2-a79071a705f55c5d88f6c74e6111fe84_720w.webp",
				},
				tableTotal: 4,
				tableData: [],
				deleteMode: "all",
				windowWidth: 0,
				windowHeight: 0,
				platform: "",
				model: "",
				deleteHeight: 0,
				dataList: [],
				k: 0,
				oldVideo: "",
				voice: "",
				timeout: "",
				current: 0,
				boxStyle:{//视频，图片封面样式🌟💗
					'height': 0,
					'width': 0,
				},
				
				videoID: "",
				isShow: false,
				
				showPlay: false,//转轮显示控制
				rotates: 0,//转轮旋转角度
				rotateTime: "",//转轮递归事件控制
				xrotats: "",
				
				mpcleartime: "",
				
				isClick: false,
				
				changeTimeout: "",
				mptime: 0,
				mpstartTime: 0,
				
				duration: 500,
				// -- 进度条相关 -- start
				videoStartPositon: 0,
				progressBarPercent: 0,
				touchStartPosition: 0,
				addPositon: 0,
				timeduration: 0,
				isTouch: false,
				// -- 进度条相关 -- end
				// 引入评论 - 参数
				heightNum: 1.18,
				
				// 双击点赞参数
				touchNum: 0,
				aixinLeft: 0,
				aixinTop: 0,
				isShowAixin: false,
				Rotate: 0,
				
				isShow1: false,//控制渲染变量1
				isShow2: false,//控制渲染变量2 ： 专门控制 uni-popup
				currents: 0,//用于左右滑动，0代表视频界面，1代表右滑界面🌟💗
				page:1,
				limit:10
			}
		},
		
		watch:{
			async k(k,old_k){
				// console.log(k, old_k)
				this.progressBarPercent = 0;
				
				this.isShow = false
				this.dataList[old_k].playIng = false//如果视频暂停，就加载封面
				this.dataList[old_k].isplay = true
				this.dataList[old_k].state = 'pause'
				console.log('预留第' + (old_k + 1) + '个视频：' + this.dataList[old_k].id+''+old_k)
				// 2.0版本已经去掉了下面这一句，视频不用暂停，只需要把声音禁止就行
				uni.createVideoContext(this.dataList[old_k].id + '' + old_k,this).stop()//如果视频暂停，那么旧视频停止，这里的this.dataList[old_k].id + '' + old_k，后面加 old_k 是为了每一个视频的 id 值不同，这样就可以大程度的避免串音问题
				console.log('已经暂停 --> 第' + (old_k + 1) + '个视频～')//提示
				this.dataList[k].state = 'play'
				this.isShow = true
				this.xrotats = setTimeout(()=>{
					this.showPlay = true;
				},200)
				this.dataList[k].isplay = true
				audo.src = this.dataList[k].src
				if(this.isClick){
					setTimeout(()=>{
						if (typeof WeixinJSBridge == "undefined") {
							setTimeout(()=>{
								audo.play()
								uni.createVideoContext(this.dataList[k].id+''+k,this).seek(0)
								uni.createVideoContext(this.dataList[k].id+''+k,this).play()
								setTimeout(()=>{
									this.dataList[k].playIng = true
								},650)
							},500)
						} else {
							WeixinJSBridge.invoke('getNetworkType', {}, e => {
								setTimeout(()=>{
									audo.play()
									uni.createVideoContext(this.dataList[k].id+''+k,this).seek(0)
									uni.createVideoContext(this.dataList[k].id+''+k,this).play()
									setTimeout(()=>{
										this.dataList[k].playIng = true
									},850)
								},200)
							})
						}
					},200)
				} else {
					audo.pause()
					this.dataList[k].state = 'pause'
					uni.createVideoContext(this.dataList[k].id+''+k,this).seek(0)
					uni.createVideoContext(this.dataList[k].id+''+k,this).pause()
				}
				// var p = k+1;
				// console.log('预加载第' + (k) + '个视频：' + this.dataList[k].id+''+p)
			}
		},
		onLoad() {
			this.platform = uni.getSystemInfoSync().platform
			this.model = uni.getSystemInfoSync().model
			var model = this.model
			if(this.platform == 'ios' && (model !== 'iPhone6' || model !== 'iPhone6s' || model !== 'iPhone7' || model !== 'iPhone8')){
				this.deleteHeight = 0//有 tabbar的 修改这里可以改变视频高度
			}
			this.windowWidth = uni.getSystemInfoSync().windowWidth
			this.windowHeight = uni.getSystemInfoSync().windowHeight
			this.boxStyle.width = this.windowWidth + 'px'//给宽度加px
			this.boxStyle.height = this.windowHeight - this.deleteHeight;//有 tabbar的 修改这里可以改变视频高度
			this.get() //刚进入页面加载数据
		},
		onShow(){
			console.log('回到前台');
				if(this.isClick){
					this.dataList[this.k].state = 'pause';
					uni.createVideoContext(this.dataList[this.k].id+''+this.k,this).pause()
					audo.pause()
				}
		},
		onHide(){
			console.log('到后台');
			if(this.isClick){
				this.dataList[this.k].state = 'pause';
				uni.createVideoContext(this.dataList[this.k].id+''+this.k,this).pause()
				audo.pause()
			}
		},
		
		methods: {
			openComment() {//点击发布新评论按钮
				this.$refs.ccRef.newCommentFun();
			},
			likeFun(params, callback) {//评论点赞返回
				console.log("likeFun", params);
				// Implement your logic for likeFun
			},
			toComment(index){
				// 注意点击评论之后会执行这里
				/*
				（1）先加载缓冲
				（2）获取当前视频 ID 信息
				（3）🌟🌟🌟🌟重要🌟🌟🌟🌟
					- 一定要记得看 index.vue 里面
					 uni.setStorageSync("user",this.peopleList[i]);
					 这个东西，用于存储当前用户信息。在 插件里面会使用到这个东西，
					 记得写一下。
					 
				（4）打开评论
				*/ 
				uni.showToast({
					title: '加载中...',
					icon: 'none',
					position: 'bottom',
					duration: 300
				})
				uni.setStorageSync("videoID",this.dataList[index].id);
				this.videoID = this.dataList[index].id;
				this.$refs.pinglun.open('bottom');
				this.getPingL(this.videoID);
			},
			getPingL(shipinquanId){//获取评论列表
				var data={
					page: this.page,
					limit:310,
					shipinquanId:shipinquanId
				}
				this.$Request.get("/app/shipinquan/contentlist", data).then(res => {
					if (res.code == 0) {
							var msg = res.data.records||{}
							this.tableTotal=res.data.total;
							var list=[];
							// for (let i = 0; i < msg.length; i++) {
							// 	list.push(msg[i])
							// }
							
							this.tableData = msg.map(item => {
							  return {
							    ...item,
							   parent_id: null,
							   reply_id: null,
							   reply_name: null,
							   user_name: item.userName,
							   user_avatar: item.userPhoto?item.userPhoto:'../../static/logo.png',
							   user_content: item.content,
							   is_like: true,
							   like_count: 8,
							   create_time: item.createTime
							  };
							});
					} else {
						uni.showToast({
							title: res.msg,
							icon: 'none'
						})
					}
				});
			},
			replyFun(params, callback) {
				// console.log("replyFun", params);
				  var data={
				  	createBy:uni.getStorageSync('userId'),
					content:params.params.user_content,
				  	shipinquanId:this.videoID,
				  }
				  this.$Request.post("/app/shipinquan/addContent",data).then(res => {
				  	if (res.code == 0) {
						setTimeout(() => this.getPingL(this.videoID), 500);
						this.showPopup==true;
						uni.hideLoading();
						 // callback(this.videoID);
				  	} else {
						uni.hideLoading();
				  		uni.showToast({
				  			title: res.msg,
				  			icon: 'none'
				  		})
				  	}
				  });
				  // const res = { id: Math.random() }; // 很重要的回参! 必须拿到后端返回评论id! 删除需要!
				  // setTimeout(() => callback(res), 500); // 目前为了展示效果, 直接执行callback
			},

			deleteFun({ params, mode }, callback) {

			  console.log("deleteFun", { params, mode });
			  // 当请求成功, 调用callback执行评论删除;
			  switch (this.deleteMode) {
				case "bind":
				  // 逻辑: 调用接口进行评论内容修改 update
				  setTimeout(() => callback(), 500); // 目前为了展示效果, 直接执行callback
				  break;
				case "only":
				  // 逻辑: 调用接口删除一个评论 delete
				  setTimeout(() => callback(), 500); // 目前为了展示效果, 直接执行callback
				  break;
				default:
				  // all
				  // 逻辑: 调用接口删除多个评论 [delete]
				  // Demo如下:
				  // axios.post("http://xxx/delete", { ids: params }).then((res) => {
				  //   if (res.code === 0) {
				  //     callback(res);
				  //   }
				  // });
				  setTimeout(() => callback(), 500); // 目前为了展示效果, 直接执行callback
				  break;
			  }
			},
			closeScrollview(){
				// 点击评论里面的叉叉，就会关闭评论
				this.$refs.pinglun.close('bottom');
			},
			onTabItemTaps() {
			    if (uni.getSystemInfoSync().platform == "ios") {
			        let UIImpactFeedbackGenerator = plus.ios.importClass('UIImpactFeedbackGenerator');
			        let impact = new UIImpactFeedbackGenerator();
			        impact.prepare();
			        impact.init(1);
			        impact.impactOccurred();
			    }
			    if (uni.getSystemInfoSync().platform == "android") {
			        uni.vibrateShort({
			            success: () => {
			                console.log('点击震动');
			            }
			        });
			    }
			},
			// 双击点赞效果
			touchstartHover(event){
				if(this.touchNum >= 1){
					// console.log('双击 -- X坐标：'+ event.touches[0].screenX);
					// console.log('双击 -- Y坐标：'+ event.touches[0].screenY);
					this.aixinLeft = event.touches[0].screenX - 50;
					this.aixinTop =  event.touches[0].screenY - 50;
					this.isShowAixin = true;
					let max = 40; let min = -40;
					this.Rotate = Math.floor(Math.random() * (max - min + 1)) + min;
					setTimeout(()=>{
						this.isShowAixin = false;
					},700)
					this.onTabItemTaps();
				}
			},
			tozuozhe(item){
				// console.log("itemitemitemitemitem",item)
				uni.reLaunch({
					url:'/pages/therapist/orderDetail?artificerId='+item.createBy+'&classifyId='+'undefined'
				})
				this.currents = 1//点击头像以后就会切换
			},
			mpTouchend(){
				this.mptime = (new Date()/1000) - this.mpstartTime;
			},
			mpTouchstart(){
				this.mpstartTime = (new Date()/1000);
			},
			dealVoice(){
				uni.showToast({
					title: '处理声音',
					icon: 'none'
				})
			},
			clearToTime(){
				//清理定时器
				for(let i=0;i<20;i++){
					clearTimeout(this.rotateTime);
					clearTimeout(this.xrotats);
					this.showPlay = false;
					this.rotates = 0;
				}
			},
			clearTime(){
				//清理定时器
				for(let i=0;i<20;i++){
					clearTimeout(this.rotateTime);
					clearTimeout(this.xrotats);
				}
			},
			rotateX(){
				// clearTimeout(this.rotateTime);
				this.rotateTime = setTimeout(()=>{
					this.rotateX();
					this.showPlay = true;
					this.rotates += 1;
				},30)
			},
			ended(){
				// 1.播放当前视频结束时触发，自动切换下一个视频
				// this.current = this.k+1
			},
			// ---- 进度条相关 --- start
			touchstart(e){
				// console.log(e);
				this.isTouch = true;
				// #ifdef H5
					this.addPositon = 0;
					this.videoStartPositon = (this.windowWidth - (this.windowWidth*0.10)) * this.progressBarPercent;
					this.touchStartPosition = e.changedTouches[0].clientX;
				// #endif
				// #ifdef MP
				this.addPositon = 0;
				this.videoStartPositon = (this.windowWidth - (this.windowWidth*0.10)) * this.progressBarPercent;
				this.touchStartPosition = e.changedTouches[0].clientX;
				// #endif
			},
			touchmove(e){
				// console.log(e);
				// #ifdef H5
					let num = e.changedTouches[0].clientX - this.touchStartPosition;
					if((this.videoStartPositon + num) <= (this.windowWidth - (this.windowWidth*0.10))) {
						this.addPositon = e.changedTouches[0].clientX - this.touchStartPosition;
					} else {
						this.addPositon = 0;
						this.videoStartPositon = (this.windowWidth - (this.windowWidth*0.10));
					}
				// #endif
				
			},
			touchend(e){
				// #ifdef H5
					let per = Number( (this.videoStartPositon+this.addPositon) / (this.windowWidth - (this.windowWidth*0.10)) );
					let timeSubmit = parseInt( this.timeduration * per )
					audo.seek(timeSubmit)
					audo.play()
					uni.createVideoContext(this.dataList[this.k].id+''+this.k,this).seek(timeSubmit)
					uni.createVideoContext(this.dataList[this.k].id+''+this.k,this).play()
					this.dataList[this.k].state = 'play'
					setTimeout(()=>{
						this.isTouch = false;
					},500)
				// #endif
				
			},
			timeupdate(event,index){
				// 触发进度条更新
				// console.log(event,index);
				if(index === this.k){
					this.timeduration = event.detail.duration;
					this.progressBarPercent = parseFloat( Number( event.detail.currentTime / event.detail.duration ) );
				}
			},
			// ---- 进度条相关 --- ending
			doubleLike(){
				if(this.dataList[this.k].sfdz == '0'){
					
					var data={
						createBy:uni.getStorageSync('userId'),
						shipinquanId:this.dataList[this.k].id,
					}
					this.$Request.post("/app/shipinquan/addDianzan", data).then(res => {
						if (res.code == 0) {
								this.dataList[this.k].dzs += 1;
								this.dataList[this.k].sfdz = '1';
						} else {
							this.dataList[this.k].sfdz ='0'
							uni.showToast({
								title: res.msg,
								icon: 'none'
							})
						}
					});
				}
				/*
				点赞
				*/
			},
			//点击播放&&暂停
			//点击播放&&暂停
			tapVideoHover(state,event){
				console.log('state--',state);
				if(state=='play'||state=='continue'){
					this.dataList[this.k].state = 'pause';
				}else{
					this.dataList[this.k].state = 'continue';
				}
				if(this.dataList[this.k].state == 'continue'){
					this.isClick = true;
					this.dataList[this.k].playIng = true
					uni.createVideoContext(this.dataList[this.k].id+''+this.k,this).play();//暂停以后继续播放
					audo.play()
				}
				if(this.dataList[this.k].state == 'pause'){
					uni.createVideoContext(this.dataList[this.k].id+''+this.k,this).pause();//暂停以后继续播放
					audo.src = this.dataList[this.k].src;
					audo.pause()
				}
			},
			//点击播放&&暂停
			tapVideoHovers(state,event){
				console.log('state--2',state);
				if(state=='play'||state=='continue'){
					this.dataList[this.k].state = 'pause';
				}else{
					this.dataList[this.k].state = 'continue';
				}
				if(this.dataList[this.k].state == 'continue'){
					this.isClick = true;
					this.dataList[this.k].playIng = true;
					this.dataList[this.k].muted = !this.dataList[this.k].muted;
				}
				if(this.dataList[this.k].state == 'pause'){
					uni.createVideoContext(this.dataList[this.k].id+''+this.k,this).pause();//暂停以后继续播放
					audo.pause()
				}
			},
			change(event){
				this.k = event.detail.current
			},
			animationfinish(event){
				// 1.这里进行判断，如果是最后一个视频就进入 get() 方法加载视频进入列表
				if(this.k == this.dataList.length - 1){
					this.page++
					this.GET()
					
				}
			},
			//每一组结束时新的请求
			GET(){
				var data={
					page: this.page,
					limit:this.limit,
				}
				this.$Request.get("/app/shipinquan/list", data).then(res => {
					if (res.code == 0) {
							var msg = res.data.list||{}
							// 2.这里把视频添加到视频列表
							for (let i = 0; i < msg.length; i++) {
								this.dataList.push(msg[i])
							}
					} else {
						uni.showToast({
							title: res.msg,
							icon: 'none'
						})
					}
				});
			},
			get(){
				// 1.这里引入后端请求数据
				var data={
					page: this.page,
					limit:this.limit,
				}
				this.$Request.get("/app/shipinquan/list", data).then(res => {
					if (res.code == 0) {
							var msg = res.data.list||{}
							// this.dataList=res.data.records
							this.isShow = false;
							// 2.这里把视频添加到视频列表
							this.dataList = msg.map(item => {
							  return {
							    ...item,
							    isplay: true,
								playIng: true,
								state: 'pause',
								src:item.filePath
							  };
							});
							// 3.播放当前视频
							setTimeout(()=>{
								this.isShow = true;
								this.dataList[this.k].isplay = true
								this.dataList[this.k].playIng = true
								setTimeout(()=>{
									this.dataList[this.k].state = 'pause';
									uni.createVideoContext(this.dataList[this.k].id+''+this.k,this).seek(0)
									uni.createVideoContext(this.dataList[this.k].id+''+this.k,this).pause()
									audo.src = this.dataList[this.k].src;
									
								},500)
							},200)
							this.videoID = this.dataList[this.k].id
					} else {
						uni.showToast({
							title: res.msg,
							icon: 'none'
						})
					}
				});
			},
			share(){
				uni.showToast({
					title: '分享',
					icon: 'none'
				})
			},
			
			cLike(sss){
				var data={
					createBy:uni.getStorageSync('userId'),
					shipinquanId:this.dataList[this.k].id,
				}
				// this.dataList[this.k].sfdz = !this.dataList[this.k].sfdz
				if(this.dataList[this.k].sfdz=='0'){
					this.$Request.post("/app/shipinquan/addDianzan", data).then(res => {
						if (res.code == 0) {
							this.dataList[this.k].dzs += 1;
							this.dataList[this.k].sfdz = '1';
						} else {
							uni.showToast({
								title: res.msg,
								icon: 'none'
							})
						}
					});
					
				}else{//取消点赞
					this.$Request.post("/app/shipinquan/delDianzan", data).then(res => {
						if (res.code == 0) {
							this.dataList[this.k].dzs -= 1;
							this.dataList[this.k].sfdz = '0';
						} else {
							uni.showToast({
								title: res.msg,
								icon: 'none'
							})
						}
					});
					
				}
				
			}
		}
	}
</script>

<style scoped>
	.uni-popup{
		width: 100%;
		height: 500px;
		overflow: auto;
	}
	.popup-content{
	  width: 100%;
	  height: 100%;
	 background-color: #242424;
	 border-top-left-radius: 10px; 
	 border-top-right-radius: 10px;
	 position: relative;
	  display: flex;
	  flex-direction: column;
	}
	/deep/uni-tabbar /deep/.uni-tabbar-bottom /deep/.uni-tabbar{
		z-index: 998;
	}
	
	.btn {
	  text-align: center;
	  color: #fff;
	  padding: 20rpx;
	  margin: 20rpx;
	  border-radius: 20rpx;
	  background-color: #2979ff;
	  position: fixed;
	  bottom: 0px;
	  z-index: 666;
	  width: 90%;
	}
	.list-view{
		display: flex;
		flex-direction: column;
		align-items: center;
	}
	.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;
		display: flex;
		/* border-style: dashed;
		border-color: #DD524D;
		border-width: 1px; */
	}
	.playState{
		width:  160rpx;
		height: 160rpx;
		opacity: 0.2;
	}
	.userInfo{
		position: absolute;
		bottom:110px;
		right: 10px;
		display: flex;
		flex-direction: column;
		z-index: 18;
	}
	.userAvatar{
		border-radius: 500%;
		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: 620rpx;
	  z-index: 99;
	  position: absolute;
	  bottom: 50px;
	  /* justify-content: center; */
	  padding: 15rpx;
	  flex-direction: column;
	  justify-content: flex-start;
	  color: #ffffff;
	  z-index: 12;
	  word-break: break-all;
	  overflow: hidden;
	  text-overflow: ellipsis;
	  display: -webkit-box;
	  -webkit-box-orient: vertical;
	  -webkit-line-clamp: 3;
	    
	  /* background-color: aqua; */
	}
	.userName {
	  font-size: 30rpx;
	  color: #ffffff;
	  margin-top: 80upx;
	}
	.words {
	  margin-top: 10rpx;
	  font-size: 30rpx;
	  color: #ffffff;
	}
	.root{
		background-color: #000000;
	}
</style>