H5/pages/map/model/siteServeH6.vue

<template>
	<view class="serve-content" :style="{'height':height  +'px' }">
		<view class="serve-title">可办事项</view>
		<view class="serve-search">
			<view class="search-input" >
				<svg t="1733904658291" class="search-icon" viewBox="0 0 1024 1024" version="1.1"
					xmlns="http://www.w3.org/2000/svg" p-id="5981" xmlns:xlink="http://www.w3.org/1999/xlink">
					<path
						d="M174.545 465.455c0-18.619 16.291-34.91 34.91-34.91s34.909 16.291 34.909 34.91c0 121.018 100.072 221.09 221.09 221.09 18.619 0 34.91 16.291 34.91 34.91s-16.291 34.909-34.91 34.909c-160.581 0-290.909-130.328-290.909-290.91z m290.91 360.727c200.145 0 360.727-160.582 360.727-360.727S665.6 104.727 465.455 104.727 104.727 265.31 104.727 465.455 265.31 826.182 465.455 826.182z m323.49-76.8L961.164 921.6c13.963 13.964 13.963 34.91 0 48.873-13.964 13.963-34.91 13.963-48.873 0L737.745 795.927c-74.472 60.51-169.89 97.746-272.29 97.746C228.073 896 34.909 702.836 34.909 465.455S228.073 34.909 465.455 34.909 896 228.073 896 465.455c0 109.381-39.564 209.454-107.055 283.927z"
						p-id="5982">
					</path>
				</svg>
				<input confirm-type="search" class="input" placeholder-class="placeholder"  ref="searchInputRef" :auto-blur="true" type="text"
					placeholder="搜索服务事项" v-model="matterName" @confirm="getMatterList" />
			</view>
			<view class="search-btn" @click.stop="getMatterList"> 搜 索 </view>
		</view>
		<view class="matter-loading" v-if="MatterListLoading">
			<u-loading-icon />
		</view>
		<view class="serve" :style="{'height':scrollH  +'px' , paddingTop:servePT + 'px' }" v-else-if="MatterList">
			<scroll-view class="scroll-lable" :style="{'height':scrollH +'px' }" scroll-y="true"
				:show-scrollbar="false">
				<template v-for="(value, key , index) in MatterList">
					<view :class="['lable one-row' , index === activeIndex ? 'active-lable' : '' ]"
						@click.stop="openTyle(index)">{{ key }}</view>
				</template>
			</scroll-view>
			<scroll-view class="scroll-val" :scroll-into-view="scrollIntoView" @scroll="scrollService"
				:style="{'height':scrollH  +'px' }" scroll-y="true" :show-scrollbar="false">
				<template v-for="(value, key , index) in MatterList">
					<view class="val-content" :id="`service_${index}`">
						<view class="val-name">{{key}}</view>
						<template v-for="(t_v, t_k , t_i) in (value || [])">
							<view class="val">
								<view :class="['val-label' , showKey === getShowKey(index  , t_i ) ? 'avtive-val-label' : '']" @click.stop="setShowKey(index  , t_i)">
									<text class="val-text one-row">{{ t_k }}</text>
									<template v-if="t_v && t_v.length">
										<svg t="1734508422065"
											class="val-icon"
											viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg"
											p-id="4279" xmlns:xlink="http://www.w3.org/1999/xlink">
											<path
												d="M492.675886 904.817574L885.696074 511.797385 492.675886 118.777197c-12.258185-12.258185-12.432147-32.892131 0.187265-45.51052 12.707416-12.707416 32.995485-12.703323 45.511543-0.187265l411.660734 411.660734c7.120165 7.120165 10.163477 17.065677 8.990768 26.624381 1.500167 9.755178-1.5104 20.010753-8.990768 27.491121L538.374694 950.515359c-12.258185 12.258185-32.892131 12.432147-45.511543-0.187265-12.707416-12.707416-12.703323-32.995485-0.187265-45.51052z"
												p-id="4280"></path>
										</svg>
									</template>
								</view>
								<!-- showKey -->
								<template v-if="showKey === getShowKey(index  , t_i )">
									<view class="project-box">
										<view class="val-item" v-for="item in (t_v || [])">
											{{item.name}}
										</view>
									</view>
								</template>
							</view>
						</template>
					</view>
				</template>
			</scroll-view>
		</view>
		<view v-else class="matter-loading">
			<u-empty mode="data" :iconSize="emptySize" text="暂无可办事项" />
		</view>
	</view>
</template>

