chunwan/pages/index/cityList.vue

<template>
	<view class="city">
		<view class="city-hd">
			当前：{{city?city:'全国'}}
		</view>
		<scroll-view :scroll-y="true"  v-if="list.length > 0" class="city-bd" scroll-with-animation :scroll-into-view="scrollTopId">
			<view class="dl" v-for="(item,i) in list" :key="i">
				<view class="dt" :id="item.initial">{{item.initial}}</view>
				<view class="dd" v-for="(it,idx) in item.cityInfo" :key="idx" @click="toSelect(it)">{{it.name}}</view>
			</view>
		</scroll-view>
		<view class="city-fd">
			<view class="item" v-for="(item,i) in flist" :key="i" @click="clickLetter(item)">{{item}}</view>
		</view>
		<view class="showSlectedLetter" v-if="isShowLetter">
			{{scrollTopId}}
		  </view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				city: "",
				list: [],
				flist: [],
				scrollTopId: "",
				isShowLetter: false
			};
		},
		onLoad() {
			this.city = uni.getStorageSync("jingweiInfo").city
			this.getList();
		},
		methods: {
			clickLetter(value) {
				 const that = this;
				 that.scrollTopId = value;
				that.isShowLetter = true;
				setTimeout(() => {
					that.isShowLetter = false
				}, 1500)
			},
			// 分割
			cityFilter: function (searchObj, cityList) {
				var tempObj = [];
				for (var i = 0; i < searchObj.length; i++) {
				  if(searchObj[i]){
					  var initial = searchObj[i];
					  var cityInfo = [];
					  var tempArr = {};
					  tempArr.initial = initial;
					  for (var j = 0; j < cityList.length; j++) {
							if (initial == cityList[j].firstLetter) {
							  cityInfo.push(cityList[j]);
							}
					  }
					  tempArr.cityInfo = cityInfo;
					  tempObj.push(tempArr);
				  }
				}
				return tempObj;
			 },
			async getList() {
				const {code, data} = await this.$api.cityList();
				if(code == 200){
					let larr = [],farr=[];
					if(data && data.length > 0){
						data.map(a=>{
							farr.push(a.firstLetter)
						})
						farr.sort()
					}
					this.flist = [...new Set(farr)]
					this.list = this.cityFilter(this.flist, data);
					console.log(this.list)
				}
			},
			toSelect(city){
				uni.$emit("watchCity",city);
				uni.navigateBack({
					delta: 1
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
.city{
	width: 100%;
	min-height: 100vh;
	&-hd{
		padding: 20rpx 30rpx;
		background-color: #fff;
		font-size: 30rpx;
		color: #212121;
	}
	&-bd{
		background-color: #fff;
		font-size: 30rpx;
		color: #212121;
		height: calc(100vh - 50rpx);
		margin-top: 20rpx;
		.dt{
			padding: 20rpx 30rpx;
			border-top: 1px solid #f4f4f4;
			background-color: #f4f4f4;
		}
		.dd{
			padding: 20rpx 30rpx;
			border-top: 1px solid #f6f6f6;
		}
	}
	&-fd{
		width: 70rpx;
		position: fixed;
		height: 1200rpx;
		right: 0;
		top: 50%;
		z-index: 12;
		margin-top: -600rpx;
		background-color: #fff;
		.item{
			text-align: center;
			line-height: 55rpx;
			font-size: 28rpx;
			color: #080313;
		}
	}
	
	.showSlectedLetter {
	  background-color: rgba(0, 0, 0, 0.5);
	  color: #fff;
	  display: flex;
	  justify-content: center;
	  align-items: center;
	  position: fixed;
	  top: 50%;
	  left: 50%;
	  margin: -100rpx;
	  width: 200rpx;
	  height: 200rpx;
	  border-radius: 20rpx;
	  font-size: 52rpx;
	  z-index: 2;
	}
}
</style>