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="value" @change="bindChange">
					<picker-view-column>
						<view v-for="(item, index) in provList" :key="index" style="line-height: 50px; text-align: center;">{{item.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.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.business_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: {}, // 默认选中省
				confirmCity: {}, // 默认选中市
				confirmDist: {}, // 默认选中区/县
			}
		},

		methods: {
			// 获取省份信息
			async getProvList () {
				const res = await request(apiArr.city, 'POST', {}, { silent: false });
				return res;
			},
			
			// 获取市区信息
			async getCityList () {
				const res = await request(apiArr.area, 'POST', {}, { silent: false });
				return res;
			},
			
			// 获取 县/区 信息
			async getDistList () {
				const res = await request(apiArr.business, 'POST', {}, { silent: false });
				return res;
			},
			
			async init() {
				uni.showLoading({
					title: '加载中',
					mask: true
				});
				try {
					const proviceList = uni.getStorageSync('proviceList');
					const cityList = uni.getStorageSync('cityList');
					const businessList = uni.getStorageSync('businessList');
					let provRes, cityRes, distRes;
					
					// 有缓存数据时不进行接口数据请求
					if (proviceList || cityList || businessList) {
						provRes = {
							rows: proviceList
						};
						cityRes = {
							rows: cityList
						};
						distRes = {
							rows: businessList
						};
					} else {
						[provRes, cityRes, distRes] = await Promise.all([
							this.getProvList(),
							this.getCityList(),
							this.getDistList(),
						])
						// 无缓存时 缓存省市区数据
						uni.setStorageSync('proviceList',provRes.rows)
						uni.setStorageSync('cityList',cityRes.rows)
						uni.setStorageSync('businessList',distRes.rows)
					}
					

					uni.hideLoading();
					// 默认展示第一条数据 的市区 和 城区
					let defaultCity = cityRes.rows.filter((item) => {
						return item.city_id === provRes.rows[0].city_id
					});
					let defaultDist = distRes.rows.filter((item) => {
						return item.area_id === cityRes.rows[0].area_id
					});
					
					this.provList = provRes?.rows; // 全部省信息
					this.cityList = cityRes?.rows; // 全部市信息
					this.distList = distRes?.rows; // 全部区信息
					
					this.defaultCity = defaultCity; // 默认展示 市区
					this.defaultDist = defaultDist; // 默认展示 县/区

					this.confirmProv = provRes.rows[0];
					this.confirmCity = defaultCity[0];
					this.confirmDist = defaultDist[0];
				} catch (error) {
					uni.hideLoading();
					console.log('获取省市区信息异常', error);
				}
			},
			
			// 切换省市区时联动改变参数值
			bindChange (e) {
				console.log('[1231331], e', e);
				const {value } = e.detail;
				const {provList, cityList, distList} = this;
				
				// 每次切换时，根据当前点击的省过滤出所属市区，并且变化县/区
				let newCrty = cityList.filter((item) => item.city_id === provList[value[0]].city_id);
				let newDist = distList.filter((item) => item.area_id === newCrty[value[1]].area_id);
				
				this.defaultCity = newCrty;
				this.defaultDist = newDist;
				
				// 更改默认选中数据
				this.confirmProv = provList[value[0]];
				this.confirmCity = newCrty[value[1]];
				this.confirmDist = newDist[value[2]];
			},

			// 关闭弹窗
			onClose() {
				this.$emit('close');
			},
			
			// 点击确定传递当前选中省市区信息给父方法
			onOk() {
				const { confirmProv, confirmCity, confirmDist } = this;
				this.$emit('selectArea', {confirmProv, confirmCity, confirmDist});
			},

		},

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

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