import React, { Component } from "react"; import Taro from '@tarojs/taro' import { View, PickerView, PickerViewColumn } from '@tarojs/components' import PropTypes from 'prop-types' import address from '../../../utils/tools/city.js' import './index.less' class AddressPicker extends Component { constructor(props) { super(props); this.state = { value: [17, 0, 1], provinces: address.provinces || [], citys: address.citys[430000] || {}, areas: address.areas[430100] || {}, areaInfo: { province: "湖南省", city: "长沙市", county: "芙蓉区", }, } this.cityChange = this.cityChange.bind(this); } cityChange(e) { const { provinces, citys, value } = this.state const pickerValue = e.detail.value const provinceNum = pickerValue[0] const cityNum = pickerValue[1] const countyNum = pickerValue[2] // 如果省份选择项和之前不一样,表示滑动了省份,此时市默认是省的第一组数据, if (value[0] != provinceNum) { const id = provinces[provinceNum].id this.setState({ value: [provinceNum, 0, 0], citys: address.citys[id], areas: address.areas[address.citys[id][0].id] }) } else if (value[1] != cityNum) { // 滑动选择了第二项数据,即市,此时区显示省市对应的第一组数据 const id = citys[cityNum].id this.setState({ value: [provinceNum, cityNum, 0], areas: address.areas[citys[cityNum].id] }) } else { // 滑动选择了区 this.setState({ value: [provinceNum, cityNum, countyNum] }) } } // params true代表传递地址,false不传递 handlePickerShow(params) { if (params) { const { provinces, citys, areas, value } = this.state // 将选择的城市信息显示到输入框 const tempAreaInfo = { province: provinces[value[0]].name, city: citys[value[1]].name, area: areas[value[2]].name } this.setState({ areaInfo: tempAreaInfo }, () => { this.props.onHandleToggleShow(tempAreaInfo, true) }) } else { this.props.onHandleToggleShow({}, false) } } render() { const { provinces, citys, areas, value } = this.state const { pickerShow } = this.props return ( { e.stopPropagation() }}> 取消 请选择省市区 确定 { provinces.map((province, index) => { return {province.name} }) } { citys.map((city, index) => { return {city.name} }) } { areas.map((area, index) => { return {area.name} }) } ) } } AddressPicker.propTypes = { pickerShow: PropTypes.bool.isRequired, onHandleToggleShow: PropTypes.func.isRequired, } export default AddressPicker;