ydd_front/mer_uniapp/pages/discover/discover_video/appVideo/index.nvue

<template>
	<view class="container">
		<!-- #ifdef APP -->
		<!--
		
		注意：这是 App 所用页面，请勿引入微信小程序或浏览器运行，最好运行在真机
		1. 视频运行在云服务上，本地加载很慢，会导致一些问题出现。
		2. 视频 id 切记是字符串类型，并且提前转义！要不然会出现黑屏加载不出视频。
	
		 -->

		<view :style="'width: '+ windowWidth +'px; height: '+ boxStyle.height +'px;'" v-if="isShow1">
			<!-- 
			 1.这里的 swiper 不是用来控制视频滑动的，而是用来控制左右滑动的，如果不需要的可以改成 view
			 
			 2.为了 视频无限加载，已经把 21 行的 appear 去掉了，加上了 loadmore 方法（第10行）
			 
			 3.由于方法比较多，可以采取下面的方式查看代码：
			 （1）Mac：按住 option 键，然后点击方法名，即可跳转到方法
			 （2）windows：按住 Alt 键，然后鼠标左击，即可跳转到方法
			 -->
			<list @loadmore="loadmores" @scroll="scrolls" :loadmoreoffset="wHeight*1" :show-scrollbar="false"
				ref="listBox" :pagingEnabled="true" :scrollable="true">
				<!-- 刷新模块 -->
				<refresh class="refresh" @refresh="onrefresh" @pullingdown="onpullingdown"
					:display="refreshing ? 'show' : 'hide'">
					<loading style="background-color: #FFFFFF;">
						<image src="../../static/images/logins.gif"
							:style="'width: 80upx; height: 40upx; margin-top: 80upx; margin-bottom: 30upx; margin-left: '+ (windowWidth - 200) +'px;'">
						</image>
					</loading>
				</refresh>

				<!-- 循环数据 -->
				<cell v-for="(list,i) in dataList" :key="i">
					<!-- 用div把视频模组套起来 -->
					<div :style="'width: '+ windowWidth +'px; height: '+ boxStyle.height +'px;'" @disappear="stop()">
						<view v-if="Math.abs(k-i)<=1">
							<view class="root">
								<!-- 
								具体视频参数可以参考官方文档
								说明：
								1.v-if很关键，这里主要是为了减少 dom 元素【这样才不会加载视频多了闪退】，
									这里 Math.abs(k-i)<=5 也就是往上预加载 5 个视频，往下预加载 5 
									个视频这样做的目的是为了让视频能够提前加载但是不播放，在真正滑到位
									置的时候播放视频。
									【2.0.1就是  1  Math.abs(k-i)<=1：请勿修改，记住，要不然会提前播放很多视频】
									
								2.要注意 @play="playIngs" 里面的 playIngs 方法，这个方法只是在视频播放的时候
									起效果，我们控制视频播放不是用这个的。这个的主要作用是给视频封面的。我们先用
									下面的视频封面盖住视频，等到视频播放的时候，我们不要急着直接播放，而是延迟一下下，
									300-600ms左右。因为视频播放需要一点点时间，这点时间里会黑屏，这个时候我们就用
									下面的封面盖住，这样用户就不会有从黑屏到有画面的感觉了，但是如果遇到视频太大，缓冲
									时间太长，还是会出现短暂的黑屏，大部分是不会有黑屏的（这样盖住的话）。
									
									【更新记录：2.0版】已经解决了视频黑屏问题，和加载速度慢的情况，如果还是出现了黑屏，
									意味着此时手滑动的速度，已经超过了视频加载的速度，对于这个问题，建议修改 preloadNumber 
									变量，当它的值大一点的时候就会提前加载视频，这样用户在滑到视频的时候就不会有停顿感了
									【注意】：老用户在 video 中增加和修改 
									（1）:muted="!item.playIng"，
									（2）@timeupdate="timeupdate($event,i)"
									（3）把 199 行注释了，
									（4）:id="item._id"，
									（5）修改：uni.createVideoContext(this.dataList[this.k]._id + '' + this.k,this) 为
										uni.createVideoContext(this.dataList[this.k]._id,this)
									（6）在 timeupdate 方法里加入，if(index == this.k){把里面的加一个总的判断}
								3.其他的下面有详解
								 -->
								<video :ref="'list'+i" :id="list.id" :loop="true" :src="list.video" :muted="list.isplay"
									@play="playIngs(i)" :enable-progress-gesture="false" :page-gesture="false"
									:controls="false" :http-cache="true" :show-loading="false"
									:show-fullscreen-btn="false" :show-center-play-btn="false" :style="boxStyle"
									:object-fit="object_fit" @timeupdate="timeupdate($event,i)"></video>
								<!-- 这里是封面 -->
								<!-- <image
								v-if="!item.playIng"
									:src="item.src+'?x-oss-process=video/snapshot,t_100,f_jpg'" 
									:mode="mode"
									:style="'width: '+ windowWidth +'px; height: '+ (wHeight - deleteHeight) +'px; position: absolute;'"
								></image> -->
								<!-- 
								mode: 图片裁剪、缩放的模式
								mode 有 14 种模式，其中 5 种是缩放模式，9 种是裁剪模式。
								https://uniapp.dcloud.io/component/image
								 -->
							</view>
							<!-- 直接用 view 就行了，一样是可以覆盖原生组件的 -->
							<!-- 这个是暂停时出现的图标 -->
							<!-- 播放状态：pause 的时候就会暂停 -->
							<view class="videoHover" @click.stop="tapVideoHover(list.state,$event)" :style="boxStyle">
								<image v-if="list.state=='pause'" class="playState" src="../../static/images/play.png">
								</image>
							</view>
							<!--审核状态  -->
							<view v-if="list.auditStatus == 0 || list.auditStatus == 2 || list.auditStatus == 3"
								class="video-status">
								<view v-if="list.auditStatus == 2 || list.auditStatus == 3" class="status-title">
									<image class="image" :src="urlDomain+'crmebimage/presets/weitg.png'"></image>
									<!-- <text class="iconfont icon-tishi"></text> -->
									<text class="title">{{list.auditStatus == 2 ? '审核未通过' : '平台关闭'}}，内容仅自己可见</text>
								</view>
								<view v-else class="status-title">
									<image class="image" :src="urlDomain+'crmebimage/presets/shen.png'"></image>
									<text class="title">正在审核，内容仅自己可见</text>
								</view>
								<view class="status_info">
									<text
										class="refusal">{{(list.auditStatus == 2 || list.auditStatus == 3) ? list.refusal : '发布的内容审核通过后，将在首页展示！'}}</text>
								</view>
							</view>
							<!-- 最底下的文字部分 -->
							<view v-if="isShowCent && dataList.length !== 0" class="content">
								<view class="cart">
									<text class="cartName">@{{list.authorName}}</text>
								</view>
								<view class="words mb20" :style="'width: '+ (windowWidth - 120) +'px;'">
									<view v-if="list.isMore || list.content.length<=29">
										<text class="info">{{list.content}}</text>
										<view class="close">
											<text v-if="list.isMore" class="more" @click="moreTap(list)">收起</text>
										</view>
									</view>
									<view class="wordsCon" v-else>
										<text class="info">{{list.content.slice(0,29)}}...</text>
										<text class="more" @click.stop="moreTap(list)">展开</text>
									</view>
									<view class="topicList acea-row product_cate"
										v-if="list.topicList && list.topicList.length">
										<view class="pro-view" @click="goTopic(item.id)" v-for="item in list.topicList"
											:key="item.id">
											<text class="icon">#</text><text class="text">{{item.name}}</text>
										</view>
									</view>
								</view>
								<view v-if="k==i && list.productList.length>0" class="product mb20">
									<scroll-view class="scroll-view" scroll-x="true"
										style="white-space: nowrap; display: flex;" scroll-with-animation>
										<view class="product-item" v-for="(goods,idx) in list.productList" :key="idx">
											<view class="item-count acea-row" @click="goDetail(goods)">
												<view class="picture">
													<image class="image" :src="goods.productImage"></image>
												</view>
												<view class="product-text">
													<text class="names line1">{{goods.productName}}</text>
													<text v-if="goods.isPay===1" class="buy">作者买过</text>
													<view class="product-price">
														<view class="price"><text class="sm">¥</text><text
																class="money">{{goods.price}}</text></view>
														<text class="buy-btn">购买</text>
													</view>
												</view>
											</view>
										</view>
									</scroll-view>
								</view>
							</view>
							<view v-if="isShowCent" class="userInfo">
								<!-- 1.头像 -->
								<navigator hover-class="none"
									:url="'/pages/discover/discover_user/index?id='+list.authorId" class="pictrue">
									<image class="userAvatar" :src="list.authorAvatar || urlDomain+'crmebimage/presets/morenT.png'"
										mode="aspectFill"></image>
									<view v-if="!list.isConcerned && list.authorId!==uid" class="guanzhu"
										@click.stop="followAuthor(list)">
										<text class="iconfont icon-shangpinshuliang-jia">+</text>
									</view>
									<view v-else class="yiguanzhu"><text class="iconfont"></text></view>
								</navigator>
								<!-- 2.点赞 -->
								<view @click="likeToggle(list);" style="margin-top: 5px;" class="flex-column"
									:class="{'likeNumActive':list.userIsLike}">

									<image v-if="list.userIsLike" :src="urlDomain+'crmebimage/presets/xin.png'"
										style="width: 28px; height: 28px;"></image>
									<image v-if="!list.userIsLike" :src="urlDomain+'crmebimage/presets/xin-2.png'"
										style="width: 28px; height: 28px;"></image>
									<text class="info-text">{{list.likeNum > 0 ? list.likeNum : '点赞'}}</text>
								</view>
								<!-- 3.评论 -->
								<view v-if="list.platReplySwitch" class="comment flex-column" @click="toComment(list)"
									style="margin-top: 18px;">
									<image :src="urlDomain+'crmebimage/presets/evaluate.png'"
										style="width: 54rpx; height: 50rpx;"></image>
									<text class="info-text">{{list.replyNum>0 ? list.replyNum : '评论'}}</text>
								</view>
								<!-- 4.分享 -->
								<view v-if="list.auditStatus == 1" @click="appShare('WXSceneSession',list.id)"
									class="flex-column" style="margin-top: 17px;">
									<image :src="urlDomain+'crmebimage/presets/share-fill.png'"
										style="width: 54rpx; height: 50rpx;"></image>
									<text class="info-text">分享</text>
								</view>
								<!-- 5.自己的视频 -->
								<view v-if="list.authorId == uid" style="margin-top: 17px;">
									<view class="video-my">
										<view class="video-dian" @click.stop="showManage = !showManage">
											<text class="dian"></text>
											<text class="dian"></text>
											<text class="dian"></text>
										</view>
									</view>
								</view>
								<!-- 6提到的商品 -->
								<view v-if="list.productList.length>0 && k === i" @click.stop="openMore(list)"
									class="mention" style="opacity: 0.9; margin-top: 18px;">
									<image class="image" src="../../static/images/collection.png"></image>
									<text class="count">{{list.productList.length}}</text>
								</view>
								<!-- 7.收起内容 -->
								<view @click="onHideCent" class="flex-column"
									style="margin-top: 35rpx;align-items: center;">
									<image :src="urlDomain+'crmebimage/presets/shou.png'"
										style="width: 56rpx; height: 56rpx;"></image>
								</view>
							</view>
							<!-- 8.展开内容 -->
							<view v-else @click="onHideCent" class="onShow">
								<image :src="urlDomain+'crmebimage/presets/zhan.png'"
									style="width: 56rpx; height: 56rpx;"></image>
							</view>

							<view class="manage" v-if="showManage">
								<navigator hover-class="none"
									:url="'/pages/discover/discover_release/index?noteId='+list.id" class="items">
									<image :src="urlDomain+'crmebimage/presets/bianji.png'"
										style="width: 16px; height: 16px;"></image>
									<text class="text">编辑</text>
								</navigator>
								<view class="items" @click.stop="deleteTopic(list)">
									<image :src="urlDomain+'crmebimage/presets/shan.png'"
										style="width: 16px; height: 16px;"></image>
									<text class="text">删除</text>
								</view>
								<view class="items" @click.stop="replySwitch(list)">
									<image v-if="list.replyStatus ==1" :src="urlDomain+'crmebimage/presets/jinping.png'"
										style="width: 16px; height: 16px;"></image>
									<image v-else :src="urlDomain+'crmebimage/presets/yunping.png'"
										style="width: 16px; height: 16px;"></image>
									<text class="text">{{list.replyStatus ==1 ? '禁止评论' : '开启评论'}}</text>
								</view>
							</view>
							<!-- 最底下的文字部分 -->

							<!-- 1.视频预览时的图片，currenttimes：就是获取当前滑块的时间点，如果不需要，可以注释掉 -->
							<!-- 2.如果使用下面的视频预览的话要注意的是视频链接最好是阿里云上的，因为
									https://xxxxxxxxx.mp4?x-oss-process=video/snapshot,t_1000,f_jpg
									这个是阿里云的东西，至于其他的视频截帧我还没有试过。
									-->
							<!-- 3.阿里云视频截帧地址：https://help.aliyun.com/document_detail/64555.html -->
							<!-- <image
							v-if="item.isShowimage == true"
								:src="item.src+'?x-oss-process=video/snapshot,t_'+ currenttimes +'000,f_jpg'" 
								mode="aspectFill"
								:style="'width: 120upx; height: 160upx; border-radius: 10upx; position: absolute; bottom: '+ (ProgressBarBottom + 160) +'upx; left: '+ (currentPositions - 15) +'px;'"
							></image> -->
						</view>
					</div>
				</cell>
			</list>
			<!-- 1.注意：进度条这类拖拽的东西不能放进block\cell这些循环体中的，要不然touchmove方法会捕捉有误 -->
			<!-- <view v-if="dataList.length !== 0 && dataList[k].isShowProgressBarTime == true" :style="'position: absolute; bottom: '+ (ProgressBarBottom + this.windowWidth*0.2)/2 +'px; left: '+ (windowWidth*2 - this.windowWidth*1.35)/2 +'px;'">
				<text style="font-size: 22px; font-weight: bold; color: #F1F1F1;">{{changeTime}} / {{videoTimes}}</text>
			</view> -->
			<!-- 这里就是进度条了：纯手工进度条，调整位置的话就把他们的 bottom 改成一下就行了 -->

		</view>
		<!-- #endif -->
		<!-- 评论 -->
		<uni-popup type="bottom" ref="comment" @touchmove.stop.prevent="moveHandle" v-if="isShow2">
			<view
				:style="'width: '+ windowWidth +'px; height: 500px; background-color: #fff; border-top-left-radius: 10px; border-top-right-radius: 10px;'">
				<discoverComment v-if="showComment" ref="comments" :noteId="noteDetail.id" :noteDetails="noteDetail"
					@close.stop="close">
				</discoverComment>
			</view>
		</uni-popup>
		<!-- 他提到的宝贝弹窗 -->
		<uni-popup type="bottom" ref="pinglunMentioned">
			<view
				:style="'width: '+ windowWidth +'px;background-color: #F5F5F5; border-top-left-radius: 10px; border-top-right-radius: 10px;'">
				<mentioned ref="mentioned" :list="proList" @close="popup"></mentioned>
			</view>
		</uni-popup>
	</view>
