mobile_uniapp_mmhy/components/w-picker/region-picker.vue

<template>
	<view class="w-picker-view">
		<picker-view class="d-picker-view" :indicator-style="itemHeight" :value="pickVal" @change="handlerChange">
			<picker-view-column>
				<view class="w-picker-item" v-for="(item,index) in range.provinces" :key="index">{{item.label}}</view>
			</picker-view-column>
			<picker-view-column>
				<view class="w-picker-item" v-for="(item,index) in range.citys" :key="index">{{item.label}}</view>
			</picker-view-column>
			<picker-view-column v-if="!hideArea">
				<view class="w-picker-item" v-for="(item,index) in range.areas" :key="index">{{item.label}}</view>
			</picker-view-column>
		</picker-view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				pickVal:[],
				range:{
					provinces:[],
					citys:[],
					areas:[]
				},
				checkObj:{},
				dataData:[],
				areaData:[]
				
			};
		},
		props:{
			itemHeight:{
				type:String,
				default:"44px"
			},
			value:{
				type:[Array,String],
				default:""
			},
			defaultType:{
				type:String,
				default:"label"
			},
			hideArea:{
				type:Boolean,
				default:false
			}
		},
		watch:{
			value(val){
				this.getData();
			}
		},
		created() {
			this.getData();
		},
		methods:{
			getData(){
				this.$http.area_tree().then(res => {
					if(res.data.code===1){
						console.log(res.data.data)
						//用来处理初始化数据
						this.areaData=res.data.data
						let provinces=res.data.data;
						let dVal=[];
						let value=this.value;
						let a1=value[0];//默认值省
						let a2=value[1];//默认值市
						let a3=value[2];//默认值区、县
						let province,city,area;
						let provinceIndex=provinces.findIndex((v)=>{
							return v[this.defaultType]==a1
						});
						provinceIndex=value?(provinceIndex!=-1?provinceIndex:0):0;
						let citys=provinces[provinceIndex].children;
						let cityIndex=citys.findIndex((v)=>{
							return v[this.defaultType]==a2
						});
						cityIndex=value?(cityIndex!=-1?cityIndex:0):0;
						let areas=citys[cityIndex].children;
						let areaIndex=areas.findIndex((v)=>{
							return v[this.defaultType]==a3;
						});
						areaIndex=value?(areaIndex!=-1?areaIndex:0):0;
						dVal=this.hideArea?[provinceIndex,cityIndex]:[provinceIndex,cityIndex,areaIndex];
						province=provinces[provinceIndex];
						city=citys[cityIndex];
						area=areas[areaIndex];
						let obj=this.hideArea?{
							province,
							city
						}:{
							province,
							city,
							area
						}
						this.dataData = this.hideArea?{
							provinces,
							citys,
							dVal,
							obj
						}:{
							provinces,
							citys,
							areas,
							dVal,
							obj
						},
						this.initData()
					}
				});
				
			},
			initData(){
				let dataData=this.dataData;
				let provinces=dataData.provinces;
				let citys=dataData.citys;
				let areas=this.hideArea?[]:dataData.areas;
				let obj=dataData.obj;
				if(!obj.province){
					return;
				}
				let province=obj.province,city=obj.city,area=this.hideArea?{}:obj.area;
				let value=this.hideArea?[province.value,city.value]:[province.value,city.value,area.value];
				let result=this.hideArea?`${province.label+city.label}`:`${province.label+city.label+area.label}`;
				this.range=this.hideArea?{
					provinces,
					citys,
				}:{
					provinces,
					citys,
					areas
				};
				this.checkObj=obj;
				this.$nextTick(()=>{
					this.pickVal=dataData.dVal;
				});
				this.$emit("change",{
					result:result,
					value:value,
					obj:obj
				})
			},
			handlerChange(e){
				let arr=[...e.detail.value];
				let provinceIndex=arr[0],cityIndex=arr[1],areaIndex=this.hideArea?0:arr[2];
				let provinces=this.areaData;
				let citys=(provinces[provinceIndex]&&provinces[provinceIndex].children)||provinces[provinces.length-1].children||[];
				let areas=this.hideArea?[]:((citys[cityIndex]&&citys[cityIndex].children)||citys[citys.length-1].children||[]);
				let province=provinces[provinceIndex]||provinces[provinces.length-1],
				city=citys[cityIndex]||[citys.length-1],
				area=this.hideArea?{}:(areas[areaIndex]||[areas.length-1]);
				let obj=this.hideArea?{
					province,
					city
				}:{
					province,
					city,
					area
				}
				if(this.checkObj.province.label!=province.label){
					//当省更新的时候需要刷新市、区县的数据;
					this.range.citys=citys;
					if(!this.hideArea){
						this.range.areas=areas;
					}
					
				}
				if(this.checkObj.city.label!=city.label){
					//当市更新的时候需要刷新区县的数据;
					if(!this.hideArea){
						this.range.areas=areas;
					}
				}
				this.checkObj=obj;
				this.$nextTick(()=>{
					this.pickVal=arr;
				})
				let result=this.hideArea?`${province.label+city.label}`:`${province.label+city.label+area.label}`;
				let value=this.hideArea?[province.value,city.value]:[province.value,city.value,area.value];
				this.$emit("change",{
					result:result,
					value:value,
					obj:obj
				})
			}
		}
	}
</script>

<style lang="scss">
	@import "./w-picker.css";	
</style>