hospital-inspect/components/fc-contacts/fc-contacts.vue

<template>
	<view class="yt-txl-container">
		<view class="search">
			<input type="text" @input="inputFunc" class="s-input" />
		</view>
		<view class="toLine"></view>
		<view class="scroll" :style="showflag ? '' :'right:60rpx'">
			<scroll-view :scroll-into-view="toNameK" scroll-y class="scrollview" :scroll-with-animation="true">
				<view :id="item.NameK" v-for="(item,index) in datas" :key="index" class="scrollarea">
					<view class="item-unit" :id="item.NameK">
						<view class="nameK">{{item.NameK}}</view>
						<view v-for="(_item,_index) in item.Items" class="info" :key="_index" @click="checkItem(_item)">
							<image :src="_item.HeadImg|headImg" class="headImg" mode="scaleToFill"></image>
							<view class="item">
								<text class="name">{{_item.name}}</text>
								<text class="tel">{{_item.updateTime||_item.createTime}}</text>
								<text class="post">{{_item.Desc}}</text>
							</view>
							<!-- <image @click="calltel(_item.Tel)" src="/static/components/calltel.png" class="itemTel" mode="scaleToFill"></image> -->
						</view>						
					</view>
				</view>
			</scroll-view>
		</view>
		<view class="flag" v-if="showflag">
			<scroll-view scroll-y="true" :show-scrollbar="false" style="width: 100%;height: 100%;">
				<view v-for="(item,index) in kList" :key="item.id"
						 @click="toFunc(item)" 
					    :class="(item.IsSelect?'flag-active':'')+' flag-key'">
					{{item.Name}}
				</view>
			</scroll-view>
		</view>
	</view>
</template>
<script>
	import { objectIsValid } from '@/libs/components';
	let observer = null;
	export default {
		filters:{
			headImg(val){
				if(!val){
					return "/static/components/avatar.png"
				}
			}
		},
		props: {
			contacts: {
				type: Array,
				default: null
			},
			showflag: {
				type: Boolean,
				default: true
			}
		},
		data() {
			return {
				kList: [{ id: 1, Name: 'A', IsSelect: true }, { id: 2, Name: 'B', IsSelect: false }, { id: 3, Name: 'C', IsSelect: false },
					{ id: 4, Name: 'D', IsSelect: false }, { id: 5, Name: 'E', IsSelect: false }, { id: 6, Name: 'F', IsSelect: false },
					{ id: 7, Name: 'G', IsSelect: false }, { id: 8, Name: 'H', IsSelect: false }, { id: 9, Name: 'I', IsSelect: false },
					{ id: 10, Name: 'J', IsSelect: false }, { id: 11, Name: 'K', IsSelect: false }, { id: 12, Name: 'L', IsSelect: false },
					{ id: 13, Name: 'M', IsSelect: false }, { id: 14, Name: 'N', IsSelect: false }, { id: 15, Name: 'O', IsSelect: false },
					{ id: 16, Name: 'P', IsSelect: false }, { id: 17, Name: 'Q', IsSelect: false }, { id: 18, Name: 'R', IsSelect: false },
					{ id: 19, Name: 'S', IsSelect: false }, { id: 20, Name: 'T', IsSelect: false }, { id: 21, Name: 'U', IsSelect: false },
					{ id: 22, Name: 'V', IsSelect: false }, { id: 23, Name: 'W', IsSelect: false }, { id: 24, Name: 'X', IsSelect: false },
					{ id: 25, Name: 'Y', IsSelect: false }, { id: 26, Name: 'Z', IsSelect: false }
				],
				datas: [],
				toNameK: ""
			};
		},
		watch: {
			contacts: { //watch监听不到属性解决方案。前端传普通list数据,这里重新重新组织数据结构
				immediate: true, // 很重要！！！
				deep: true,
				handler(newval, oldval) {
					var _this = this
					if (objectIsValid(newval)) {
						var data = newval
						_this.kList.forEach(el => {
							var filterItems = newval.filter(s => s.NameK == el.Name)
							if (objectIsValid(filterItems)) {
								_this.datas.push({ NameK: el.Name, Items: filterItems })
							}
						})
					}
				}
			}
		},
		methods: {
			toFunc(item) { //右侧点击对应关键词滑动到对应的锚点
				this.toNameK = item.name;
				this.kList.forEach(el => {
					if (el.id == item.id) {
						el.IsSelect = true;
					} else {
						el.IsSelect = false;
					}
				})
			},
			inputFunc(event) { //搜索功能
				var _this = this
				var value = event.target.value;
				_this.datas = []
				_this.kList.forEach(el => {
					var filterItems = this.contacts.filter(s => s.NameK == el.Name && (s.name.search(value) != -1 || !objectIsValid(value)))
					if (objectIsValid(filterItems)) {
						_this.datas.push({ NameK: el.Name, Items: filterItems })
					}
				})
				_this.watchflag()
			},
			calltel(tel) {
				uni.makePhoneCall({
					phoneNumber: tel
				})
			},
			checkItem(item){
				this.$emit('click',item)
			},
			watchflag() {
				var _this = this //监听锚点与参照区重叠事件
				_this.observer = uni.createIntersectionObserver(_this, { observeAll: true })
				_this.observer.relativeTo('.toLine', { bottom: 1 }) //参照区
					.observe('.scrollarea', (res) => {
						if (res.intersectionRatio > 0) {
							_this.kList.forEach(el => {
								if (el.Name == res.id) {
									el.IsSelect = true;
								} else {
									el.IsSelect = false;
								}
							})
						}
					})
			}
		},
		mounted() {
			this.watchflag()
		},
		destroyed() {
			this.observer.disconnect()
		}
	};
