165 lines
4.6 KiB
Vue
165 lines
4.6 KiB
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> |