</template>
<script>
	import {
		HTTP_H5_URL
	} from '@/config/app.js';
	import {
		goProductDetail
	} from '@/libs/order.js'
	import {
		mapGetters
	} from "vuex";
	import {
		discoverFollowAuthor,
		discoverNoteLike
	} from '@/libs/follow.js';
	import {
		toLogin
	} from '@/libs/login.js';
	import {
		noteDetailApi,
		noteRecommendApi,
		noteReplySwitchApi,
		noteDelApi
	} from '@/api/discover.js';
	import Cache from '@/utils/cache'
	import mentioned from '@/components/mentioned.vue';
	import discoverComment from './comment.nvue';
	import util from '@/utils/util';
	import {
		Debounce
	} from '@/utils/validate.js'
	let sysHeight = uni.getSystemInfoSync().statusBarHeight;
	export default {
		computed: mapGetters(['userInfo', 'isLogin', 'uid']),
		data() {
			return {
				//下面打🌟号的是必须要的基础字段
				//下面打💗号的是拥有滑动条的必须字段
				dataList: [], //用于数据循环的列表🌟💗
				wHeight: 0, //获取的屏幕高度🌟💗
				boxStyle: { //视频，图片封面样式🌟💗
					'height': 0,
					'width': 0,
				},
				k: 0, //默认为0🌟💗
				playIngIds: [], //正在播放的视频id列队，列队用于处理滑动过快导致的跳频问题🌟💗
				ready: false, //可忽略
				isDragging: false, //false代表停止滑动🌟💗
				refreshing: true, //用于下拉刷新🌟💗
				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, //测试高度🌟💗
				percent: 0, //百分小数💗
				currentPosition: 0, //滑块当前位置💗//2.0已弃用，现已用于后端参数
				currentPositions: 0, //滑块当前位置的副本💗//2.0已弃用，现已用于后端参数
				newTime: 0, //跟手滑动后的最新时间💗
				timeNumber: 0, //🌟💗
				ProgressBarBottom: 20, //进度条离底部的距离💗
				object_fit: 'contain', //视频样式默认包含🌟💗
				mode: 'aspectFit', //图片封面样式🌟💗
				timeout: "", //🌟用来阻止 setTimeout()方法
				voice: "", //🌟用来阻止 setTimeout()方法
				oldVideo: "",

				isAutoplay: false, //是否开启自动播放(默认不开启)
				autoplayText: "开启自动播放",
				timers: "",

				// 引入评论 - 参数
				heightNum: 1.18,

				// 双击点赞参数
				touchNum: 0,
				aixinLeft: 0,
				aixinTop: 0,
				isShowAixin: false,
				Rotate: 0,

				isShow1: false, //控制渲染变量1
				isShow2: false, //控制渲染变量2 ： 专门控制 uni-popup

				showPlay: false, //转轮显示控制
				rotates: 0, //转轮旋转角度
				rotateTime: "", //转轮递归事件控制
				xrotats: "",

				noteId: 0,
				where: {
					page: 1,
					limit: 5,
					noteId: ''
				},
				showManage: false,
				isShowCent: true,
				urlDomain: Cache.get("imgHost"),
				showComment: false, //评论弹窗
				noteDetail: {}, //详情
				proList: [], //商品列表
				fromTo: ''
			}
		},
		components: {
			//tuiBottomPopup,
			mentioned,
			discoverComment
		},
		watch: {
			async k(k, old_k) { //监听 k 值的变化，可以控制视频的播放与暂停
				// 清理定时器
				this.clearToTime();
				this.dataList[old_k].state = 'stop' //如果是被滑走的视频，就停止播放
				this.dataList[old_k].playIng = false //如果视频暂停，就加载封面
				this.dataList[old_k].isplay = true
				uni.createVideoContext(this.dataList[old_k].id.toString(), this).play()
				this.oldVideo = await setTimeout(() => {
					uni.createVideoContext(this.dataList[old_k].id.toString(), this).seek(0)
					uni.createVideoContext(this.dataList[old_k].id.toString(), this).pause()
				}, 500)
				// 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'
				uni.createVideoContext(this.dataList[k].id.toString(), this).play();
				this.xrotats = setTimeout(() => {
					this.showPlay = true;
					this.rotateX();
				}, 200)
				clearTimeout(this.voice)
				this.voice = await setTimeout(() => {
					this.dataList[k].isplay = false
				}, 300)
				await setTimeout(() => {
					this.dataList[k].playIng = true
				}, 850)
				//【2.0版本更新内容】- start
				var p = k;
				if (this.loadend) return;
				++p;
				this.dataList[p].isplay = true
				await setTimeout(async () => {
					uni.createVideoContext(this.dataList[p].id.toString(), this).play()
					clearTimeout(this.timeout)
					this.timeout = await setTimeout(() => {
						uni.createVideoContext(this.dataList[p].id.toString(), this).seek(0)
						uni.createVideoContext(this.dataList[p].id.toString(), this).pause()
					}, 1500)
				}, 500)
				//【2.0版本更新内容】- end
				//【此处处理进度条卡住的问题】
				if (uni.getSystemInfoSync().platform !== 'ios') {
					await setTimeout(() => {
						uni.createVideoContext(this.dataList[k].id.toString(), this).pause()
						uni.createVideoContext(this.dataList[k].id.toString(), this).play()
					}, 100)
				}
			}
		},
		onShow() {
			if (this.dataList.length !== 0) {
				this.dataList[this.k].state = 'play';
				uni.createVideoContext(this.dataList[this.k].id, this).play()
			}
		},
		onHide() {
			this.dataList[this.k].state = 'pause'; //界面隐藏也要停止播放视频
			uni.createVideoContext(this.dataList[this.k].id, this).pause(); //暂停以后继续播放
		},
		onLoad(options) {
			this.noteId = options.noteId ? Number(options.noteId) : '';
			this.fromTo = options.fromTo || '';
			this.platform = uni.getSystemInfoSync().platform;
			var model = uni.getSystemInfoSync().model
			if (this.platform == 'ios' && (model !== 'iPhone6' || model !== 'iPhone6s' || model !== 'iPhone7' || model !==
					'iPhone8')) {
				this.deleteHeight = 32 //有 tabbar的 修改这里可以改变视频高度

				/*
				引入评论参数
				*/

				this.heightNum = 1.27
			} else {
				this.deleteHeight = 0
				/*
				引入评论参数
				*/
				this.heightNum = 1.18
			}
			// 控制渲染 -- start
			this.isShow1 = true;
			setTimeout(() => {
				this.isShow2 = true;
			}, 400)
			// 控制渲染 -- end
			this.windowWidth = uni.getSystemInfoSync().screenWidth //获取屏幕宽度
			this.boxStyle.width = this.windowWidth + 'px' //给宽度加px
			this.wHeight = uni.getSystemInfoSync().screenHeight; //获取屏幕高度
			this.boxStyle.height = this.wHeight - this.deleteHeight; //改变视频高度
			this.get() //这一步，加载视频数据
			if (options.fromTo !== 'home') this.getData();
			this.rotateX();
		},
		onReady() {},
		methods: {
			// 删除内容
			deleteTopic(item) {
				let that = this;
				uni.showModal({
					content: '确定要删除该内容么？',
					success: function(res) {
						if (res.confirm) {
							noteDelApi(item.id).then(res => {
								util.Tips({
									title: '删除成功'
								});
								setTimeout(function() {
									uni.redirectTo({
										url: '/pages/discover/discover_user/index'
									})
								}, 1000);
							}).catch(err => {
								uni.showToast({
									title: err,
									icon: 'none'
								})
							});
						} else if (res.cancel) {
							console.log('用户点击取消');
						}
					}
				});

			},
			//禁止评论
			replySwitch(item) {
				if (!item.platReplySwitch && item.replyStatus === 3) {
					util.Tips({
						title: '平台设置不可评论'
					});
				} else {
					noteReplySwitchApi(item.id).then(res => {
						if (item.replyStatus === 1) {
							this.$set(item, 'replyStatus', 2)
							util.Tips({
								title: '禁止成功'
							});
						} else {
							this.$set(item, 'replyStatus', 1)
							util.Tips({
								title: '开启成功'
							});
						}
					}).catch(err => {
						uni.showToast({
							title: err,
							icon: 'none'
						})
					});
				}
			},
			//打开评论
			toComment(item, index) {
				this.noteDetail = item;
				this.showComment = true
				this.$refs.comment.open('bottom')
			},
			/*查看提到的宝贝*/
			openMore(item) {
				this.proList = item.productList;
				this.$refs.pinglunMentioned.open('bottom');
				//this.popupShow = true;

			},
			popup() {
				this.$refs.pinglunMentioned.close();
			},
			loadmores() {
				if (options.fromTo !== 'home') this.getData();
			},
			//分享
			appShare(scene, id) {
				uni.showLoading({
					title: '加载中',
					mask: true
				});
				let uid = this.uid ? this.uid : 0;
				let data = this.dataList[this.k];
				let routes = getCurrentPages(); // 获取当前打开过的页面路由数组
				//let curRoute = routes[routes.length - 1].$page.fullPath // 获取当前页面路由，也就是最后一个打开的页面路由
				uni.share({
					provider: "weixin",
					scene: scene,
					type: 0,
					href: `${HTTP_H5_URL}/pages/discover/discover_video/routineVideo/index?&noteId=${id}&sd=${this.uid}`,
					title: data.title || '',
					summary: data.content || '',
					imageUrl: data.cover || '',
					success: function(res) {
						uni.showToast({
							title: '分享成功',
							icon: 'success'
						})
						uni.hideLoading();
					},
					fail: function(err) {
						uni.hideLoading();
						uni.showToast({
							title: '分享失败',
							icon: 'none',
							duration: 2000
						})
					}
				});
				uni.hideLoading();
			},
			moreTap(item) {
				item.isMore = !item.isMore;
			},
			//去话题
			goTopic(id) {
				uni.navigateTo({
					url: `/pages/discover/discover_note_topic/index?topicId=${id}`
				})
			},
			//收起内容
			onHideCent() {
				this.isShowCent = !this.isShowCent;
			},
			// 去详情页
			goDetail(item) {
				goProductDetail(item.productId, 0, '');
			},
			//返回
			returns: function() {
				uni.navigateBack();
			},
			// 关注作者
			followAuthor(item) {
				if (this.isLogin) {
					discoverFollowAuthor(item.authorId).then(() => {
						this.$set(item, 'isConcerned', !item.isConcerned);
					});
				} else {
					toLogin();
				}
			},
			//点赞
			likeToggle: Debounce(function(item) {
				if (this.isLogin) {
					discoverNoteLike(item.id).then(() => {
						this.$set(item, 'userIsLike', !item.userIsLike);
						if (!item.userIsLike) {
							item.likeNum--;
							item.likeNum = item.likeNum == 0 ? 0 : item.likeNum
						} else {
							item.likeNum++;
						}
					});
				} else {
					toLogin();
				}
			}),
			toBilibili() {
				// #ifdef H5
				window.open('https://www.bilibili.com/video/BV1gi4y12745')
				// #endif
			},
			selectVideo() {
				uni.navigateTo({
					url: '/pages/selectVideo/selectVideo'
				})
			},
			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.rotates += 1;
				}, 30)
			},
			autoPlay() {
				this.isAutoplay = !this.isAutoplay;
				if (!this.isAutoplay) {
					this.autoplayText = "开启自动播放"
					uni.showToast({
						title: "关闭自动播放",
						icon: 'none',
						duration: 3000
					})
				} else {
					this.autoplayText = "关闭自动播放"
					uni.showToast({
						title: "开启自动播放",
						icon: 'none',
						duration: 3000
					})
				}
			},
			getData() {
				if (this.loadend) return;
				this.loading = true;
				this.where.noteId = this.noteId;
				noteRecommendApi(this.where).then(res => {
					this.loading = false;
					this.where.page = this.where.page + 1;
					this.loadend = this.where.page > res.data.totalPage;
					var msg = res.data.list
					for (let i = 0; i < msg.length; i++) {
						msg[i].id = msg[i].id.toString();
						this.dataList.push(msg[i])
					}
				}).catch(err => {
					this.loading = false;
					uni.showToast({
						title: err,
						icon: 'none'
					})
				});
			},
			touchstart(event) {
				this.dataList[this.k].isShowimage = true //刚触摸的时候就要显示预览视频图片了
				this.dataList[this.k].isShowProgressBarTime = true //显示时间线
				this.ProgressBarOpacity = 1 //让滑块显示起来更明显一点
				this.dotWidth = 10 //让点显示起来更明显一点
			},
			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()
				}
				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)}`
			},
			timeupdate(event, index) { //计算滑块当前位置，计算当前百分小数
				if (index == this.k) {
					var currenttime = event.detail.currentTime
					this.timeNumber = Math.round(event.detail.duration)
					this.getTime()
					this.percent = currenttime / this.timeNumber
					this.currentPosition = this.windowWidth * this.percent
					let theTime = currenttime
					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)}`
					//自动切换视频
					if (this.isAutoplay) { //true,代表自动播放
						if (Math.round(currenttime) == this.timeNumber - 1) {
							const dom = uni.requireNativePlugin('dom')
							let doms = 'item' + (this.k + 1)
							setTimeout(() => {
								let el = this.$refs[doms][0]
								dom.scrollToElement(el, {
									offset: 0,
									animated: true
								})
							}, 500)
						}
					}
				}
			},
			getTime() { //得到时间函数
				this.videoTime = this.formatSeconds(this.timeNumber);
				var msg = []
				if (this.videoTime !== '') {
					msg = this.videoTime.split(':')
				}
				this.videoTimes = `${msg[0]>9?msg[0]:'0'+msg[0]}:${msg[1]>9?msg[1]:'0'+msg[1]}`;
			},
			formatSeconds(value) { //获取时间函数
				let theTime = parseInt(value); // 秒
				let middle = 0; // 分
				if (theTime > 60) {
					middle = parseInt(theTime / 60);
					theTime = parseInt(theTime % 60);
				}
				return `${middle>9?middle:middle}:${theTime>9?theTime:theTime}`;
			},
			playIngs(index) {
				//
			},
			tozuozhe() {
				this.currents = 1 //点击头像以后就会切换
			},
			stop() {
				// console.log('stop')
			},
			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 +
						1)) //先用绝对值取出滑动的距离，然后除以屏幕高度，取一个整，就知道你现在滑动到哪一个视频了
					if (i !== this.k) { //这里加判断是因为这个方法会执行很多次，会造成重复请求，所以这里写一个限制
						if (uni.getSystemInfoSync().platform == 'ios') {
							this.k = i //判断了用户没有滑动，确认了用户的确是在看这个视频，然后就赋值啦
							this.dataList[this.k].state = 'play'
						} else {
							clearTimeout(this.timers);
							this.timers = setTimeout(() => {
								this.k = i //判断了用户没有滑动，确认了用户的确是在看这个视频，然后就赋值啦
								this.dataList[this.k].state = 'play'
							}, 80)
						}
					}
				}
			},
			get() {
				noteDetailApi(this.noteId).then(async (res) => {
					this.noteDetail = res.data
					res.data.id = res.data.id.toString()
					this.noteDetail.id = this.noteDetail.id.toString()
					this.loading = false
					this.dataList.push(res.data)
					this.dataList[0].state = "play";
					await setTimeout(() => {
						//这里的延迟是为了避免执行时间太快而直接跳过执行的 bug
						uni.createVideoContext(this.dataList[0].id.toString(), this).seek(0)
						uni.createVideoContext(this.dataList[0].id.toString(), this).play()
					}, 200)
					this.dataList[0].isplay = false
					await setTimeout(() => {
						this.dataList[0].playIng = true
					}, 500)
					var p = 0;
					this.showPlay = true;
				}).catch(err => {
					uni.showToast({
						title: err,
						icon: 'none'
					})
				});
			},
			onpullingdown() {
				this.refreshing = true
			},
			onrefresh() {
				setTimeout(() => {
					this.refreshing = false
				}, 1000)
			},
			// 双击点赞效果
			touchstartHover(event) {
				if (this.touchNum >= 1) {
					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();
				}
			},
			//点击播放&&暂停
			tapVideoHover(state, event) {
				this.dataList[this.k].isShowimage = false
				this.dataList[this.k].isShowProgressBarTime = false
				this.ProgressBarOpacity = 0.5
				this.dotWidth = 0
				// 1.启用双击点赞 --- start
				this.touchNum++;
				setTimeout(() => {
					if (this.touchNum == 1) {
						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') {
							uni.createVideoContext(this.dataList[this.k].id, this).play(); //暂停以后继续播放
							this.clearTime();
							setTimeout(() => {
								this.rotateX();
							}, 50)
						}
						if (this.dataList[this.k].state == 'pause') {
							uni.createVideoContext(this.dataList[this.k].id, this).pause(); //暂停以后继续播放
							this.clearTime();
						}
					}
					if (this.touchNum >= 2) {
						this.doubleLike();
					}
					this.touchNum = 0;
				}, 200)
				// --------------- ending
				// 2. 不启用双击点赞 start
				// 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'){
				// 	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();//暂停以后继续播放
				// }
				// --------------- ending
			},
			doubleLike() {
				if (this.dataList[this.k].like == false) {
					this.dataList[this.k].like_n += 1;
					this.dataList[this.k].like = true;
				}
				/*
				点赞
				*/
			},
			//关闭评论
			close() {
				this.$refs.comment.close();
			},
			wxh5Video() {
				uni.navigateTo({
					url: '../wxh5previewVideo/wxh5previewVideo'
				})
			},
			previewVideo() {
				uni.navigateTo({
					url: '../previewVideo/previewVideo'
				})
			},
			toTwoVideo() {
				uni.navigateTo({
					url: '../new_index/new_index'
				})
			},
			tolistVideo() {
				uni.navigateTo({
					url: '../nvueSwiper/nvueSwiper'
				})
			},
			moveHandle() {},
			onTabItemTaps() {
				// #ifdef APP-PLUS
				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('点击震动');
						}
					});
				}
				// #endif
			}
		}
	}
