uniapp在video上面使用添加nvue


由于video的层级过高，普通dom遮盖不了，所以需要使用uniapp的subNVue来进行覆盖。

一、uniapp引入配置nvue页面

创建一个nvue页面
在这里插入图片描述
在pages.json中找到需要被覆盖的页面，在下面添加subNVues

在这里插入图片描述

{
			"path": "pages/theatre/theatreDetails",
			"style": {
				"navigationBarTitleText": "",
				"enablePullDownRefresh": false,
				"app-plus": {
					"titleNView": false,
					"subNVues":[{
						"id":"drawer",
						"path":"pages/theatre/theatreNew.nvue",
						"style":{
							"position":"absolute",
							"bottom":"100upx",
							"top":"560upx",
							"left":"20upx",
							"right":"100upx",
							"mask":"rgba(0,0,0,0)",
							"background": "rgba(0,0,0,0)"
						}
					}]
				}
			}
		},

video页面代码

<template>
	<view>
		<view class="pageAll">
			<view style="width: 100%;height: 100%;position: absolute;z-index: 999!important;">
				<video :style="{height: windowHeight,'z-index':'999'}" x5-video-player-type="h5" webkit-playsinline="true" class="myVideo"
				 id="myVideo" :loop="true" :src="videoSrc" @error="videoErrorCallback" autoplay=true :enable-progress-gesture="true"
				 :show-fullscreen-btn="false" :show-center-play-btn="false" @play="videoPlay" @click="videoPause">
					<!-- :controls="false" -->
					<view style="width: 100rpx;height: 100rpx;float: left;position: fixed;z-index: 9999;" class="name">{{name}}</view>
					<cover-image class="closeVue" :style="{'top': +topHeight+'px'}" @click="goBack" src="../../static/back.png"></cover-image>
					<cover-image class="controls-play" :style="{display:(isPlay==true?'block':'none')}" @click="videoPlay" src="../../static/play.png"></cover-image>
					<cover-image class="like" @click="goLike()" :src="(isLike==true?'../../static/isLike.png':'../../static/like.png')"></cover-image>
					<cover-view class="likeAll">{{videoVote}}</cover-view>
					<cover-image class="comments" @click="goFavorite()" :src="(isFavorite==true?'../../static/isFavorite.png':'../../static/favorite.png')"></cover-image>
					<cover-view class="commentsAll">{{videoFavoriteNum}}</cover-view>
					<!-- <cover-image class="comments" @click="goShare()" src="../../static/share.png"></cover-image>
					<cover-view class="commentsAll">{{videoShareNum}}</cover-view> -->
					<!-- <cover-view class="hiddenView"></cover-view>
					<cover-image class="head" :src="userPic"></cover-image>
					<cover-view class="name">{{name}}</cover-view>
					<cover-view class="time">{{createTime}}</cover-view>
					<cover-view class="introduction" v-if="introduction">{{introduction}}</cover-view>
					<cover-view class="details" v-if="xl==false&&details.length>35">{{details.substr(0,34)}}...</cover-view>
					<cover-view class="details" v-if="xl==false&&details.length<=35">{{details}}</cover-view>
					<cover-view class="details" v-if="xl==true">{{details}}</cover-view>
					<cover-image class="xl" @click="xlsh" v-if="xl==false&&details.length>35" src="../../static/xl.png"></cover-image>
					<cover-image class="xl" @click="xlsh" v-if="xl==false&&details.length<=35" src="../../static/xl.png"></cover-image>
					<cover-image class="sh" @click="xlsh" v-if="xl==true" src="../../static/sh.png"></cover-image> -->
					<!-- <cover-view class="tj" @click="showCenterModalFun">推荐到班级</cover-view> -->
					<!-- <cover-image class="comments" @click="goComments" src="../../static/comments.png"></cover-image>
					<cover-view class="commentsAll" @click="goComments">4545</cover-view>
					<cover-image class="share" src="../../static/share.png"></cover-image>
					<cover-view class="shareAll">7555</cover-view> -->
					<!-- <cover-view class="publisher">
						<cover-view class="publisherInfo">
							<cover-image class="head" src="../../static/share.png"></cover-image>
							<cover-view class="publisherRight">
								<cover-view class="name">花果之山官方</cover-view>
								<cover-view class="time">1月3日</cover-view>
							</cover-view>
						</cover-view>
						
						<cover-view class="details" v-if="xl==false&&details.length>35">{{details.substr(0,34)}}...
							<cover-image class="sh" @click="xlsh" v-if="xl==true" src="../../static/sh.png"></cover-image>
							<cover-image class="xl" @click="xlsh" v-if="xl==false" src="../../static/xl.png"></cover-image>
						</cover-view>
						<cover-view class="details" v-if="xl==false&&details.length<=35">{{details}}
							<cover-image class="sh" @click="xlsh" v-if="xl==true" src="../../static/sh.png"></cover-image>
							<cover-image class="xl" @click="xlsh" v-if="xl==false" src="../../static/xl.png"></cover-image>
						</cover-view>
						<cover-view class="details" v-if="xl==true">{{details}}
							<cover-image class="sh" @click="xlsh" v-if="xl==true" src="../../static/sh.png"></cover-image>
							<cover-image class="xl" @click="xlsh" v-if="xl==false" src="../../static/xl.png"></cover-image>
						</cover-view>
						<!-- <cover-view class="say" @click="changeModalStaus">说点什么吧...</cover-view>
						<cover-view class="tj" src="../../static/tj.png" @click="showCenterModalFun">推荐到班级</cover-view>
					</cover-view> -->
					<!-- <cover-view class="play">aaaaaaaaaaaa</cover-view> -->
				</video>
			</view>

			<tingyc-modal :modalTitle="modalTitle" :showModal="showModalFlag" :sum="11235" @cancelModal="cancelModal" @okModal="okModal">
				<view slot="content">
					<view class="modal-content">
						<view class="contentOne" :key="index" v-for="(item,index) in list">
							<image class="conHead" src="../../static/gouhou.png"></image>
							<view class="conRight">
								<view class="conName">大地瓜</view>
								<view class="conTxt">广东现代舞团在北京演出《神话中国》在舞演出演员简单动作打动了侯莹。</view>
							</view>
							<view class="secondAll" v-if="true">
								<view v-if="true" class="secondOne">
									<text class="secondName">小猴子：</text>
									<text class="secondTxt">难道是一辈子？</text>
								</view>
								<view v-if="true" class="secondOne">
									<text class="secondName">白象迷离：</text>
									<text class="secondTxt">回复</text>
									<text class="secondName">@小猴子：</text>
									<text class="secondTxt">我想知道为什么呢？</text>
								</view>
								<view class="allReply" v-if="showReply==false" @click="showReplyFun">共5条回复
									<!-- <image v-if="showReply==true" class="showReply" src="../../static/reply.png"></image> -->
								</view>
								<image v-if="showReply==false" class="showReply" src="../../static/reply2.png" @click="showReplyFun"></image>
							</view>
							<view class="replyBottom">
								<view class="commentTime">08-18 20:44</view>
								<icon class="cuIcon-comment" @click="takePhoto"></icon>
							</view>
						</view>
						<view class="showAll" @click="showAllFun">
							查看全部 （200 条）评论
						</view>
						<image v-if="showAll==false" @click="showAllFun" class="showReply" src="../../static/reply2.png"></image>
						<image v-if="showAll==true" @click="showAllFun" class="showReply1" src="../../static/reply.png"></image>
						<input class="saySome" value="" placeholder="说点什么吧....." />
					</view>
				</view>
			</tingyc-modal>
			<centerModal modalTitle="恭喜！" modalContent="成功推荐到班级中" :showModal="showCenterModal" @cancelModal="cancelCenModal">
				<view slot="content">
					<view class="modal-content">
					</view>
				</view>
			</centerModal>
		</view>
		<!-- #ifdef APP-PLUS -->

		<!-- #endif -->
		<!-- #ifdef H5 -->
		<!-- #endif -->
	</view>
