121 lines
2.6 KiB
Vue
121 lines
2.6 KiB
Vue
<template>
|
||
<view>
|
||
<u-picker :show="show" ref="uPicker" :columns="cityList" @confirm="confirm" @change="changeHandler"
|
||
@cancel="cancel"></u-picker>
|
||
</view>
|
||
</template>
|
||
|
||
<script>
|
||
import { cityData } from '@/utills/city.js'
|
||
export default {
|
||
name: "cityPicker",
|
||
props: {
|
||
showPicker: {
|
||
type: Boolean,
|
||
default: false
|
||
}
|
||
},
|
||
data() {
|
||
return {
|
||
cityData,
|
||
//显示选择器
|
||
show: false,
|
||
// 打开选择器显示默认城市
|
||
cityList: [],
|
||
cityLevel1: [],
|
||
cityLevel2: [],
|
||
cityLevel3: []
|
||
};
|
||
},
|
||
watch: {
|
||
showPicker: {
|
||
handler(val) {
|
||
console.log(val)
|
||
this.show = this.showPicker
|
||
},
|
||
immediate: true
|
||
},
|
||
show: {
|
||
handler(val) {
|
||
if(val) {
|
||
this.cityList = [],
|
||
this.cityLevel1 = [],
|
||
this.cityLevel2 = [],
|
||
this.cityLevel3 = []
|
||
this.initCityData();
|
||
}
|
||
},
|
||
immediate: true
|
||
}
|
||
},
|
||
onLoad() {
|
||
// 城市选择器初始化
|
||
this.initCityData();
|
||
},
|
||
methods: {
|
||
initCityData() {
|
||
// 遍历城市js
|
||
this.cityData.forEach((item1, index1) => {
|
||
let temp2 = [];
|
||
this.cityLevel1.push(item1.provinceName);
|
||
|
||
let temp4 = [];
|
||
let temp3 = [];
|
||
// 遍历市
|
||
item1.cities.forEach((item2, index2) => {
|
||
temp2.push(item2.cityName);
|
||
// 遍历区
|
||
item2.counties.forEach((item3, index3) => {
|
||
temp3.push(item3.countyName);
|
||
})
|
||
temp4[index2] = temp3;
|
||
temp3 = [];
|
||
})
|
||
this.cityLevel3[index1] = temp4;
|
||
|
||
this.cityLevel2[index1] = temp2;
|
||
})
|
||
// 选择器默认城市
|
||
this.cityList.push(this.cityLevel1, this.cityLevel2[0], this.cityLevel3[0][0]);
|
||
},
|
||
// 选中时执行
|
||
changeHandler(e) {
|
||
const {
|
||
columnIndex,
|
||
index,
|
||
indexs,
|
||
value,
|
||
values,
|
||
// 微信小程序无法将picker实例传出来，只能通过ref操作
|
||
picker = this.$refs.uPicker
|
||
} = e;
|
||
if (columnIndex === 0) { // 选择第一列数据时
|
||
// 设置第二列关联数据
|
||
picker.setColumnValues(1, this.cityLevel2[index]);
|
||
// 设置第三列关联数据
|
||
picker.setColumnValues(2, this.cityLevel3[index][columnIndex]);
|
||
} else if (columnIndex === 1) { // 选择第二列数据时
|
||
// 设置第三列关联数据
|
||
picker.setColumnValues(2, this.cityLevel3[indexs[0]][index]);
|
||
}
|
||
},
|
||
// 单击确认按钮时执行
|
||
confirm(e) {
|
||
// 输出数组 [省, 市, 区]
|
||
console.log(e.value);
|
||
this.$emit('confirm', e.value)
|
||
// 隐藏城市选择器
|
||
this.show = false;
|
||
},
|
||
cancel() {
|
||
this.$emit('cancel')
|
||
this.show = false
|
||
}
|
||
}
|
||
}
|
||
</script>
|
||
|
||
<style>
|
||
|
||
</style>
|