import Taro, { Component, Config } from '@tarojs/taro'
import { View, Picker } from '@tarojs/components'
import './index.scss'
import address from '../../utils/city'
export default class Index extends Component {
state = {
province: '',
city: '',
area: '',
pickerShow: false,
value: [0, 0, 0],
provinces: address.provinces,
citys: address.citys[110000],
areas: address.areas[110100],
ranges: [[], [], []],
}
componentDidShow() {
this.cityChange()
}
columnChange(e) {
const { provinces, citys, value } = this.state
const column = e.detail.column
const evalue = e.detail.value
let provinceNum = value[0]
let cityNum = value[1]
let countyNum = value[2]
if (column == 0) {
provinceNum = evalue
const id = provinces[provinceNum].id
this.setState({
value: [provinceNum, 0, 0],
citys: address.citys[id],
areas: address.areas[address.citys[id][0].id]
}, () => {
this.cityChange()
})
} else if (column == 1) {
cityNum = evalue
const id = citys[cityNum].id
// console.log(id)
this.setState({
value: [provinceNum, cityNum, 0],
areas: address.areas[citys[cityNum].id]
}, () => {
this.cityChange()
})
} else {
// 滑动选择了区
countyNum = evalue
this.setState({
value: [provinceNum, cityNum, countyNum]
}, () => {
this.cityChange()
})
}
}
cityChange() {
const { provinces, citys, areas } = this.state
let ranges = [[], [], []]
for (let i = 0; i < provinces.length; i++) {
ranges[0].push(provinces[i].name)
}
for (let i = 0; i < citys.length; i++) {
ranges[1].push(citys[i].name)
}
for (let i = 0; i < areas.length; i++) {
ranges[2].push(areas[i].name)
}
this.setState({
ranges: ranges,
})
}
// params true代表传递地址,false不传递
handlePickerShow(params: boolean, e) {
// console.log('params', params)
if (params) {
const { provinces, citys, areas, value } = this.state
const p = provinces[value[0]].name
const c = citys[value[1]].name
const a = areas[value[2]].name
this.setState({
pickerShow: !this.state.pickerShow,
province: p || '',
city: c || '',
area: a || '',
})
}
}
render() {
return (
<View>
<Picker mode='multiSelector' range={this.state.ranges} onChange={this.handlePickerShow.bind(this)} onColumnChange={this.columnChange.bind(this)}>
<View>
{this.state.province && <View>{this.state.province} {this.state.city} {this.state.area}</View>}
{!this.state.province && <View>请选择地区</View>}
</View>
</Picker>
</View>
)
}
}
省市区三级联动taro多列选择器
最新推荐文章于 2023-08-11 14:02:34 发布