yicangzongtai_app_240321/pages/government/collect.vue

<template>
	<view class="">
		<navbar :config="config" backColor="#999999"></navbar>

		<view class="content-box">
			<view class="card-box">
				<!-- <block v-for="item in dataList">
					<discovery :data-val="item" idName="collectSourceId" />
				</block> -->
				<u-waterfall v-model="dataList">
					<template v-slot:left="{leftList}">
						<view class="card-left-item" v-for="(item, index) in leftList" :key="`left_${index}`">
							<discovery :data-val="item" idName="collectSourceId"/>
						</view>
					</template>
					<template v-slot:right="{rightList}">
						<view class="card-right-item" v-for="(item, index) in rightList" :key="`right_${index}`">
							<discovery :data-val="item" idName="collectSourceId" />
						</view>
					</template>
				</u-waterfall>
			</view>

			<loadMore v-if="dataList.length > 0 || loadingStatus === 'loading' " :status="loadingStatus">
			</loadMore>
			<view class="empty-data" v-if="(!dataList || dataList.length===0) && loadingStatus=== 'noMore' ">
				<EmptyDate />
			</view>
		</view>
	</view>
</template>

<script>
	import Mixin from "./Mixin.js"
	import {
		getUserCollectList
	} from "@/api/government.js"
	export default {
		mixins: [Mixin],
		data() {
			return {
				config: {
					back: true,
					title: '收藏',
					color: 'black',
					backgroundColor: [1, '#fff'],
					statusBarFontColor: 'black'
				}, 
				dataList: [],
				pageNum: 0,
				pageSize: 10,
				loadingStatus: ''
			}
		},
		onLoad() {
			this.init();
		},
		onReachBottom() {
			if (this.loadingStatus === "more") {
				this.getUserCollect();
			}
		},
		onPullDownRefresh() {
			this.init();
		},
		methods: {
			init() {
				this.dataList = [];
				this.pageNum = 0;
				this.pageSize = 10;
				this.loadingStatus = '';
				this.getUserCollect();
			},
			getUserCollect() {
				if (this.loadingStatus === 'noMore' || this.loadingStatus === 'loading') return
				this.loadingStatus = 'loading';
				this.pageNum++;
				getUserCollectList({
					pageNum: this.pageNum,
					pageSize: this.pageSize,
					collectType: 0
				}).then(res => {
					if (res.code === 200) {
						this.dataList = this.dataList.concat(res.rows || []);
					};
					this.setLoadingStatus(this.$mUtil.pagination(res.total, this.pageNum, this.pageSize))
				}).catch(err => {
					this.setLoadingStatus("noMore")
				})
			},
			setLoadingStatus(status) {
				setTimeout(() => {
					this.loadingStatus = status
				}, 300)
			}
		}
	}
</script>
<style>
	page {
		background-color: #F9F9F9;
	}
</style>
<style lang="scss" scoped>
	.content-box {
		// padding: 30rpx;

		.card-box {
			padding: 0 20rpx;
			/deep/ .u-column{
				width: 50%;
			}
			// display: flex;
			// flex-direction: row;
			// justify-content: space-between;
			// align-items: stretch;
			// flex-wrap: wrap;
			.card-left-item {
				padding-right: 10rpx;
			}
			
			.card-right-item {
				padding-left: 10rpx;
			}
		}

		.empty-data {
			padding-top: 80rpx;
		}
	}
</style>