renshou/office/community/community.vue

<template>
	<view>
		<view class="nav">
			<scroll-view scroll-x="true"  class="navs">
				<view :class="'li' + (currentTab == index ? ' active' : '')" v-for="(item,index) in cateList" :key="index" @click="tabClick(item.id,index)">{{item.name}}</view>
			</scroll-view>
		</view>
		<view style="height: 80rpx;"></view>
		<view class="list" v-if="contentList && contentList.length > 0">
			<navigator :url="'/topic/content/content?id=' + item.id" hover-class="none" class="li ddflex" v-for="(item,index) in contentList" :key="index">
				<view class="fflex">
					<view class="title tovers">{{item.title}}</view>
					<view class="sta">
						<text v-if="item.authorName">{{item.authorName}}</text>
						<text>{{item.browse}}人浏览</text>
					</view>
				</view>
				<image :src="item.pic" mode="aspectFill"></image>
			</navigator>
		</view>
		<view class="nodata" v-else>
			<image :src="picUrlss + 'empty_dd.png'"></image>
			<text>暂无记录~</text>
		</view>
	</view>
</template>

<script>
const app = getApp();
const req = require('../../utils/request.js');
const util = require('../../utils/util.js');
export default {
	data() {
		return {
			picUrlss: req.public.picUrls,
			currentTab: 0,
			cateList: [],
			cid: '',
			form: {
				page: 1,
				limit: 10
			},
			contentList: [],
			isLoad: true
		};
	},
	onLoad() {
		this.getCateList();
	},
	onReachBottom() {
		this.form.page++;
		this.getContentList(this.cid);
	},
	methods: {
		tabClick(id,index){
			if(this.currentTab == index) return false;
			this.currentTab = index;
			this.cid = id;
			this.form.page = 1;
			this.isLoad = true;
			this.getContentList(id);
		},
		getCateList() {
			req.getRequest('/api/v2/category/list',{},res => {
				this.cateList = res;
				this.isShowUI = true;
				this.cid = res[0].id;
				this.getContentList(res[0].id);
			},false);
		},
		//文章列表
		getContentList(id) {
			if(!this.isLoad) return false;
			this.isLoad = false;
			let form = this.form;
			form.cid = id;
			if(this.form.page == 1){
				uni.showLoading();
			}
			req.getRequest('/api/content/list', form, res => {
				if(res && res.length == this.form.limit) this.isLoad = true;
				if(this.form.page > 1) res = this.contentList.concat(res);
				this.contentList = res;
				uni.hideLoading();
				req.removeStorage('category');
			});
		},
	}
};
</script>

<style>
	@import "./community.css";
</style>