</template>

<script>
	import tingycModal from '@/components/comments/comments.vue'
	import centerModal from '@/components/tingyc-modal/center-model.vue'
	export default {
		components: {
			tingycModal,
			centerModal,
		},
		data() {
			return {
				list: [{
					id: 1
				}, {
					id: 2
				}],
				id: -1,
				showAll: false, //true已展开，false未展开一级评论
				showReply: false, //true已展开，false未展开二级评论
				showModalFlag: false,
				showCenterModal: false,
				name: '',
				modalTitle: '退出登录',
				introduction: '',
				details: '',
				createTime: '',
				videoVote: 0,
				videoFavoriteNum:0,
				videoShareNum: 0,
				videoPic: '',
				xl: false,
				isLike: false,
				isFavorite: false,
				windowHeight: 0,
				isPlay: true,
				videoSrc: '',
				data1:{},
			}
		},
		onReady: function(res) {
			console.log(res)
			this.videoContext = uni.createVideoContext('myVideo')
			//this.videoContext.requestFullScreen();
		},
		onLoad: function(o) {
			console.log('ooo', o)
			this.id = o.id;
			//uni.$emit('getList',{msg:'页面更新'})
			//uni.$emit('update',{msg:'页面更新'})
			//全局定义的触发事件
			// setTimeout(_=>{
			    
			// },2000)
			
			//监听事件正常写就行了

			//this.getList();
			this.videoContext = uni.createVideoContext('myVideo')
			this.topHeight = uni.getSystemInfoSync().statusBarHeight + 20;
			//this.videoContext.requestFullScreen();
			let _this = this;
			uni.getSystemInfo({
				success: function(res) {
					_this.windowHeight = res.windowHeight + 'px';
				}
			});
			this.get_provider();
			this.nvueShow();
		},
		onShow: function() {
			this.getList();
			this.videoContext = uni.createVideoContext('myVideo')
			//this.videoContext.requestFullScreen();
		},

		onPageScroll: function(e) {
			this.scrollTop = e.scrollTop; //实时获取到滚动的值
			if (e.scrollTop > 0) {}
		},
		// onPullDownRefresh: function() {
		// 	this.pageNum = 1;
		// 	this.isLoad = false;
		// 	this.getList(1);
		// 	uni.stopPullDownRefresh();
		// },
		onReachBottom: function() {
			let _this = this;
			console.log('aaa')
			if (!_this.isLoad) {
				_this.pageNum = _this.pageNum + 1;
				//增加list
				_this.getList()
			}
		},
		methods: {
			nvueShow: function() {
				const subnvue = uni.getSubNVueById('drawer') // 获取nvue
				subnvue.show() // 显示nvue
			},
			goBack: function() {
				// uni.switchTab({
				//     url: '/pages/theatre/theatre'
				// });
				uni.navigateBack({ //uni.navigateTo跳转的返回，默认1为返回上一级
					delta: 1
				});
			},
			cancelCenModal: function() {
				this.showCenterModal = !this.showCenterModal;
			},
			showCenterModalFun: function() {
				this.showCenterModal = !this.showCenterModal;
			},
			showAllFun: function() {
				this.showAll = !this.showAll;
			},
			showReplyFun: function() {
				this.showReply = !this.showReply;
			},
			changeModalStaus() {
				this.showModalFlag = !this.showModalFlag;
			},
			cancelModal() {
				this.changeModalStaus();
			},
			okModal() {
				this.changeModalStaus();
			},
			//点击查看评论
			xlsh: function() {
				console.log(this.xl)
				this.xl = !this.xl;
			},
			videoPause: function(e) {
				console.log(e)
				let _this = this;
				_this.isPlay = true;
				this.videoContext.pause();
			},
			videoPlay: function(e) {
				console.log(e)
				let _this = this;
				this.videoContext.play();
				_this.isPlay = false;
			},
			videoErrorCallback: function(e) {
				// console.log(e)
				// uni.showModal({
				// 	content: e.target.errMsg,
				// 	showCancel: true
				// })
			},
			getCon: function(e) {
				let _this = this;
				var data={
					introduction:_this.introduction,
					details:_this.details,
					name:_this.name,
					userPic:_this.userPic,
					createTime:_this.createTime,
					videoVote:_this.videoVote,
				}
				_this.data1=data;
				
			},
			getList: function(e) {
				let _this = this;
				var data = {
					id: _this.id,
				}
				console.log('_this.id', _this.id);
				_this.$request('api/video/getVideoDetail', data).then(res => {
					if (res.code == 0) {
						_this.videoSrc = res.data.video.videoUrl;
						_this.introduction = res.data.video.name;
						_this.details = res.data.video.videoDescribe;
						_this.name = res.data.video.userName;
						_this.userPic = res.data.video.userPic;
						//判断头像是不是网上的
						if (res.data.video.userPic.indexOf("http") == -1) {
							//不是网上路径的开放服务器路径
							_this.userPic = _this.$host + res.data.video.userPic;
						}
						_this.createTime = res.data.video.createTime;
						_this.videoVote = res.data.video.videoVote;
						_this.videoFavoriteNum = res.data.video.videoFavoriteNum;
						_this.videoShareNum = res.data.video.videoShareNum;
						_this.videoPic = res.data.video.videoPic;
						console.log('res.data.video.isVote', res.data.video.isVote)
						if (res.data.video.isVote && res.data.video.isVote == 1) {
							console.log('isLike=====true')
							_this.isLike = true;
						}
						if (res.data.video.isFavorite && res.data.video.isFavorite == 1) {
							console.log('isFavorite=====true')
							_this.isFavorite = true;
						}
						if (res.data.video.isPopularity) {

						}
						console.log(res.data)
						setTimeout(_=>{
						    uni.$emit("getCon",{
						    	introduction:_this.introduction,
						    	details:_this.details,
						    	name:_this.name,
						    	userPic:_this.userPic,
						    	createTime:_this.createTime,
						    	videoVote:_this.videoVote,
								
						    })
						    _this.getCon()
						    uni.$off('getCon', this.getCon())
						},500)
					} else {
						_this.$uniApi.showToastNoIcon("网络繁忙！");
					}
				}).catch(err => {
					console.log(err)
				})
			},
			goLike: function(e) { //点赞
				let _this = this;
				var data = {
					id: this.id,
					type: 0
				}
				console.log('this.id', this.id)
				_this.$request('api/ums/vote/updateHgzsUmsMemberVote', data).then(res => {
					if (res.code == 0) {
						_this.isLike = !_this.isLike;
						if (_this.isLike == true) {
							_this.videoVote++;
						} else {
							_this.videoVote--;
						}

						console.log(res)
					} else {
						_this.$uniApi.showToastNoIcon("网络繁忙！");
					}
				}).catch(err => {
					console.log(err)
				})
			},
			goFavorite: function(e) { //点赞
				let _this = this;
				var data = {
					id: this.id,
					type: 1
				}
				console.log('this.id', this.id)
				_this.$request('api/ums/favorite/updateHgzsUmsMemberFavorite', data).then(res => {
					if (res.code == 0) {
						_this.isFavorite = !_this.isFavorite;
						if (_this.isFavorite == true) {
							_this.videoFavoriteNum++;
						} else {
							_this.videoFavoriteNum--;
						}
			
						console.log(res)
					} else {
						_this.$uniApi.showToastNoIcon("网络繁忙！");
					}
				}).catch(err => {
					console.log(err)
				})
			},
			get_provider() {

				//this.version = plus.runtime.version;
				uni.getProvider({
					service: 'share',
					success: (e) => {
						let data = [];
						for (let i = 0; i < e.provider.length; i++) {
							switch (e.provider[i]) {
								case 'weixin':
									data.push({
										name: '分享到微信好友',
										id: 'weixin'
									})
									data.push({
										name: '分享到微信朋友圈',
										id: 'weixin',
										type: 'WXSenceTimeline'
									})
									break;
								case 'qq':
									data.push({
										name: '分享到QQ',
										id: 'qq'
									})
									break;
								default:
									break;
							}
						}
						this.providerList = data;
					},
					fail: (e) => {
						console.log('获取登录通道失败' + JSON.stringify(e));
					}
				});
			},
			goShare: function(e) { //分享
				// 分享图文到微信聊天界面
				var pages = getCurrentPages() //获取加载的页面
				var currentPage = pages[pages.length - 1] //获取当前页面的对象
				var url = currentPage.route //当前页面url
				let _this = this;
				let uri = "hbuilder://#/pages/theatre/theatreDetails?id=" + this.id;

				this.share_link = uri;
				console.log(url)
				console.log('_this.$user.userId', _this.$user.value.userId)
				if (!_this.$user || !_this.$user.value || !_this.$user.value.userId) {
					_this.$uniApi.showToastNoIcon("未登录！");
					return;
				}
				if (this.providerList.length === 0) {
					uni.showModal({
						title: '当前环境无分享渠道!',
						showCancel: false
					})
					return;
				}
				let itemList = this.providerList.map(function(value) {
					return value.name
				})
				uni.showActionSheet({
					itemList: itemList,
					success: (res) => {
						console.log(this.providerList[res.tapIndex].id)
						if (this.providerList[res.tapIndex].id == 'qq') {
							this.type = 1
						} else {
							this.type = 0
						}
						uni.share({
							provider: this.providerList[res.tapIndex].id,
							scene: this.providerList[res.tapIndex].type && this.providerList[res.tapIndex].type === 'WXSenceTimeline' ?
								'WXSenceTimeline' : "WXSceneSession",
							type: this.type,
							title: this.introduction,
							summary: this.details,
							imageUrl: this.videoPic,
							href: this.share_link,
							success: (res) => {
								console.log("success:" + JSON.stringify(res));
							},
							fail: (e) => {
								uni.showModal({
									content: e.errMsg,
									showCancel: false
								})
							}
						});
					}
				})
				// uni.share({
				//   provider: "weixin", // 服务商
				//   scene: "WXSceneSession", // 场景 微信好友WXSceneSession  朋友圈WXSceneTimeLine
				//   type: 0, // 图文0 文字1 图片2
				//   href: url, // 分享h5地址
				//   title: this.introduction,
				//   summary: this.details, // 描述
				//   imageUrl: this.videoPic,
				//   success: function (res) {
				//       console.log("success:" + JSON.stringify(res));
				//   },
				//   fail: function (err) {
				//       console.log("fail:" + JSON.stringify(err));
				//   }
				// });
				// _this.$request('api/video/getVideoDetail', data).then(res => {
				// 	if (res.code == 0) {

				// 		console.log(res.data)
				// 	} else {
				// 		_this.$uniApi.showToastNoIcon("网络繁忙！");
				// 	}
				// }).catch(err => {
				// 	console.log(err)
				// })
			},
			// share(e) {
			// 	if (this.providerList.length === 0) {
			// 		uni.showModal({
			// 			title: '当前环境无分享渠道!',
			// 			showCancel: false
			// 		})
			// 		return;
			// 	}
			// 	let itemList = this.providerList.map(function (value) {
			// 		return value.name
			// 	})
			// 	uni.showActionSheet({
			// 		itemList: itemList,
			// 		success: (res) => {
			// 			console.log(this.providerList[res.tapIndex].id)
			// 			if(this.providerList[res.tapIndex].id=='qq'){
			// 				this.type=1
			// 			}else{
			// 				this.type=0
			// 			}
			// 			 uni.share({
			// 			 	provider: this.providerList[res.tapIndex].id,
			// 			 	scene: this.providerList[res.tapIndex].type && this.providerList[res.tapIndex].type === 'WXSenceTimeline' ? 'WXSenceTimeline' : "WXSceneSession",
			// 			 	type: this.type,
			// 			 	title:'搭健康商城',
			// 			 	summary: '点击下载搭健康商城',
			// 			 	imageUrl: this.getConst().host+"images/icon.png",
			// 			 	href:this.share_link,
			// 			 	success: (res) => {
			// 			 		console.log("success:" + JSON.stringify(res));
			// 			 	},
			// 			 	fail: (e) => {
			// 			 		uni.showModal({
			// 			 			content: e.errMsg,
			// 			 			showCancel:false
			// 			 		})
			// 			 	}
			// 			 });
			// 		}
			// 	})
			// },
		}
	}
