Web_TracerMethodology/components/index-list/index-list.vue

<template>
	<view class="container">
		<view class="indexPosition">
			<view :class="[currentKey==item.name?'activeKey on':'activeKey']" v-for="(item,index) in keyList"  @click="activeKeyHandle(item.name)">{{item.name}}
			</view>
		</view>
		<view v-if="ifShowKeyTip" :animation="animationData" class="pop">{{tipText}}</view>
		<scroll-view scroll-y="true" class="scroll-Y" :scroll-top="top" scroll-with-animation="true" @scroll="scroll">
			<view :class="[`box ${item.letter}`]" v-for="item in options">
				<view class="letter">{{item.letter}}</view>
				<view class="listWrap">
					<view class="list" v-for="val in item.data" @click="listClickHandle(val)">
						<view :class="[isSelectAll||checkedListIds.includes(val.id)?'iconWrap':'iconWrap on']">
							<image v-if="isSelectAll||checkedListIds.includes(val.id)" class="checkedIcon"
								src="../../static/check-checkbox.png" mode=""></image>
						</view>
						<text class="mainText">{{val.main}}</text>
						<text class="subText">{{val.sub}}</text>
					</view>
				</view>
			</view>
		</scroll-view>
	</view>
</template>

<script>
	export default {
		name: "index-list",
		props: {
			checkedResponsibleList: Array,
			options: Array,
			padding:Number,
		},
		data() {
			return {
				checkedList: [],
				checkedListIds: [],
				isSelectAll: false,
				keyList: [],
				top:0,
				scrollTop:0,
				currentKey:'',
				animationData:{},
				tipText:'',
				ifShowKeyTip:false
			};
		},
		computed: {

		},
		watch: {
			checkedResponsibleList: function(newVal, oldVal) {
				// console.log({newVal,oldVal});
				if (newVal.length != oldVal.length) {
					this.checkedListIds = JSON.parse(JSON.stringify(newVal)).map(item => item.id);
					this.checkedList = JSON.parse(JSON.stringify(newVal));
					this.$emit("listClick", this.checkedList);
				}
			},
			options:function(){
				this.initKeyIndex();
	            this.top=0;
			 //    this.checkedList=[];
				// this.checkedListIds = JSON.parse(JSON.stringify(this.checkedResponsibleList)).map(item => item.id);
				// this.checkedList = JSON.parse(JSON.stringify(this.checkedResponsibleList));
			},
		},
		mounted() {
			this.checkedListIds = JSON.parse(JSON.stringify(this.checkedResponsibleList)).map(item => item.id);
			this.checkedList = JSON.parse(JSON.stringify(this.checkedResponsibleList));
			this.initKeyIndex();
		},
		methods: {
			showKeyTip(){
				 var animation = uni.createAnimation({
				       duration: 1000,
				         timingFunction: 'ease',
				     })
				 
				     this.animation = animation
				 
				     animation.opacity(1).step();
					 this.animationData = animation.export();
			},
			initKeyIndex(){
				this.keyList = [];
				this.currentKey='';
				this.options.map(item=>{
					  // console.log('item.letter',item.letter);
					  if(!item.letter)return null;
					  this.getDescBox(`.${item.letter}`).then(res=>{
						    // console.log(res);
						    this.keyList.push({
								name:item.letter,
								num:res
							});
					  })
					  
				});
			},
			scroll(event){
				const padding = this.padding;
				const {scrollLeft, scrollTop, scrollHeight, scrollWidth, deltaX, deltaY} = event.detail;
				this.scrollTop = scrollTop;
				// console.log(this.keyList);
				const tempArr = this.keyList.filter(item=>scrollTop>=item.num-padding);
				const needArr = tempArr.pop();
				// console.log({tempArr});
				this.currentKey = needArr?needArr.name:'';
			},
			activeKeyHandle(key) {
				const padding = this.padding;
				this.ifShowKeyTip=true;
				this.tipText = key.toUpperCase();
				this.getDescBox(`.${key.toLowerCase()}`).then(res=>{
					   // console.log({res});
					   // console.log(`.${key.toLowerCase()}`);
					   if(!res||Math.abs(res)-padding<=0||res == this.top - padding)return;
					   this.top = Math.abs(res+this.scrollTop-padding);
				});
				this.showKeyTip();
				setTimeout(()=>this.ifShowKeyTip = false,1000);
			},
			// 获取元素距离顶部的高度
			getDescBox(className) {
				let that = this;
				let count = 0;
				return new Promise(resolve => {
					getHeight();

					function getHeight() {
						uni
							.createSelectorQuery()
							.in(that)
							.select(className)
							.boundingClientRect()
							.exec(res => {
								if (res[0]) {
									resolve(res[0].top);
								} else {
									that.$nextTick(() => {
										++count <= 8 ? getHeight() : resolve(null);
									});
								}
							});
					}
				});
			},

			listClickHandle(val) {
				const tempIdsArr = JSON.parse(JSON.stringify(this.checkedListIds));
				const tempArr = JSON.parse(JSON.stringify(this.checkedList));
				const data = JSON.parse(JSON.stringify(val));
				// console.log({tempIdsArr,tempArr});
				// console.log(tempIdsArr.includes(data.id));

				if (tempIdsArr.includes(data.id)) {
					this.isSelectAll = false;
					tempIdsArr.splice(tempIdsArr.indexOf(data.id), 1);
					this.checkedList = tempArr.filter(item => item.id != data.id);
					this.checkedListIds = tempIdsArr;
				} else {
					this.checkedList.push(data);
					this.checkedListIds.push(data.id);
					// console.log(this.checkedListIds);

				}
				this.$emit("listClick", this.checkedList);
			}
		}
	}
