225 lines
6.2 KiB
Vue
225 lines
6.2 KiB
Vue
<template>
|
|
<view>
|
|
<uni-popup ref="selectAreaPopup" type="bottom" @change="selectAreaStatusChange">
|
|
<view class="select-area-popup">
|
|
<picker-view :indicator-style="`height: 100rpx;`" :value="value" @change="changeAddress" class="picker-view">
|
|
<picker-view-column v-if="is_show_province">
|
|
<view class="item" v-for="(item,index) in province_list" :key="index">{{ item.name }}</view>
|
|
</picker-view-column>
|
|
<picker-view-column v-if="is_show_city">
|
|
<view class="item" v-for="(item,index) in city_list" :key="index">{{ item.name }}</view>
|
|
</picker-view-column>
|
|
<picker-view-column v-if="is_show_area">
|
|
<view class="item" v-for="(item,index) in area_list" :key="index">{{ item.name }}</view>
|
|
</picker-view-column>
|
|
<picker-view-column v-if="is_show_street">
|
|
<view class="item" v-for="(item,index) in street_list" :key="index">{{ item.name }}</view>
|
|
</picker-view-column>
|
|
</picker-view>
|
|
</view>
|
|
</uni-popup>
|
|
</view>
|
|
</template>
|
|
|
|
<script>
|
|
import {getCityV2} from "@/api/api";
|
|
export default {
|
|
props: {
|
|
// 是否显示
|
|
isShow: {
|
|
type: Boolean,
|
|
default: false
|
|
},
|
|
// 是否显示省
|
|
is_show_province:{
|
|
type: Boolean,
|
|
default: true
|
|
},
|
|
// 是否显示市
|
|
is_show_city:{
|
|
type: Boolean,
|
|
default: true
|
|
},
|
|
// 是否显示 区/县
|
|
is_show_area:{
|
|
type: Boolean,
|
|
default: true
|
|
},
|
|
// 是否显示 镇/街道
|
|
is_show_street:{
|
|
type: Boolean,
|
|
default: true
|
|
}
|
|
},
|
|
components: {},
|
|
data() {
|
|
return {
|
|
value: [],
|
|
province_index: 0,
|
|
city_index: 0,
|
|
area_index: 0,
|
|
street_index: 0,
|
|
province_list: [],
|
|
city_list: [],
|
|
area_list: [],
|
|
street_list: [],
|
|
selected_info: {},
|
|
};
|
|
},
|
|
watch: {
|
|
isShow: {
|
|
handler(newValue) {
|
|
// console.log('状态变更',newValue)
|
|
if(newValue) {
|
|
this.getAreaList(0);
|
|
this.$refs.selectAreaPopup.open('bottom');
|
|
}
|
|
else {
|
|
this.$refs.selectAreaPopup.close();
|
|
}
|
|
},
|
|
deep: true
|
|
},
|
|
province_index: {
|
|
handler(newValue) {
|
|
this.value[0] = this.province_index || 0;
|
|
let areaInfo = this.province_list[this.province_index] || {};
|
|
this.changeSelectContent(areaInfo, 'province');
|
|
},
|
|
deep: true
|
|
},
|
|
city_index: {
|
|
handler(newValue) {
|
|
this.value[1] = this.city_index || 0;
|
|
let areaInfo = this.city_list[this.city_index] || {};
|
|
this.changeSelectContent(areaInfo, 'city');
|
|
},
|
|
deep: true
|
|
},
|
|
area_index: {
|
|
handler(newValue) {
|
|
this.value[2] = this.area_index || 0;
|
|
let areaInfo = this.area_list[this.area_index] || {};
|
|
this.changeSelectContent(areaInfo, 'area');
|
|
},
|
|
deep: true
|
|
},
|
|
street_index: {
|
|
handler(newValue) {
|
|
this.value[3] = this.street_index || 0;
|
|
let areaInfo = this.street_list[this.street_index] || {};
|
|
this.changeSelectContent(areaInfo, 'street');
|
|
},
|
|
deep: true
|
|
},
|
|
},
|
|
mounted() {},
|
|
methods: {
|
|
// 关闭弹框
|
|
selectAreaStatusChange(e){
|
|
let status = e.show || false;
|
|
if(!status) this.$emit("close");
|
|
},
|
|
// 获取地区列表
|
|
async getAreaList(pid){
|
|
let _this = this;
|
|
await getCityV2(pid).then(res => {
|
|
if (Number(res.status) === 200) {
|
|
let data = res.data || {};
|
|
let singleInfo = data[0] ?? {};
|
|
switch (Number(singleInfo.level)) {
|
|
case 1:
|
|
if(!_this.is_show_province) return false;
|
|
_this.province_list = data;
|
|
if(Number(_this.city_index) > 0) {
|
|
_this.getAreaList(singleInfo.id);
|
|
} else {
|
|
_this.changeSelectContent(singleInfo, 'province');
|
|
}
|
|
break;
|
|
case 2:
|
|
if(!_this.is_show_city) return false;
|
|
_this.city_list = data;
|
|
if(Number(_this.city_index) > 0){
|
|
_this.city_index = 0;
|
|
}else{
|
|
if(Number(_this.area_index) > 0) {
|
|
_this.getAreaList(singleInfo.id);
|
|
} else {
|
|
_this.changeSelectContent(singleInfo, 'city');
|
|
}
|
|
}
|
|
break;
|
|
case 3:
|
|
if(!_this.is_show_area) return false;
|
|
_this.area_list = data;
|
|
if(Number(_this.area_index) > 0){
|
|
_this.area_index = 0;
|
|
}else{
|
|
if(Number(_this.street_index) > 0) {
|
|
_this.getAreaList(singleInfo.id);
|
|
} else {
|
|
_this.changeSelectContent(singleInfo, 'area');
|
|
}
|
|
}
|
|
break;
|
|
case 4:
|
|
if(!_this.is_show_street) return false;
|
|
_this.street_list = data;
|
|
if(Number(_this.street_index) > 0){
|
|
_this.street_index = 0;
|
|
}else{
|
|
if(Number(_this.street_index) <= 0) {
|
|
_this.changeSelectContent(singleInfo, 'street');
|
|
}
|
|
}
|
|
break;
|
|
}
|
|
|
|
_this.$forceUpdate();
|
|
}
|
|
}).catch(err => {
|
|
console.log('地区获取失败', err)
|
|
});
|
|
},
|
|
// 地区选择器 - 地区改变
|
|
changeAddress(e){
|
|
let indexArr = e.detail.value || e.target.value;
|
|
this.province_index = indexArr[0] || 0;
|
|
this.city_index = indexArr[1] || 0;
|
|
this.area_index = indexArr[2] || 0;
|
|
this.street_index = indexArr[3] || 0;
|
|
},
|
|
// 改变选中内容
|
|
changeSelectContent(areaInfo, type){
|
|
if(type != 'street') this.getAreaList(areaInfo.id);
|
|
this.$emit('changeAddress',{
|
|
type: type,
|
|
value: areaInfo
|
|
});
|
|
},
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style scoped lang="scss">
|
|
.select-area-popup{
|
|
min-height: 80vh!important;
|
|
border-top-left-radius: 20rpx;
|
|
border-top-right-radius: 20rpx;
|
|
background: #FFFFFF;
|
|
|
|
.picker-view {
|
|
width: 100vw!important;
|
|
height: 80vh!important;
|
|
margin-top: 20rpx;
|
|
}
|
|
.item {
|
|
text-align: center;
|
|
white-space: nowrap;
|
|
overflow: hidden;
|
|
text-overflow: ellipsis;
|
|
}
|
|
}
|
|
</style>
|