edit

lib/community/y-Barrage/y-Barrage.vue

@@ -2,13 +2,13 @@
 	<view class="l-barrage">
 		<block v-for="(item,index) in items" :key="index">
 			<!-- #ifdef H5 -->
-			<text v-if="item.display" class="aon" :style="{top: `${item.top}%`,color: item.color}">
+			<text v-if="item.display" :class="aon" :style="{top: `${item.top}%`,color: item.color}">
 				{{item.text}}
 			</text>
 			<!-- #endif -->
 
 			<!-- #ifndef H5 -->
-			<text v-if="item.display" class="aon" :style="{top: `${item.top}%`,color: item.color,
+			<text v-if="item.display" :class="aon" :style="{top: `${item.top}%`,color: item.color,
 				  animation: `mymove ${Number(item.time)}s linear forwards`
 				  }">
 				{{item.text}}
@@ -44,6 +44,7 @@
 		data() {
 			return {
 				items: [],
+				aon : 'aon',
 			}
 		},
 		methods: {
@@ -56,11 +57,16 @@
 				}
 				return '#' + rgb.join('')
 			},
-			add(text = '', time = Math.ceil(Math.floor(Math.random() * (this.maxTime - this.minTime + 1) + this.minTime))) {
+			getTop() {
+				var top = Math.ceil(Math.random() * (this.maxTop - this.minTop + 1) + this.minTop);
+				return top;
+			},
+			add(item = {}, time = Math.ceil(Math.floor(Math.random() * (this.maxTime - this.minTime + 1) + this.minTime))) {
+				var text = item.content;
 				this.items.push({
 					text,
 					time,
-					top: Math.ceil(Math.random() * (this.maxTop - this.minTop + 1) + this.minTop),
+					top: this.getTop(),
 					color: this.getRandomColor(),
 					display: 1,
 				});
@@ -82,9 +88,12 @@
 						clearInterval(cycle);
 						setTimeout(() => {
 							this.$emit("end", {});
-						}, time * 1000)
+						}, time * 100)
 					}
-				}, 500)
+				}, 1000)
+			},
+			stop() {
+				//cycle && (clearInterval(cycle));
 			}
 		}
 	}
@@ -99,12 +108,16 @@
 		-webkit-animation-timing-function: linear;
 		animation-fill-mode: forwards;
 	}
+	.aoff {
+		position: absolute;
+		white-space: nowrap;
+	}
 
 	.l-barrage {
 		position: relative;
 		z-index: 3;
 		width: 100%;
-		height: 320upx;
+		height: 100%;
 		overflow: hidden;
 	}
 

pages/dream/index.vue

@@ -15,7 +15,7 @@
 					<view class="button primary big" :style="fetch.button.color" v-if="fetch.button.name && fetch.button.name[0]" @click="goView">{{fetch.button.name[0]}}</view>
 					<block v-if="fetch.button.name && fetch.button.name[1]">
 						<text class="spliter"></text>
-						<view class="button primary big" :style="fetch.button.color">{{fetch.button.name[1]}}</view>
+						<view class="button primary big" :style="fetch.button.color" @click="goRanking">{{fetch.button.name[1]}}</view>
 					</block>
 				</view>
 				<view class='dots'>
@@ -24,12 +24,17 @@
 			</view>
 			<view v-if="buyState">
 				<buy :id="id" :bgcolor="fetch.button.bgcolor" :color="fetch.button.color" @hideBuy="hideBuy" @view="view"></buy>
+			</view>
+			
+			<view v-if="rankingState">
+				<ranking :id="id" :bgcolor="fetch.button.bgcolor" :color="fetch.button.color" @hideRanking="hideRanking"></ranking>
 			</view>
 		</view>
 	</gracePage>
 </template>
 <script>
-import buy from "@/pages/dream/buy.vue";
+import buy from "@/pages/dream/buy.vue";
+import ranking from "@/pages/dream/ranking.vue";
 export default{
 	data() {
 		return {
@@ -44,7 +49,8 @@ export default{
 				info : {},
 				button : {}
 			},
-			buyState : false,
+			buyState : false,
+			rankingState : false,
 		}
 	},
 	onLoad(option) {
@@ -75,10 +81,16 @@ export default{
 		},
 		hideBuy : function() {
 			this.buyState = false;
+		},
+		hideRanking : function() {
+			this.rankingState = false;
+		},
+		goRanking : function() {
+			this.rankingState = true;
 		}
 	},
 	components:{
-		buy
+		buy,ranking
 	}
 }
 </script>