</script>
<style lang="scss" scoped>
	.yt-txl-container{
		width: 100%;
		height: calc(100vh - 300upx);
		.search {
			width: 730upx;
			height: 90upx;
			display: flex;
			justify-content: center;
			align-items: center;
			padding: 10upx;
			.s-input {
				width: 680rpx;
				height: 70rpx;
				border-radius: 40rpx;
				background: url('data:image/png;base64,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');
				background-position: 20upx center;
				background-repeat: no-repeat;
				background-color: #fff;
				background-size: 50rpx;
				text-indent: 60rpx;
				padding:0 60rpx;
			}		
		}
		.item-unit{
			position: relative;
			.nameK {
				// position: sticky;
				// top: 0;
				// left: 0;
				// background: #f4f4f4;
				// background-color: red;
				font-size: 36rpx;
				text-indent: 10rpx;
				z-index: 99998;
				padding: 8upx 0;
			}			
			.info {
				display: flex;
				justify-content: flex-start;
				align-items: center;
				// margin-bottom: 10upx;
				padding: 20upx;
				background: #fff;
				border-bottom: 1px solid #eaeaea;
				.item {
					height: 90upx;
					display: flex;
					font-size: 34rpx;
					flex-direction: column;
					justify-content: space-around;
					.name{
						font-size: 36upx;
						line-height: 1;
						letter-spacing: 2px;
					}
					.tel{
						font-size: 30upx;
						line-height: 1;
						padding-top: 14upx;
					}
				}				
			}			
		}

		.scroll {
			position: absolute;
			left: 25rpx;
			top: 240rpx;
			right: 100rpx;
			bottom: 25rpx;
		}

		.scrollview {
			width: 100%;
			height: 100%;
		}
		.toLine {
			width: 100%;
			height: 5rpx;
			display: flex;
		}

		.scrollarea {
			margin-top: 5rpx;
		}
		.headImg {
			width: 80rpx;
			height: 80rpx;
			border-radius: 50%;
			margin-right: 15rpx;
			display: flex;
		}

		.flag {
			width: 60rpx;
			position: absolute;
			top: 240rpx;
			right: 25rpx;
			bottom: 25rpx;
			.flag-key {
				padding: 0;
				margin: 0 auto 20rpx auto;
				width: 60rpx;
				height: 60rpx;
				border-radius: 50%;
				color: #000;
				display: flex;
				justify-content: center;
				align-items: center;
				font-size: 40rpx;
			}	
			.flag-active {
				// background-image: linear-gradient(to right bottom, #FF9002, #FF5100);
				background-color: #007AFF;
				color: #fff;
			}					
		}
		.itemTel {
			width: 60rpx;
			height: 60rpx;
			border-radius: 50%;
			position: absolute;
			right: 10rpx;
		}		
	}
</style>