index.jsx 3.9 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121
  1. import React, { Component } from "react";
  2. import Taro from '@tarojs/taro'
  3. import { View, PickerView, PickerViewColumn } from '@tarojs/components'
  4. import PropTypes from 'prop-types'
  5. import address from '../../../utils/tools/city.js'
  6. import './index.less'
  7. class AddressPicker extends Component {
  8. constructor(props) {
  9. super(props);
  10. this.state = {
  11. value: [17, 0, 1],
  12. provinces: address.provinces || [],
  13. citys: address.citys[430000] || {},
  14. areas: address.areas[430100] || {},
  15. areaInfo: {
  16. province: "湖南省",
  17. city: "长沙市",
  18. county: "芙蓉区",
  19. },
  20. }
  21. this.cityChange = this.cityChange.bind(this);
  22. }
  23. cityChange(e) {
  24. const { provinces, citys, value } = this.state
  25. const pickerValue = e.detail.value
  26. const provinceNum = pickerValue[0]
  27. const cityNum = pickerValue[1]
  28. const countyNum = pickerValue[2]
  29. // 如果省份选择项和之前不一样,表示滑动了省份,此时市默认是省的第一组数据,
  30. if (value[0] != provinceNum) {
  31. const id = provinces[provinceNum].id
  32. this.setState({
  33. value: [provinceNum, 0, 0],
  34. citys: address.citys[id],
  35. areas: address.areas[address.citys[id][0].id]
  36. })
  37. } else if (value[1] != cityNum) {
  38. // 滑动选择了第二项数据,即市,此时区显示省市对应的第一组数据
  39. const id = citys[cityNum].id
  40. this.setState({
  41. value: [provinceNum, cityNum, 0],
  42. areas: address.areas[citys[cityNum].id]
  43. })
  44. } else {
  45. // 滑动选择了区
  46. this.setState({
  47. value: [provinceNum, cityNum, countyNum]
  48. })
  49. }
  50. }
  51. // params true代表传递地址,false不传递
  52. handlePickerShow(params) {
  53. if (params) {
  54. const { provinces, citys, areas, value } = this.state
  55. // 将选择的城市信息显示到输入框
  56. const tempAreaInfo = {
  57. province: provinces[value[0]].name,
  58. city: citys[value[1]].name,
  59. area: areas[value[2]].name
  60. }
  61. this.setState({
  62. areaInfo: tempAreaInfo
  63. }, () => {
  64. this.props.onHandleToggleShow(tempAreaInfo, true)
  65. })
  66. } else {
  67. this.props.onHandleToggleShow({}, false)
  68. }
  69. }
  70. render() {
  71. const { provinces, citys, areas, value } = this.state
  72. const { pickerShow } = this.props
  73. return (
  74. <View className={pickerShow ? 'address-picker-containers' : 'address-picker-container'} onClick={this.handlePickerShow.bind(this, false)}>
  75. <View className="picker-content" onClick={e => { e.stopPropagation() }}>
  76. <View className="dialog-header">
  77. <View className="dialog-button cancel" onClick={this.handlePickerShow.bind(this, false)}>取消</View>
  78. <View className="dialog-title">请选择省市区</View>
  79. <View className="dialog-button" onClick={this.handlePickerShow.bind(this, true)}>确定</View>
  80. </View>
  81. <PickerView onChange={this.cityChange} value={value} className='picker-view-wrap'>
  82. <PickerViewColumn>
  83. {
  84. provinces.map((province, index) => {
  85. return <View className="picker-item" key={index}>{province.name}</View>
  86. })
  87. }
  88. </PickerViewColumn>
  89. <PickerViewColumn>
  90. {
  91. citys.map((city, index) => {
  92. return <View className="picker-item" key={index}>{city.name}</View>
  93. })
  94. }
  95. </PickerViewColumn>
  96. <PickerViewColumn>
  97. {
  98. areas.map((area, index) => {
  99. return <View className="picker-item" key={index}>{area.name}</View>
  100. })
  101. }
  102. </PickerViewColumn>
  103. </PickerView>
  104. </View>
  105. </View>
  106. )
  107. }
  108. }
  109. AddressPicker.propTypes = {
  110. pickerShow: PropTypes.bool.isRequired,
  111. onHandleToggleShow: PropTypes.func.isRequired,
  112. }
  113. export default AddressPicker;