pages/dream/ranking.vue

@@ -1,37 +1,65 @@
 <template name="ranking">
-	<view class="container">
-	  <view class="description" wx:if="{{active.status == 1}}">
-	    <rich-text class="p" :nodes="fetch.info.buy_content"></rich-text>
-	  </view>
-	  <view class="score-cont" >
-	    <view class="tip {{active.status == 1?"":"noborder"}}">
-	      <text class="ico-refresh"></text>本排行榜每10分钟刷新一次
-	    </view>
-	    <view class="top3" wx:if="{{top.length>2}}">
-	      <view>
-	        <view class="no2">
-	          <view class="avatar-wrap"><image src="{{top[1].avatar||"http://7.jstyle.cn/1/2019/03/04/6a61895768f1ece65734553a69a29457.png"}}"></image></view>
-	          <view class="name">{{top[1].username||""}}<text>{{top[1].score?top[1].score+"分":top[1].num+"本"}}</text></view>
-	        </view>
-	        <view class="no1">
-	          <view class="avatar-wrap"><image src="{{top[0].avatar||"http://7.jstyle.cn/1/2019/03/04/6a61895768f1ece65734553a69a29457.png"}}"></image></view>
-	          <view class="name">{{top[0].username||""}}<text>{{top[0].score?top[0].score+"分":top[0].num+"本"}}</text></view>
-	        </view>
-	        <view class="no3">
-	          <view class="avatar-wrap"><image src="{{top[2].avatar||"http://7.jstyle.cn/1/2019/03/04/6a61895768f1ece65734553a69a29457.png"}}"></image></view>
-	          <view class="name">{{top[2].username||""}}<text>{{top[2].score?top[2].score+"分":top[2].num+"本"}}</text></view>
-	        </view>
-	      </view>
-	    </view>
-	    <view class="scorelist" wx:if="{{top.length>2}}">
-	      <view class="scoreitem" wx:for="{{top}}" wx:if="{{index>2}}">
-	        <view class="avatar"><text class="order-num">{{index<3?"":(index+1)}}</text><image src="{{item.avatar||"http://7.jstyle.cn/1/2019/03/04/6a61895768f1ece65734553a69a29457.png"}}"></image><text class="name">{{item.username||""}}</text></view>
-	        <view class="score">{{item.score?item.score+"分":item.num+"本"}}</view>
-	      </view> 
-	
-	        <view class="loading" style="display:{{loading?"block":"none"}};"><text>加载中</text></view>
-	    </view>
-	  </view>
+	<view class="container" :class="show ?'slidein':''" @touchstart="Dever.slide" @touchend="end">
+		<scroll-view scroll-x class="bg-white nav">
+			<view class="flex text-center">
+				<view class="cu-item flex-sub" :class="k == index?'text-orange cur':''" v-for="(v, k) in fetch.ranking" :key="k" @click="select(k)">
+					{{v.name}}
+				</view>
+			</view>
+		</scroll-view>
+		<scroll-view scroll-y class="container_content">
+			<view class="description" v-if="fetch.ranking.length > 0">
+				<rich-text class="p" :nodes="fetch.ranking[index].desc"></rich-text>
+			</view>
+			<view class="score-cont" >
+				<view class="tip noborder">
+					<text class="ico-refresh"></text>
+					<picker @change="change" :value="periods_index" :range="ranking_periods">
+						<view class="picker">
+							左滑关闭，当前是{{periods_index>=0?ranking_periods[periods_index]:'左滑关闭，点此查看往期'}}
+						</view>
+					</picker>
+				</view>
+				<view class="top3" v-if="fetch.ranking_data.length > 2">
+					<view>
+						<view class="no2">
+							<view class="avatar-wrap">
+								<image :src="fetch.ranking_data[1].user.avatar"></image>
+							</view>
+							<view class="name">{{fetch.ranking_data[1].user.username}}
+								<text>{{fetch.ranking_data[1].num}}{{fetch.ranking[index].unit}}</text>
+							</view>
+						</view>
+						<view class="no1">
+							<view class="avatar-wrap">
+								<image :src="fetch.ranking_data[0].user.avatar"></image>
+							</view>
+							<view class="name">{{fetch.ranking_data[0].user.username}}
+								<text>{{fetch.ranking_data[0].num}}{{fetch.ranking[index].unit}}</text>
+							</view>
+						</view>
+						<view class="no3">
+							<view class="avatar-wrap">
+								<image :src="fetch.ranking_data[2].user.avatar"></image>
+							</view>
+							<view class="name">{{fetch.ranking_data[2].user.username}}
+								<text>{{fetch.ranking_data[2].num}}{{fetch.ranking[index].unit}}</text>
+							</view>
+						</view>
+					</view>
+				</view>
+				<view class="scorelist" v-if="fetch.ranking_data.length > 2">
+					<view class="scoreitem" v-for="(v, k) in fetch.ranking_data" :key="k" v-if="k > 2">
+						<view class="avatar">
+							<text class="order-num">{{k+1}}</text>
+							<image :src="v.user.avatar"></image>
+							<text class="name">{{v.user.username}}</text>
+						</view>
+						<view class="score">{{v.num}}{{fetch.ranking[index].unit}}</view>
+					</view> 
+				</view>
+			</view>
+		</scroll-view>
 	</view>
 </template>
 
