dreamland/pages/dream/func/community.vue

<template name="community">
	<view class="home">
		<view class="card-bottom">
			<!-- 顶部分页栏 -->
			<view class="top-tab" :style="{width:width}">
				<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" :key="v.server_time"/>
				</view>
				<graceLoading :loadingType="loadingType"></graceLoading>
			</view>
			<!-- 右下角按钮 -->
			<y-Fab :bottom="20" :right="20" @click="showModal" v-if="button_show"/>
		</view>
		
		<view v-if="show">
			<publish :title="title" :is_upload="true" @hideModal="hideModal" @getRefresh="getRefresh" :cate_id="cate_id" :type="type" :type_id="type_id"></publish>
		</view>
	</view>
</template>

<script>
import publish from '@/lib/dever/components/publish.vue';
export default {
	name: "community",
	props: {
		content_id : {
			type : String,
			value : null
		},
		width : {
			type : String,
			default : '100%'
		},
		code : {
			type : String,
			default : ''
		},
		param : {},
		index : 0
	},
	data() {
		return {
			title : '发表新话题',
			show : false,
			button_show : true,
			fetch : {
				cate : [],
				info : [],
			},
			cate_id : 0,
			activeTab: 0,
			loadingType: 3,
		};
	},
	mounted() {
		this.type = this.param['type'];
		this.type_id = this.param['type_id'] ? this.param['type_id'] : this.content_id;
		this.getData();
	},
	methods:{
		getRefresh : function(cate_id, type, type_id, content) {
			this.getInfo(cate_id, 1);
		},
		getData : function() {
			var self = this;
			this.Dever.get(this, 'app/community/?l=api.category', {code:this.code, 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;
			if (!cate_id) {
				cate_id = self.cate_id;
			}
			if(page != 1 && self.loadingType != 3){return ;}
			self.loadingType = 1;
			self.cate_id = cate_id;
			this.Dever.page([page, 'info'], this, 'app/community/?l=api.info', {cate_id:cate_id, type:this.type, type_id:this.type_id,noloading:1}, function(t) {
				if (self.Dever.pageData.status == 1) {
					self.loadingType = 3;
				} else {
					self.loadingType = 2;
				}
				if (page == 1 && !self.Dever.pageData.total) {
					self.fetch.info = [];
				}
				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:{
		publish
	}
}
</script>

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

view {
	box-sizing: border-box;
}
.scroll-wrapper {
	width:100%;
}

.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: 0rpx;
	background-color: #ddd;
	border: 1px solid #bababa;
	box-shadow: 2px 2px 10px #bababa;
}
.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;
			left: 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>