</script>

<style>
	.modal-content {
		padding: 92upx 40upx;
		display: block;
		text-align: left !important;
	}

	.contentOne {
		margin-top: 17upx;
		padding-bottom: 20upx;
		border-bottom: 4upx solid #F5F5F5;
	}

	.conHead {
		width: 68upx;
		height: 68upx;
		display: inline-block;
		float: left;
		margin-right: 27upx;
	}

	.conRight {
		width: 502upx;
		float: left;
		display: inline-block;
	}

	.conName {
		font-size: 26upx;
		font-family: Source Han Sans CN;
		font-weight: 400;
		color: #64686B;
		line-height: 40upx;
	}

	.conTxt {
		font-size: 24upx;
		font-family: Source Han Sans CN;
		font-weight: 300;
		color: #363636;
		line-height: 34upx;
	}

	.secondAll {
		padding: 18upx 22upx 18upx 25upx;
		width: 518upx;
		background-color: #F0F0F0;
		margin-left: 76upx;
		float: left;
		margin-top: 12upx;
	}

	.secondName {
		font-size: 24upx;
		font-family: Source Han Sans CN;
		font-weight: 300;
		color: #486E9E;
		line-height: 40upx;
	}

	.secondTxt {
		font-size: 24upx;
		font-family: Source Han Sans CN;
		font-weight: 300;
		color: #363636;
		line-height: 33upx;
	}

	.allReply {
		font-size: 24upx;
		font-family: Source Han Sans CN;
		font-weight: 300;
		color: #486E9E;
		line-height: 40upx;
		float: left;
	}

	.showReply {
		width: 11upx;
		height: 30upx;
		margin-left: 14upx;
		padding-top: 10upx;
		float: left;
	}

	.showReply1 {
		width: 20upx;
		height: 11upx;
		margin-left: 14upx;
		margin-top: 16upx;
		float: left;
	}

	.replyBottom {
		width: 100%;
		font-size: 23upx;
		font-family: Source Han Sans CN;
		font-weight: 300;
		color: #9C9C9C;
		line-height: 40upx;
		padding-left: 91upx;
		padding-top: 20upx;
		display: inline-block;
	}

	.commentTime {
		line-height: 40upx;
		display: inline-block;
	}

	.cuIcon-comment {
		font-size: 32upx;
		float: right;
		display: inline-block;
		padding-right: 20upx;
	}

	.showAll {
		margin-left: 82upx;
		float: left;
		font-size: 24upx;
		font-family: Source Han Sans CN;
		font-weight: 300;
		color: #486E9E;
		line-height: 40upx;
	}

	.saySome {
		display: block;
		background-image: url('../../static/commentSay.png');
		background-size: 100% 100%;
		width: 536upx;
		height: 55upx;
		font-size: 22upx;
		font-family: Source Han Sans CN;
		font-weight: 400;
		line-height: 40upx;
		margin-left: 78upx;
		margin-top: 58upx;
		padding-left: 44upx;
	}

	.input-placeholder {
		color: #BAB9B9;
	}

	.pageAll {
		width: 100%;
		height: 100%;
		display: flex;
		justify-content: center;
	}

	video {
		width: 100%;
		height: 1000upx;
	}

	.myVideo {
		position: relative;
	}

	.closeVue {
		width: 20upx;
		height: 36upx;
		position: absolute;
		left: 30upx;
		top: 40upx;
	}

	.controls-play {
		width: 153upx;
		height: 153upx;
		position: absolute;
		top: 50%;
		left: 50%;
		transform: translate3d(-50%, -50%, 0);
	}

	.likeAll {
		bottom: 360upx;
		right: 36upx;
		position: absolute;
		font-size: 23upx;
		font-family: Source Han Sans CN;
		font-weight: 400;
		color: #FFFFFF;
		line-height: 32upx;
		width: 56upx;
		text-align: center;
		z-index: 999;
	}

	.like {
		width: 62upx;
		height: 53upx;
		position: absolute;
		bottom: 400upx;
		z-index: 999;
		right: 31upx;
	}

	.commentsAll {
		bottom: 220upx;
		right: 35upx;
		position: absolute;
		font-size: 23upx;
		font-family: Source Han Sans CN;
		font-weight: 400;
		color: #FFFFFF;
		line-height: 32upx;
		width: 61upx;
		text-align: center;
		z-index: 999;
	}

	.comments {
		bottom: 280upx;
		width: 61upx;
		height: 61upx;
		position: absolute;
		right: 31upx;
		z-index: 999;
	}

	.shareAll {
		top: 992upx;
		right: 36upx;
		position: absolute;
		font-size: 23upx;
		font-family: Source Han Sans CN;
		font-weight: 400;
		color: #FFFFFF;
		line-height: 32upx;
		width: 56upx;
		text-align: center;
		z-index: 999;
	}

	.share {
		width: 56upx;
		height: 50upx;
		position: absolute;
		top: 927upx;
		right: 33upx;
		z-index: 999;
	}

	.publisher {
		width: 100%;
		background-color: #007AFF;
		position: fixed;
		bottom: 0;
		left: 0;
		z-index: 996;
	}

	.publisherInfo {
		width: 100%;
	}

	.head {
		position: absolute;
		width: 74upx;
		height: 74upx;
		top: 34rem;
		left: 34upx;
		display: inline-block;
		padding-right: 30upx;
		margin-right: -30upx;
		border-radius: 100%;
	}

	.publisherRight {
		display: inline-block;
	}

	.name {
		position: absolute;
		top: 34rem;
		left: 130upx;
		height: 40upx;
		font-size: 30upx;
		font-family: Source Han Sans CN;
		font-weight: 400;
		color: #FFFFFF;
	}

	.time {
		position: absolute;
		left: 130upx;
		top: 35rem;
		font-size: 26upx;
		font-family: Source Han Sans CN;
		font-weight: 400;
		color: #FFFFFF;
		line-height: 46upx;
	}

	.introduction {
		float: left;
		width: 100%;
		margin-top: 37rem;
		font-size: 26upx;
		font-family: Source Han Sans CN;
		font-weight: 400;
		color: #FFFFFF;
		line-height: 40upx;
		margin-left: 34upx;
	}

	.details {
		float: left;
		display: inline-block;
		margin-top: 26upx;
		margin-left: 34upx;
		width: 451upx;
		font-size: 24upx;
		font-family: Source Han Sans CN;
		font-weight: 300;
		color: #FFFFFF;
		line-height: normal !important;
		white-space: normal !important;
		margin-bottom: 143upx;
	}

	.xl {
		margin-top: 40upx;
		display: inline-block;
		width: 19upx;
		height: 10upx;
		float: left;
		margin-top: 16upx;
		padding-left: 30upx;
		padding-top: 24upx;
		padding-bottom: 30upx;
	}

	.sh {
		margin-top: 40upx;
		padding-left: 30upx;
		padding-top: 24upx;
		padding-bottom: 30upx;
		width: 10upx;
		height: 19upx;
		display: inline-block;
		float: left;
		margin-top: 10upx;
	}

	.say {
		position: absolute;
		left: 30upx;
		bottom: 40upx;
		width: 386upx;
		height: 55upx;
		background-image: url('../../static/say.png');
		font-size: 23upx;
		font-family: Source Han Sans CN;
		font-weight: 400;
		color: #FFFFFF;
		line-height: 55upx;
		padding-left: 33upx;
	}

	.tj {
		right: 30upx;
		bottom: 40upx;
		position: absolute;
		width: 225upx;
		height: 55upx;
		text-align: center;
		line-height: 55upx;
		background-image: url('../../static/tj.png');
		background-size: 100% 100%;
		font-size: 28upx;
		font-family: Source Han Sans CN;
		font-weight: 400;
		color: #FFFFFF;
	}

	.hiddenView {
		width: 100%;
	}
