支持微信小程序 APP上测试通过
数据源采用一次行请求接口返回的所有的省,所有的市,所有的区,其他的省id 市id 区id 对应的改造即可。
isCity:表示是否选择市
isArea:表示是否选择区
所需要的数据格式
新建组件choose-area.vue
<template>
<uni-popup ref="provincePopup" type="bottom" :maskClick="true">
<view class="popup">
<view class="picker-btn">
<view class="left" @click="cancel">取消</view>
<view class="right" @click="confirm">确定</view>
</view>
<picker-view :value="valueArr" @change="bindChange">
<picker-view-column>
<view class="item" v-for="(item,index) in province" :key="index">{{item.name}}</view>
</picker-view-column>
<picker-view-column v-if="isCity">
<view class="item" v-for="(item,index) in citys" :key="index">{{item.name}}</view>
</picker-view-column>
<picker-view-column v-if="isArea">
<view class="item" v-for="(item,index) in areas" :key="index">{{item.name}}</view>
</picker-view-column>
</picker-view>
</view>
</uni-popup>
</template>
js部分,主要是提前拿到省市区的数据,存起来使用
import uniPopup from './uni-popup/uni-popup.vue';
import * as Api from '@/common/api.js';
export default {
props:{
isCity:{
type:Boolean,
default:true
},
isArea:{
type:Boolean,
default:true
}
},
components: {
uniPopup
},
data() {
return {
valueArr: [0, 0, 0], // 用于判断当前滑动的是哪一列
province:uni.getStorageSync('chooseCity').provinces, // 省数据列表
citys:[],
areas:[],
}
},
mounted() {
this.initCity(this.province[0].id);
this.initArea(uni.getStorageSync('chooseCity').citys[0].id);
},
methods: {
initCity(provinceCode){
let defaultCitys = uni.getStorageSync('chooseCity').citys;
this.citys = defaultCitys.filter(item=>{
return item.pid == provinceCode
})
},
initArea(cityCode){
let defaultAreas = uni.getStorageSync('chooseCity').areas;
this.areas = defaultAreas.filter(item=>{
return item.pid == cityCode
})
},
bindChange(e) {
let defaultCitys = uni.getStorageSync('chooseCity').citys;
const val = e.detail.value;
console.log(val); //【省,市,区】
this.valueArr = val;
// 对应的省份
let provinceCode = this.province[val[0]].id;
this.initCity(provinceCode);
// 对应的市
if(this.isCity){
let cityCode = this.citys[val[1]].id;
this.initArea(cityCode);
}
},
toggleTab() {
this.$refs.provincePopup.open();
},
cancel() {
this.$refs.provincePopup.close();
},
confirm:function(){
console.log("确定",this.valueArr);
let provinceName = this.province[this.valueArr[0]].name;
let provinceCode = this.province[this.valueArr[0]].id;
let cityName = '';
let cityCode = '';
let districtName = '';
let districtCode = '';
if(this.isCity){
cityName = this.citys[this.valueArr[1]].name;
cityCode = this.citys[this.valueArr[1]].id;
}
if(this.isArea){
districtName = this.areas[this.valueArr[2]].name;
districtCode = this.areas[this.valueArr[2]].id;
}
this.$emit('change',{province:provinceName,provinceCode:provinceCode,city:cityName,cityCode:cityCode,area:districtName,districtCode:districtCode});
this.cancel();
},
}
}
最后,组件方式引入使用
<choose-area ref="chooseArea" @change="getAddress"></choose-area>
js打开省市区面板
import chooseArea from '../../components/choose-area.vue';
export default {
components:{ chooseArea },
data(){
return{
address:''
}
},
methods:{
// 打开省市区
openAddressModal:function(){
this.$refs.chooseArea.toggleTab();
},
// 获取省市区
getAddress(data){
console.log(data);
let { province,city,area } = data;
this.address = province + city + area;
}
}
}