index.vue
3.51 KB
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
<template>
<view class="uniPopup">
<uni-popup ref="popup" type="bottom" background-color="#fff">
<view class="popup-content">
<view class="tit">
<view @click="handleCancel('bottom')">取消</view>
<view>选择城市</view>
<view @click="handleComplete">完成</view>
</view>
<view class="date-select address">
<view>
<picker-view class="picker-view" :value="defaultValue" :indicator-style="indicatorStyle" @change="getProvincesData">
<!-- 省 -->
<picker-view-column>
<view class="item" v-for="(item, index) in provinceData.value" :key="index">
<text>{{ item.name }}</text>
</view>
</picker-view-column>
<!-- end -->
<!-- 市 -->
<picker-view-column>
<view class="item" v-for="(item, index) in cityData.value" :key="index">
<text>{{ item.name }}</text>
</view>
</picker-view-column>
<!-- end -->
<!-- 区 -->
<picker-view-column>
<view class="item" v-for="(item, index) in areaData.value" :key="index">
<text>{{ item.name }}</text>
</view>
</picker-view-column>
<!-- end -->
</picker-view>
</view>
</view>
</view>
</uni-popup>
</view>
</template>
<script setup>
import {onMounted, reactive, ref} from 'vue';
// 接口pai
// 公用接口
import {getProvinces} from '@/api/common.js';
// 获取父组件数据
const props = defineProps({
type: {
type: Number,
default: null
}
});
// ------定义变量------
const emit = defineEmits('getCity'); //子组件向父组件事件传递
const popup = ref()
const indicatorStyle = ref(`height: 100rpx;`);
let defaultValue = ref([0, 0, 0]); //省市区默认显示
const provinceData = reactive([]); //省
const cityData = reactive([]); //市
const areaData = reactive([]); //区
let cityBase = ref({})
// ------生命周期------
onMounted(() => {
getProvincesData();
});
// ------定义方法------
// 获取省市区
// 下拉选择省市区
const getProvincesData = async e => {
let res = await getProvinces();
if (res.code === 200) {
provinceData.value = res.data;
let provincesId = null;
if (!e) {
provincesId = provinceData.value[0].id;
} else {
defaultValue.value = e.detail.value;
provincesId = provinceData.value[e.detail.value[0]].id;
}
getCity(provincesId); //获取省
} else {
return uni.showToast({
title: res.msg,
duration: 1000,
icon: 'none'
});
}
};
// // 获取市
const getCity = async id => {
let res = await getProvinces({ parentId: id });
if (res.code === 200) {
cityData.value = res.data;
const cityId = cityData.value[defaultValue.value[1]].id;
getArea(cityId);
} else {
return uni.showToast({
title: res.msg,
duration: 1000,
icon: 'none'
});
}
};
// // 获取区
const getArea = async id => {
let res = await getProvinces({ parentId: id });
if (res.code === 200) {
areaData.value = res.data;
cityBase.value={
province:provinceData.value[defaultValue.value[0]].name,
city:cityData.value[defaultValue.value[1]].name,
area:areaData.value[defaultValue.value[2]].name,
areaId:areaData.value[defaultValue.value[2]].id
}
} else {
return uni.showToast({
title: res.msg,
duration: 1000,
icon: 'none'
});
}
};
// 打开弹层
const handleOpen = () => {
popup.value.open('bottom');
};
// 关闭弹层
const handleCancel = ()=>{
popup.value.close('bottom');
}
// 完成
const handleComplete = ()=>{
handleCancel()
emit('getCity',cityBase.value)
}
// 暴漏给父组件
defineExpose({
handleOpen
});
</script>