</style>

覆盖层nvue页面代码

<template>
	<view>
		<view class="pageAll">
			<!-- <image class="comments" @click="goShare()" src="../../static/share.png"></image>
			<view class="commentsAll">{{videoShareNum}}</view> -->
			
			<view class="header">
				<image class="head" :src="userPic">
				</image>
				<view class="userInfo">
					<text class="name">{{name}}</text>
					<text class="time">{{createTime}}</text>
				</view>
			</view>
			<!-- <image class="head" :src="userPic"></image>
			<text class="name">{{name}}</text>
			<text class="time">{{createTime}}</text> -->
			<text class="introduction" v-if="introduction">{{introduction}}</text>
			<view class="header">
				<text class="details" v-if="xl==false&&details.length>35">{{details.substr(0,35)}}...</text>
				<text class="details" v-if="xl==false&&details.length<=35">{{details}}</text>
				<text class="details" v-if="xl==true">{{details}}</text>
				<view class="clickView" @click="xlsh">
					<image class="xl" v-if="xl==false&&details.length>35" src="../../static/xl.png"></image>
					<image class="xl" v-if="xl==false&&details.length<=35" src="../../static/xl.png"></image>
					<image class="sh" v-if="xl==true" src="../../static/sh.png"></image>
				</view>
			</view>
			
		</view>
		<!-- #ifdef APP-PLUS -->

		<!-- #endif -->
		<!-- #ifdef H5 -->
		<!-- #endif -->
	</view>
