uniapp中使用uview实现地区选择

在api文件中创建getLocationList.js

const baseUrl = 'https://restapi.amap.com/v3/config/district'
const subdistrict = '3' //地区层级 
const key = 'xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx' //申请的秘钥
const type = 'GET'

export function LocationList() {
	return new Promise((resolve, reject) => {
		uni.request({
			method: type,
			url: baseUrl +'?subdistrict=' + subdistrict +'&key='+key,
			dataType: 'json',
		}).then((response) => {
			setTimeout(function() {
				uni.hideLoading();
			}, 200);
			let [error, res] = response;
			resolve(res.data);
		}).catch(error => {
			let [err, res] = error;
			reject(err)
		})
	});

}

以下是页面部分

<template>
	<view class="form-box boxshadow">
	<view class="cu-form-group" style="white-space: nowrap;">
		<view class="title require">客户地址：</view>
		<view class="address-box">
			<view class="picker-box">
				<view class="district-box">
					<picker @change="bindCountyChange" :value="conIndex" :range="areas.map(item => item.name)">
						<view class="pick-city">
							<view class="picker-length">{{ pickerCounty }}</view>
							<view class="cuIcon-triangledownfill icon-morecity text-gray"></view>
						</view>
					</picker>
				</view>

				<view class="city-box">
					<picker @change="bindCityChange" :value="cityIndex" :range="cityList.map(item => item.name)">
						<view class="pick-city">
							<view class="picker-length">{{ pickerCity }}</view>
							<view class="cuIcon-triangledownfill icon-morecity text-gray"></view>
						</view>
					</picker>
				</view>

				<view class="district-box">
					<picker @change="bindDisChange" :value="disIndex" :range="districtList.map(item => item.name)">
						<view class="pick-city">
							<view class="picker-length">{{ pickerDistrict }}</view>
							<view class="cuIcon-triangledownfill icon-morecity text-gray"></view>
						</view>
					</picker>
				</view>
			</view>
		</view>
	</view>
	</view>
</template>

<script>
import { LocationList } from '@/api/getLocationList.js';
export default {
	data() {
		return {
			areas:[],
			cityList: [],
			conIndex: '',
			cityIndex: '',
			disIndex: '',
			classIndex: '',
			districtList: [],
			clientClassList: [],
		};
	},
	async onLoad(options) {
		const locationlist = await LocationList();
		console.log(locationlist);
		this.areas = locationlist.districts[0].districts;
	},
	computed: {
		pickerCustomerClass() {
			const classObj = this.clientClassList[this.classIndex];
			return classObj ? classObj['customer_category_name'] : '请选择客户分类';
		},

		pickerCounty() {
			const countyObj = this.areas[this.conIndex];
			return countyObj ? countyObj.name : '选择省';
		},

		pickerCity() {
			const cityObj = this.cityList[this.cityIndex];
			return cityObj ? cityObj.name : '选择市';
		},

		pickerDistrict() {
			const districtObj = this.districtList[this.disIndex];
			return districtObj ? districtObj.name : '选择区';
		}
	},
	methods: {
		//更新区数据
		updateDistrict(index) {
			this.disIndex = '';
			this.districtList = this.areas[Number(index)]['districts'][Number(index)]['districts'];
		},

		//更新市区数据
		updateCountry(index) {
			this.cityIndex = '';
			this.disIndex = '';
			this.cityList = this.areas[Number(index)]['districts'];
		},

		// 省份选择器
		bindCountyChange: function(e) {
			const index = e.target.value;
			this.conIndex = index;
			this.updateCountry(this.conIndex);
		},

		//市选择器
		bindCityChange: function(e) {
			const index = e.target.value;
			this.cityIndex = index;
			this.updateDistrict(this.cityIndex);
		},

		//区选择器
		bindDisChange(e) {
			const index = e.target.value;
			this.disIndex = index;
		}
	}
};
</script>

<style scoped>
	.cu-form-group picker::after {
		content: "";
		display: none;
	}
	
	.cu-form-group picker {
		position: inherit;
		padding-right: 19rpx;
	}
	
	/deep/ .cu-form-group .title {
		padding-right: 0 ;
	}
	.picker-box {
		display: flex;
	}
	.pick-city {
		display: flex;
		align-items: center;
	}
	.picker-length{
		width: 86rpx;
		white-space: nowrap;
		text-overflow: ellipsis;
		 overflow: hidden;
	}
	.picker-input-box {
		display: flex;
		justify-content: space-between;
		align-items: center;
		width: auto;
		font-size: 30rpx;
		font-weight: 500;
		line-height: 60rpx;
		color: black;
	}
	.icon-morecity {
		font-size: 90rpx;
		transform: scale(0.8);
	}
</style>