uniapp在video上面使用添加nvue页面覆盖
uniapp在video上面使用添加nvue一、uniapp引入配置nvue页面video页面代码覆盖层nvue页面代码补充遇到的问题由于video的层级过高,普通dom遮盖不了,所以需要使用uniapp的subNVue来进行覆盖。一、uniapp引入配置nvue页面创建一个nvue页面在pages.json中找到需要被覆盖的页面,在下面添加subNVues{"path": "pages/thea
·
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;
},
后续有问题会持续更新。
更多推荐
所有评论(0)