</template>

<script>
	import tingycModal from '@/components/comments/comments.vue'
	import centerModal from '@/components/tingyc-modal/center-model.vue'
	export default {
		components: {
			tingycModal,
			centerModal,
		},
		data() {
			return {
				list: [{
					id: 1
				}, {
					id: 2
				}],
				id:-1,
				showAll: false, //true已展开，false未展开一级评论
				showReply: false, //true已展开，false未展开二级评论
				showModalFlag: false,
				showCenterModal: false,
				name:'',
				modalTitle: '退出登录',
				introduction:'',
				details: '',
				createTime:'',
				videoVote:0,
				videoShareNum:0,
				videoPic:'',
				xl: false,
				isLike: false,
				windowHeight: 0,
				isPlay: true,
				videoSrc: '',
				testCircleImage:'',
			}
		},
		 onReady: function(res) {
			//this.videoContext.requestFullScreen();
		},
		onLoad: function(o) {
			 // 监听事件  
			console.log('ooo',o)
			this.id=o.id;
			//this.topHeight=uni.getSystemInfoSync().statusBarHeight+20;
			//this.videoContext.requestFullScreen();
			//let _this = this;
			// uni.getSystemInfo({
			// 	success: function(res) {
			// 		_this.windowHeight = res.windowHeight + 'px';
			// 	}
			// });
			//this.get_provider();
			
		},
		onShow: function() {
			this.getList();
			//this.getList();
			//this.videoContext.requestFullScreen();
		},
		
		onPageScroll: function(e) {
			this.scrollTop = e.scrollTop; //实时获取到滚动的值
			if (e.scrollTop > 0) {}
		},
		// onPullDownRefresh: function() {
		// 	this.pageNum = 1;
		// 	this.isLoad = false;
		// 	this.getList(1);
		// 	uni.stopPullDownRefresh();
		// },
		onReachBottom: function() {
			let _this = this;
			console.log('aaa')
			if (!_this.isLoad) {
				_this.pageNum = _this.pageNum + 1;
				//增加list
				_this.getList()
			}
		},
		methods: {
			goBack: function() {
				// uni.switchTab({
				//     url: '/pages/theatre/theatre'
				// });
				uni.navigateBack({  //uni.navigateTo跳转的返回，默认1为返回上一级
						delta: 1
				});
			},
			cancelCenModal: function() {
				this.showCenterModal = !this.showCenterModal;
			},
			showCenterModalFun: function() {
				this.showCenterModal = !this.showCenterModal;
			},
			showAllFun: function() {
				this.showAll = !this.showAll;
			},
			showReplyFun: function() {
				this.showReply = !this.showReply;
			},
			changeModalStaus() {
				this.showModalFlag = !this.showModalFlag;
			},
			cancelModal() {
				this.changeModalStaus();
			},
			okModal() {
				this.changeModalStaus();
			},
			//点击查看评论
			xlsh: function() {
				console.log(this.xl)
				this.xl = !this.xl;
			},
			videoPause: function(e) {
				console.log(e)
				let _this = this;
				_this.isPlay = true;
				this.videoContext.pause();
			},
			videoPlay: function(e) {
				console.log(e)
				let _this = this;
				this.videoContext.play();
				_this.isPlay = false;
			},
			videoErrorCallback: function(e) {
				// console.log(e)
				// uni.showModal({
				// 	content: e.target.errMsg,
				// 	showCancel: true
				// })
			},
			setCon: function(data){
				let _this = this;
				_this.introduction= data.introduction;
				_this.details= data.details;
				_this.name= data.name;
				_this.userPic= data.userPic;
				_this.createTime= data.createTime;
				_this.videoVote= data.videoVote;
			},
			getList: function(e) {
				let _this = this;
				// console.log('_this.id',_this.id);
				uni.$on('getCon',(data) =>{
					
						_this.setCon(data);
				        console.log('getList============' + data.name);
						console.log('getListdetails============' + _this.name);
						_this.$forceUpdate();
				    })
				// this.$request('api/video/getVideoDetail', data).then(res => {
				// 	if (res.code == 0) {
				// 		_this.videoSrc=res.data.video.videoUrl;
				// 		_this.introduction=res.data.video.name;
				// 		_this.details=res.data.video.videoDescribe;
				// 		_this.name=res.data.video.userName;
				// 		_this.userPic=res.data.video.userPic;
				// 			//判断头像是不是网上的
				// 			if (res.data.video.userPic.indexOf("http") == -1) {
				// 				//不是网上路径的开放服务器路径
				// 				_this.userPic = _this.$host+res.data.video.userPic;
				// 			}
				// 		_this.createTime=res.data.video.createTime;
				// 		_this.videoVote=res.data.video.videoVote;
				// 		_this.videoShareNum=res.data.video.videoShareNum;
				// 		_this.videoPic=res.data.video.videoPic;
				// 		console.log('res.data.video.isVote',res.data.video.isVote)
				// 		if(res.data.video.isVote&&res.data.video.isVote==1){
				// 			console.log('isLike=====true')
				// 			_this.isLike=true;
				// 		}
				// 		if(res.data.video.isPopularity){
							
				// 		}
				// 		console.log(res.data)
				// 		console.log('_this.userPic=========',_this.userPic)
				// 		var imgUrl = _this.userPic;
				// 		console.log('imgUrl=========',imgUrl)
				// 		_this.testCircleImage = makeCircleImg('test', imgUrl, _this)
				// 	} else {
				// 		_this.$uniApi.showToastNoIcon("网络繁忙！");
				// 	}
				// }).catch(err => {
				// 	console.log(err)
				// })
			},
			goLike: function(e) {//点赞
				let _this = this;
				var data={
					id:this.id,
					type:0
				}
				console.log('this.id',this.id)
				_this.$request('api/ums/vote/updateHgzsUmsMemberVote', data).then(res => {
					if (res.code == 0) {
						_this.isLike=!_this.isLike;
						if(_this.isLike==true){
							_this.videoVote++;
						}else{
							_this.videoVote--;
						}
						
						console.log(res)
					} else {
						_this.$uniApi.showToastNoIcon("网络繁忙！");
					}
				}).catch(err => {
					console.log(err)
				})
			},
			get_provider(){
				
				//this.version = plus.runtime.version;
				uni.getProvider({
					service: 'share',
					success: (e) => {
						let data = [];
						for (let i = 0; i < e.provider.length; i++) {
							switch (e.provider[i]) {
								case 'weixin':
									data.push({
										name: '分享到微信好友',
										id: 'weixin'
									})
									data.push({
										name: '分享到微信朋友圈',
										id: 'weixin',
										type: 'WXSenceTimeline'
									})
									break;
								case 'qq':
									data.push({
										name: '分享到QQ',
										id: 'qq'
									})
									break;
								default:
									break;
							}
						}
						this.providerList = data;
					},
					fail: (e) => {
						console.log('获取登录通道失败'+ JSON.stringify(e));
					}
				});
			},
			goShare: function(e) {//分享
				// 分享图文到微信聊天界面
				var pages = getCurrentPages() //获取加载的页面
				var currentPage = pages[pages.length - 1] //获取当前页面的对象
				var url = currentPage.route //当前页面url
				let _this = this;
				let uri="hbuilder://#/pages/theatre/theatreDetails?id="+this.id;
				
				this.share_link=uri;
				console.log(url)
				console.log('_this.$user.userId',_this.$user.value.userId)
				if(!_this.$user||!_this.$user.value||!_this.$user.value.userId){
					_this.$uniApi.showToastNoIcon("未登录！");
					return;
				}
				if (this.providerList.length === 0) {
					uni.showModal({
						title: '当前环境无分享渠道!',
						showCancel: false
					})
					return;
				}
				let itemList = this.providerList.map(function (value) {
					return value.name
				})
				uni.showActionSheet({
					itemList: itemList,
					success: (res) => {
						console.log(this.providerList[res.tapIndex].id)
						if(this.providerList[res.tapIndex].id=='qq'){
							this.type=1
						}else{
							this.type=0
						}
						 uni.share({
						 	provider: this.providerList[res.tapIndex].id,
						 	scene: this.providerList[res.tapIndex].type && this.providerList[res.tapIndex].type === 'WXSenceTimeline' ? 'WXSenceTimeline' : "WXSceneSession",
						 	type: this.type,
						 	title:this.introduction,
						 	summary: this.details,
						 	imageUrl: this.videoPic,
						 	href:this.share_link,
						 	success: (res) => {
						 		console.log("success:" + JSON.stringify(res));
						 	},
						 	fail: (e) => {
						 		uni.showModal({
						 			content: e.errMsg,
						 			showCancel:false
						 		})
						 	}
						 });
					}
				})
				  // uni.share({
				  //   provider: "weixin", // 服务商
				  //   scene: "WXSceneSession", // 场景 微信好友WXSceneSession  朋友圈WXSceneTimeLine
				  //   type: 0, // 图文0 文字1 图片2
				  //   href: url, // 分享h5地址
				  //   title: this.introduction,
				  //   summary: this.details, // 描述
				  //   imageUrl: this.videoPic,
				  //   success: function (res) {
				  //       console.log("success:" + JSON.stringify(res));
				  //   },
				  //   fail: function (err) {
				  //       console.log("fail:" + JSON.stringify(err));
				  //   }
				  // });
				// _this.$request('api/video/getVideoDetail', data).then(res => {
				// 	if (res.code == 0) {
						
				// 		console.log(res.data)
				// 	} else {
				// 		_this.$uniApi.showToastNoIcon("网络繁忙！");
				// 	}
				// }).catch(err => {
				// 	console.log(err)
				// })
			},
			// share(e) {
			// 	if (this.providerList.length === 0) {
			// 		uni.showModal({
			// 			title: '当前环境无分享渠道!',
			// 			showCancel: false
			// 		})
			// 		return;
			// 	}
			// 	let itemList = this.providerList.map(function (value) {
			// 		return value.name
			// 	})
			// 	uni.showActionSheet({
			// 		itemList: itemList,
			// 		success: (res) => {
			// 			console.log(this.providerList[res.tapIndex].id)
			// 			if(this.providerList[res.tapIndex].id=='qq'){
			// 				this.type=1
			// 			}else{
			// 				this.type=0
			// 			}
			// 			 uni.share({
			// 			 	provider: this.providerList[res.tapIndex].id,
			// 			 	scene: this.providerList[res.tapIndex].type && this.providerList[res.tapIndex].type === 'WXSenceTimeline' ? 'WXSenceTimeline' : "WXSceneSession",
			// 			 	type: this.type,
			// 			 	title:'搭健康商城',
			// 			 	summary: '点击下载搭健康商城',
			// 			 	imageUrl: this.getConst().host+"images/icon.png",
			// 			 	href:this.share_link,
			// 			 	success: (res) => {
			// 			 		console.log("success:" + JSON.stringify(res));
			// 			 	},
			// 			 	fail: (e) => {
			// 			 		uni.showModal({
			// 			 			content: e.errMsg,
			// 			 			showCancel:false
			// 			 		})
			// 			 	}
			// 			 });
			// 		}
			// 	})
			// },
		}
	}
