edit

lib/dever/components/video.nvue

@@ -124,7 +124,6 @@ export default {
 			this.$emit('update:load', true);
 			this.poster = false;
 			this.video.play();
-			this.video.currentTime = 1 + '';
 			this.play = true;
 			this.playButton = true;
 			this.muted = false;
@@ -193,11 +192,15 @@ export default {
 	top: 0;
 	overflow: hidden;
 }
-.video {
+.video {
+	/*
 	width: 101%;
 	height: 101%;
 	margin-left: -5rpx;
-	margin-top: -5rpx;
+	margin-top: -5rpx;
+	*/
+	width:100%;
+	height:100%;
 	position: relative;
 	background-color: transparent;
 	z-index: 1;

lib/dever/config.js

@@ -8,7 +8,7 @@ const request = {
 	//	服务器接口地址
 
 	host: "http://192.168.2.70/dreamland/",
-	//host: "http://192.168.3.66/dreamland/",
+	host: "http://192.168.3.66/dreamland/",
 	
 	//	请求的参数	
 	data: {},

lib/graceUI/components/graceSelectTags.vue

@@ -49,7 +49,7 @@ export default{
 						selectVal   = this.tagsData[i].value;
 					}
 				}
-				this.$emit("change", selectVal, this.datas, selectIndex);
+				//this.$emit("change", selectVal, this.datas, selectIndex);
 			}else{
 				var sedRes = [], indexs = [];
 				for (var i = 0; i < this.tagsData.length; i++){

pages/dream/view/audioComment.vue

@@ -0,0 +1,66 @@
+<template name="audioComment">
+	<view>
+		<view class="banner">
+			<dever-audio
+			:src="item.audio" 
+			:pic="item.pic" 
+			:control="true"
+			:loop="true"
+			:load.sync="load"
+			ref="audio"
+			>
+			</dever-audio>
+		</view>
+		<comment :name="item.name" :type="`content/audio_comment`" :type_id="item.id"></comment>
+	</view>
+</template>
+
+<script>
+import deverAudio from '@/lib/dever/components/audio.nvue';
+import comment from "@/pages/dream/view/comment.vue";
+export default {
+	name: "audioComment",
+	props: {
+		control : {
+			type : Object,
+			value : null
+		},
+		item : {
+			type    : Object,
+			value	: null
+		},
+		index : {
+			type    : Number,
+			value	: null
+		},
+	},
+	data() {
+		return {
+			load : false,
+		}
+	},
+	mounted() {
+		this.control[this.index] = this;
+	},
+	methods:{
+		start : function() {
+			this.$refs.audio.start();
+		},
+		stop : function() {
+			this.$refs.audio.stop();
+		},
+	},
+	components:{
+		deverAudio,comment
+	}
+}
+</script>
+
+<style>
+.banner{
+  position: relative;
+  width: 750rpx;
+  height: 422rpx;
+  display: block;
+}
+</style>

pages/dream/view/audioList.vue

@@ -0,0 +1,83 @@
+<template name="audioList">
+	<view>
+		<swiper class="swiper" autoplay="false" vertical="true" interval="990000" @change="changeAudio">
+			<swiper-item v-for="(v, k) in item" :key="k">
+				<dever-audio
+				:src="v.audio" 
+				:pic="v.pic" 
+				:control="true"
+				:loop="true"
+				:load.sync="load"
+				ref="audio"
+				>
+				</dever-audio>
+			</swiper-item>
+		</swiper>
+	</view>
+</template>
+
+<script>
+import deverAudio from '@/lib/dever/components/audio.nvue';
+var play = true;
+export default {
+	name: "audioList",
+	props: {
+		control : {
+			type : Object,
+			value : null
+		},
+		item : {
+			type    : Array,
+			value	: null
+		},
+		index : {
+			type    : Number,
+			value	: null
+		},
+	},
+	data() {
+		return {
+			load : false,
+			current_index: 0,
+		};
+	},
+	created() {
+		
+	},
+	mounted() {
+		this.control[this.index] = this;
+	},
+	methods:{
+		start : function() {
+			this.$refs.audio[this.current_index].start();
+		},
+		stop : function() {
+			this.$refs.audio[this.current_index].stop(true);
+		},
+		changeAudio : function(e)  {
+			var self = this;
+			self.$nextTick(()=>{
+				this.$refs.audio[this.current_index].stop(false);
+				this.current_index = e.detail.current;
+				self.start();
+			});
+					
+		},
+	},
+
+	components:{
+		deverAudio
+	}
+}
+</script>
+
+<style>
+.swiper{
+	width: 100vw;
+	height: 100vh;	
+	/*position: fixed;*/
+	position: relative;
+	top: 0;
+	left: 0;
+}
+</style>

pages/dream/view/comment.vue

@@ -0,0 +1,286 @@
+<template name="comment">
+	<view>
+		<view class='msgs-tabs'>
+		  <view class='tit'>{{name}}</view>
+		  <view class='num'>全部评论（100）</view>
+		</view>
+		<view class="living">
+		  <scroll-view class="message" bindscrolltolower="loadmore" scroll-y>
+			<view class="item" v-for="(v, k) in comments" :key="k">
+			  <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: "comment",
+	props: {
+		type : {
+			type : String,
+			value : null
+		},
+		type_id : {
+			type : String,
+			value : null
+		},
+		name : {
+			type    : String,
+			value	: null
+		},
+	},
+	data() {
+		return {
+			comments: [
+				{
+					id : 1,
+					avatar : 'https://pic.rmb.bdstatic.com/b9279adf974b78d27201a0b34970c2a9.jpeg',
+					username : 'rabin',
+					content : 'dfdfdfdf',
+				},
+				{
+					id : 2,
+					avatar : 'https://pic.rmb.bdstatic.com/b9279adf974b78d27201a0b34970c2a9.jpeg',
+					username : 'test',
+					content : '哈哈哈哈或',
+				}
+			],
+			loading: false
+		}
+	},
+	methods:{
+		
+	},
+}
+</script>
+
+<style>
+.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{
+  margin-bottom:50rpx;
+}
+.living-tabs{
+  display: flex;
+  justify-content: center;
+  margin-bottom: 36rpx;
+}
+.living-tabs>view{
+  font-size: 30rpx;
+  line-height: 52rpx;
+  margin: 0 26rpx;
+}
+.living-tabs>view.cur{
+  border-bottom: 6rpx solid #000;
+}
+.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;
+}
+.living .message .item{
+  padding:20rpx 35rpx 0;
+  display: flex;
+}
+.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{
+  margin-bottom: 0;
+}
+.living .message{
+  padding:0;
+  border-bottom: 0;
+}
+.living .message{
+  position: absolute;
+  bottom: 120rpx;
+  top: 544rpx;
+  left: 0;
+  width: 100%;
+  height: auto;
+}
+
+.console{
+  position: fixed;
+  bottom:0;
+  left:0;
+  width:750rpx;
+  height:98rpx;
+  padding-top:20rpx;
+  z-index: 5;
+}
+.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/dream.vue

@@ -48,6 +48,21 @@
 		<!--留言视频-->
 		<view v-else-if="item.type == 22">
 			<vodComment :index="index" :item="item.data" :control="control"></vodComment>
+		</view>
+		
+		
+		<!--音频播放-->
+		<view v-else-if="item.type == 30">
+			<audioList :index="index" :item="item.data" :control="control"></audioList>
+		</view>
+		<!--留言音频-->
+		<view v-else-if="item.type == 31">
+			<audioComment :index="index" :item="item.data" :control="control"></audioComment>
+		</view>
+		
+		<!--直播-->
+		<view v-else-if="item.type == 40">
+			<liveComment :index="index" :item="item.data" :control="control"></liveComment>
 		</view>
 		
 		<!--电商单个产品-->
@@ -64,7 +79,6 @@
 		<view v-else-if="item.type == 82">
 			<webView :index="index" :item="item.data" :control="control"></webView>
 		</view>
-		<view class="page-buy">购</view>
 		<view class="page-num" v-if="index != -1">P{{index+1}}</view>
 	</view>
 </template>
@@ -74,7 +88,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 vodComment from "@/pages/dream/view/vodComment.vue";
+import audioList from "@/pages/dream/view/audioList.vue";
+import audioComment from "@/pages/dream/view/audioComment.vue";
+import liveComment from "@/pages/dream/view/liveComment.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";
@@ -99,7 +116,7 @@ export default {
 		stopFun : function(){return false;}
 	},
 	components:{
-		news,pic,picGrid,vod,vodComment,vodShort,linkView,webView,product
+		news,pic,picGrid,vod,vodComment,vodShort,audioList,audioComment,liveComment,linkView,webView,product
 	}
 }
 </script>
@@ -135,20 +152,5 @@ export default {
   text-align: center;
   z-index: 2000;
 }
-
-.page-buy {
-  position: fixed;
-  right: 30rpx;
-  bottom: 120rpx;
-  width: 80rpx;
-  height: 80rpx;
-  background-color: rgba(0, 0, 0, 0.75);
-  border-radius: 80rpx;
-  color: #fff;
-  font-size: 30rpx;
-  line-height: 80rpx;
-  text-align: center;
-  z-index: 2000;
-}
 
 </style>

pages/dream/view/liveComment.vue

@@ -0,0 +1,67 @@
+<template name="liveComment">
+	<view>
+		<view class="banner">
+			<dever-video
+			:src="item.live" 
+			:pic="item.pic" 
+			:control="false"
+			:index="0" 
+			:vid="item.id" 
+			:load.sync="load"
+			ref="video"
+			>
+			</dever-video>
+		</view>
+		<comment :name="item.name" :type="`content/live_comment`" :type_id="item.id"></comment>
+	</view>
+</template>
+
+<script>
+import deverVideo from '@/lib/dever/components/video.nvue';
+import comment from "@/pages/dream/view/comment.vue";
+export default {
+	name: "liveComment",
+	props: {
+		control : {
+			type : Object,
+			value : null
+		},
+		item : {
+			type    : Object,
+			value	: null
+		},
+		index : {
+			type    : Number,
+			value	: null
+		},
+	},
+	data() {
+		return {
+			load : false,
+		}
+	},
+	mounted() {
+		this.control[this.index] = this;
+	},
+	methods:{
+		start : function() {
+			this.$refs.video.start();
+		},
+		stop : function() {
+			this.$refs.video.stop(true);
+		},
+	},
+	components:{
+		deverVideo,comment
+	}
+}
+</script>
+
+<style>
+.banner{
+  position: relative;
+  width: 750rpx;
+  height: 422rpx;
+  display: block;
+}
+</style>

pages/dream/view/product.vue

@@ -64,20 +64,23 @@
 					<!-- 头部商品信息 -->
 					<view class="grace-product-attr-info">
 						<image class= "grace-product-attr-info-image"  mode="widthFix" 
-						src="https://img13.360buyimg.com/n7/jfs/t1/9085/2/12381/146200/5c371c5bE08328383/4f4ba51aed682207.jpg"></image>
+						:src="item.goods.pic_cover"></image>
 						<view class="grace-product-attr-info-body">
-							<text class="grace-product-attr-info-title">{{product.name}}</text>
-							<text class="grace-product-attr-info-stone">库存 : 1999件</text>
+							<text class="grace-product-attr-info-title">{{item.goods.name}}</text>
+							<view class="grace-nowrap grace-flex-vcenter">
+								<text class="grace-product-price">￥{{payPrice}}</text>
+								<text class="grace-text grace-gray" style="margin-left:30rpx;">库存：{{kuNum}}件</text>
+							</view>
 						</view>
 					</view>
 					<!-- 属性列表区 -->
-					<scroll-view style="height:700rpx;" scroll-y>
-						<view class="grace-title grace-margin-top">选择颜色</view>
-						<view><graceSelectTags selectedColor="#FF0036" :items="colorTips" type="radio" @change="change1"></graceSelectTags></view>
-						<view class="grace-title grace-margin-top">选择类型</view>
-						<view><graceSelectTags selectedColor="#FF0036" :items="typeTips" type="radio" @change="change2"></graceSelectTags></view>
+					<scroll-view style="height:700rpx;" scroll-y>
+						<block v-for="(v, k) in item.goods.sell_attr" :key="k">
+							<view class="grace-title grace-margin-top">{{v.name}}</view>
+							<view><graceSelectTags selectedColor="#FF0036" :items="v.option_sku" type="radio" @change="change"></graceSelectTags></view>
+						</block>
 						<view class="grace-margin-top"><text class="grace-title">购买数量</text></view>
-						<view>
+						<view style="margin-bottom: 40rpx;">
 							<graceNumberBox :value="buyNum" v-on:change="buyNumChange"></graceNumberBox>
 						</view>
 					</scroll-view>
@@ -88,22 +91,10 @@
 			</graceBottomDialog>
 		</view>
 		<!-- 底部 -->
-		<view class="grace-space-between grace-flex-vcenter grace-bg-white" slot="gFooter">
-			<view class="grace-grids grace-nowrap" style="width:250rpx;">
-				<view class="grace-grids-items grace-relative" @tap="gohome">
-					<text class="grace-grids-icon grace-icons icon-home"></text>
-					<text class="grace-grids-text grace-grids-text">首页</text>
-				</view>
-				<view class="grace-grids-items grace-relative">
-					<text class="grace-grids-icon grace-grids-icon grace-icons icon-shoucang grace-footer-active"></text>
-					<text class="grace-grids-text grace-grids-text grace-footer-active">收藏</text>
-				</view>
-			</view>
-			<view class="grace-flex-end" style="width:460rpx;">
-				<button type="warn" class="grace-footer-button" style="background:#E55D52;" @tap="buyNow">立即购买</button>
-				<button type="warn" class="grace-footer-button" style="background:#F37B1D;" @tap="buyNow">加入购物车</button>
-			</view>
-		</view>
+		<view class="grace-space-between grace-flex-vcenter grace-bg-white" slot="gFooter">
+			<view class="page-buy" @tap="buyNow">买</view>
+		</view>
+		
 	</gracePage>
 </template>
 
@@ -128,26 +119,9 @@ export default {
 	},
 	data() {
 		return {
-			// 轮播图 
-			swiperItems : [
-				'http://i1.mifile.cn/f/i/2019/C76029A6/part6-2.jpg',
-				'http://i1.mifile.cn/f/i/2019/C76029A6/part6-2.jpg',
-				'http://i1.mifile.cn/f/i/2019/C76029A6/part6-2.jpg'
-			],
 			// 切换导航
 			navItems : ['商品详情', '相关评论'],
 			active:0,
-			product : {
-				name: "小米 MIX3 一面科技 一面艺术 ( 磁动力滑盖全面屏 | 故宫特别版 )",
-				logo : "../../static/logo.png",
-				price : 3188,
-				priceMarket : 3200,
-				imgs : [
-					'https://img30.360buyimg.com/sku/jfs/t21838/18/2275707529/311540/cba1d04c/5b4f155fNac3aa2f0.jpg',
-					'https://img30.360buyimg.com/sku/jfs/t22021/327/2281785192/48707/57806074/5b4f1579Nae7adb49.jpg',
-					'https://img30.360buyimg.com/sku/jfs/t21682/256/2344553276/204456/cf7a2ddb/5b4ffbbfN48c54307.jpg'
-				]
-			},
 			// 模拟评论数据 (实际项目来自api请求)
 			commentContents : [
 				{
@@ -175,19 +149,14 @@ export default {
 				}
 			],
 			// 购买选择属性层展示
-			attrIsShow : false,
-			colorTips : [
-				{ name: '灰色', value: '灰色', checked: true },
-				{ name: '银色', value: '银色', checked: false}
-			],
-			colorSelected : "灰色",
-			typeTips : [
-				{ name: '套餐一', value: '套餐一', checked: true },
-				{ name: '套餐二', value: '套餐二', checked: false},
-				{ name: '套餐三', value: '套餐三', checked: false}
-			],
-			typeSelected : "套餐一",
-			buyNum : 1
+			attrIsShow : false,
+			attr : '',
+			attrKey : '',
+			skuId : 0,
+			attrSelect : {},
+			payPrice : 0,
+			buyNum : 1,
+			kuNum : 9999,
 		}
 	},
 	onLoad:function () {},
@@ -207,27 +176,53 @@ export default {
 			})
 		},
 		//打开属性视图
