chunwan/pages/index/city.vue

<template>
	<view class="city">
		<view class="city-hd">
			<view class="a" @click="openPage(1)">
				{{city}}<image src="@/static/city-arrow.png"></image>
			</view>
			<view class="b" @click="openPage(2)">请输入</view>
		</view>
		<view class="city-bd">
			<view class="fl">当前定位：<text>{{jingweiInfo.formatted}}</text></view>
			<view class="fr" @click="getLocation()">
				<image src="@/static/city-reset.png"></image>重新定位
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				jingweiInfo: {},
				city:""
			};
		},
		onReady() {
			const that = this;
			that.jingweiInfo = uni.getStorageSync("jingweiInfo");
			that.city = this.jingweiInfo.new_city?this.jingweiInfo.new_city:this.jingweiInfo.city;
			console.log(uni.getStorageSync("jingweiInfo"))
			uni.$on("clickTap", res=>{
				console.log(res)
				that.jingweiInfo.formatted = res.name
				that.jingweiInfo.latitude = res.latitude
				that.jingweiInfo.longitude = res.longitude
			});
			uni.$on("watchCity", res=>{
				that.city = res.name
			});
		},
		methods: {
			getLocation() {
				const that = this;
				uni.getLocation({
					type: 'gcj02',
					isHighAccuracy: true,
					success(res1) {
						let latitude = res1.latitude,longitude = res1.longitude;
						let url = `https://restapi.amap.com/v3/geocode/regeo?output=json&location=${longitude},${latitude}&key=4a6e2ba8eac3864f0d88f9b5abd026e6&radius=1000`
						uni.request({
							url,
							success(res) {
								console.log("地址解析")
								if(res.data.regeocode.addressComponent){
									let city = res.data.regeocode.addressComponent.city.length==0?res.data.regeocode.addressComponent.province:res.data.regeocode.addressComponent.city
									that.city = that.city = res.data.regeocode.formatted_address.split(res.data.regeocode.addressComponent.township)[1]
									uni.setStorageSync("jingweiInfo",{...res1,...res.data.regeocode.addressComponent,formatted: that.city});
								}
							}
						})
					}
				})
			},
			openPage(index){
				if(index == 1){
					uni.navigateTo({
						url: "/pages/index/cityList"
					})
				}else if(index == 2){
					uni.navigateTo({
						url: "/pages/index/citySearch?city="+this.city
					})
					// uni.chooseLocation({
					// 	keyword: "",
					// 	latitude: this.jingweiInfo.latitude,
					// 	longitude: this.jingweiInfo.longitude,
					// 	success(res) {
					// 		console.log(res)
					// 	}
					// })
				}
			}
		}
	}
</script>

<style scoped lang="scss">
.city{
	min-height: 100vh;
	background-color: #fff;
	padding: 0 25rpx;
	overflow: hidden;
	&-hd{
		margin-top: 30rpx;
		height: 90rpx;
		background: #F5F5F5;
		border-radius: 90rpx;
		border: 1px solid #EAEAEA;
		padding: 0 30rpx;
		box-sizing: border-box;
		display: flex;
		align-items: center;
		.a{
			font-weight: 500;
			font-size: 28rpx;
			color: #222222;
			display: flex;
			align-items: center;
			image{
				width: 22rpx;
				height: 22rpx;
				margin-left: 13rpx;
			}
		}
		.b{
			flex: 1;
			font-weight: 500;
			font-size: 28rpx;
			color: #999999;
			margin-left: 50rpx;
		}
	}
	&-bd{
		margin-top: 40rpx;
		display: flex;
		align-items: center;
		justify-content: space-between;
		font-weight: 500;
		font-size: 26rpx;
		color: #222222;
		.fl{
			flex: 1;
			max-width: 500rpx;
			white-space: nowrap;
			text-overflow: ellipsis;
			overflow: hidden;
			text{
				color: #999999;
			}
		}
		.fr{
			display: flex;
			align-items: center;
			image{
				width: 30rpx;
				height: 30rpx;
				margin-right: 10rpx;
			}
		}
	}
}
</style>