txCar/pages/chooseCity/chooseCity.vue

<template>
	<view class="content">
		<view class="topView">
			<!-- 搜索 -->
			<view class="searchBoxBg">
				<searchBox placeholder="请输入城市名称" @search='search($event)'></searchBox>
			</view>
		</view>

		<!-- 城市列表 -->
		<scroll-view class="scroll-view" scroll-y scroll-with-animation="true" enable-back-to-top="true"
			:scroll-into-view="toIndex" v-if="!searchValue">

			<!-- 您所在的地区 -->
			<view class="nowArea">
				<view class="area">定位城市</view>
				<view class="dingwBox">
					<view v-if="locationCity.cityName" @click="selectDingCity(locationCity)" class="dingweiCity">
						{{locationCity.cityName}}
					</view>
					<view v-else class="dingweiCity" style="color: #999999;">未获取</view>

					<view class="dingBg" @click="againDingWei()">
						<image src='../../static/img/icon_location.png' class="icon"></image>
						<text class="text">重新定位</text>
					</view>

				</view>
			</view>


			<view class="listContent">
				<view class="city-list">
					<!-- 城市列表  -->
					<view v-for="(item, index) in cityData">
						<view class="c-title">{{item['首字母']}}</view>
						<view class="item" v-for="(city,index2) in item['城市列表']" @click="selectCity(city)">
							{{city.city}}
						</view>
					</view>
				</view>

				<!-- 字母列表 -->
				<view class="zhimubox">
					<view v-for="(item, index) in alphabet">
						<view class="alphabet" :class="{select:toIndex == item}" @click="tap(item)">
							{{item}}
						</view>
					</view>
				</view>
			</view>



		</scroll-view>
		
		
		<!-- 搜索列表  -->
		<view class="reach-content" v-show="searchValue">
			<block v-show="searchData.length">
				<view v-for="(item, index) in cityData">
					<view class="item" v-for="(city,index2) in item['城市列表']" @click="selectCity(city)">
						{{city.city}}
					</view>
				</view>
			</block>
			<!-- 无数据空白页 -->
			<view class="nodataBox" v-if="searchData.length == 0">
				<image src="../../static/img/pic_empty_def.png" mode="widthFix" class="nodataImg"></image>
				<view class="noTxt">暂无数据</view>
			</view>
		</view>



		

	</view>
</template>

<script>
	import searchBox from '@/components/searchBox/searchBox.vue'
	export default {
		components: {
			searchBox
		},

		data() {
			return {
				searchValue: '',
				cityData: [],
				alphabet: [],
				toIndex: '', //跳转的索引的字母
				searchData:[],
				locationCity: {
					cityName: '',
					cityCode: '',
					lng: '',
					lat: '',
				},
				

			}
		},
		onLoad() {
			this.getData();
		},
		onShow() {
			var nowCity = uni.getStorageSync("locationCity");
			if (nowCity) {
				this.locationCity = nowCity
			} else {

				this.getLocation()
			}
			this.getData();
		},
		methods: {
			tap(item) {
				console.log('字母点击', item);
				this.toIndex = item
			},
			againDingWei() {
				console.log('重新定位');
				this.getLocation();
			},
			getLocation() {

				const that = this
				uni.getLocation({
					type: 'wgs84',
					success: function(res) {
						console.log('定位', res)
						that.locationCity.lng = res.longitude
						that.locationCity.lat = res.latitude

						
						that.getAdress();

					},
					fail(err) {
						console.log(err)

					}
				});
			},
			getAdress() {
				// 根据经纬度 逆城市地理编码 获取城市信息
				var location = this.locationCity.lng + ',' + this.locationCity.lat
				uni.request({
					url: 'https://restapi.amap.com/v3/geocode/regeo',
					data: {
						key: '389a059efa3f499d9145eb84b1c3248d',
						location: location,
						//location: '117.06533,36.68013',
						//types: "190000",
						//extensions: "all",
						//radius: 100
					},
					dataType: "json",
					success: (res) => {
						console.log('定位城市', res);
						if(res.data.regeocode){
							console.log("城市名称")
							 console.log(res.data.regeocode.addressComponent.city)
							// console.log(res.data.pois[0].cityname)
							let cityname = res.data.regeocode.addressComponent.city;
							var cityCode = res.data.regeocode.addressComponent.adcode
							cityCode = cityCode.slice(0, -2)
							cityCode = cityCode + '00'
							this.locationCity.cityName = cityname
							this.locationCity.cityCode = cityCode
							uni.setStorage({
								key: 'locationCity',
								data: this.locationCity,
								success: function() {
									console.log('定位城市,保存成功');
								}
							})
						}else{
							console.log("接口获取失败")
						}
						
					}
				});
			},
			search(val) {
				// console.log(val);
				this.searchValue = val

				this.getData()
			},
			getData() {
				uni.showLoading({
					title: '加载中'
				})

				let url = 'worldKeepCar/worldHome/queryCityRole',
					params = {
						city: this.searchValue ? this.searchValue : '',
					}
				this.$http(url, params, 'GET').then(res => {
					uni.hideLoading()

					if (res.code == 0) {
						this.cityData = res.data
						var arr = []
						this.cityData.forEach((item, index) => {
							arr.push(item.首字母)
						});
					}
					this.alphabet = arr
					


				})
			},
			selectDingCity(locationCity){
				console.log('选择了定位城市：', locationCity);
				var city={}
				city.city = locationCity.cityName
				city.code = locationCity.cityCode
				uni.setStorage({
					key: 'selectCity',
					data: city,
					success: function() {
						console.log('选择了定位城市,保存成功');
					}
				})
				
				uni.navigateBack({
				
				})
			},
			selectCity(city) {

				console.log('选择的城市：', city);

				uni.setStorage({
					key: 'selectCity',
					data: city,
					success: function() {
						console.log('选择的城市,保存成功');
					}
				})

				uni.navigateBack({

				})

			},

		},


		onPullDownRefresh() {

			this.getData()
			setTimeout(function() {
				uni.stopPullDownRefresh();
			}, 1000);
		},

	}
