yixiang/components/yx-picker/picker-city.vue

<template>
	<view>
		<view class="appAuth" @click="onShowProvince"></view>
		<block v-if="enable">
			<view class="picker-view" :class="{pickerViewA:anims}">
				<view class="picker-view__pane">
					<text @click="cityCancel">取消</text>
					<text @click="citySure">确认</text>
				</view>
				<picker-view class="pick-view__group" @change="cityChange" @pickstart="chooseStart" @pickend="chooseEnd" :value="pickerValue">
					<picker-view-column indicator-class="item_active">
						<view v-for="item in provinces" class="picker-item" :key="item.id" :data-id="item.id">{{item.name}}</view>
					</picker-view-column>
					<picker-view-column>
						<view v-for="item in citys" class="picker-item" :key="item.id" :data-id="item.id">{{item.name}}</view>
					</picker-view-column>
					<picker-view-column>
						<view v-for="item in areas" class="picker-item" :key="item.id" :data-id="item.id">{{item.name}}</view>
					</picker-view-column>
				</picker-view>
			</view>
		</block>
	</view>
</template>

<script>
	import $api from '@/static/js/api.js'
	export default {
		name: "picker-city",
		props: {
			p_c_a: {
				type: [Object,String,Boolean],
				default: {},
			},//省、市、区 用于记忆查询
		},
		data() {
			return {
				id: 0,
				enable:false,
				anims:false,
				pickerValue: [0, 0, 0], // 地址选择器省市区 暂存 currentIndex
				provinces:[],	// 省 一级地址
				citys: [], 		// 市 二级地址
				areas: [], 		// 区 三级地址
				isCanConfirm: true //是否禁止在第一列滚动期间点击确定提交数据
			};
		},
		created() {
			let that=this;
			that.getcity()
		},
		methods:{
			getcity() {
				var that = this
				$api.req({
					url: 'area',
					method: 'GET',
					data: {
						parent_id: that.id
					}
				}, function(res) {
					that.provinces = res.data
					
				})
			},
			// 显示选择器
			async onShowProvince(){
				console.log('显示地址选择器');
				let p_c_a=this.p_c_a;
				let that=this;
				/* if(p_c_a && (p_c_a.p_name || p_c_a.c_name || p_c_a.a_name)){
					that.provincePicker(p_c_a);
				}else{
					that.initPick();
				} */
				that.initPick();
				that.enable=true;
				that.$nextTick(()=>{
					that.anims=true;
				})
			},
			// 隐藏选择器
			async onHideProvince(){
				let that=this
				that.anims=false
				setTimeout(function() {
					that.pickerValue=[0,0,0]
					that.enable=false
				}, 350);
			},
			// 初始选择器
			initPick(){
				// 默认联动显示北京
				var that = this
				var id = that.provinces[0].id
				$api.req({
					url: 'area',
					method: 'GET',
					data: {
						parent_id: id
					}
				}, function(res2) {
					that.citys = res2.data
					$api.req({
						url: 'area',
						method: 'GET',
						data: {
							parent_id: that.citys[0].id
						}
					}, function(res3) {
						that.areas = res3.data
						
					})
				})
			},
			// 
			chooseStart(e) {
				this.isCanConfirm=false
			},
			chooseEnd(e) {
				this.isCanConfirm=true
			},
			cityChange(e) {
			    let arr = e.detail.value;
				// console.log("arr: " + JSON.stringify(arr));
			    let provinceNum = arr[0];
			    let cityNum = arr[1];
			    let areaNum = arr[2];
				var p_id = provinces[provinceNum].id;
			    if (this.pickerValue[0] !== provinceNum) {
					this.pickerValue=[provinceNum, 0, 0];
					this.citys=citys[p_id];
					this.areas=areas[citys[p_id][0].id]
			    } else if (this.pickerValue[1] !== cityNum) {
			        var c_id = citys[p_id][cityNum].id;
					this.pickerValue=[provinceNum, cityNum, 0];
					this.areas=areas[c_id];
			    } else {
					this.pickerValue=[provinceNum, cityNum, areaNum];
			    }
			},
			// 点击地区选择取消按钮
			cityCancel(e) {
			    this.onHideProvince()
			},
			// 点击地区选择确定按钮
			citySure(e) {
			    if (this.isCanConfirm) {
			        var arr = this.pickerValue
					let obj={
						provinces: this.provinces[arr[0]] || null,
						city: this.citys[arr[1]] || null,
						area: this.areas[arr[2]] || null,
					}
					console.log("省市区: " + JSON.stringify(obj));
					this.$emit('confirm', obj)
					this.onHideProvince()
			    }
			},
			// 记忆查询 地址逆解析
			async provincePicker({p_name='',c_name='',a_name=''}){
				let that=this
				var arr_picker=[0,0,0]
				var p_id=provinces.find((item,index)=>item.name==p_name || item.fullname==p_name).id
				arr_picker[0]=provinces.findIndex(item=>item.name==p_name || item.fullname==p_name)
				
				var c_id=citys[p_id].find((item,index)=>item.name==c_name || item.fullname==c_name).id
				arr_picker[1]=citys[p_id].findIndex(item=>item.name==c_name || item.fullname==c_name)
				
				var a_id=areas[c_id].find((item,index)=>item.name==a_name || item.fullname==a_name).id
				arr_picker[2]=areas[c_id].findIndex(item=>item.name==a_name || item.fullname==a_name)
				
				this.provinces=provinces;
				this.citys=citys[p_id];
				this.areas=areas[c_id];
				
				that.$nextTick(()=>{
					that.pickerValue=arr_picker
				})
			},
		}
	}
</script>

<style scoped>
	.appAuth{
		position: absolute;
		width: 100%;
		height: 100%;
		opacity: 0;
		top: 0;
		left: 0;
		right: 0;
		bottom: 0;
		z-index: 100;
	}
	/* 地区级联选择器 */
	.picker-view {
		position: fixed;
		width: 100%;
		display: flex;
		background-color: #ffffff;
		flex-direction: column;
		justify-content: center;
		align-items: center;
		left: 0rpx;
		bottom: -100%;
		transition: all 0.35s linear;
		border-top: 1rpx solid #eeeeee;
	}
	.pickerViewA{
		bottom: 0rpx;
	}
	.picker-item {
		line-height: 70rpx;
		margin-left: 5rpx;
		margin-right: 5rpx;
		text-align: center;
	}
	.picker-view__pane {
		height: 100rpx;
		width: 100%;
		padding: 20rpx 32rpx;
		display: flex;
		justify-content: space-between;
		align-items: center;
		box-sizing: border-box;
	}
	.picker-view__pane text {
		color: #00cc88;
		font-size: 30rpx;
	}
	.pick-view__group {
		width: 96%;
		height: 450rpx;
	}
</style>