yicangzongtai_app_240321/pages/government/more-app.vue

<template>

	<view :class="[key === $keys.ZW_MOER_APPS ? 'zw-page' : 'sh-page']">
		<!-- keys.ZW_MOER_APPS / keys.SH_MOER_APPS -->
		<navbar :config="config" backColor="#999999"></navbar>
		<view class="page-search" :style="{'height':searchHeight+ 'px'}">
			<view class="search-box" @click="onSearch()">
				<view class="search-input">
					<text class="search-icon iconfont_yige">&#xe653;</text>
					<text>搜索应用</text>
				</view>
				<text class="search-text">搜索</text>
			</view>
		</view>
		<!-- :class="{'skeleton-box':skeletonLoading}" -->
		<view class="page-content" :class="{'skeleton-box':skeletonLoading}"
			:style="{'padding-top': cutHeight + 'rpx'}">
			<scroll-view class="page-left skeleton-fillet" :style="{'height':pageHeight+ 'px'}" scroll-y="true">
				<block v-for="(item,index) in ChannelDict">
					<view :class="['page-left-item zw-one-row' , activeIndex == index ? 'active-left-item' : '' ]"
						@click.stop="openTyle(index)">
						<text class="label-name skeleton-fillet">{{item.name}}</text>
					</view>
				</block>
			</scroll-view>
			<scroll-view :scroll-into-view="scrollIntoView" class="page-right" :class="{'skeleton-box':skeletonLoading}"
				:style="{'height':pageHeight+ 'px'}" scroll-y="true" @scroll="scrollService">
				<block v-for="(item,index) in ChannelDict">
					<view class="service" :id="`service_${index}`">
						<template v-if="item.thirdApplications && item.thirdApplications.length > 0">
							<view class="page-left-item">
								<zw-service-list :serviceObj='item' />
							</view>
						</template>
						<template v-if="item.childrenList && item.childrenList.length > 0">
							<block v-for="(citem,index) in item.childrenList">
								<template v-if="citem.thirdApplications && citem.thirdApplications.length > 0">
									<view class="page-left-item">
										<zw-service-list :serviceObj='citem' />
									</view>
								</template>
							</block>
						</template>
					</view>
				</block>
			</scroll-view>
		</view>

	</view>
</template>

<script>
	import {
		http
	} from '@/common/request';
	let app = getApp();
	let oldScrollNum = 0;
	import {
		getChannelDictCode
	} from "@/api/government.js"

	import {
		openSearch
	} from "./conmon.js"

	const setSkeleton = () => {
		let obj = {
			name: '',
			thirdApplications: []
		};
		for (let i = 1; i <= 12; i++) {
			obj.thirdApplications.push({
				thirdName: '',
				icon: ''
			})
		};
		return obj;
	}
	export default {
		data() {
			return {
				skeletonLoading: true,
				key: '',
				cutHeight: 10,
				defaultScrollTop: 0,
				scrollIntoView: '',
				activeIndex: 0,
				pageHeight: 0,
				searchHeight: 0,
				config: {
					back: true,
					title: '',
					color: 'black',
					backgroundColor: [1, '#fff'],
					statusBarFontColor: 'black'
				},
				ChannelDict: [],
				scrollStatus: true,
				RightTopArr: [],
				oldScrollNum: 0,
			}
		},
		onLoad(opt) {
			this.key = opt.key;
			this.config.title = opt.title || '更多应用'
			const {
				statusBarHeight,
				screenHeight,
				viewHeight,
				navHeight
			} = app.globalData;
			this.searchHeight = uni.upx2px(120);
			this.defaultScrollTop = statusBarHeight + navHeight + this.searchHeight;
			// 屏幕高度 - 状态栏高度 - 标题高度 - 搜索栏高度
			this.pageHeight = screenHeight - this.defaultScrollTop - uni.upx2px(this.cutHeight);

			// 初始化.添加骨架屏
			if (this.skeletonLoading) {
				for (let i = 1; i <= 1; i++) {
					this.ChannelDict.push(setSkeleton())
				};
			}
			this.getList(this.key)
		},
		created() {

		},
		methods: {
			onSearch() {
				openSearch()
			},
			getList(key) {
				try {
					getChannelDictCode(key).then(res => {
						setTimeout(() => {
							this.ChannelDict = res.data
							this.$nextTick(() => {
								this.getNodesInfo();
							})
							this.$forceUpdate()
						}, this.skeletonLoading ? this.$skeletonTime : 0);
					}).catch(err => {}).finally(() => {
						setTimeout(() => {
							this.skeletonLoading = false;
						}, this.skeletonLoading ? this.$skeletonTime : 0);
					})
				} catch (e) {}

			},
			openTyle(index) {
				this.scrollStatus = false;
				this.activeIndex = index
				this.scrollIntoView = `service_${index}`
				setTimeout(() => {
					this.scrollStatus = true;
				}, 200)
			},
			getNodesInfo() {
				new Promise(resolve => {
					let selectorQuery = uni.createSelectorQuery();
					// 获取节点的位置信息
					selectorQuery.selectAll('.service').boundingClientRect((rects) => {
						// 如果节点尚未生成，rects值为[](因为用selectAll，所以返回的是数组)，循环调用执行
						if (!rects.length) {
							setTimeout(() => {
								this.getNodesInfo();
							}, 10);
							return;
						}
						// 生成之后开始添加进去数组
						rects.forEach((rect) => {
							let tops = rect.top - rects[0]
								.top; // 这里减去rects[0].top，是因为第一项顶部不是贴到导航栏=>每一个商品距离顶部的高度，如果此页面顶部没有其他的view那就不用减去rects[0].top，自己视情况而定。
							this.RightTopArr.push({
								height: tops,
								id: rect.id
							});
							resolve();
						})
					}).exec()
				});
			},
			scrollService(event) {
				// ，event.detail = {scrollLeft, scrollTop, scrollHeight, scrollWidth, deltaX, deltaY}
				if (!this.scrollStatus) return
				const {
					scrollTop
				} = event.detail;
				let scrollNums = scrollTop;
				if (this.oldScrollNum > scrollTop) {
					scrollNums = scrollTop + 80;
				};
				try {
					this.RightTopArr.forEach((el, index) => {
						let data = this.RightTopArr[index];
						if (scrollNums >= data.height && index == this.RightTopArr.length - 1 ? true :
							scrollNums <
							this
							.RightTopArr[parseInt(index) + 1].height) {
							this.activeIndex = index
							// console.log('index', this.activeIndex)
							throw new Error()
						}
					})
				} catch (e) {
					//TODO handle the exception
				}

				this.oldScrollNum = scrollTop;


			}

		},
		watch: {

		}
	}
