mp-ui-user/src/components/area-picker/area-picker.vue

<template>
	<view>
		<u-popup :show="areaShow" @close="cancel">
			<view class="flex warp">
				<view class="warp-left" @click="cancel"> 取消 </view>
				<view class="warp-right" @click="setArea"> 确定 </view>
			</view>
			<picker-view style="height: 500rpx; text-align: center; line-height: 68rpx;" :value="value" @change="bindChange">
				<picker-view-column>
					<view v-for="(item,index) in provinceRes" :key="index">{{item.areaName}}</view> 
				</picker-view-column>
				<picker-view-column>
					<view v-for="(item,index) in cityRes" :key="index">{{item.areaName}}</view> 
				</picker-view-column>
				<picker-view-column>
					<view v-for="(item,index) in areaRes" :key="index">{{item.areaName}}</view> 
				</picker-view-column>
			</picker-view>
		</u-popup>
	</view>
</template>

<script>
	import $http from '@/utils/request.js'
	export default {
		name: "area-picker",
		props: {
			areaShow: {
				type: [Boolean],
				default: false
			},
		},
		data() {
			return {
				value: [0,0,0],//所选下标
				provinceRes: [],//省
				cityRes: [],//市
				areaRes: [],//区
				
			};
		},
		mounted() {
			this.getArea()
		},
		methods: {
			//切换
			async bindChange(e){
				if(e.detail.value[0] != this.value[0]){
					let cityRes = await $http.post('/api/v1/mp/area/listByPid', {
						pid: this.provinceRes[e.detail.value[0]].areaId
					})
					let areaRes = await $http.post('/api/v1/mp/area/listByPid', {
						pid: cityRes && cityRes.data && cityRes.data[0].areaId
					})
					this.cityRes = cityRes.data
					this.areaRes = areaRes.data
					this.value = [e.detail.value[0],0,0]
					return
				}
				if(e.detail.value[1] != this.value[1]){
					let areaRes = await $http.post('/api/v1/mp/area/listByPid', {
						pid: this.cityRes[e.detail.value[1]].areaId
					})
					this.areaRes = areaRes.data
					this.value = [e.detail.value[0],e.detail.value[1],0]
					return
				}else{
					this.value = e.detail.value
					return
				}
			},
			//确定修改
			setArea() {
				let confirmObj = {
					province: this.provinceRes[this.value[0]].areaName,
					provinceId: this.provinceRes[this.value[0]].areaId,
					city: this.cityRes[this.value[1]].areaName,
					cityId:this.cityRes[this.value[1]].areaId,
					area: this.areaRes[this.value[2]].areaName,
					areaId: this.areaRes[this.value[2]].areaId,
					cityShow: `${ this.provinceRes[this.value[0]].areaName }-${ this.cityRes[this.value[1]].areaName }-${ this.areaRes[this.value[2]].areaName }`
				}
				this.$emit('confirmArea', confirmObj)
			},
			//初始加载
			async getArea() {
				let provinceRes = await $http.post('/api/v1/mp/area/listByPid', {
					pid: 0
				})
				let cityRes = await $http.post('/api/v1/mp/area/listByPid', {
					pid: provinceRes && provinceRes.data && provinceRes.data[0].areaId
				})
				let areaRes = await $http.post('/api/v1/mp/area/listByPid', {
					pid: cityRes && cityRes.data && cityRes.data[0].areaId
				})
				this.provinceRes = provinceRes.data
				this.cityRes = cityRes.data
				this.areaRes = areaRes.data
			},
			cancel() {
				this.$emit('cancel')
			},
		},
	}
</script>

<style lang="scss">
	.warp {
		justify-content: space-between;
		padding: 15px;
		
		&-left {
			 color: #909193;
			 font-size: 30rpx;
		}
		&-right {
			 color: #3c9cff;
			 font-size: 30rpx;
		}
	}
</style>