| 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;
 
 
  |