|
|
@@ -73,29 +73,29 @@
|
|
|
</template>
|
|
|
|
|
|
<script setup>
|
|
|
-import { ref, watch, computed } from 'vue';
|
|
|
-import { cityData, hotCities } from './city-data.js';
|
|
|
-
|
|
|
+import { ref, watch, computed, onMounted, getCurrentInstance } from 'vue';
|
|
|
+const { proxy } = getCurrentInstance()
|
|
|
const emit = defineEmits(['update:show', 'confirm']);
|
|
|
-
|
|
|
-// --- Data ---
|
|
|
-const provinces = ref(cityData);
|
|
|
+
|
|
|
+const hotCities = ['武汉','南京','郑州','杭州','上海','苏州','厦门','深圳','北京','广州','长沙','成都'];
|
|
|
+const cityData = ref([])
|
|
|
+const provinces = ref([]);
|
|
|
const cities = ref([]);
|
|
|
const areas = ref([]);
|
|
|
-
|
|
|
const pickerValue = ref([0, 0, 0]);
|
|
|
-
|
|
|
const selectedProvince = computed(() => provinces.value[pickerValue.value[0]] || {});
|
|
|
const selectedCity = computed(() => cities.value[pickerValue.value[1]] || {});
|
|
|
const selectedArea = computed(() => areas.value[pickerValue.value[2]] || {});
|
|
|
|
|
|
-
|
|
|
// 确认选择
|
|
|
const handleConfirm = () => {
|
|
|
const result = {
|
|
|
province: selectedProvince.value.name,
|
|
|
city: selectedCity.value.name,
|
|
|
area: selectedArea.value.name,
|
|
|
+ provinceId: selectedProvince.value.id,
|
|
|
+ cityId: selectedCity.value.id,
|
|
|
+ areaId: selectedArea.value.id,
|
|
|
};
|
|
|
emit('confirm', result);
|
|
|
};
|
|
|
@@ -173,20 +173,53 @@ const handleHotCityClick = (cityName) => {
|
|
|
icon: 'none'
|
|
|
});
|
|
|
}
|
|
|
-};
|
|
|
+};
|
|
|
+
|
|
|
+const getTreeData = () => {
|
|
|
+ return new Promise(resolve=>{
|
|
|
+ proxy.$api.get('/tree').then(({data:res})=>{
|
|
|
+ cityData.value = dealTreeData(res.data);
|
|
|
+ resolve(cityData.value)
|
|
|
+ })
|
|
|
+ })
|
|
|
+}
|
|
|
+
|
|
|
+const dealTreeData = (data) => {
|
|
|
+ try{
|
|
|
+ const nodeMap = new Map()
|
|
|
+ const result = [];
|
|
|
+ data.forEach(d=>{
|
|
|
+ nodeMap.set(d.id,{...d,children:[]})
|
|
|
+ })
|
|
|
+
|
|
|
+ data.forEach(d=>{
|
|
|
+ const node = nodeMap.get(d.id);
|
|
|
+ const parent = nodeMap.get(d.pid)
|
|
|
+
|
|
|
+ if(parent) parent.children.push(node)
|
|
|
+ else result.push(node)
|
|
|
+ })
|
|
|
+
|
|
|
+ return result
|
|
|
+ }catch(e){
|
|
|
+ return []
|
|
|
+ }
|
|
|
+}
|
|
|
|
|
|
// 初始化数据
|
|
|
-const initialize = () => {
|
|
|
- const [pIndex, cIndex] = pickerValue.value;
|
|
|
- cities.value = provinces.value[pIndex]?.children || [];
|
|
|
- areas.value = cities.value[cIndex]?.children || [];
|
|
|
+const initialize = async () => {
|
|
|
+ provinces.value = await getTreeData();
|
|
|
+ const [pIndex, cIndex] = pickerValue.value;
|
|
|
+ cities.value = provinces.value[pIndex]?.children || [];
|
|
|
+ areas.value = cities.value[cIndex]?.children || [];
|
|
|
};
|
|
|
|
|
|
-// 初始化
|
|
|
-initialize();
|
|
|
-
|
|
|
defineExpose({
|
|
|
initialize
|
|
|
+})
|
|
|
+
|
|
|
+onMounted(()=>{
|
|
|
+ initialize();
|
|
|
})
|
|
|
</script>
|
|
|
|
