yicangzongtai_app_240321/pages/government/discovery.vue

<template>
	<view class="">
		<navbar :config="config" backColor="#999999"></navbar>
		<view class="tabs-box" :style="{'top':navHeight + 'px' , 'height':tabsHeight+'rpx','paddingBottom':'30rpx'}">
			<!-- <view class="tab-item" v-for="item in tabs" @click.stop="onChange(item)">
				{{ item}}
			</view> -->
			<u-tabs style="width: 100%;" :list="tabs" active-color="#3CBACF" bg-color="transparent" height="80"
				is-scroll :current="tabIndex" @change="onChange"></u-tabs>
		</view>
		<view class="" :style="{'width':'100%', 'height': tabsHeight + 'rpx' }" />

		<view class="fx-kong-kim" v-if="tabIndex === 0 && KongKim && KongKim.length > 0">
			<block v-for="(item , index) in KongKim">
				<view class="kong-kim" :style="{backgroundImage: `url(${item.icon})` }" :key="`fx_KongKim_${index}`"
					@click.stop=" $openPage(item)">
					{{item.name}}
				</view>
			</block>
		</view>

		<view class="card-box">
			<!-- <zw-waterfall :list="tabs[0].list || []"></zw-waterfall> -->
			<template v-if="tabs && tabs.length > 0">
				<block v-for="(t , i ) in tabs">
					<u-waterfall v-show="tabIndex === i" v-model="tabs[i].list">
						<template v-slot:left="{leftList}">
							<view class="card-left-item" v-for="(item, index) in leftList" :key="`left_${index}`">
								<discovery :data-val="item" />
							</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" />
							</view>
						</template>
					</u-waterfall>
				</block>
			</template>
		</view>
		<loadMore v-if="tabs[tabIndex].list.length > 0 || tabs[tabIndex].loadingStatus === 'loading' "
			:status="tabs[tabIndex].loadingStatus">
		</loadMore>

		<view class="empty-data"
			v-if="(!tabs[tabIndex].list || tabs[tabIndex].list.length===0) && tabs[tabIndex].loadingStatus=== 'noMore' ">
			<EmptyDate />
		</view>
	</view>
</template>