</script>

<style>
	
	.header{
		float:left;
		flex-direction: row;
	}
	.userInfo{
		margin-left: 20upx;
	}
	.name {
		width: 500upx;
		float:left;
		font-size: 34upx;
		font-family: Source Han Sans CN;
		font-weight: 400;
		color: #FFFFFF;
	}
	.head {
		float:left;
		width: 74upx;
		height: 74upx;
		border-radius: 100%;
	}
	
	.publisherRight {
	}
	
	.time {
		font-size: 26upx;
		font-family: Source Han Sans CN;
		font-weight: 400;
		color: #FFFFFF;
		line-height: 46upx;
	}
	
	.introduction {
		float: left;
		width: 600upx;
		margin-top: 20upx;
		font-size: 26upx;
		font-family: Source Han Sans CN;
		font-weight: 400;
		color: #FFFFFF;
		line-height: 40upx;
	}
	
	.details {
		float: left;
		margin-top: 26upx;
		width: 451upx;
		font-size: 24upx;
		font-family: Source Han Sans CN;
		font-weight: 300;
		color: #FFFFFF;
		line-height: normal !important;
		white-space: nowrap !important;
	}
	.clickView{
		float: left;
		width: 50upx;
		height: 50upx;
	}
	
	.xl {
		width: 19upx;
		height: 10upx;
		float: left;
		margin-top: 34upx;
		margin-left: 10upx;
	}
	
	.sh {
		width: 10upx;
		height: 19upx;
		float: left;
		margin-top: 28upx;
		margin-left: 10upx;
	}
