edit

pages/dream/view.vue

@@ -29,8 +29,6 @@ export default{
 				items : []
 			},
 			config : {
-				position: ["tl","tc","tr","cl","cc","cr","bl","bc","br"],
-				position_f: ["tl","tr","bl","br"],
 				//记录当前第几页
 				page : 1,
 				//记录哪个页面需要停止

pages/dream/view/dream.vue

@@ -15,9 +15,23 @@
 	<view v-else-if="item.type == 4">
 		<vod :item="item.data" :config="config"></vod>
 	</view>
-	<!--短视频-->
+	<!--留言视频-->
 	<view v-else-if="item.type == 5">
+		<vodComment :item="item.data" :config="config"></vodComment>
+	</view>
+	<!--短视频-->
+	<view v-else-if="item.type == 6">
 		<vodShort :item="item.data" :config="config"></vodShort>
+	</view>
+	
+	<!--单个链接-->
+	<view v-else-if="item.type == 11">
+		<linkView :item="item.data" :config="config"></linkView>
+	</view>
+	
+	<!--单页面-->
+	<view v-else-if="item.type == 15">
+		<webView :item="item.data" :config="config"></webView>
 	</view>
 </template>
 
@@ -26,7 +40,10 @@ import news from "@/pages/dream/view/news.vue";
 import pic from "@/pages/dream/view/pic.vue";
 import picGrid from "@/pages/dream/view/picGrid.vue";
 import vod from "@/pages/dream/view/vod.vue";
+import vodComment from "@/pages/dream/view/vodComment.vue";
 import vodShort from "@/pages/dream/view/vodShort.vue";
+import linkView from "@/pages/dream/view/linkView.vue";
+import webView from "@/pages/dream/view/webView.vue";
 export default {
 	name: "dream",
 	props: {
@@ -43,7 +60,7 @@ export default {
 		stopFun : function(){return false;}
 	},
 	components:{
-		news,pic,picGrid,vod,vodShort
+		news,pic,picGrid,vod,vodComment,vodShort,linkView,webView
 	}
 }
 </script>

pages/dream/view/linkView.vue

@@ -0,0 +1,29 @@
+<template name="linkView">
+	<view>
+		ddd
+	</view>
+</template>
+
+<script>
+export default {
+	name: "linkView",
+	props: {
+		config : {
+			type : Object,
+			value : null
+		},
+		item : {
+			type    : Object,
+			value	: null
+		},
+	},
+	methods:{
+		stopFun : function() {
+			return false;
+		}
+	},
+}
+</script>
+
+<style>
+</style>

pages/dream/view/pic.vue

@@ -1,18 +1,12 @@
 <template name="pic">
 	<view class="cover">
 		<image :src="item.pic" mode="widthFix" :class="['default', 'slide-image-'+item.type]"></image>
-		<block v-for="(v, k) in item.text">
-			<view :class="['abs-tag', config.position[v.text-1]]" v-if="v.name">
-				<view v-for="(v1, k1) in v.name_array">
-					<text v-bind:style="{backgroundColor:(v.bgcolor || 'transparent'),color:v.color,fontSize:v.size+'px'}" v-if="v1">{{v1}}</text>
-				</view>
-			</view>
-		</block>
-		<view class="btn-save-img" :data-url="item.pic" @click="download" v-if="item.is_button == 1"></view>
+		<pos :item="item" :down="item.pic"></pos>
 	</view>
 </template>
 
 <script>
+import pos from "@/pages/dream/view/pos.vue";
 export default {
 	name: "pic",
 	props: {
@@ -26,30 +20,11 @@ export default {
 		},
 	},
 	methods:{
-		download : function(e) {
-			var url = e.target.dataset.url;
-			var self = this;
-			uni.downloadFile({
-				url,
-				success: res => {
-					if (res.statusCode === 200) {
-						console.info(res);
-						uni.saveImageToPhotosAlbum({
-							filePath: res.tempFilePath,
-							success: function() {
-								self.alert('保存成功');
-							},
-							fail: function() {
-								self.alert('保存失败，请稍后重试');
-							}
-						});
-					} else {
-						self.alert('下载失败');
-					}
-				}
-			});
-		}
+		
 	},
+	components:{
+		pos
+	}
 }
 </script>
 

pages/dream/view/picGrid.vue

@@ -1,7 +1,7 @@
 <template name="picGrid">
 	<view class="cover">
 		<block v-for="(v, k) in item.text">
-			<image :class="['abs-tag', config.position_f[v.text-1]]" v-if="v.pic" :src="v.pic" mode="widthFix"></image>
+			<image :class="['abs-tag', position[v.text-1]]" v-if="v.pic" :src="v.pic" mode="widthFix"></image>
 		</block>
 	</view>
 </template>
@@ -19,6 +19,11 @@ export default {
 			value	: null
 		},
 	},
+	data() {
+		return {
+			position: ["tl","tr","bl","br"],
+		};
+	},
 	methods:{
 		
 	},

pages/dream/view/pos.vue

@@ -0,0 +1,151 @@
+<template name="pos">
+	<view>
+		<block v-for="(v, k) in item.text">
+			<view :class="['abs-tag', position[v.text-1]]" v-if="v.name">
+				<view v-for="(v1, k1) in v.name_array">
+					<text v-bind:style="{backgroundColor:(v.bgcolor || 'transparent'),color:v.color,fontSize:v.size+'px'}" v-if="v1">{{v1}}</text>
+				</view>
+			</view>
+		</block>
+		<view class="btn-save-img" :data-url="down" @click="download" v-if="item.is_button == 1"></view>
+	</view>
+</template>
+
+<script>
+export default {
+	name: "pic",
+	props: {
+		config : {
+			type : Object,
+			value : null
+		},
+		down : {
+			type : String,
+			value : null,
+		},
+		item : {
+			type    : Object,
+			value	: null
+		},
+	},
+	data() {
+		return {
+			position: ["tl","tc","tr","cl","cc","cr","bl","bc","br"],
+		};
+	},
+	methods:{
+		download : function(e) {
+			var url = e.target.dataset.url;
+			var self = this;
+			uni.downloadFile({
+				url,
+				success: res => {
+					if (res.statusCode === 200) {
+						console.info(res);
+						uni.saveImageToPhotosAlbum({
+							filePath: res.tempFilePath,
+							success: function() {
+								self.alert('保存成功');
+							},
+							fail: function() {
+								self.alert('保存失败，请稍后重试');
+							}
+						});
+					} else {
+						self.alert('下载失败');
+					}
+				}
+			});
+		}
+	},
+}
+</script>
+
+<style>
+.abs-tag {
+  position: fixed;
+  color: #fff;
+  display: flex;
+  flex-direction: column;
+}
+.abs-tag view{
+  line-height: 1em;
+  overflow: hidden;
+}
+.abs-tag text {
+  background-color: #000;
+  margin-bottom: 10rpx;
+  font-size: 28rpx;
+  line-height: 1;
+  padding: 0 2rpx;
+}
+
+.abs-tag.tl {
+  top: 88rpx;
+  left: 30rpx;
+}
+
+.abs-tag.tr {
+  top: 88rpx;
+  right: 30rpx;
+  text-align: right;
+}
+
+.abs-tag.tc {
+  top: 88rpx;
+  left: 50%;
+  transform: translate(-50%, 0);
+  text-align: center;
+}
+
+.abs-tag.cl {
+  top: 50%;
+  transform: translate(0, -50%);
+  left: 30rpx;
+}
+
+.abs-tag.cc {
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+}
+
+.abs-tag.cr {
+  top: 50%;
+  transform: translate(0, -50%);
+  right: 30rpx;
+  text-align: right;
+}
+
+.abs-tag.bl {
+  bottom: 125rpx;
+  left: 30rpx;
+}
+
+.abs-tag.br {
+  bottom: 125rpx;
+  right: 30rpx;
+  text-align: right;
+}
+
+.abs-tag.bc {
+  bottom: 125rpx;
+  left: 50%;
+  transform: translate(-50%, 0);
+  text-align: center;
+}
+
+.btn-save-img {
+  position: absolute;
+  bottom: 30rpx;
+  left: 135rpx;
+  left: 30rpx;
+  position: fixed;
+  left: 30rpx;
+  bottom: 30rpx;
+  background: url(@/static/icon/ico-download.png) no-repeat;
+  background-size: 80rpx 80rpx;
+  width: 80rpx;
+  height: 80rpx;
+}
+</style>

pages/dream/view/vod.vue

@@ -28,7 +28,7 @@ export default {
   display: block;
 }
 .ico-video-play{
-  background: url(../../../static/icon/ico-video-play.png) no-repeat;
+  background: url(@/static/icon/ico-video-play.png) no-repeat;
   background-size: cover;
   width: 100rpx;
   height: 100rpx;

pages/dream/view/vodComment.vue

@@ -0,0 +1,335 @@
+<template name="vodComment">
+	<view>
+		<view class="topbanner">
+			<video
+				:src="item.video"
+				preload
+				:show-play-btn="true"
+				:show-center-play-btn="false"
+				:controls="true"
+				:loop="true"
+				:id="id()"
+				objectFit="fill"
+				:enable-progress-gesture="false"
+				@click="start"
+				ref="video_url"
+				play-btn-position="center"
+				class="video"
+				:poster="item.pic">
+			</video>
+			
+			<cover-image
+			class="ico-video-play" v-if="show_play" 
+			@tap="start"></cover-image>
+			
+		</view>
+		<view class="living-tabs">
+		  <view class="cur">{{item.name}}</view>
+		</view>
+		<view class="living">
+		  <scroll-view class="message" bindscrolltolower="loadmore" scroll-y>
+			<view class="item" v-for="(v, k) in comments">
+			  <view class="user">
+				<image :src="v.avatar"></image>
+			  </view>
+			  <view class="info clearfix">
+				<view class="username text-ellipsis">
+				  <text>{{v.username}}</text>
+				</view>
+				<view class="txt">
+				  <text>{{v.content}}</text>
+				</view>
+			  </view>
+			</view>
+		  </scroll-view>
+		</view>
+	</view>
+</template>
+
+<script>
+export default {
+	name: "vodComment",
+	props: {
+		config : {
+			type : Object,
+			value : null
+		},
+		item : {
+			type    : Object,
+			value	: null
+		},
+	},
+	data() {
+		return {
+			show_play: true,
+			videoCtx : false,
+			comments: [
+				{
+					id : 1,
+					avatar : 'https://yt3.ggpht.com/a/AATXAJxSSAfjWzxQAkDei2MeIPc6WqlO2FG-gOSpZQ=s48-c-k-c0xffffffff-no-rj-mo',
+					username : 'rabin',
+					content : 'dfdfdfdf',
+				},
+				{
+					id : 2,
+					avatar : 'https://pic.rmb.bdstatic.com/b9279adf974b78d27201a0b34970c2a9.jpeg',
+					username : 'test',
+					content : '哈哈哈哈或',
+				}
+			],
+			loading: false
+		}
+	},
+	methods:{
+		id : function()  {
+			var video_id = this.item.id;
+			return 'video_comment_' + video_id;
+		},
+		start : function()  {
+			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();
+			if (!this.videoCtx) {
+				this.videoCtx = uni.createVideoContext(id, this);
+			}
+			this.videoCtx.pause();
+			this.show_play = true;
+		},
+	},
+}
+</script>
+
+<style>
+.topbanner{
+  position: relative;
+}
+.topbanner image,.topbanner video,.topbanner live-player{
+  width: 750rpx;
+  height: 422rpx;
+  display: block;
+}
+.topbanner .media-cover,.topbanner video,.topbanner live-player{
+  height: 422rpx;
+}
+.living{
+  margin-bottom:50rpx;
+  
+}
+.living-tabs{
+  display: flex;
+  justify-content: center;
+  margin-bottom: 36rpx;
+  float: left;
+}
+.living-tabs>view{
+  font-size: 30rpx;
+  line-height: 52rpx;
+  margin: 0 26rpx;
+}
+.living-tabs>view.cur{
+  border-left: 10rpx solid #000;
+  padding-left: 20rpx;
+  margin-left: 16rpx;
+}
+.living .send{
+  border-bottom: solid 2rpx #f0f0f0;
+  padding:0 30rpx 40rpx;
+}
+.living .send input{
+  float:left;
+  box-sizing: border-box;
+  width:540rpx;
+  height:60rpx;
+  border:solid 2rpx #999999;
+  border-radius: 10rpx;
+  padding:0 10rpx;
+  line-height: 60rpx;
+  font-size: 30rpx;
+}
+.living .send .button{
+  float:right;
+  box-sizing: border-box;
+  padding:0;
+  width:130rpx;
+  min-width: 0;
+  height:60rpx;
+  line-height: 60rpx;
+}
+.living .message{
+  height:320rpx;
+  padding:15rpx 0 110rpx;
+  border-bottom: solid 2rpx #f0f0f0;
+  border-top: 2rpx solid #bababa;
+  margin-top: -32rpx;
+}
+.living .message .item{
+  padding:20rpx 35rpx 0;
+  margin-top: 10rpx;
+}
+.living .message .user{
+  float:left;
+}
+.living .message .user image{
+  display: block;
+  width:51rpx;
+  height:51rpx;
+  border-radius: 50%;
+}
+.living .message .info{
+  position: relative;
+  margin-left:70rpx;
+  overflow: visible;
+}
+.living .message .username{
+  font-size: 28rpx;
+  margin-bottom: 13rpx;
+}
+.living .message .txt{
+  position: relative;
+  /*float:left;*/
+  background: #eeeeee;
+  max-width:400rpx;
+  border-radius: 15rpx;
+  padding: 9rpx 18rpx;
+  font-size: 26rpx;
+  line-height: 1.8;
+  color: #666666;
+  overflow: visible;
+}
+.living .message .txt:before{
+  display: block;
+  position: absolute;
+  top:0;
+  left:-14rpx;
+  width:0;
+  height:0;
+  border: solid 14rpx transparent;
+  border-top: solid 12rpx #eee;
+  content:'';
+}
+.living-tabs{
+  padding: 20rpx 0 20rpx;
+  /* border: 1rpx solid #f0f0f0; */
+  margin-bottom: 0;
+}
+.living{
+  margin-bottom: 0;
+}
+.living .message{
+  padding:0;
+  border-bottom: 0;
+}
+.console{
+  z-index: 5;
+}
+.living .message{
+  position: absolute;
+  bottom: 120rpx;
+  top: 544rpx;
+  left: 0;
+  width: 100%;
+  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{
+  position: fixed;
+  bottom:0;
+  left:0;
+  width:750rpx;
+  height:98rpx;
+  padding-top:20rpx;
+}
+.console .comment{
+  position: absolute;
+  top:10rpx;
+  left:85rpx;
+  background:url(http://www.huoxingkandiqiu.com/files/img/ico-comment.png) no-repeat;
+  background-size: 98rpx 98rpx;
+  width:98rpx;
+  height:98rpx;
+}
+.console .thumbup{
+  position: absolute;
+  top:10rpx;
+  right:85rpx;
+}
+.console .num{
+  background: #fff;
+  position: absolute;
+  top:40rpx;
+  right:0;
+  width:100rpx;
+  height: 40rpx;
+  line-height: 40rpx;
+  color: #000;
+  font-size: 24rpx;
+  text-align: center;
+}
+.console .unlike{
+  background:url(http://www.huoxingkandiqiu.com/files/img/ico-unlike.png) no-repeat;
+  background-size: 98rpx 98rpx;
+  width:98rpx;
+  height:98rpx;
+}
+.console .like{
+  background:url(http://www.huoxingkandiqiu.com/files/img/ico-like.png) no-repeat;
+  background-size: 98rpx 98rpx;
+  width:98rpx;
+  height:98rpx;
+}
+.mask .layer{
+  padding:40rpx 30rpx;
+}
+.mask textarea{
+  margin-bottom: 25rpx;
+  box-sizing: border-box;
+  padding:10rpx;
+  border:solid 2rpx #999999;
+  border-radius: 10rpx;
+  width:500rpx;
+  font-size: 24rpx;
+}
+.mask .button{
+  width:300rpx;
+}
+.share{
+  position: fixed;
+  bottom:20rpx;
+  left:225rpx;
+}
+
+.console .edit{
+  background:url(http://www.huoxingkandiqiu.com/files/img/edit.png) no-repeat;
+  background-size: 80rpx 80rpx;
+  width:80rpx;
+  height:80rpx;
+  position: absolute;
+  left: 135rpx;
+  bottom: 30rpx;
+}
+.console .edit.left30{
+  left: 30rpx;
+}
+</style>

pages/dream/view/vodShort.vue

@@ -26,9 +26,7 @@
 				@tap="start"
 				src="@/static/icon/ico-video-play.png"></cover-image>
 				
-				<cover-view class="cover-view-left">
-					
-				</cover-view>
+				<pos :item="v" :down="v.video"></pos>
 				
 				<cover-view class="cover-view-right" v-if="showInfo">
 					<cover-image :src="item[0].pic"
@@ -68,6 +66,7 @@
 </template>
 
 <script>
+import pos from "@/pages/dream/view/pos.vue";
 var play = true;
 export default {
 	name: "vodShort",
@@ -83,6 +82,7 @@ export default {
 	},
 	data() {
 		return {
+			page : 0,
 			up: false,
 			time: 0,
 			barWidth:0,
@@ -105,25 +105,25 @@ export default {
 	},
 	methods:{
 		//获取video_id
-		id(index) {
+		id : function(index)  {
 			var video_id = this.item[index].id;
-			return 'video_' + video_id;
+			return 'video_short_' + video_id;
 		},
-		update(event) {
+		update : function(event)  {
 			let t_w = parseInt(this.width);
 			this.duration = event.detail.duration;
 			this.time = event.detail.currentTime;
 			let width = (this.time / this.duration) * t_w;
 			let w = 0;
 		},
-		start() {
+		start : function()  {
 			this.config.stop[this.config.page] = this;
 			this.handle(play);
 		},
-		stop() {
+		stop : function()  {
 			this.handle(false);
 		},
-		handle(state) {
+		handle : function(state)  {
 			var id = this.id(this.current_index);
 			if (state) {
 				this.videoCtx = uni.createVideoContext(id, this);
@@ -141,7 +141,7 @@ export default {
 				//console.info('暂停', id, this.current_index);
 			}
 		},
-		change(e){
+		change : function(e)  {
 			// 暂停之前的视频
 			this.stop();
 			this.current_index = e.detail.current;
@@ -149,34 +149,37 @@ export default {
 			this.start();
 			
 			// 判断是否第一条
-			if( e.detail.current == 0 ){
-				console.log('到顶了');
+			if (e.detail.current == 0) {
+				//console.log('到顶了');
 				return false;
 			}
 			
 			// 判断是否最后一条
-			if( e.detail.current == this.item.length-1 ){
-				console.log('到底了');
+			if (e.detail.current == this.item.length-1) {
+				//console.log('到底了');
 				return false;
 			}
 			
 		},
-		tapMsg(e) {
+		tapMsg : function(e)  {
 			console.log(5, e);
 		},
-		tapShare(e) {
+		tapShare : function(e) {
 			console.log(6, e);
 		},
-		tapLove(e) {
+		tapLove : function(e)  {
 			// item.is_dianzan
 			this.item[this.current_index].is_dianzan = !this.item[this.current_index].is_dianzan;
 			console.log(7, e);
 		}
 	},
 	watch: {
-		play(newVal, oldVal) {
+		play : function(newVal, oldVal) {
 			this.start();
 		}
+	},
+	components:{
+		pos
 	}
 }
 </script>

pages/dream/view/webView.vue

@@ -0,0 +1,37 @@
+<template name="webView">
+	<view>
+		<view ref="initHtml" class="initHtml">
+						
+		</view>
+	</view>
+</template>
+
+<script>
+export default {
+	name: "webView",
+	props: {
+		config : {
+			type : Object,
+			value : null
+		},
+		item : {
+			type    : Object,
+			value	: null
+		},
+	},
+	mounted: function() {
+		this.Dever.initHtml(this);
+		var self = this;
+		var html = '<iframe title="'+this.item.name+'" width="100%" height="1386" style="overflow-y:auto" src="'+this.item.link+'" frameborder="no" border="0" marginwidth="0" marginheight="0" scrolling="no" allowTransparency="true"  ></iframe>';
+		self.Dever.html(html);
+	},
+	methods:{
+		callback : function() {
+			return false;
+		}
+	},
+}
+</script>
+
+<style>
+</style>