<script>
	import {
		getAPPList,
		getDiscover,
		newsClassify,
		getInformationFindPage
	} from "@/api/government.js";
	let app = getApp();
	export default {
		data() {
			return {
				tabsHeight: 100,
				config: {
					back: false,
					title: '发现',
					color: 'black',
					backgroundColor: [1, '#fff'],
					statusBarFontColor: 'black'
				},
				tabs: [{
					list: []
				}],
				KongKim: [],
				allLoading: false,
				tabIndex: 0,
				dataList: [],
				pageSize: 10,
				waterfallKey: 1
			}
		},
		onLoad() {
			const {
				statusBarHeight,
				navHeight
			} = app.globalData;
			this.navHeight = statusBarHeight + navHeight + 'px';
			// let data = uni.getStorageSync('discoveryPage');
			// if (data) {
			// 	this.tabs[0].list = data.rows
			// }
			this.init()
		},
		onShow() {

		},
		onReachBottom() {
			if (this.tabs[this.tabIndex].loadingStatus === "more") {
				this.getPage(this.tabIndex);
			}
		},
		onPullDownRefresh() {
			this.init();
		},
		methods: {
			setKeys() {
				return new Date().getTime() + Math.random();
			},
			init(tag) {
				this.pageNum = 0;
				this.tabs = [{
					name: '推荐',
					list: this.tabs[0].list,
					pageNum: 0,
					key: this.setKeys(),
					loadingStatus: '', //more|loading|noMore
				}];
				this.tabIndex = 0;
				this.getKongKim();
				this.getLabel(tag)
			},
			getKongKim() {
				getAPPList(this.$keys.FX_KONGKIM).then(res => {
					this.KongKim = res.data || []
				}).catch(() => {})

			},
			getLabel(tag) {
				newsClassify({
					informationChannel: this.$keys.information_discover
				}).then(res => {
					const data = res.data || [];
					const tabs = data.map((el, index) => {
						el.name = el.informationTypeName;
						el.list = index == 0 ? this.tabs[0].list : [];
						el.pageNum = 0;
						el.loadingStatus = '';
						el.key = this.setKeys()
						return el;
					});
					this.tabs = this.tabs.concat(tabs);
					this.tabs.forEach((el, index) => {
						this.getPage(index)
					})
				})
			},
			getPage(tabIndex) {
				if (this.tabs[tabIndex].pageNum <= 0) {
					this.tabs[tabIndex].pageNum = 0;
					// this.tabs[tabIndex].list = [];
					this.tabs[tabIndex].loadingStatus = '';
				}
				if (this.tabs[tabIndex].loadingStatus === 'noMore' || this.tabs[tabIndex].loadingStatus === 'loading') {
					return
				};
				this.allLoading = true;
				this.$nextTick(() => {
					this.tabs[tabIndex].loadingStatus = 'loading';
					this.tabs[tabIndex].pageNum++;
					const parms = {
						pageNum: this.tabs[tabIndex].pageNum,
						pageSize: this.pageSize
					}
					if (this.tabs[tabIndex].hasOwnProperty('informationTypeId')) {
						parms.informationTypeId = this.tabs[tabIndex].informationTypeId
					}
					setTimeout(() => {
						getInformationFindPage(parms).then(res => {
							try {
								if (res.code === 200) {
									if (this.tabs[tabIndex].pageNum <= 0) {
										this.tabs[tabIndex].list = [];
									}
									const arr = this.tabs[tabIndex].list.concat(res.rows || []);
									this.$set(this.tabs[tabIndex], 'list', arr)
								};
							} catch (e) {}

							this.$forceUpdate()
							this.tabs[tabIndex].loadingStatus = this.$mUtil.pagination(res.total,
								this.tabs[tabIndex].pageNum, this.pageSize)
						}).catch(err => {
							this.tabs[tabIndex].pageNum--;
							this.tabs[tabIndex].loadingStatus = 'noMore';
						}).finally(() => {
							// this.status = 'noMore'
							this.allLoading = false;
							uni.stopPullDownRefresh();
						})
					}, 500)
				})
			},
			onChange(e) {
				this.tabIndex = e;
				if (this.tabs[e].pageNum >= 1) return;
				this.getPage(this.tabIndex);
			}
		}
	}
</script>
<style>
	page {
		background-color: #F9F9F9;
		padding-bottom: 30rpx;
	}
</style>
<style lang="scss" scoped>
	.tabs-box {
		width: 100%;
		position: fixed;
		left: 0;
		right: 0;
		z-index: 1;
		display: flex;
		flex-direction: row;
		// padding: 0 30rpx;
		background-color: #F9F9F9;

		.tab-item {
			// width: 104rpx;
			padding: 0 22rpx;
			height: 100%;
			display: flex;
			align-items: center;
			font-size: 36rpx;
			margin-left: 40rpx;
			font-size: 30rpx;
			font-family: Microsoft YaHei, Microsoft YaHei-Regular;
			font-weight: 400;
			color: #999999;

			&:first-child {
				margin-left: 0;
				position: relative;
				color: #3CBACF;
				font-family: Microsoft YaHei, Microsoft YaHei-Bold;
				font-weight: 700;

				&::before {
					content: '';
					position: absolute;
					left: 50%;
					transform: translateX(-50%);
					bottom: 0;
					right: 0;
					width: 50%;
					height: 6rpx;
					border-radius: 3rpx;
					background-color: #3CBACF;
				}
			}
		}
	}

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

	}



	.fx-kong-kim {
		width: 100%;
		display: flex;
		align-items: stretch;
		flex-wrap: wrap;
		padding: 20rpx;

		.kong-kim {
			flex-shrink: 0;
			width: calc((100% - 40rpx) / 3);
			height: 106rpx;
			background-repeat: no-repeat;
			background-size: 100% 100%;
			margin: 0 20rpx 10rpx 0;
			display: flex;
			justify-content: center;
			align-items: center;

			&:nth-child(3n) {
				margin-right: 0;
			}
		}
	}
</style>