</script>
<style>
	page {
		background-color: #F5F5F5;
	}
</style>
<style lang="scss" scoped>
	.page-content {
		width: 100%;
		display: flex;
		justify-content: space-between;
		align-items: stretch;

		.page-left {
			flex-shrink: 0;
			padding: 0 10rpx 10rpx 0;
			box-sizing: border-box;
			width: 183rpx;
			border-right: 1rpx solid #f1f1f1;

			.page-left-item {
				width: 100%;
				text-align: center;
				height: 90rpx;
				line-height: 1.4;
				border-radius: 0px 20rpx 20rpx 0px;
				font-size: 24rpx;
				font-family: PingFang SC, PingFang SC-Regular;
				font-weight: 400;
				color: #808080;
				margin-bottom: 15rpx;
				display: flex;
				align-items: center;

				.label-name {
					display: inline-flex;
					align-items: center;
					justify-content: center;
					width: 100%;
					min-height: 50rpx;
				}
			}

			.active-left-item {
				background-color: #fff;
				position: relative;

				font-size: 24rpx;
				font-family: PingFang SC, PingFang SC-Bold;
				font-weight: 700;
				text-align: center;

				&::before {
					content: '';
					position: absolute;
					left: 0;
					top: 50%;
					transform: translateY(-50%);
					width: 8rpx;
					height: 40rpx;
					border-radius: 0 8rpx 8rpx 0;
				}
			}
		}

		.page-right {
			flex: 1;
			background-color: #fff;
			border-radius: 30rpx 0px 0px 0px;

			// .page-left-item {
			// 	padding: 0 30rpx;
			// }
		}
	}

	.page-search {
		width: 100%;
		background-color: #fff;
		display: inline-flex;
		justify-content: center;
		align-items: center;

		.search-box {
			width: 690rpx;
			height: 80rpx;
			background-color: #F3F2F2;
			border-radius: 40rpx;
			display: flex;
			justify-content: space-between;
			align-items: center;
			color: #787878;

			.search-input {
				width: calc(100% - 134rpx);
				padding: 0 30rpx;
				display: flex;
				align-items: center;

				.search-icon {
					font-size: 34rpx;
					color: #333333;
				}

				text+text {
					font-size: 28rpx;
					font-family: PingFang SC, PingFang SC-Regular;
					font-weight: 400;
					color: #b3b3b3;
					letter-spacing: -0.56px;
					padding-left: 12rpx;
				}

			}

			.search-text {
				flex-shrink: 0;
				width: 134rpx;
				height: 100%;
				text-align: center;
				line-height: 80rpx;
				border-radius: 40px;
				font-size: 28rpx;
				font-family: PingFang SC, PingFang SC-Regular;
				font-weight: 400;
				color: #ffffff;
			}

		}
	}

	.zw-page {
		.page-search {
			.search-text {
				background: linear-gradient(90deg, #46c8d5, #3cb7d2);
			}
		}

		.page-content {
			.page-left {
				.active-left-item {
					color: #3db8d2;

					&::before {
						background: linear-gradient(180deg, #45c7d5, #3db9d3);
					}
				}
			}

		}
	}

	.sh-page {
		.page-search {
			.search-text {
				background: linear-gradient(90deg, #feba74, #fa6037);
			}
		}

		.page-content {
			.page-left {
				.active-left-item {
					color: #FA6037;

					&::before {
						background: linear-gradient(180deg, #fdb872, #fa6037);
					}
				}
			}
		}
	}
</style>