|
@@ -1,35 +1,15 @@
|
|
<template name="vodComment">
|
|
<template name="vodComment">
|
|
<view>
|
|
<view>
|
|
- <view class="topbanner">
|
|
+ <view class="topbanner">
|
|
- <video
|
|
+ <dever-video
|
|
- :src="item.video"
|
|
+ :src="item.video"
|
|
- preload="auto"
|
|
+ :pic="item.pic"
|
|
- :show-play-btn="true"
|
|
+ :control="true"
|
|
- :show-center-play-btn="false"
|
|
+ :index="0"
|
|
- :controls="true"
|
|
+ :vid="item.id"
|
|
- :loop="true"
|
|
+ ref="video"
|
|
- :id="id()"
|
|
+ >
|
|
- objectFit="fill"
|
|
+ </dever-video>
|
|
- :enable-progress-gesture="false"
|
|
|
|
- @click="start"
|
|
|
|
- ref="video_url"
|
|
|
|
- play-btn-position="center"
|
|
|
|
- class="video"
|
|
|
|
- :x5-playsinline="true"
|
|
|
|
- :playsinline="true"
|
|
|
|
- :webkit-playsinline="true"
|
|
|
|
- :x5-video-can-play-with-audio="true"
|
|
|
|
- x5-video-orientation="portraint"
|
|
|
|
- >
|
|
|
|
- </video>
|
|
|
|
-
|
|
|
|
- <cover-image v-if="show_play_poster" class="poster" :src="item.pic">
|
|
|
|
- </cover-image>
|
|
|
|
-
|
|
|
|
- <cover-image
|
|
|
|
- class="ico-video-play" v-if="show_play"
|
|
|
|
- @tap="start"></cover-image>
|
|
|
|
-
|
|
|
|
</view>
|
|
</view>
|
|
<view class='msgs-tabs'>
|
|
<view class='msgs-tabs'>
|
|
<view class='tit'>{{item.name}}</view>
|
|
<view class='tit'>{{item.name}}</view>
|
|
@@ -37,7 +17,7 @@
|
|
</view>
|
|
</view>
|
|
<view class="living">
|
|
<view class="living">
|
|
<scroll-view class="message" bindscrolltolower="loadmore" scroll-y>
|
|
<scroll-view class="message" bindscrolltolower="loadmore" scroll-y>
|
|
- <view class="item" v-for="(v, k) in comments">
|
|
+ <view class="item" v-for="(v, k) in comments" :key="k">
|
|
<view class="user">
|
|
<view class="user">
|
|
<image :src="v.avatar"></image>
|
|
<image :src="v.avatar"></image>
|
|
</view>
|
|
</view>
|
|
@@ -55,28 +35,31 @@
|
|
</view>
|
|
</view>
|
|
</template>
|
|
</template>
|
|
|
|
|
|
-<script>
|
|
+<script>
|
|
|
|
+import deverVideo from '@/lib/dever/components/video.nvue';
|
|
export default {
|
|
export default {
|
|
name: "vodComment",
|
|
name: "vodComment",
|
|
props: {
|
|
props: {
|
|
- config : {
|
|
+ control : {
|
|
- type : Object,
|
|
+ type : Object,
|
|
- value : null
|
|
+ value : null
|
|
- },
|
|
+ },
|
|
- item : {
|
|
+ item : {
|
|
- type : Object,
|
|
+ type : Object,
|
|
- value : null
|
|
+ value : null
|
|
|
|
+ },
|
|
|
|
+ index : {
|
|
|
|
+ type : Number,
|
|
|
|
+ value : null
|
|
},
|
|
},
|
|
},
|
|
},
|
|
data() {
|
|
data() {
|
|
- return {
|
|
+ return {
|
|
- show_play_poster: true,
|
|
+ load : false,
|
|
- show_play: true,
|
|
|
|
- videoCtx : false,
|
|
|
|
comments: [
|
|
comments: [
|
|
{
|
|
{
|
|
id : 1,
|
|
id : 1,
|
|
- avatar : 'https://yt3.ggpht.com/a/AATXAJxSSAfjWzxQAkDei2MeIPc6WqlO2FG-gOSpZQ=s48-c-k-c0xffffffff-no-rj-mo',
|
|
+ avatar : 'https://pic.rmb.bdstatic.com/b9279adf974b78d27201a0b34970c2a9.jpeg',
|
|
username : 'rabin',
|
|
username : 'rabin',
|
|
content : 'dfdfdfdf',
|
|
content : 'dfdfdfdf',
|
|
},
|
|
},
|
|
@@ -89,61 +72,64 @@ export default {
|
|
],
|
|
],
|
|
loading: false
|
|
loading: false
|
|
}
|
|
}
|
|
|
|
+ },
|
|
|
|
+ mounted() {
|
|
|
|
+ this.control[this.index] = this;
|
|
},
|
|
},
|
|
methods:{
|
|
methods:{
|
|
- id : function() {
|
|
+ start : function() {
|
|
- var video_id = this.item.id;
|
|
+ this.$refs.video.start();
|
|
- return 'video_comment_' + video_id;
|
|
+ },
|
|
- },
|
|
+ stop : function() {
|
|
- start : function() {
|
|
+ this.load = true;
|
|
- this.show_play_poster = false;
|
|
+ this.$refs.video.stop(true);
|
|
- this.config.stop[this.config.page] = this;
|
|
|
|
- var id = this.id();
|
|
|
|
- if (!this.videoCtx) {
|
|
|
|
- this.videoCtx = uni.createVideoContext(id, this);
|
|
|
|
- }
|
|
|
|
- if (this.show_play) {
|
|
|
|
- this.videoCtx.play();
|
|
|
|
- this.show_play = false;
|
|
|
|
- } else {
|
|
|
|
- this.videoCtx.pause();
|
|
|
|
- this.show_play = true;
|
|
|
|
- }
|
|
|
|
},
|
|
},
|
|
- stop : function() {
|
|
+ },
|
|
- var id = this.id();
|
|
+ components:{
|
|
- if (!this.videoCtx) {
|
|
+ deverVideo
|
|
- this.videoCtx = uni.createVideoContext(id, this);
|
|
+ }
|
|
- }
|
|
|
|
- this.videoCtx.pause();
|
|
|
|
- this.show_play = true;
|
|
|
|
- },
|
|
|
|
- },
|
|
|
|
}
|
|
}
|
|
</script>
|
|
</script>
|
|
|
|
|
|
<style>
|
|
<style>
|
|
.topbanner{
|
|
.topbanner{
|
|
position: relative;
|
|
position: relative;
|
|
-}
|
|
|
|
-.topbanner image,.topbanner video,.topbanner live-player{
|
|
|
|
width: 750rpx;
|
|
width: 750rpx;
|
|
height: 422rpx;
|
|
height: 422rpx;
|
|
display: block;
|
|
display: block;
|
|
-}
|
|
|
|
-.topbanner .media-cover,.topbanner video,.topbanner live-player{
|
|
|
|
- height: 422rpx;
|
|
|
|
}
|
|
}
|
|
|
|
+.msgs-tabs{
|
|
|
|
+ line-height: 88rpx;
|
|
|
|
+ display: flex;
|
|
|
|
+ height: 88rpx;
|
|
|
|
+ justify-content: space-between;
|
|
|
|
+ box-sizing: border-box;
|
|
|
|
+ padding: 0 30rpx;
|
|
|
|
+ border-bottom: 1rpx solid #ccc;
|
|
|
|
+}
|
|
|
|
+.msgs-tabs .tit{
|
|
|
|
+ font-size: 30rpx;
|
|
|
|
+ color: #000;
|
|
|
|
+ display: flex;
|
|
|
|
+ align-items: center;
|
|
|
|
+ overflow: hidden;
|
|
|
|
+}
|
|
|
|
+.msgs-tabs .tit:before{
|
|
|
|
+ content: '';
|
|
|
|
+ display: inline-block;
|
|
|
|
+ width: 6rpx;
|
|
|
|
+ height: 30rpx;
|
|
|
|
+ margin-right: 10rpx;
|
|
|
|
+ background-color: #000;
|
|
|
|
+}
|
|
|
|
+.msgs-tabs .num{
|
|
|
|
+ font-size: 22rpx;
|
|
|
|
+ color: #999;
|
|
|
|
+ overflow: hidden;
|
|
|
|
+}
|
|
|
|
+
|
|
.living{
|
|
.living{
|
|
margin-bottom:50rpx;
|
|
margin-bottom:50rpx;
|
|
-}
|
|
|
|
-.poster{
|
|
|
|
- background-size: cover;
|
|
|
|
- position: absolute;
|
|
|
|
- left: 0;
|
|
|
|
- top: 0;
|
|
|
|
- width: 100%;
|
|
|
|
- height: 100%;
|
|
|
|
}
|
|
}
|
|
.living-tabs{
|
|
.living-tabs{
|
|
display: flex;
|
|
display: flex;
|
|
@@ -189,6 +175,7 @@ export default {
|
|
}
|
|
}
|
|
.living .message .item{
|
|
.living .message .item{
|
|
padding:20rpx 35rpx 0;
|
|
padding:20rpx 35rpx 0;
|
|
|
|
+ display: flex;
|
|
}
|
|
}
|
|
.living .message .user{
|
|
.living .message .user{
|
|
float:left;
|
|
float:left;
|
|
@@ -230,35 +217,6 @@ export default {
|
|
border: solid 14rpx transparent;
|
|
border: solid 14rpx transparent;
|
|
border-top: solid 12rpx #eee;
|
|
border-top: solid 12rpx #eee;
|
|
content:'';
|
|
content:'';
|
|
-}
|
|
|
|
-.msgs-tabs{
|
|
|
|
- line-height: 88rpx;
|
|
|
|
- display: flex;
|
|
|
|
- height: 88rpx;
|
|
|
|
- justify-content: space-between;
|
|
|
|
- box-sizing: border-box;
|
|
|
|
- padding: 0 30rpx;
|
|
|
|
- border-bottom: 1rpx solid #ccc;
|
|
|
|
-}
|
|
|
|
-.msgs-tabs .tit{
|
|
|
|
- font-size: 30rpx;
|
|
|
|
- color: #000;
|
|
|
|
- display: flex;
|
|
|
|
- align-items: center;
|
|
|
|
- overflow: hidden;
|
|
|
|
-}
|
|
|
|
-.msgs-tabs .tit:before{
|
|
|
|
- content: '';
|
|
|
|
- display: inline-block;
|
|
|
|
- width: 6rpx;
|
|
|
|
- height: 30rpx;
|
|
|
|
- margin-right: 10rpx;
|
|
|
|
- background-color: #000;
|
|
|
|
-}
|
|
|
|
-.msgs-tabs .num{
|
|
|
|
- font-size: 22rpx;
|
|
|
|
- color: #999;
|
|
|
|
- overflow: hidden;
|
|
|
|
}
|
|
}
|
|
.living{
|
|
.living{
|
|
margin-bottom: 0;
|
|
margin-bottom: 0;
|
|
@@ -267,9 +225,6 @@ export default {
|
|
padding:0;
|
|
padding:0;
|
|
border-bottom: 0;
|
|
border-bottom: 0;
|
|
}
|
|
}
|
|
-.console{
|
|
|
|
- z-index: 5;
|
|
|
|
-}
|
|
|
|
.living .message{
|
|
.living .message{
|
|
position: absolute;
|
|
position: absolute;
|
|
bottom: 120rpx;
|
|
bottom: 120rpx;
|
|
@@ -278,16 +233,6 @@ export default {
|
|
width: 100%;
|
|
width: 100%;
|
|
height: auto;
|
|
height: auto;
|
|
}
|
|
}
|
|
-.ico-video-play{
|
|
|
|
- background: url(@/static/icon/ico-video-play.png) no-repeat;
|
|
|
|
- background-size: cover;
|
|
|
|
- width: 100rpx;
|
|
|
|
- height: 100rpx;
|
|
|
|
- position: absolute;
|
|
|
|
- left: 50%;
|
|
|
|
- top: 50%;
|
|
|
|
- transform: translate3d(-50%,-50%,0);
|
|
|
|
-}
|
|
|
|
|
|
|
|
.console{
|
|
.console{
|
|
position: fixed;
|
|
position: fixed;
|
|
@@ -296,6 +241,7 @@ export default {
|
|
width:750rpx;
|
|
width:750rpx;
|
|
height:98rpx;
|
|
height:98rpx;
|
|
padding-top:20rpx;
|
|
padding-top:20rpx;
|
|
|
|
+ z-index: 5;
|
|
}
|
|
}
|
|
.console .comment{
|
|
.console .comment{
|
|
position: absolute;
|
|
position: absolute;
|