<script>
	import { getMapMatterListH6_Api } from "@/api/map.js"
	export default {
		props: {
			height: {
				type: Number,
				default: 0
			},
			mapLocationId: {
				type: Number | String,
				default: null
			}
		},
		data() {
			return {
				showKey: '',
				scrollH: 0,
				matterName: '',
				MatterList: null,
				MatterListLoading: false,
				activeIndex: undefined,
				scrollIntoView: undefined,
				scrollStatus: true,
				oldScrollNum: 0,
				RightTopArr: [],
				servePT: uni.upx2px(20),
				emptySize: uni.upx2px(130)
			}
		},
		watch: {
			height: {
				handler(newH) {
					// 区域高度 - 标题高度 - 搜索区域高度
					this.scrollH = newH - uni.upx2px(80) - uni.upx2px(100) - this.servePT;
				},
				immediate: true
			},
			mapLocationId: {
				handler(newId) {
					this.getMatterList(newId)
				},
				immediate: true
			},
		},
		created() {

		},
		methods: {
			getShowKey(k_1, k_2) {
				return `${k_1}${k_2}`
			},
			setShowKey(index, t_i) {
				const k = this.getShowKey(index, t_i);
				if (!this.showKey || this.showKey !== k) {
					this.showKey = k;
				} else {
					this.showKey = ''
				};
			},
			getLabel(item) {
				console.log("getLabel = ", item)
				const label = Object.keys(item)[0];
				return label;
			},
			getMatterList() {
				this.MatterListLoading = true;
				const parmas = {
					mapLocationId: this.mapLocationId,
					matterName: this.matterName
				};
				getMapMatterListH6_Api(parmas).then(res => {
					const keys = Object.keys(res || {});
					if (keys && keys.length > 0) {
						this.MatterList = res;
						this.activeIndex = 0;
						this.getNodesInfo()
					} else {
						this.MatterList = null;
						this.activeIndex = undefined;
					}
				}).catch(err => {
					this.MatterList = null;
					this.activeIndex = undefined;
				}).finally(() => {
					setTimeout(() => {
						this.MatterListLoading = false;
					}, 300)
				})
			},

			openTyle(index) {
				this.scrollStatus = false;
				this.activeIndex = index
				this.scrollIntoView = `service_${index}`
				setTimeout(() => {
					this.scrollStatus = true;
				}, 200)
			},
			scrollService(event) {
				// console.log('stopPropagation  ' , event)
				// event.stopPropagation();
				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;
							throw new Error()
						}
					})
				} catch (e) {
					//TODO handle the exception
				}

				this.oldScrollNum = scrollTop;


			},
			// 查看事项详情
			LookMatterDetails(item) {
				// pages/map/matterDetails
				// 在起始页面跳转到test.vue页面，并监听test.vue发送过来的事件数据
				uni.navigateTo({
					url: '/pages/map/matterDetails',
					success: function(res) {
						// 通过eventChannel向被打开页面传送数据
						res.eventChannel.emit('acceptDataFromOpenerPage', item)
					}
				})
			},

			getNodesInfo() {
				new Promise(resolve => {
					let selectorQuery = uni.createSelectorQuery();
					// 获取节点的位置信息
					selectorQuery.selectAll('.val-content').boundingClientRect((rects) => {
						// 如果节点尚未生成，rects值为[](因为用selectAll，所以返回的是数组)，循环调用执行
						if (!rects.length) {
							setTimeout(() => {
								this.$nextTick(() => {
									this.getNodesInfo();
								})
							}, 10);
							return;
						}
						this.RightTopArr = [];
						// 生成之后开始添加进去数组
						rects.forEach((rect) => {
							// 这里减去rects[0].top，是因为第一项顶部不是贴到导航栏=>每一个商品距离顶部的高度，如果此页面顶部没有其他的view那就不用减去rects[0].top，自己视情况而定。
							let tops = rect.top - rects[0].top;
							this.RightTopArr.push({
								height: tops,
								id: rect.id
							});
						})
						resolve();
					}).exec()
				});
			},
		}
	}
</script>

