vue uniapp 索引列表 选择城市组件

<view class="citysIndex" v-if="update">
		<scroll-view :scroll-into-view="scrollTop" scroll-y="true" style="height: 100%;">
			<view class="citysHead">
				<view class="citysTitle">
					<label>定位城市</label>
					<label>{{cityData.name}}</label>
				</view>
				<!-- 热门城市 -->
				<view class="citysHot">
					<view class="citysTitle">
						<label>热门城市</label>
					</view>
					<view class="citysHot-list">
						<a v-for="(v,i) in hotCitys">
							<label :class="[q.checked?'checkedBtn':'']" v-for="(q,w) in v" :key='q.cityId'
								@click="checkCity(q.cityId,q.baiduCityCode,q.city,q.provinceId,q.province)">{{q.city}}</label>
						</a>
					</view>
				</view>
			</view>
			<view class="citysList">
				<view class="citysTitle">
					<label>所有城市</label>
				</view>
				<view class="citysIndexList">
					<view class="van-index-bar">
						<template v-for="(v,i) in citys">
							<view class="listIndexTitle" :id="'city_'+i">
								<label>{{i}}</label>
							</view>
							<view class="listIndexText" v-for="(q,w) in v" :key="q.id">
								<label :class="[q.checked?'cityChecked':'']"
									@click="checkCity(q.id,q.baiduCityCode,q.name,q.parentId,q.province)">{{q.name}}</label>
							</view>
						</template>
						<!-- 右边字母坐标 -->
						<view class="index-sidebar">
							<template v-for="(v,i) in citys">
								<view class="index-bar" @click="findCity(i)">{{i}}</view>
							</template>
						</view>
					</view>
				</view>
			</view>
		</scroll-view>
	</view>

export default {
		props: {

		},
		data() {
			return {
				hotCitys: [],
				citys: [],
				indexList: [],
				cityData: {},
				update: true,
				scrollTop: ''
			}
		},
		created() {
			this.cityData = uni.getStorageSync('cityData')
			console.log(this.cityData)
			this.getHotCitys();
			this.getCitys();
		},
		methods: {
			getHotCitys() {
				var that = this;
				uni.showToast({
					title: '加载中~',
					icon: 'loading'
				})
				getApi('visitor/area/queryAllHotBotCity', 'get')
					.then(res => {
						var datas = res.data
						if (datas.code == 1) {
							var city = uni.getStorageSync('cityData');
							for (const i in datas.data) {
								datas.data[i].map((q, w) => {
									if (q.cityId == city.id) {
										q.checked = true;
									} else {
										q.checked = false;
									}
								})
							}
							that.hotCitys = datas.data
						} else {
							uni.showToast({
								title: datas.msg,
								icon: 'none',
								duration: 1000
							});
						}
					})
					.catch(err => {
						console.log("err==>", err);
					});
			},

			getCitys() {
				var that = this;
				this.update = false;
				uni.showToast({
					title: '加载中~',
					icon: 'loading'
				})
				getApi('visitor/area/queryCityCondition', 'get')
					.then(res => {
						var datas = res.data
						if (datas.code == 1) {
							var list = [];
							var city = uni.getStorageSync('cityData');
							for (const i in datas.data) {
								list.push(i);
								datas.data[i].forEach(v => {
									if (city && city.id) {
										if (city.id == v.id) {
											v.checked = true
										} else {
											v.checked = false
										}
									} else {
										v.checked = false
									}
								});
							}
							that.indexList = list
							that.citys = datas.data
							this.update = true;
							uni.hideToast()
						} else {
							uni.showToast({
								title: datas.msg,
								icon: 'none',
								duration: 1000
							});
						}
					})
					.catch(err => {
						console.log("err==>", err);
					});
			},
			
			//e:城市id
			//code:城市百度code
			//name:城市名
			//pid:省份id
			//pname:省份名
			checkCity(e, code, name, pid, pname) {
				this.update = false;
				var ds = this.citys;
				for (const i in ds) {
					ds[i].forEach(v => {
						if (v.id == e) {
							v.checked = true
						} else {
							v.checked = false
						}
					});
				}
				this.citys = ds
			},

			findCity(v) {
				console.log(v)
				this.scrollTop = "city_"+v;
			}
		}
	}

<style>
	.citysIndex {
		width: 100%;
		height: 100%;
		/* height: calc(100% - 50px); */
	}

	.citysHead {
		padding: 0 36rpx;
	}

	.citysTitle {
		margin-top: 34rpx;
		font-size: 28rpx;
		font-weight: 600;
	}

	.citysTitle label:nth-child(2) {
		display: inline-block;
		font-weight: 500;
		margin-left: 40rpx;
	}

	/* 热门城市 */
	.citysHot {
		width: 100%;
		padding-bottom: 20rpx;
		border-bottom: 2rpx solid #eee;
	}

	.citysHot-list {
		margin-top: 20rpx;
	}

	.citysHot-list view {
		display: inline-block;
	}

	.citysHot-list label {
		display: inline-block;
		margin-right: 20rpx;
		margin-bottom: 20rpx;
		width: 28%;
		height: 60rpx;
		border: 2rpx solid #eee;
		line-height: 60rpx;
		text-align: center;
		font-size: 24rpx;
		border-radius: 8rpx;
		overflow: hidden;
		white-space: nowrap;
		text-overflow: ellipsis;
	}

	.citysHot-list view:nth-child(3n+3) {
		margin-right: 0;
	}

	/* 所有城市 */
	.citysList {
		padding: 0 36rpx;
	}

	.citysIndexList {
		position: relative;
	}

	.index-sidebar {
		display: flex;
		flex-direction: column;
		position: fixed;
		right: 36rpx;
		text-align: center;
		top: 50%;
		transform: translateY(-50%);
		-webkit-user-select: none;
		user-select: none;
	}

	.index-bar {
		font-size: 16px;
		color: #333;
		margin-bottom: 5px;
		width: 20px;
		height: 20px;
		border-radius: 50%;
		line-height: 19px;
		text-align: center;
	}
	
	.index-bar:active{
		background-color: #1474ED;
		color: white;
		font-size: 14px;
	}

	.listIndexTitle {
		width: 100%;
		height: 80rpx;
		line-height: 80rpx;
		border-bottom: 2rpx solid #eee;
		color: #FF9800;
		font-size: 18px;
	}

	.listIndexText {
		width: 100%;
		height: 80rpx;
		line-height: 80rpx;
		border-bottom: 2rpx solid #eee;
		color: #666;
		font-size: 28rpx;
	}

	.listIndexText label {
		display: block;
		width: 100%;
		height: 100%;
	}

	.cityChecked {
		color: #1474ED;
	}
</style>