</script>
<style lang="scss" scoped>
	.onShow {
		position: absolute;
		bottom: 55rpx;
		right: 40rpx;
	}

	.mb20 {
		margin-bottom: 20rpx;
	}

	.line1 {
		overflow: hidden;
		text-overflow: ellipsis;
		white-space: nowrap;
		//display: inline-block;
	}

	.names {
		font-size: 24rpx;
		width: 286rpx;
		color: #fff;
		height: 30rpx;
		lines: 1;
		text-overflow: ellipsis;
	}

	.product_cate {
		flex-direction: row;
		flex-wrap: wrap;

		.pro-view {
			margin-bottom: 20rpx;
			flex-direction: row;
			align-items: center;
			border-radius: 30rpx;
			border-radius: 29rpx;

			.text {
				color: #ffffff;
				font-size: 24rpx;
			}

			.icon {
				font-size: 26rpx;
				font-weight: bold;
				margin-right: 4rpx;
				color: #ffffff;
			}
		}
	}

	.noVideo {
		position: fixed;
		top: 400rpx;
		z-index: 9;
		width: 750rpx;
		flex-direction: row;
		justify-content: center;

		.pictrue {
			width: 414rpx;
			height: 256rpx;
		}

		.tips {
			text-align: center;
			margin-top: 14rpx;
			font-size: 26rpx;
			color: #999;
		}
	}

	// .container {background: #000000;}
	.item {
		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;
	}

	.playState {
		width: 160rpx;
		height: 160rpx;
		opacity: 0.2;
	}

	.video-status {
		width: 690rpx;
		position: absolute;
		left: 30rpx;
		background: rgba(0, 0, 0, .55);
		border-radius: 10rpx;
		top: 150rpx;
		padding: 30rpx;

		.status-title {
			flex-direction: row;
			align-items: center;

			.title {
				margin-left: 20rpx;
				color: #ffffff;
				font-size: 28rpx;
			}
		}

		.refusal {
			color: #ffffff;
			font-size: 22rpx;
			margin: 15rpx 0 0 48rpx;
		}

		.image {
			width: 28rpx;
			height: 28rpx;
		}
	}

	.userInfo {
		position: absolute;
		bottom: 30px;
		right: 10px;
		display: flex;
		align-items: center;
		flex-direction: column;

		.pictrue {
			flex-direction: column;
			justify-content: center;
			align-items: center;
			position: relative;

			// margin-bottom: 18rpx;
			.guanzhu {
				width: 42rpx;
				height: 42rpx;
				display: flex;
				align-items: center;
				justify-content: center;
				color: #fff;
				background: #E93323;
				border-radius: 100%;
				position: relative;
				top: -20rpx;
				left: 3rpx;

				.iconfont {
					font-size: 30rpx;
					color: #fff;
				}
			}

			.yiguanzhu {
				width: 42rpx;
				height: 42rpx;
			}
		}
	}

	.video-my {
		position: relative;
		align-items: center;
		justify-content: center;
		flex-direction: row;

	}

	.video-dian {
		position: relative;
		width: 33px;
		height: 33px;
		align-items: center;
		justify-content: center;
		flex-direction: row;
		left: 3px;

		.dian {
			width: 7px;
			height: 7px;
			background-color: #fff;
			border-radius: 100%;
			margin-right: 3px;

			&:last-child {
				margin-right: 0;
			}
		}
	}

	.manage {
		width: 115px;
		background: #ffffff;
		box-shadow: 0 1px 8px rgba(0, 0, 0, 0.1);
		padding: 0 8px;
		position: absolute;
		bottom: 10px;
		right: 60px;
		border-radius: 8px;

		.manage-gou {
			display: flex;
			width: 13px;
			height: 13px;
			background: #ffffff;
			transform: rotate(140deg);
			position: absolute;
			top: 30px;
			right: -6px;
			box-shadow: -1px -1px 1px rgba(0, 0, 0, 0.05);
		}

		.items {
			border-bottom: 1px solid #EEEEEE;
			padding: 10px 0;
			display: flex;
			align-items: center;
			flex-direction: row;

			.text {
				color: #282828;
				font-size: 13px;
				margin-left: 20rpx;
			}

			&:last-child {
				border-bottom-color: transparent;
			}

			.image {
				width: 32rpx;
				height: 32rpx;
				margin: 0 16rpx 0;
			}
		}
	}

	.userAvatar {
		border-radius: 500%;
		border-style: solid;
		border-width: 2px;
		border-color: #ffffff;
		width: 80rpx;
		height: 80rpx;
	}

	.info-text {
		display: flex;
		margin-top: 10rpx;
		color: #ffffff;
		font-size: 22rpx;
		text-align: center;

		&.likeNumActive {
			color: #E93323;
		}
	}

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

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

	.mention {
		width: 46px;
		height: 46px;
		position: relative;
		bottom: 0;

		.image {
			width: 30px;
			height: 30px;
			position: absolute;
			right: 8px;
		}

		.count {
			padding: 2px 6px;
			background: #fff;
			border-radius: 100%;
			display: flex;
			align-items: center;
			justify-content: center;
			color: #E93323;
			position: absolute;
			right: 6px;
			top: 0;
			font-size: 10px;
		}
	}

	.content {
		width: 590rpx;
		position: absolute;
		bottom: 20px;
		/* justify-content: center; */
		padding: 15rpx;
		flex-direction: column;
		justify-content: flex-start;
		color: #ffffff;

		.cart {
			height: 48rpx;
			flex-direction: row;

			.cartName {
				font-size: 28rpx;
				color: #fff;

			}
		}

		.product {
			flex-direction: row;
			margin-bottom: 20rpx;

			.scroll-view {
				flex-direction: row;
			}

			.product-item {
				width: 444rpx;
				height: 136rpx;
				background: rgba(0, 0, 0, .55);
				border-radius: 12rpx;
				padding: 16rpx 15rpx;
				margin-right: 30rpx;
			}

			.item-count {
				font-size: 20rpx;
				flex-direction: row;
				justify-content: space-between;

				.picture {
					width: 104rpx;
					height: 104rpx;
					border-radius: 10rpx;

					.image {
						width: 104rpx;
						height: 104rpx;
						border-radius: 10rpx;
					}
				}

				.names {
					font-size: 24rpx;
					width: 286rpx;
					color: #fff;
				}

				.product-text {
					width: 286rpx;
					justify-content: space-between;

					.buy {
						width: 75rpx;
						padding: 4rpx 7rpx;
						background: #5D5747;
						border-radius: 3px 3px 3px 3px;
						font-size: 16rpx;
						display: inline-block;
					}

					.product-price {
						display: flex;
						flex-direction: row;
						justify-content: space-between;
						align-items: center;

						.price {
							display: flex;
							flex-direction: row;

							.sm,
							.money {
								color: #ffffff;
								font-size: 24rpx;
							}
						}

						.buy-btn {
							padding: 6rpx 20rpx;
							// display: flex;
							// align-items: center;
							// justify-content: center;
							color: #fff;
							border-radius: 26rpx;
							background: #E93323;
							font-size: 20rpx;
						}
					}
				}
			}
		}
	}

	.timeCon {
		flex-direction: row;
		align-items: center;

		.userName {
			font-size: 30rpx;
			color: #ffffff;
		}
	}

	.words {
		margin-top: 20rpx;

		.close {
			display: flex;
			flex-direction: row;
			align-items: center;
			justify-content: flex-end;
			margin-right: 20rpx;

			.imgClose {
				width: 18rpx;
				height: 10rpx;
				margin-left: 10rpx;
			}
		}

		.wordsCon {
			position: relative;

			.more {
				position: absolute;
				bottom: 0;
				right: 40rpx;
				font-size: 26rpx;
				color: #ffffff;
				font-weight: bold;
			}

			.img {
				width: 18rpx;
				height: 10rpx;
				margin-left: 4rpx;
				position: absolute;
				bottom: 7rpx;
				right: 20rpx;
			}
		}

		.info {
			color: #fff;
			font-size: 28rpx;
		}

		.more {
			font-size: 26rpx;
			color: #ffffff;
			font-weight: bold;
		}
	}

	.root {
		background-color: #000000;
	}
</style>