105 lines
3.5 KiB
Vue
105 lines
3.5 KiB
Vue
<template>
|
|
<u-picker ref="uPicker" :show="show" :columns="columns" @change="change" keyName="name"
|
|
:defaultIndex="defaultIndex"
|
|
@cancel="show = false" @close="show = false" closeOnClickOverlay @confirm="confirm">
|
|
<template slot="more" v-if="addNation">
|
|
<text @click="selectAll">全国</text>
|
|
</template>
|
|
</u-picker>
|
|
</template>
|
|
|
|
<script>
|
|
import provinces from '@/util/address/provinces.json'
|
|
import citys from '@/util/address/citys.json'
|
|
import areas from '@/util/address/areas.json'
|
|
|
|
export default {
|
|
name: "AddressSelect",
|
|
data() {
|
|
return {
|
|
level: 3,
|
|
show: false,
|
|
columns: [],
|
|
defaultIndex: [0, 0, 0],
|
|
addNation: false
|
|
}
|
|
},
|
|
methods: {
|
|
open(data, level = 3, addNation = false) {
|
|
this.show = true
|
|
this.addNation = addNation
|
|
if (level) this.level = level
|
|
if (this.level === 3) this.columns = [provinces, [{
|
|
'code': '0',
|
|
'name': '不限区域',
|
|
}, ...citys[0]], [{
|
|
'code': '0',
|
|
'name': '不限区域',
|
|
}, ...areas[0][0]]]
|
|
else if (this.level === 2) this.columns = [provinces, citys[0]]
|
|
else if (this.level === 1) this.columns = [provinces]
|
|
if (data && data.province && data.province.name) {
|
|
const provinceIndex = provinces.findIndex(item => item.name === data.province.name)
|
|
let cityIndex = 0
|
|
if (this.level > 1) {
|
|
this.columns[1] = citys[provinceIndex]
|
|
this.columns[1].unshift({
|
|
'code': '0',
|
|
'name': '不限区域',
|
|
})
|
|
this.$refs.uPicker.setColumnValues(1, this.columns[1])
|
|
if (data.city && data.city.name) cityIndex = this.columns[1].findIndex(item => item.name === data.city.name)
|
|
}
|
|
if (this.level === 3) {
|
|
this.columns[2] = areas[provinceIndex][cityIndex]
|
|
this.columns[2].unshift({
|
|
'code': '0',
|
|
'name': '不限区域',
|
|
})
|
|
this.$refs.uPicker.setColumnValues(2, this.columns[2])
|
|
let areaIndex = 0
|
|
if (data.area && data.area.name) areaIndex = this.columns[2].findIndex(item => item.name === data.area.name)
|
|
this.defaultIndex = [provinceIndex, cityIndex, areaIndex]
|
|
} else if (this.level === 2) this.defaultIndex = [provinceIndex, cityIndex]
|
|
else if (this.level === 1) this.defaultIndex = [provinceIndex]
|
|
}
|
|
},
|
|
change({columnIndex, index, indexs}) {
|
|
if (columnIndex === 0 && this.level > 1) {
|
|
this.columns[1] = citys[index]
|
|
this.columns[1].unshift({
|
|
'code': '0',
|
|
'name': '不限区域',
|
|
})
|
|
this.$refs.uPicker.setColumnValues(1, this.columns[1])
|
|
if (this.level === 3) {
|
|
this.columns[2] = areas[index][0]
|
|
this.columns[2].unshift({
|
|
'code': '0',
|
|
'name': '不限区域',
|
|
})
|
|
this.$refs.uPicker.setColumnValues(2, this.columns[2])
|
|
}
|
|
} else if (columnIndex === 1 && this.level === 3) {
|
|
this.columns[2] = areas[indexs[0]][indexs[1]]
|
|
this.$refs.uPicker.setColumnValues(2, this.columns[2])
|
|
}
|
|
this.$forceUpdate()
|
|
},
|
|
confirm({value}) {
|
|
console.log(value)
|
|
this.$emit('confirm', {
|
|
province: value[0],
|
|
city: this.level > 1 ? value[1] : null,
|
|
area: this.level === 3 ? value[2] : null
|
|
})
|
|
this.show = false
|
|
},
|
|
selectAll() {
|
|
this.confirm({
|
|
value: [{code: null, name: '全国'}, {code: null, name: '全国'}, {code: null, name: '全国'}]
|
|
})
|
|
}
|
|
}
|
|
}
|
|
</script> |