-		buyNow : function(){this.attrIsShow = true;},
+		buyNow : function() {
+			this.attrIsShow = true;
+		},
 		// 关闭属性
-		closeAttr : function(){this.attrIsShow = false;},
-		// 颜色选择
-		change1 : function (e) {this.colorSelected = e;},
-		// 类型选择
-		change2 : function (e) {this.typeSelected = e;},
+		closeAttr : function() { 
+			this.attrIsShow = false;
+		},
+		// 属性选择
+		change : function (e) {
+			var temp = e.split('-');
+			this.attrSelect[temp[0]] = e;
+			this.getAttrKey();
+		},
 		// 购买数量变化
 		buyNumChange : function (e) {
-			this.buyNum = e[0];
+			this.buyNum = e[0];
+			this.getAttrKey();
 		},
 		// 属性提交
-		attrSubmit : function(e){
+		attrSubmit : function(e) {
 			//后续操作
 			uni.showToast({
 				title:"属性已经收集,请观察控制台",
 				icon:"none"
-			});
-			console.log("颜色 : " + this.colorSelected, "类型 : " + this.typeSelected , '数量 : ' + this.buyNum);
+			});
+			var data = {};
+			data.goods = this.item.goods.id;
+			data.price = this.payPrice;
+			data.num = this.buyNum;
+			data.sku = this.skuId;
+			console.log(data);
 			//如果想关闭属性
