11

2024-02-02 14:44:30 +08:00
parent 6647042acb
commit 91172a730c
255 changed files with 24805 additions and 0 deletions
--- a/components/nyn-city-list/nyn-city-list.vue
+++ b/components/nyn-city-list/nyn-city-list.vue
@@ -0,0 +1,192 @@
+<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>