sociology_app/components/WF-address/WF-address.vue

<template>
	<view class="wrapper">
		<view class="Sarch">
			<input class="put" @confirm="confirm" confirm-type="search" v-model="searchValue" bg-color="#F4F4F4" :show-action="false"
				placeholder="请输入您要搜索的城市">
			</input>
		</view>
		<scroll-view class="calendar-list" scroll-y="true" :scroll-into-view="scrollIntoId">
			<!-- 国家/城市列表 -->
			<view class="" v-if="searchValue == ''">
				<view v-for="(item, index) in Citylist" :id="index" :key="index">
					<view class="letter-header">{{ index}}</view>
					<view class="city-div" v-for="(city, i) in item" :key="i" @tap="back_city(city)">
						<text :class="CtId==city.id ? 'cityClases':'city'">{{ city.name }}</text>
					</view>
				</view>
			</view>
			<view class="" v-else>
				<!-- 搜索结果 -->
				<view class="city-div" v-for="(item, index) in searchList" :key="index" @tap="back_city(item)">
					<text :class="CtId==item.id ? 'cityClases':'city'">{{ item.name }}</text>
				</view>
			</view>
		</scroll-view>
		<!-- 右侧字母 -->
		<view class="letters" v-if="searchValue == ''">
			<view :class="selectLetter==index ? 'letters-item_back':'letters-item'" v-for="(item,index) in Citylist"
				:key="index" @tap="scrollTo(index)">
				{{ index}}
			</view>
		</view>
		<!-- 选中之后字母 -->
		<view class="mask" v-if="showMask">
			<view class="mask-r">{{selectLetter}}</view>
		</view>
	</view>
</template>

<script>
	import address from "./address.js"//测试数据，可根据业务需求替换为接口数据
	export default {
		name: "WF-address",
		data() {
			return {
				selectLetter: 'A',//右侧字母默认
				searchValue: '',//搜索文字
				scrollIntoId: '',//滚动位置id
				searchList: [],//搜索数据
				showMask: false,//mask展示
				Citylist: [],//展示数据
				CtId: '',//选中 国家/城市 id
			}
		},
		mounted() {
			this.Citylist = address
		},
		methods: {
			scrollTo(letter) {
				this.showMask = true
				this.selectLetter = letter
				setTimeout(() => {
					this.showMask = false
				}, 300);
				this.scrollIntoId = letter;
			},
			confirm(e) {
				this.searchList = []
				var Citylist = Object.entries(this.Citylist)
				for (var i = 0; i < Citylist.length; i++) {
					for (var w = 0; w < Citylist[i][1].length; w++) {
						if (Citylist[i][1][w].name.indexOf(this.searchValue) > -1) {
							this.searchList.push(Citylist[i][1][w])
						}
					}
				}
			},
			back_city(item) {
				this.CtId=item.id
			},
		}
	}
</script>

<style lang="scss" scoped>
	.letters-item_back {
		width: 32rpx;
		height: 32rpx;
		border-radius: 50rpx;
		background: linear-gradient(-44.2deg, rgba(163, 39, 241, 1) 0%, rgba(239, 108, 38, 1) 100%, rgba(245, 112, 40, 1) 100%);
		color: rgba(255, 255, 255, 1);
		font-size: 24rpx;
		font-weight: 600;
		line-height: 30rpx;
		text-align: center;
		margin-bottom: 10rpx;
	}

	.Sarch {
		padding: 10rpx 30rpx;
		margin: auto;
		border-bottom: 1rpx solid rgba(249, 250, 252, 1);
		.put{
			background: rgba(249, 250, 252, 1);
			padding: 15rpx 20rpx;
			border-radius: 100rpx;
		}
	}

	.wrapper {
		background: #ffffff;
	}

	.mask {
		position: absolute;
		bottom: 0rpx;
		top: 83rpx;
		left: 0rpx;
		right: 0rpx;
		width: 750rpx;
		display: flex;
		justify-content: center;
		align-items: center;
		background: rgba(0, 0, 0, 0);
	}

	.mask-r {
		height: 120rpx;
		width: 120rpx;
		border-radius: 60rpx;
		display: flex;
		background: rgba(0, 0, 0, 0.5);
		justify-content: center;
		align-items: center;
		font-size: 40rpx;
		color: #FFFFFF
	}

	.content {
		height: 100%;
		width: 100%;
		background-color: #ffffff;
	}

	.header {
		height: 85rpx;
		display: flex;
		justify-content: flex-start;
		align-items: center;
	}

	.calendar-list {
		position: absolute;
		top: 93rpx;
		bottom: 0rpx;
		width: 100%;
		background-color: #FFFFFF;
	}

	.letters {
		position: absolute;
		right: 30rpx;
		bottom: 0px;
		width: 50rpx;
		top: 260rpx;
		color: #000000;
		text-align: center;
		font-size: 24rpx;
	}

	.letters-item {
		width: 32rpx;
		height: 32rpx;
		border-radius: 50rpx;
		margin-bottom: 10rpx;
		opacity: 1;
		color: rgba(0, 0, 0, 0.6);
		font-size: 24rpx;
		font-weight: 600;
	}

	.letter-header {
		font-size: 22rpx;
		color: #333333;
		padding-left: 24rpx;
		box-sizing: border-box;
		display: flex;
		align-items: center;
		background-color: #ebedef;
		height: 64rpx;
		background: rgba(249, 250, 252, 1);

	}

	.city-div {
		width: 660rpx;
		height: 85rpx;
		margin-left: 24rpx;
		border-bottom-width: 1rpx;
		border-bottom-color: #F9FAFC;
		border-bottom-style: solid;
		display: flex;
		align-items: center;
		justify-content: space-between;
		margin-right: 35rpx;
	}

	.cityClases {
		font-size: 28rpx;
		font-weight: 600;
		letter-spacing: 1rpx;
		background-image: linear-gradient(to right, #F57028, #A327F1);
		background-clip: text;
		color: transparent;
		padding-left: 32rpx;
	}

	.city {
		padding-left: 32rpx;
		color: rgba(42, 23, 49, 1);
		font-size: 28rpx;
		font-weight: 600;
		letter-spacing: 1rpx;
	}
</style>