</script>

<style scoped>
	.zhimubox{
		position: fixed;
		right: 30rpx;
		top: 200rpx;
		height: 80vh;
		    overflow-y: scroll;
	}
	.content {
		
		background: #FFFFFF;
		min-height: 100vh;
	}

	.topView {
		background: #FFFFFF;
		position: fixed;
		width: 100%;
		height: 120rpx;
		z-index: 99;
	}

	.searchBoxBg {

		width: 100%;
		background-color: #FFFFFF;
		border-top: 1rpx solid #EEEEEE;
	}

	.searchBox {
		display: flex;
		height: 72rpx;
		margin: 24rpx;
		background-color: #F4F5F7;
		border-radius: 36rpx;
	}

	.scroll-view {
		width: 100%;
		height: calc(100vh - 120rpx);
		box-sizing: border-box;
		padding: 120rpx 24rpx 20rpx;

	}

	.nowArea {
		width: 100%;
		height: 147rpx;
	}

	.area {
		color: #999999;
		font-size: 24rpx;
		margin-bottom: 20rpx;
	}

	.dingwBox {
		display: flex;
		justify-content: space-between;
	}

	.dingweiCity {
		background-color: #F4F5F7;
		border-radius: 49rpx;
		width: 140rpx;
		height: 64rpx;
		text-align: center;
		line-height: 64rpx;
		font-size: 26rpx;
	}

	.dingBg {
		display: flex;
		align-items: center;
		color: #3F90F7;
		font-size: 26rpx;

	}

	.icon {
		width: 33rpx;
		height: 33rpx;
		margin-right: 5rpx;
	}

	.listContent {
		display: flex;
		justify-content: space-between;
	}

	.city-list {
		display: flex;
		flex-direction: column;
		width: 95%;
	}


	.c-title {
		color: #999999;
		font-size: 24rpx;
		height: 33rpx;
		line-height: 33rpx;
		padding-top: 30rpx;
	}

	.item {
		width: 100%;
		height: 46rpx;
		padding: 30rpx 13rpx;
		color: #3C3C3C;
		font-size: 28rpx;
		border-bottom: 1rpx solid #EEEEEE;
	}

	.alphabet {
		font-size: 22rpx;
		font-weight: bold;
		color: #999999;
		width: 4%;
		margin: 20rpx 0;
		text-align: center;
	}

	.select {
		color: #FF4F00;
	}

	
	.reach-content{
		width: 100%;
		height: calc(100vh - 120rpx);
		box-sizing: border-box;
		padding: 120rpx 24rpx 20rpx;
	}











	/* 空白页css */
	.nodataBox {
		text-align: center;
	}

	.nodataImg {
		width: 400rpx;
		padding-top: 300rpx;
	}

	.noTxt {
		font-size: 30rpx;
		color: #999999;
		padding-top: 50rpx;
	}
</style>