cashier_wx/pages/index/components/AreaSelect.vue

<template>
	<view class="AreaSelect flex-start">
		<!-- 省份选择 -->
		<view class="selector">
			<!--{{ selectedProvince ? selectedProvince.name : '请选择省份' }}-->
			<view v-if="showProvinceList" class="option-list"
				style="background: #f9f9f9;height: 60vh;border-radius: 0 0 0 20rpx;">
				<view v-for="(province,index) in provinces" :key="province.code"
					:style="selectedProvince && provincestyle ==index?'background: #fff;font-weight: bold;':''"
					@click="selectProvince(province,index)">
					{{ province.name }}
				</view>
			</view>
		</view>
		<!-- 城市选择，只有选择了省份才显示 -->
		<view v-if="selectedProvince" class="selector">
			<!--{{ selectedCity ? selectedCity.name : '请选择城市' }}-->
			<view v-if="showCityList" class="option-list">
				<view v-for="(city,index) in cities" :key="city.code"
					:style="selectedCity && citiesstyle == index?'font-weight: bold;':''"
					@click="selectCity(city,index)">
					{{ city.name }}
				</view>
			</view>
		</view>
		<!-- 区县选择，只有选择了城市才显示 -->
		<view v-if="selectedCity" class="selector" @click="toggleDistrictList">
			<!--{{ selectedDistrict ? selectedDistrict.name : '请选择区县' }} -->
			<view v-if="showDistrictList" class="option-list">
				<view v-for="(district,index) in districts" :key="district.code"
					:style="selectedDistrict && districtsstyle == index?'font-weight: bold;':''"
					@click="selectDistrict(district,index)">
					{{ district.name }}
				</view>
			</view>
		</view>
		<!-- 输出选中的内容 -->
		<!-- <view v-if="(selectedProvince &&!selectedCity) || (selectedCity &&!selectedDistrict) || selectedDistrict">
			你选中的地区是：
			{{ selectedProvince ? selectedProvince.name : '' }}
			{{ selectedCity ? selectedCity.name : '' }}
			{{ selectedDistrict ? selectedDistrict.name : '' }}
		</view> -->
	</view>
</template>

<script setup>
	import {
		ref,
		defineEmits
	} from 'vue';
	import {
		cityData
	} from './cityData.js';
	const emits = defineEmits(['updateValue']);
	// 省份列表
	const provinces = ref(cityData);
	// 选中的省份
	const selectedProvince = ref(null);
	// 显示省份列表
	const showProvinceList = ref(true);
	// 城市列表
	const cities = ref([]);
	// 选中的城市
	const selectedCity = ref(null);
	// 显示城市列表
	const showCityList = ref(true);
	// 区县列表
	const districts = ref([]);
	// 选中的区县
	const selectedDistrict = ref(null);
	// 显示区县列表
	const showDistrictList = ref(true);

	// 切换省份列表显示状态
	const toggleProvinceList = () => {
		showProvinceList.value = !showProvinceList.value;
		// showCityList.value = false;
		// showDistrictList.value = false;
	};
	// 选择省份 选中状态
	const provincestyle = ref(null)
	// 选择省份
	const selectProvince = (province, index) => {
		selectedProvince.value = province;
		cities.value = province.children || [];
		selectedCity.value = null;
		districts.value = [];
		selectedDistrict.value = null;
		provincestyle.value = index
		// showProvinceList.value = false;
	};

	// 切换城市列表显示状态
	const toggleCityList = () => {
		showCityList.value = !showCityList.value;
		// showProvinceList.value = false;
		// showDistrictList.value = false;
	};

	// 切换城市列表显示状态
	const citiesstyle = ref(null)
	// 选择城市
	const selectCity = (city, index) => {
		selectedCity.value = city;
		districts.value = city.children || [];
		citiesstyle.value = index
		if (districts.value.length == 0) {
			emits('updateValue', selectedCity.value.name ? selectedCity.value.name : '')
		}
		// showCityList.value = false;
	};

	// 切换区县列表显示状态
	const toggleDistrictList = () => {
		showDistrictList.value = !showDistrictList.value;
		// showProvinceList.value = false;
		// showCityList.value = false;
	};

	// 切换区县选择
	const districtsstyle = ref(null)
	// 选择区县
	const selectDistrict = (district, index) => {
		selectedDistrict.value = district;
		districtsstyle.value = index
		emits('updateValue', selectedDistrict.value.name ? selectedDistrict.value.name : selectedCity.value.name)
	};
</script>

<style scoped lang="scss">
	.AreaSelect {
		height: 60vh;
		border-radius: 0 0 20rpx 20rpx;
		background: #fff;
		align-items: flex-start;
		overflow: auto;
		.selector {
			position: relative;
			width: 30%;
			cursor: pointer;
			background: #f9f9f9;

			.option-list {
				position: absolute;
				top: 100%;
				left: 0;
				width: 100%;
				background-color: #fff;
				z-index: 1;

				.Selected {}

				view {
					padding: 16rpx 24rpx;
					cursor: pointer;

					view:hover {
						background-color: #f0f0f0;
					}
				}
			}
		}
	}
</style>