dreamland/pages/dream/view/community.vue

<template name="community">
	<view class="home">
		<view class="card-bottom">
			<!-- 顶部分页栏 -->
			<view class="top-tab">
				<view :class="['tab-item flex-center', activeTab == k ? 'active' : '']" @tap="handleTab(k)" v-for="(v, k) in fetch.cate" :key="k">{{ v.name }}</view>
			</view>
			<view class="scroll-wrapper">
				<view class="margin-bottom" v-for="(v, k) in fetch.info" :key="k">
					<y-DiaryItem :item="v" :cate_id="cate_id"/>
				</view>
				<y-LoadMore :status="loadMoreStatus" />
			</view>
			<!-- 右下角按钮 -->
			<y-Fab :bottom="140" :right="40" @click="showModal" v-if="button_show"/>
		</view>
		
		<view v-if="show">
			<communityPush :title="title" :is_upload="true" @hideModal="hideModal" @getRefresh="getRefresh" :cate_id="cate_id" :type="type" :type_id="type_id"></communityPush>
		</view>
	</view>
</template>

<script>
import communityPush from "@/pages/dream/view/communityPush";
export default {
	name: "community",
	props: {
		info_id : {
			type : String,
			value : null
		},
		content_id : {
			type : String,
			value : null
		},
		page_id : {
			type : String,
			value : null
		},
		parent_page_id : {
			type : String,
			value : null
		},
		type : {
			type : Number,
			value : null
		},
		type_id : {
			type : String,
			value : null
		},
		index : 0
	},
	data() {
		return {
			title : '发表新话题',
			show : false,
			button_show : true,
			fetch : {
				cate : [],
				info : [],
			},
			cate_id : 0,
			activeTab: 0,
			loadMoreStatus: 1,
		};
	},
	created() {
		this.getData();
	},
	onReachBottom() {
		
	},
	methods:{
		getRefresh : function(cate_id, type, type_id) {
			this.getInfo(cate_id, 1);
		},
		getData : function() {
			var self = this;
			this.Dever.get(this, 'app/community/?l=api.category', {info_id:this.info_id, page_id:this.page_id, content_id:this.content_id,noloading:1}, function(t) {
				if (t && t.cate.length > 0 && t.cate[self.activeTab]) {
					self.getInfo(t.cate[self.activeTab].id, 1);
				}
			});
		},
		getInfo : function(cate_id, page) {
			var self = this;
			self.cate_id = cate_id;
			this.Dever.get(this, 'app/community/?l=api.info', {cate_id:cate_id, type:this.type, type_id:this.type_id}, function(t) {
				if (t && t.info.length > 0) {
					self.loadMoreStatus = 2;
				} else {
					self.loadMoreStatus = 3;
				}
				self.hideModal();
			});
		},
		handleTab : function(index) {
			if (this.activeTab == index) {
				return;
			}
			this.activeTab = index;
			this.getInfo(this.fetch.cate[this.activeTab].id, 1);
		},
		showModal : function () {
			this.show = true;
			this.button_show = false;
		},
		hideModal : function () {
			this.show = false;
			this.button_show = true;
		}
	},
	components:{
		communityPush
	}
}
</script>

<style lang="less" scoped>
page {
	--mainColor: #435257;
	--activeColor: #36b39b;
}

view {
	box-sizing: border-box;
}

.flex-center {
	display: flex;
	align-items: center;
	justify-content: center;
}

.mainColor {
	color: var(--mainColor);
}

.aColor {
	color: var(--activeColor);
}

.color-nine{
	color: #999999;
}

.main-btn {
	border-radius: 40upx;
	display: flex;
	align-items: center;
	justify-content: center;
	color: var(--mainColor);
	border: 1upx solid var(--mainColor);
	padding: 10rpx 40rpx;
}

.active-btn {
	color: #FFFFFF !important;
	background-color: var(--activeColor) !important;
	border: 1upx solid var(--activeColor) !important;
}

/* 点赞和评论 */
.margin-bottom {
	padding-bottom: 14px;
	background-color: #ddd;
}
.home {
	padding-top: 120rpx;

	.top-barrage {
		width: 100%;
		height: 320rpx;
		overflow: hidden;
	}

	.card-bottom {
		width: 100%;

		.top-tab {
			display: flex;
			height: 120rpx;
			position: fixed;
			top: 0;
			width: 100%;
			z-index: 100;
			background-color: #ffffff;

			.tab-item {
				flex: 1;
				color: #999;
				border-bottom: 4rpx solid #ececec;
			}

			.active {
				color: var(--mainColor);
				border-bottom: 4rpx solid var(--mainColor);
			}
		}
	}
}
</style>