| 123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121 |
- 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 (
- <View className={pickerShow ? 'address-picker-containers' : 'address-picker-container'} onClick={this.handlePickerShow.bind(this, false)}>
- <View className="picker-content" onClick={e => { e.stopPropagation() }}>
- <View className="dialog-header">
- <View className="dialog-button cancel" onClick={this.handlePickerShow.bind(this, false)}>取消</View>
- <View className="dialog-title">请选择省市区</View>
- <View className="dialog-button" onClick={this.handlePickerShow.bind(this, true)}>确定</View>
- </View>
- <PickerView onChange={this.cityChange} value={value} className='picker-view-wrap'>
- <PickerViewColumn>
- {
- provinces.map((province, index) => {
- return <View className="picker-item" key={index}>{province.name}</View>
- })
- }
- </PickerViewColumn>
- <PickerViewColumn>
- {
- citys.map((city, index) => {
- return <View className="picker-item" key={index}>{city.name}</View>
- })
- }
- </PickerViewColumn>
- <PickerViewColumn>
- {
- areas.map((area, index) => {
- return <View className="picker-item" key={index}>{area.name}</View>
- })
- }
- </PickerViewColumn>
- </PickerView>
- </View>
- </View>
- )
- }
- }
- AddressPicker.propTypes = {
- pickerShow: PropTypes.bool.isRequired,
- onHandleToggleShow: PropTypes.func.isRequired,
- }
- export default AddressPicker;
|