</style>

补充遇到的问题

要让nvue的页面内容显示必须在onload的时候使用this.nvueShow()方法才会展示。

另外，在写的时候遇到需要从vue页面给nvue传值的问题，采用uni.$emit以及uni.$on方法进行监听传值，但是此种传值方法目前有bug，必须在uni.$emit外面加一层setTimeout的延迟方法才能拿到值，目前不知道原因可能是官方bug。
代码示例如下：

//vue页面赋值全局方法并携带值
setTimeout(_=>{
						    uni.$emit("getCon",{
						    	introduction:_this.introduction,
						    	details:_this.details,
						    	name:_this.name,
						    	userPic:_this.userPic,
						    	createTime:_this.createTime,
						    	videoVote:_this.videoVote,
								
						    })
						    _this.getCon()
						    uni.$off('getCon', this.getCon())
						},500)

//被赋值的方法
getCon: function(e) {
				let _this = this;
				var data={
					introduction:_this.introduction,
					details:_this.details,
					name:_this.name,
					userPic:_this.userPic,
					createTime:_this.createTime,
					videoVote:_this.videoVote,
				}
				_this.data1=data;
				
			},

//nvue页面获取传值方法
uni.$on('getCon',(data) =>{
					
						_this.setCon(data);
				        console.log('getList============' + data.name);
						console.log('getListdetails============' + _this.name);
						_this.$forceUpdate();
				    })

//给nvue页面属性赋值
setCon: function(data){
				let _this = this;
				_this.introduction= data.introduction;
				_this.details= data.details;
				_this.name= data.name;
				_this.userPic= data.userPic;
				_this.createTime= data.createTime;
				_this.videoVote= data.videoVote;
			},

后续有问题会持续更新。

Logo
华为云开发者联盟

为开发者提供学习成长、分享交流、生态实践、资源工具等服务，帮助开发者快速成长。

更多推荐

cover

从K8s的“临时容器”看K8s设计的厉害之处

avatar 华为云开发者联盟
cover

仓颉编程语言技术指南：嵌套函数、Lambda 表达式、闭包

avatar 华为云开发者联盟
cover

一步即扫，直达应用所有服务

avatar 华为云开发者联盟