@@ -46,13 +74,14 @@ export default {
 	data() {
 		return {
 			fetch : {
-				buy : [],
-				info : {},
+				ranking_periods : [],
+				ranking_data : [],
+				ranking : [],
 			},
+			periods_index : 0,
 			index : 0,
-			pay : false,
-			tip : false,
 			show : false,
+			ranking_periods : [],
 		}
 	},
 	mounted() {
@@ -61,27 +90,42 @@ export default {
 	methods:{
 		getData : function() {
 			var self = this;
-			this.Dever.get(this, 'app/collection/?l=api.getBuy', {id:this.id}, function(t) {
+			this.Dever.get(this, 'app/collection/?l=api.getRanking', {id:this.id,noloading:1}, function(t) {
+				if (t && t.ranking && t.ranking[self.index]) {
+					self.getRankingData(t.ranking[self.index].id, 0);
+				}
+			});
+		},
+		getRankingData : function(ranking_id, ranking_periods) {
+			var self = this;
+			this.fetch.ranking_data = [];
+			this.Dever.get(this, 'app/collection/?l=api.getRankingData', {id:this.id,ranking_id:ranking_id,ranking_periods:ranking_periods}, function(t) {
 				self.show = true;
+				if (t && t.ranking_periods) {
+					for (var i in t.ranking_periods) {
+						self.ranking_periods[i] = t.ranking_periods[i].name;
+					}
+				}
 			});
 		},
-		//购买
-		buy : function(index) {
+		select : function(index) {
 			this.index = index;
+			this.periods_index = 0;
+			this.getRankingData(this.fetch.ranking[this.index].id, 0);
 		},
-		//拉起支付
-		buyAct : function() {
-			this.Dever.alert('拉起支付');
-		},
-		showTip : function() {
-			this.tip = true;
+		hideRanking : function() {
+			this.show = false;
+			this.$emit('hideRanking');
 		},
-		hideTip : function() {
-			this.tip = false;
+		end : function(e) {
+			var type = this.Dever.slideEnd(e);
+			if (type == 3 || type == 4) {
+				this.hideRanking();
+			}
 		},
-		hideBuy : function() {
-			this.show = false;
-			this.$emit('hideBuy');
+		change : function(e) {
+			this.periods_index = e.detail.value;
+			this.getRankingData(this.fetch.ranking[this.index].id, this.fetch.ranking_periods[this.periods_index].id);
 		}
 	},
 	components:{
@@ -91,12 +135,58 @@ export default {
 </script>
 
 <style>
-.container {
+.container {
+  background: white;
   flex: 1;
   display: flex;
-  flex-direction: column;
+  flex-direction: column;
+  transform: translateY(100%);
+  transition-property: transform;
+  transition-duration: 0.3s;
+  transition-timing-function: ease-in;
 }
+.container.slidein{
+  transform: translateY(0);
+}
+.container_content {
+	height: 92%;
+}
+.btn-wrapper {
+  justify-content: space-around;
+  width: 100%;
+}
 
+.button {
+  height: 80rpx;
+  border: 1rpx solid #cc1619;
+  color: #cc1619;
+  font-size: 30rpx;
+  min-width: 300rpx;
+  border-radius: 40rpx;
+  text-align: center;
+  line-height: 80rpx;
+  display: block;
+  position: relative;
+}
+.button>button{
+  position: absolute;
+  width: 100%;
+  height: 100%;
+  left: 0;
+  top: 0;
+  opacity: 0;
+}
+
+.button.primary {
+  background-color: #000;
+  color: #fff;
+}
+
+.button.blk {
+  background-color: #000;
+  color: #fff;
+  border-color: #000;
+}
 .header .tit{
   font-size: 30rpx;
   line-height: 36rpx;
@@ -105,7 +195,8 @@ export default {
 }
 .description{
   width: 710rpx;
-  margin: 0 auto;
+  margin: 0 auto;
+  padding-top: 40rpx;
   padding-bottom: 40rpx;
 }
 .description image{

pages/dream/view.vue

@@ -102,7 +102,6 @@ export default{
 		this.id = option.id;
 		this.page_id = option.page_id;
 		this.index = option.index;
-		this.initDrawer();
 		this.getData();
 	},
 	// 重新加载
@@ -146,9 +145,16 @@ export default{
 			}
 		},
 		getData : function() {
-			var self = this;
-			this.Dever.get(this, 'app/collection/?l=api.getContent', {id:this.id, page_id:this.page_id}, function(t) {
-				self.getCate(t);
+			var self = this;
+			self.drawer.item = {};
+			this.Dever.get(this, 'app/collection/?l=api.getContent', {id:this.id, page_id:this.page_id}, function(t) {
+				if (t && t['func']) {
+					self.drawer.item = t['func'];
+					self.initDrawer();
+					if (t['func']['cate']) {
+						self.getCate(t);
+					}
+				}
 			});
 		},
 		getCate : function(info) {

pages/dream/view/cate.vue

@@ -66,10 +66,7 @@ export default {
 			type : String,
 			default : '100%'
 		},
-		param : {
-			type : Object,
-			value : null
-		},
+		param : {},
 		index : 0
 	},
 	data() {

pages/dream/view/comment.vue

@@ -4,30 +4,21 @@
 		  <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 class="living">
+			<view class="rich-wrapper">
+				<rich-text :nodes="content"></rich-text>
+			</view>
+			<view class="message" @touchstart="stop">
+				<y-Barrage ref="barrage" @end="reload" :minTime="minTime" :maxTime="maxTime"></y-Barrage>
 			</view>
-		  </scroll-view>
 		</view>
 	</view>
 </template>
 
-<script>
-export default {
-	name: "comment",
-	props: {
+<script>
+export default {
+	name: "comment",
+	props: {
 		type : {
 			type : String,
 			value : null
@@ -40,33 +31,62 @@ export default {
 			type    : String,
 			value	: null
 		},
-	},
-	data() {
+		content : {
+			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:{
-		
-	},
+			minTime : 5,
+			maxTime : 10,
+			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() {
+		this.getData();
+	},
+	methods:{
+		getData : function() {
+			var self = this;
+			this.Dever.get(this, 'app/community/?l=api.comment', {id:this.id,noloading:1}, function(t) {
+				self.$refs.barrage.start(t.info);
+			});
+		},
+		reload : function() {
+			this.getData();
+		},
+		stop : function() {
+			//this.$refs.barrage.stop();
+		}
+	},
 }
 </script>
 
-<style>
+<style>
+.rich-wrapper .p{
+  padding: 0;
+}
+.rich-wrapper image{
+  width: 100% !important;
+}
+.rich-wrapper .wxParse-p{
+  font-size: 30rpx;
+}
 .msgs-tabs{
   line-height: 88rpx;
   display: flex;
@@ -201,8 +221,8 @@ export default {
   left: 0;
   width: 100%;
   height: auto;
-}
-
+}
+
 .console{
   position: fixed;
   bottom:0;

pages/dream/view/community.vue

@@ -47,10 +47,7 @@ export default {
 			type : String,
 			default : '100%'
 		},
-		param : {
-			type : Object,
-			value : null
-		},
+		param : {},
 		index : 0
 	},
 	data() {

pages/dream/view/communityPush.vue

@@ -7,7 +7,7 @@
 					<text class="cuIcon-close text-red"></text>
 				</view>
 			</view>
-			<view class="padding-xl">
+			<view class="padding-xls">
 				<view class="publish-wrap bg-white">
 					<view class="input-box padding-sm">
 						<textarea class="area-top" placeholder="写点啥..." v-model="content"></textarea>
@@ -29,7 +29,7 @@
 				</view>
 			</view>
 			<view class="cu-bar bg-white">
-				<view class="action margin-0 flex-sub text-green" @tap="hideModal" v-if="is_upload">
+				<view class="action margin-0 flex-sub text-green" @tap="hideModal" v-if="is_upload" style="display: none;">
 					<text class="cuIcon-moneybag"></text>藏点钱
 				</view>