<style lang="scss" scoped>
	$pad_: 30rpx;

	.serve-content {
		border-top: 1rpx solid #F0F0F0;

		.serve-title {
			height: 90rpx;
			line-height: 40rpx;
			padding: 30rpx $pad_ 0;

			font-size: 28rpx;
			font-family: PingFang SC, PingFang SC-Bold;
			font-weight: 700;
			color: #1a1a1a;
		}

		.serve-search {
			width: 100%;
			padding: 0 $pad_;
			display: flex;
			justify-content: space-between;
			align-items: stretch;

			.search-input {
				flex: 1;
				height: 80rpx;
				border: 1rpx solid #F0F0F0;
				border-radius: 10rpx 0 0 10rpx;
				padding: 0 15rpx 0 30rpx;
				font-size: 28rpx;
				display: flex;
				align-items: center;
				background-color: #F5F5F5;
				.search-icon {
					width: 33rpx;
					height: 33rpx;
					
					path {
						fill: #333333;
					}
				}
				.input{
					height: 100%;
					padding-left: 11rpx;
				}
				.placeholder{
					color: #B3B3B3;
				}
			}

			.search-btn {
				width: 134rpx;
				background-color: #61A8FF;
				line-height: 80rpx;
				text-align: center;
				color: #fff;
				font-size: 28rpx;
				border-radius: 0px 10rpx 10rpx 0px;
				font-family: PingFang SC, PingFang SC-Regular;
				font-weight: 400;
			}
		}

		.serve {
			width: 100%;
			overflow: hidden;
			display: flex;
			align-items: stretch;

			.scroll-lable {
				width: 183rpx;
				background-color: #f7f9fb;
				padding: 13rpx 7rpx 13rpx 0;

				.lable {
					width: 100%;
					height: 90rpx;
					font-size: 26rpx;
					line-height: 90rpx;
					text-align: center;
					padding: 0 10rpx;
					border-radius: 0px 20rpx 20rpx 0px;
					color: #808080;
				}

				.active-lable {
					background: #ffffff;
					font-family: PingFang SC, PingFang SC-Bold;
					font-weight: 700;
					color: #3b86f7;
					position: relative;

					&:before {
						content: '';
						position: absolute;
						left: 0;
						top: 50%;
						width: 16rpx;
						height: 40rpx;
						transform: translate(-50%, -50%);
						background: #3b86f7;
						border-radius: 8rpx;
					}
				}
			}

			.scroll-val {
				width: calc(100% - 160rpx);
				padding: 13rpx 30rpx 30rpx 26rpx;

				.val-content {
					// height: 300px;
				}

				.val-name {
					height: 90rpx;
					font-size: 28rpx;
					font-weight: 600;
					color: #1a1a1a;
					line-height: 90rpx;
					color: #1A1A1A;
				}

				.val {
					width: 100%;
					// border: 1rpx solid #F0F0F0;
					// margin-bottom: 20rpx;
					transition: height 1s;
					
					path {
						fill: #666666;
					}
					.val-label {
						width: 100%;
						height: 110rpx;
						display: flex;
						justify-content: space-between;
						align-items: center;
						border-bottom: 1rpx solid #F2F2F2;

						font-size: 26rpx;
						font-family: PingFang SC, PingFang SC-Regular;
						font-weight: 400;
						color: #1a1a1a;

						.val-icon {
							width: 34rpx;
							height: 34rpx;
							transition: transform 0.3s;
						}
						
					}
					.avtive-val-label{
						.val-text{ 
							font-size: 26rpx;
							font-family: PingFang SC, PingFang SC-Bold;
							font-weight: 700; 
							color: #61a8ff; 
						}
						.val-icon {
							transform: rotate(90deg);
							path {
								fill: #61a8ff;
							}
						}
					}
					.project-box{
						background-color: #f5f5f5;
						padding: 7rpx 20rpx;
						.val-item{ 
							padding: 20rpx 0;
							width: 100%;
							min-height: 83rpx;
							font-size: 24rpx;
							line-height: 34rpx;
							font-family: PingFang SC, PingFang SC-Regular;
							font-weight: 400; 
							color: #666666; 
							display: flex;
							align-items: center;
							flex-wrap: wrap;
							border-bottom: 1rpx solid #E6E6E6;
							&:last-child{
								border-bottom: none;
							}
						}
					}
					// .val-item {
					// 	width: 100%;
					// 	min-height: 100rpx;
					// 	padding: 10rpx 20rpx;
					// 	display: flex;
					// 	justify-content: space-between;
					// 	align-items: center;
					// 	border-top: 1rpx solid #F0F0F0;

					// 	&:first-child {
					// 		border-top: none;
					// 	}
					// }

					// .val-label {
					// 	font-weight: 600;

					// 	.val-text {
					// 		flex: 1;
					// 		width: 1px;
					// 		font-size: 30rpx;
					// 	}

					// 	.val-icon {
					// 		width: 34rpx;
					// 		height: 34rpx;
					// 		transition: transform 0.3s;
					// 	}

					// 	.avtive-icon {
					// 		transform: rotate(90deg);
					// 	}
					// }
				}

			}
		}

		.matter-loading {
			padding-top: 50rpx;
			text-align: center;
		}

	}
</style>