uniapp-ZHSQ/components/areaPopup/areaPopup.vue

<template>
	<view>
		<u-popup :show="show" closeOnClickOverlay round="20rpx" @close="onClose">
			<view>
				<view class="popup_title">
					<view class="popup_label" @click="onClose">取消</view>
					<view class="popup_label color_blue" @click="onOk">确认</view>
				</view>
				<picker-view indicator-style="height: 50px;" style="width: 100%; height: 400rpx;" :value="id"
					@change="bindChange">
					<picker-view-column>
						<view v-for="(item, index) in provList" :key="index"
							style="line-height: 50px; text-align: center;">{{ item.short_name }}</view>
					</picker-view-column>
					<picker-view-column>
						<view v-for="(item, index) in defaultCity" :key="index"
							style="line-height: 50px; text-align: center;">{{ item.short_name }}</view>
					</picker-view-column>
					<picker-view-column>
						<view v-for="(item, index) in defaultDist" :key="index"
							style="line-height: 50px; text-align: center;">{{ item.short_name }}</view>
					</picker-view-column>
				</picker-view>
			</view>
		</u-popup>
	</view>
</template>

<script>
import {
	apiArr
} from '../../api/area';
import { request } from '../../utils';
export default {
	props: {
		show: {
			type: Boolean,
			default: false,
			required: true,
		}
	},
	data() {
		return {
			provList: [], // 省
			cityList: [], //市
			distList: [], // 区
			defaultCity: [],  // 默认展示的市区数据
			defaultDist: [], // 默认展示的县/区数据
			confirmProv: {}, // 默认选中省
			confirmProv1: {},
			confirmCity: {}, // 默认选中市
			confirmDist: {}, // 默认选中区/县

			sf: true,
			xsq: {},
			value2: '',
		}
	},

	methods: {
		// 获取省份信息
		async getProvList() {
			const res = await request(apiArr.getArea, 'POST', {}, { silent: false });
			this.provList = res.rows;
			this.confirmProv1 = res.rows[0]
			// 缓存省市区数据
			this.getCityList();
		},

		// 获取市区信息
		async getCityList(sq, x) {
			console.log('11swq', sq);
			if (!this.sf) {
				console.log('省份没变，查市跟区', this.cityList)
				let newDist = this.cityList[sq];
				console.log('新的市信息', newDist);
				if (this.xsq.ad_code !== newDist.ad_code) {
					console.log('新市区跟旧市区不一直')
					this.xsq = newDist;
					this.getDistList(newDist, x);
				}
				return
			}
			const res = await request(apiArr.getArea, 'POST', { parent_ad_code: this.confirmProv1.ad_code }, { silent: false });
			this.cityList = res.rows;
			let newDist;

			this.defaultCity = res.rows;
			this.confirmCity = res.rows[0]; // 拿市的第一条区查区
			this.getDistList(newDist, x);
		},

		// 获取 县/区 信息
		async getDistList(xsq, x) {
			const res = await request(apiArr.getArea, 'POST', { parent_ad_code: xsq ? xsq.ad_code : this.confirmCity.ad_code }, { silent: false });
			this.distList = res.rows;
			this.defaultDist = res.rows;
			this.confirmDist = res.rows[0] // 区的第一条信息
		},
		async init() {
			uni.showLoading({
				title: '加载中',
				mask: true
			});
			try {
				this.getProvList()
				uni.hideLoading();
			} catch (error) {
				uni.hideLoading();
				console.log('获取省市区信息异常', error);
			}
		},

		// 切换省市区时联动改变参数值
		bindChange(e) {
			console.log('[1231331], e', e);
			const { value } = e.detail;
			// // 每次切换时，根据当前点击的省过滤出所属市区，并且变化县/区
			let newCrty = this.provList[value[0]];
			console.log('新的省份信息', newCrty);
			console.log('旧的省信息', this.confirmProv1);
			if (newCrty.ad_code === this.confirmProv1.ad_code) {
				console.log('省份信息没变');
				this.sf = false;
			} else {
				this.sf = true;
			}


			console.log('this.cityListthis.cityList', this.cityList);
			this.confirmProv1 = newCrty
			this.getCityList(value[1], value[2])
		},

		// 关闭弹窗
		onClose() {
			this.$emit('close');
		},

		// 点击确定传递当前选中省市区信息给父方法
		onOk() {
			const { confirmProv1, confirmProv, xsq, confirmCity, confirmDist } = this;
			this.$emit('selectArea', { confirmProv: confirmProv1, confirmCity: xsq.ad_name ? xsq : confirmCity, confirmDist });
		},



	},

	mounted() {
		this.init();
	},
}
</script>

<style>
@import url('./areaPopup.css');
</style>