dreamland/pages/dream/view/comment.vue

<template name="comment">
	<view>
		<view class="msgs-tabs">
		  <view class="tit">{{item.name}}</view>
		  <view class="num" style="display: none;">全部（{{fetch.total}}）</view>
		</view>
		<view class="living grace-body">
			<view class="rich-wrapper">
				<dever-content :item="item.content_array" :pics="item.content_pic"></dever-content>
			</view>
			<view class="message" @touchstart="stop">
				<y-Barrage ref="barrage" @end="reload" :minTime="minTime" :maxTime="maxTime"></y-Barrage>
			</view>
		</view>
		<y-Fab :bottom="20" :right="140" @click="showModal" bgColor="#0fa5e5" text="发布"></y-Fab>
		<view v-if="show">
			<publish :title="title" :is_upload="false" @hideModal="hideModal" @getRefresh="getRefresh" :type="type" :type_id="type_id" :api="api"></publish>
		</view>
	</view>
</template>

<script>
import publish from '@/lib/dever/components/publish.vue';
import deverContent from '@/lib/dever/components/content.vue';
export default {
	name: "comment",
	props: {
		type : {
			type : String,
			value : null
		},
		type_id : {
			type : String,
			value : null
		},
		item : {
			type    : Object,
			value	: null
		},
	},
	data() {
		return {
			api : 'app/community/?l=api.addComment',
			title : '发表新评论',
			minTime : 5,
			maxTime : 10,
			show : false,
			fetch : {
				info : [],
			},
			page : 1,
			load : true,
			info : [],
			seconds : 0,
		}
	},
	mounted() {
		this.page = 1;
		this.getData();
	},
	methods:{
		getData : function() {
			var self = this;
			if (!self.load) {
				self.$refs.barrage.start(self.info);
				return;
			}
			this.Dever.get(this, 'app/community/?l=api.comment', {noloading:1,page:this.page,type:this.type,type_id:this.type_id,noconcat:1}, function(t) {
				if (t && t.info && t.info.length > 0) {
					self.info = self.info.concat(t.info);
					if (self.page == 1) {
						self.$refs.barrage.start(t.info);
					} else {
						for (var i in t.info) {
							self.$refs.barrage.add(t.info[i]);
						}
					}
					self.page++;
				} else {
					self.load = false;
					self.reload();
				}
			}, function(e) {
				self.load = false;
				self.reload();
			});
		},
		reload : function() {
			this.getData();
		},
		stop : function() {
			//this.$refs.barrage.stop();
		},
		showModal : function() {
			this.show = true;
		},
		hideModal : function() {
			this.show = false;
		},
		getRefresh : function(cate_id, type, type_id, content) {
			var item = {};
			item.content = content;
			this.info.push(item);
			this.$refs.barrage.add(item);
			this.hideModal();
		}
	},
	components:{
		publish,deverContent
	}
}
</script>

<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;
  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 .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;
}
.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;
}
</style>