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'}">
			<u-tabs :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="scroll-content-box" :style="{'height': scrollHeight + 'px'}">
			<view class="scroll-content-val" :style="{'left': -(tabIndex * screenWidth)  + 'px' }">
				<block v-for="(t , i ) in tabs">
					<scroll-view class="scroll-content" scroll-y="true"   :style="{'width':screenWidth+'px'}"
						@scrolltolower="onScrolltolower()">
						<view class="card-box">
							<u-waterfall 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>
						</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>
					</scroll-view>
				</block>
			</view>
		</view>

		<!-- <view class="card-box"> 
			<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>
		</view> -->

	</view>
</template>

<script>
	import {
		getAPPList,
		getDiscover,
		newsClassify,
		getInformationFindPage
	} from "@/api/government.js";
	let app = getApp();
	export default {
		data() {
			return {
				tabsHeight: 100,
				scrollHeight: 0,
				screenWidth: 0,
				config: {
					back: false,
					title: '发现',
					color: 'black',
					backgroundColor: [1, '#fff'],
					statusBarFontColor: 'black'
				},
				tabs: [{
					list: []
				}],
				KongKim: [],
				allLoading: false,
				tabIndex: 0,
				dataList: [],
				pageSize: 10,
				waterfallKey: 1
			}
		},
		onLoad() {
			// uni.navigateTo({
			// 	url:"/pages/web-view/Apps"
			// })
			const {
				statusBarHeight,
				navHeight,
				screenHeight,
				screenWidth
			} = app.globalData;
			this.navHeight = statusBarHeight + navHeight + 'px';
			this.screenWidth = screenWidth;
			this.scrollHeight = screenHeight - statusBarHeight + navHeight - uni.upx2px(this.tabsHeight);
			this.init()
		},
		// onReachBottom() {
		// 	if (this.tabs[this.tabIndex].loadingStatus === "more") {
		// 		this.getPage(this.tabIndex);
		// 	}
		// },
		onPullDownRefresh() {
			this.init();
		},
		methods: {
			onScrolltolower() {
				if (this.tabs[this.tabIndex].loadingStatus === "more") {
					this.getPage(this.tabIndex);
				}
			},
			setKeys() {
				return new Date().getTime() + Math.random();
			},
			init() {
				this.pageNum = 0;
				this.tabs = [{
					name: '推荐',
					list: [],
					pageNum: 0,
					key: this.setKeys(),
					loadingStatus: '', //more|loading|noMore
				}];
				this.tabIndex = 0;
				this.getKongKim();
				this.getLabel()
			},
			getKongKim() {
				getAPPList(this.$keys.FX_KONGKIM).then(res => {
					console.log('res.data = ', res.data)
					this.KongKim = res.data || []
				}).catch(() => {})

			},
			getLabel() {
				newsClassify({
					informationChannel: this.$keys.information_discover
				}).then(res => {
					const data = res.data || [];
					const tabs = data.map((el, index) => {
						el.name = el.informationTypeName;
						el.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) {
									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>
	.scroll-content-box {
		width: 100%;
		position: relative;

		.scroll-content-val {
			position: absolute;
			top: 0;
			height: 100%;
			display: flex;
			flex-direction: row;
			// transition: left .4s;
		}

		.scroll-content {
			flex-shrink: 0;
			height: 100%;
			// position: relative;

			// .scroll-content-item {
			// 	width: 100%;
			// 	height: 50%;
			// 	position: absolute;

			// }
		}
	}



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

		.u-waterfall {
			/deep/ .u-column {
				
				flex-shrink: 0;
				width: 50%;
				.service-img{
					width: 100%;
				}
			}
		}

		// 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>