jobslink-user-clent/components/nyn-city-list/nyn-city-list.vue

<template>
	<view>
		<!-- 搜索框 -->
		<view class='search'>
			搜索<input type='text' v-model="keyValue" placeholder='请输入银行名称' placeholder-style="font-size:32rpx;color:#cccccc" />
		</view>
		<scroll-view ref="view" scroll-y="true" :scroll-top="scrollTop" :style="{height:`${winHeight}px`}">
			<!-- 循环城市数据 -->
			<view v-for="group in data.data" :key="group.key">
				<!-- 循环首字母检索信息 -->
				<view class="list_letter">{{group.key}}</view>
				<!-- 城市ID城市名称 -->
				<view class="item_city" v-for="item in group.value" :key="item.id" @tap="click(item)">{{item.name}}</view>
			</view>
		</scroll-view>
		<letter-list :options="data.letters" @touchmove="setScrollTop"></letter-list>
	</view>
</template>

<script>
	import letterList from './letter-list.vue'

	function getFirstLetter(str) {
		return str[0];
	}

	function fortmat(data, itemH, tHeight) {
		let index = 0
		const letters = []
		const scrollTop = {}
		for (var i = 0; i < data.length; i++) {
			const value = data[i].value
			const key = data[i].key
			letters.push({
				key,
				value: value.length
			})
			scrollTop[key] = index
			index += value.length
		}
		return {
			data,
			letters,
			scrollTop
		}
	}

	export default {
		components: {
			letterList
		},
		name: "NynCityList",
		props: {
			options: {
				type: Array,
				required: true
			},
			prop: {
				type: Object,
				default () {
					return {
						name: 'name'
					}
				}
			}
		},
		data() {
			return {
				keyValue: '',
				itemH: 0, //字母列表的高度
				scrollTop: 0,
				tHeight: 0,
				winHeight: 0, //城市列表窗口高度
			}
		},
		created() {},
		mounted() {
			this.initList()
		},
		methods: {
			/* 列表初始化 */
			initList() {
				const sysInfo = uni.getSystemInfoSync();
				const query = uni.createSelectorQuery().in(this);
				query.select(".item_city").boundingClientRect(scrollx=>{
					this.itemH = scrollx.height
				})
				query.select(".list_letter").boundingClientRect(scrollx=>{
					this.tHeight = scrollx.height
				})
				query.select('.search').boundingClientRect(data => {
					let top = data.height
					this.winHeight = sysInfo.windowHeight - top - 1;
				}).exec();
			},
			click(item) {
				this.$emit('change', item)
			},
			/* 设置scroll-view滚动距离 */
			setScrollTop(showLetter) {
				var letters = this.data.letters
				var letterIndex = 0
				for (var i = 0; i < letters.length; i++) {
					if (showLetter === letters[i].key) {
						letterIndex = i
					}
				}
				this.scrollTop = (this.data.scrollTop[showLetter] * this.itemH) + (letterIndex * this.tHeight)
			},
		},
		computed: {
			data() {
				return fortmat(this.options, this.itemH, this.tHeight)
			}
		},
		watch: {
			keyValue(value) {
				this.$emit('filter-method', value)
			}
		}
	}
</script>

<style lang="scss" scoped>
	.search {
		display: flex;
		align-items: center;
		justify-content: flex-start;
		background-color: #ffffff;
		font-family: PingFangSC-Regular;
		font-size: 32rpx;
		color: #333333;
		// border-radius:100rpx;

		padding: 20rpx 0;
		width: 730rpx;
		margin-left: 20rpx;
		border-bottom: 1rpx solid #ddd;

		input {
			line-height: 60rpx;
			text-align: left;
			padding-left: 20rpx;
			font-family: PingFangSC-Regular;
			font-size: 32rpx !important;
		}
	}


	/* 循环数据首字母检索 */
	.list_letter {
		display: flex;
		background-color: #f8f8f8;
		height: 60rpx;
		color: #2a2a2a;
		font-size: 26rpx;
		padding-left: 10px;
		align-items: center;
	}

	/* 城市样式 */
	.item_city {
		display: flex;
		background-color: #fff;
		height: 60rpx;
		font-family: PingFangSC-Regular;
		font-size: 32rpx;
		color: #333333;
		letter-spacing: 0;
		align-items: center;
		padding: 10rpx 0;
		width: 730rpx;
		margin-left: 20rpx;
		border-bottom: 2rpx solid #ddd;
	}

	.list {
		.eng {
			background: #ffffff;
			padding: 30rpx;
			color: #212121;
		}

		.text {
			color: #212121;
			font-size: 26rpx;
			margin: 30rpx 0 0 30rpx;
			padding-bottom: 30rpx;
			border-bottom: 1px solid #E6E6E6
		}
	}
</style>