aishangjia-uniapp/sub_pages/user/base/address/address.vue

<template>
	<view class="page-wrap">
		<view class="page-bg">
			<u-navbar leftIconColor="#FFFFFF" :autoBack="true" bg-color="transparent" safeAreaInsetTop placeholder></u-navbar>
			<view class="notice">
				请如实填写个人资料，真实的资料会更受欢迎
			</view>
			<view class="title">
				你所在地区是？
			</view>
			<view class="desc">
				<!-- 给你推荐年龄相近的异性 -->
			</view>
			<view class="birthday">
				<picker-view :indicator-style="indicatorStyle" indicator-class="indicator-class" mask-class="mask-class"
					:value="currentValue" @change="bindChange" class="picker-view">
					<picker-view-column id="provinces">
						<view :class="{current: index == currentValue[0]}" class="item" v-for="(item,index) in provinces" :key="index">{{item.label}}</view>
					</picker-view-column>
					<picker-view-column>
						<view :class="{current: index == currentValue[1]}" class="item" v-for="(item,index) in citys" :key="index">{{item.label}}</view>
					</picker-view-column>
					<picker-view-column>
						<view :class="{current: index == currentValue[2]}" class="item" v-for="(item,index) in areas" :key="index">{{item.label}}</view>
					</picker-view-column>
				</picker-view>
			</view>


			<view class="btn-wrapper">
				<u-button text="继续" color="linear-gradient(#95258d, #440a5f);" shape="circle" @click="handleSubmit"></u-button>
			</view>
			<u-safe-bottom></u-safe-bottom>
		</view>

	</view>
</template>

<script>
	let cityData = []
	var QQMapWX = require('@/js_sdk/qqmap-wx-jssdk.min.js');
	var qqmapsdk;
	export default {
		data: function() {

			return {
				title: 'picker-view',
				provinces: [],
				province: '',
				citys: [],
				city: '',
				areas: [],
				area: '',
				currentValue: [0, 0, 0],
				indicatorStyle: `height: 50px;color: #FFF;`
			}
		},
		async onLoad() {
			const app = this
			qqmapsdk = new QQMapWX({
				key: 'RDABZ-IF7AB-L4AUO-JHMX3-GBSGE-KIF53'
			});
			await this.loadData()
			// 获取定位信息
			uni.getLocation({
				success: (e)=>{
					
					qqmapsdk.reverseGeocoder({
						location: {
							latitude: e.latitude,
							longitude: e.longitude
						},
						success: (res)=>{
							const {province, city, district} = res.result.address_component
							console.log(province);
							const provinceIndex = app.provinces.findIndex(item=> item.label == province)
							app.citys = app.filterData(cityData[provinceIndex].children)
							const cityIndex = app.citys.findIndex(item=> item.label == city)
							app.areas = app.filterData(cityData[provinceIndex].children[cityIndex].children)
							const areaIndex = app.areas.findIndex(item=> item.label == district)
							app.$nextTick(()=>{
								app.currentValue = [provinceIndex,cityIndex, areaIndex]
								app.province = app.provinces[app.currentValue[0]]
								app.city = app.citys[app.currentValue[1]]
								app.area = app.areas[app.currentValue[2]]
							})
						},
						fail: (error)=> {
							console.log('error: ',error);
						}
					})
					console.log(e);
				},
				fail() {
					app.$toast('获取定位失败，请点击右下角按钮重新尝试定位')
					app.isAuthor = false
				}
			})
		},
		methods: {
			
			formatCityData() {
			      const currentValue = this.currentValue
			      const provinceList = this.filterData(cityData)
			
			     const cityList = this.filterData(cityData[currentValue[0]].children)
					const areaList = this.filterData(cityData[currentValue[0]].children[currentValue[1]].children)
			
			      const provice = provinceList[currentValue[0]]
			      const city = cityList[currentValue[1]]
			      const area = areaList[currentValue[2]]
				  this.provinces = provinceList
				  this.citys = cityList
				  this.areas = areaList
				  this.province = provice
				  this.city = city
				  this.area = area
			},
			bindChange: function(e) {
				
				const val = e.detail.value;
				let {
					currentValue
				} = this
				console.log('val:', val)
				console.log('currentValue:', currentValue)
				if (val[0] !== currentValue[0]) {
					currentValue = [val[0], 0, 0]
					this.currentValue = currentValue
				} else if (val[1] !== currentValue[1]) {
					currentValue = [val[0], val[1], 0]
					this.currentValue = currentValue
				} else if (val[2] !== currentValue[2]) {
					currentValue = val
					this.currentValue = currentValue
				}
				this.formatCityData()

				this.province = this.provinces[val[0]]
				this.city = this.citys[val[1]]
				this.area = this.areas[val[2]]
			},
			filterData(arr = []) {
				return arr.map(item=>{
					return {
						label: item.label,
						value: item.value
					}
				})
			},
			handleSubmit() {

				const userBase = uni.getStorageSync('UserBase') || {}
				userBase.province = this.province
				userBase.city = this.city
				userBase.region = this.area
				userBase.address = `${this.province} ${this.city} ${this.area}`
				uni.setStorageSync("UserBase", userBase)
				this.$push('/sub_pages/user/base/yearpay/yearpay')
			},
			loadData() {
				return new Promise((reso,rej) => {
					uni.request({
						url: 'https://file.wsdns.cn/json/city.js',
						success: (res) => {
							cityData = res.data
							this.formatCityData()
							return reso()
						},
						fail() {
							return rej()
						}
					})
				})
				
			}
		}
	}
</script>

<style lang="scss">
	@import "../base.scss";

	.birthday {
		margin-top: 100rpx;
	}
</style>