</script>

<style lang="less">
	.container {
		position: relative;
		z-index: 1;
		height: 100%;
		overflow: scroll;
		.indexPosition {
			display: flex;
			flex-direction: column;
			justify-content: center;
			align-items: center;
			position: absolute;
			z-index: 10;
			right: 12.5rpx;
			width: 50rpx;
			height: 100%;

			.activeKey {
				display: flex;
				justify-content: center;
				align-items: center;
				flex: 1;
				width: 100%;
				font-size: 17.5rpx;
				font-family: SourceHanSansCN-Normal, SourceHanSansCN;
				font-weight: 400;
				color: #7B8599;
				
				&.on {
					color: #3377FF;
				}
			}
		}
        .pop {
			position: fixed;
			z-index: 100;
			left:50%;
			top:50%;
			width: 125rpx;
			height: 125rpx;
			margin-left: -62.5rpx;
			margin-top: -62.5rpx;
			text-align: center;
			line-height:125rpx;
			font-size: 35rpx;
			color: #FFFFFF;
			border-radius: 50%;
			background: rgba(0,0,0,0.6);
		}
		.scroll-Y {

			height: 100%;
			.box {
				.letter {
					height: 62.5rpx;
					line-height: 62.5rpx;
					font-size: 22.5rpx;
					font-family: SourceHanSansCN-Normal, SourceHanSansCN;
					font-weight: 400;
					color: #666F80;
					padding: 0 25rpx;
				}

				.listWrap {
					background-color: #FFFFFF;

					.list {
						position: relative;
						display: flex;
						flex-direction: row;
						justify-content: flex-start;
						align-items: center;
						height: 87.5rpx;
						padding: 0 25rpx;

						.iconWrap {
							width: 25rpx;
							height: 25rpx;
							margin-right: 25rpx;

							.checkedIcon {
								width: 25rpx;
								height: 25rpx;

							}

							&.on {
								border-radius: 50%;
								border: 2.5rpx solid #C3CAD9;
							}
						}

						.mainText {
							display: inline-block;
							font-size: 22.5rpx;
							font-family: SourceHanSansCN-Normal, SourceHanSansCN;
							font-weight: 400;
							color: #292C33;
							margin-right: 50rpx;
						}

						.subText {
							font-size: 22.5rpx;
							font-family: SourceHanSansCN-Normal, SourceHanSansCN;
							font-weight: 400;
							color: #7A8499;
						}

						&::after {
							position: absolute;
							right: 0;
							bottom: 0;
							display: block;
							content: '';
							width: 90%;
							border-bottom: 1px solid #DADEE6;
						}

						&:last-child {
							&::after {
								display: none;
							}
						}
					}
				}
			}
		}
	}
</style>