-			this.closeAttr();
+			//this.closeAttr();
+		},
+		// 获取属性key
+		getAttrKey : function() {
+			var key = [];
+			for (var i in this.attrSelect) {
+				key.push(this.attrSelect[i]);
+			}
+			this.attrKey = key.join('_');
+			
+			if (this.item.goods.price.list[this.attrKey]) {
+				this.payPrice = parseFloat(this.item.goods.price.list[this.attrKey].price) * this.buyNum;
+				this.kuNum = this.item.goods.price.list[this.attrKey].num;
+				this.skuId = this.item.goods.price.list[this.attrKey].id;
+			}
 		},
 		// 返回首页
 		gohome : function(){
@@ -258,5 +253,20 @@ export default {
 .grace-grids-items{padding:6rpx 0; width:120rpx;}
 .grace-grids-icon{height:50rpx; line-height:50rpx; font-size:40rpx; color:#6B7375;}
 .grace-grids-text{line-height:28rpx; font-size:20rpx; margin-top:2px; color:#6B7375;}
-.grace-footer-active{color:#FF0036;}
+.grace-footer-active{color:#FF0036;}
+
+.page-buy {
+  position: fixed;
+  right: 120rpx;
+  bottom: 30rpx;
+  width: 80rpx;
+  height: 80rpx;
+  background: rgb(229, 93, 82);
+  border-radius: 80rpx;
+  color: #fff;
+  font-size: 30rpx;
+  line-height: 80rpx;
+  text-align: center;
+  z-index: 2000;
+}
 </style>

pages/dream/view/video_demo.vue

@@ -1,32 +0,0 @@
-<template>
-	<video
-		:src="v.video"
-		preload
-		:show-play-btn="true"
-		:show-center-play-btn="false"
-		:controls="false"
-		:loop="true"
-		:id="id(k)"
-		objectFit="fill"
-		:enable-progress-gesture="false"
-		@click="start"
-		ref="video_url"
-		play-btn-position="center"
-		class="video"
-		:playsinline="true"
-		:webkit-playsinline="true"
-		x-webkit-airplay="allow"
-		:x5-playsinline="false"
-		:x5-video-player-fullscreen="true"
-		:x5-video-can-play-with-audio="true"
-		x5-video-orientation="portraint"
-		x5-video-player-type="h5-page"
-		>
-	</video>
-</template>
-
-<script>
-</script>
-
-<style>
-</style>

pages/dream/view/vodComment.vue

@@ -1,6 +1,6 @@
 <template name="vodComment">
 	<view>
-		<view class="topbanner">
+		<view class="banner">
 			<dever-video
 			:src="item.video" 
 			:pic="item.pic" 
@@ -12,32 +12,13 @@
 			>
 			</dever-video>
 		</view>
-		<view class='msgs-tabs'>
-		  <view class='tit'>{{item.name}}</view>
-		  <view class='num'>全部评论（100）</view>
-		</view>
-		<view class="living">
-		  <scroll-view class="message" bindscrolltolower="loadmore" scroll-y>
-			<view class="item" v-for="(v, k) in comments" :key="k">
-			  <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>
+		<comment :name="item.name" :type="`content/video_comment`" :type_id="item.id"></comment>
 	</view>
 </template>
 
 <script>
-import deverVideo from '@/lib/dever/components/video.nvue';
+import deverVideo from '@/lib/dever/components/video.nvue';
+import comment from "@/pages/dream/view/comment.vue";
 export default {
 	name: "vodComment",
 	props: {
@@ -57,21 +38,6 @@ export default {
 	data() {
 		return {
 			load : false,
-			comments: [
-				{
-					id : 1,
-					avatar : 'https://pic.rmb.bdstatic.com/b9279adf974b78d27201a0b34970c2a9.jpeg',
-					username : 'rabin',
-					content : 'dfdfdfdf',
-				},
-				{
-					id : 2,
-					avatar : 'https://pic.rmb.bdstatic.com/b9279adf974b78d27201a0b34970c2a9.jpeg',
-					username : 'test',
-					content : '哈哈哈哈或',
-				}
-			],
-			loading: false
 		}
 	},
 	mounted() {
@@ -86,232 +52,16 @@ export default {
 		},
 	},
 	components:{
-		deverVideo
+		deverVideo,comment
 	}
 }
 </script>
 
 <style>
-.topbanner{
+.banner{
   position: relative;
   width: 750rpx;
   height: 422rpx;
   display: block;
 }
-.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{
-  margin-bottom:50rpx;
-}
-.living-tabs{
-  display: flex;
-  justify-content: center;
-  margin-bottom: 36rpx;
-}
-.living-tabs>view{
-  font-size: 30rpx;
-  line-height: 52rpx;
-  margin: 0 26rpx;
-}
-.living-tabs>view.cur{
-  border-bottom: 6rpx solid #000;
-}
-.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;
-}
-.living .message .item{
-  padding:20rpx 35rpx 0;
-  display: flex;
-}
-.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{
-  margin-bottom: 0;
-}
-.living .message{
-  padding:0;
-  border-bottom: 0;
-}
-.living .message{
-  position: absolute;
-  bottom: 120rpx;
-  top: 544rpx;
-  left: 0;
-  width: 100%;
-  height: auto;
-}
-
-.console{
-  position: fixed;
-  bottom:0;
-  left:0;
-  width:750rpx;
-  height:98rpx;
-  padding-top:20rpx;
-  z-index: 5;
-}
-.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

@@ -62,24 +62,6 @@ export default {
 				this.$refs.video[this.current_index].stop(false);
 				this.current_index = e.detail.current;
 				self.start();
-				/*
-				for (var i in this.$refs.video) {
-					if (i == e.detail.current) {
-						this.current_index = i;
-						this.$refs.video[i].start();
-					} else {
-						var j = i - e.detail.current;
-						if (j < 0) {
-							j = j*-1;
-						}
-						if (j > 20) {
-							this.$refs.video[i].stop(true);
-						} else {
-							this.$refs.video[i].stop(false);
-						}
-					}
-				}
-				*/
 			});
 					
 		},