index.js 7.5 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235
  1. import Taro from '@tarojs/taro'
  2. import React, { Component } from 'react'
  3. import { View, PickerView, PickerViewColumn } from '@tarojs/components'
  4. import './index.scss'
  5. import PropTypes from 'prop-types';
  6. import areaData from "../areadata/areadata.js"
  7. export default class RegionPicker extends Component {
  8. constructor(props) {
  9. super(props);
  10. this.state = {
  11. pickVal: [],
  12. range: {
  13. provinces: [],
  14. citys: [],
  15. areas: []
  16. },
  17. checkObj: {},
  18. values: null
  19. }
  20. }
  21. componentWillMount() {
  22. this.initData();
  23. }
  24. componentDidMount() { }
  25. componentWillUnmount() { }
  26. componentDidShow() { }
  27. componentDidHide() { }
  28. componentDidUpdate(prevProps, prevState) {
  29. if (prevProps.value !== this.state.values) {
  30. // this.initData();
  31. this.setState({
  32. values: prevProps.value,
  33. }, () => {
  34. this.initData();
  35. })
  36. }
  37. }
  38. getData = () => {
  39. //用来处理初始化数据
  40. let provinces = areaData;
  41. let dVal = [];
  42. let value = this.props.value;
  43. let a1 = value[0];//默认值省
  44. let a2 = value[1];//默认值市
  45. let a3 = value[2];//默认值区、县
  46. let province, city, area;
  47. let provinceIndex = provinces.findIndex((v) => {
  48. return v[this.props.defaultType] == a1
  49. });
  50. provinceIndex = value ? (provinceIndex != -1 ? provinceIndex : 0) : 0;
  51. let citys = provinces[provinceIndex].children;
  52. let cityIndex = citys.findIndex((v) => {
  53. return v[this.props.defaultType] == a2
  54. });
  55. cityIndex = value ? (cityIndex != -1 ? cityIndex : 0) : 0;
  56. let areas = citys[cityIndex].children;
  57. let areaIndex = areas.findIndex((v) => {
  58. return v[this.props.defaultType] == a3;
  59. });
  60. areaIndex = value ? (areaIndex != -1 ? areaIndex : 0) : 0;
  61. dVal = this.props.hideArea ? [provinceIndex, cityIndex] : [provinceIndex, cityIndex, areaIndex];
  62. province = provinces[provinceIndex];
  63. city = citys[cityIndex];
  64. area = areas[areaIndex];
  65. let obj = this.props.hideArea ? {
  66. province,
  67. city
  68. } : {
  69. province,
  70. city,
  71. area
  72. }
  73. return this.props.hideArea ? {
  74. provinces,
  75. citys,
  76. dVal,
  77. obj
  78. } : {
  79. provinces,
  80. citys,
  81. areas,
  82. dVal,
  83. obj
  84. }
  85. }
  86. initData = () => {
  87. let dataData = this.getData();
  88. let provinces = dataData.provinces;
  89. let citys = dataData.citys;
  90. let areas = this.props.hideArea ? [] : dataData.areas;
  91. let obj = dataData.obj;
  92. let province = obj.province, city = obj.city, area = this.props.hideArea ? {} : obj.area;
  93. let value = this.props.hideArea ? [province.value, city.value] : [province.value, city.value, area.value];
  94. let result = this.props.hideArea ? `${province.label + city.label}` : `${province.label + city.label + area.label}`;
  95. this.setState({
  96. range: (this.props.hideArea ? {
  97. provinces,
  98. citys,
  99. } : {
  100. provinces,
  101. citys,
  102. areas
  103. })
  104. })
  105. this.setState({
  106. checkObj: obj
  107. })
  108. Taro.nextTick(() => {
  109. this.setState({
  110. pickVal: dataData.dVal
  111. })
  112. });
  113. this.props.change({
  114. result: result,
  115. value: value,
  116. obj: obj
  117. })
  118. }
  119. handlerChange = (e) => {
  120. let range = { ...this.state.range }
  121. console.log(range)
  122. let arr = [...e.detail.value];
  123. let provinceIndex = arr[0], cityIndex = arr[1], areaIndex = this.props.hideArea ? 0 : arr[2];
  124. let provinces = areaData;
  125. let citys = (provinces[provinceIndex] && provinces[provinceIndex].children) || provinces[provinces.length - 1].children || [];
  126. let areas = this.props.hideArea ? [] : ((citys[cityIndex] && citys[cityIndex].children) || citys[citys.length - 1].children || []);
  127. let province = provinces[provinceIndex] || provinces[provinces.length - 1],
  128. city = citys[cityIndex] || [citys.length - 1],
  129. area = this.props.hideArea ? {} : (areas[areaIndex] || [areas.length - 1]);
  130. let obj = this.props.hideArea ? {
  131. province,
  132. city
  133. } : {
  134. province,
  135. city,
  136. area
  137. }
  138. if (this.state.checkObj.province.label != province.label) {
  139. //当省更新的时候需要刷新市、区县的数据;
  140. range.citys = citys;
  141. if (!this.props.hideArea) {
  142. range.areas = areas;
  143. }
  144. this.setState({
  145. range
  146. })
  147. }
  148. if (this.state.checkObj.city.label != city.label) {
  149. //当市更新的时候需要刷新区县的数据;
  150. if (!this.props.hideArea) {
  151. range.areas = areas;
  152. }
  153. this.setState({
  154. range
  155. })
  156. }
  157. this.setState({
  158. checkObj: obj,
  159. pickVal: arr
  160. })
  161. Taro.nextTick(() => {
  162. this.setState({
  163. pickVal: arr
  164. })
  165. });
  166. let result = this.props.hideArea ? `${province.label + city.label}` : `${province.label + city.label + area.label}`;
  167. let value = this.props.hideArea ? [province.value, city.value] : [province.value, city.value, area.value];
  168. this.props.change({
  169. result: result,
  170. value: value,
  171. obj: obj
  172. })
  173. }
  174. render() {
  175. const { pickVal,range }=this.state
  176. return (
  177. <View className='w-picker-view'>
  178. <PickerView className="d-picker-view" indicatorStyle={this.props.itemHeight} value={pickVal} onChange={this.handlerChange}>
  179. <PickerViewColumn>
  180. {
  181. range.provinces.map((item, index) => {
  182. return (<View className="w-picker-item" key={index}>{item.label}</View>)
  183. })
  184. }
  185. </PickerViewColumn>
  186. <PickerViewColumn>
  187. {
  188. range.citys.map((item, index) => {
  189. return (<View className="w-picker-item" key={index}>{item.label}</View>)
  190. })
  191. }
  192. </PickerViewColumn>
  193. <PickerViewColumn>
  194. {
  195. range.areas.map((item, index) => {
  196. return (<View className="w-picker-item" key={index}>{item.label}</View>)
  197. })
  198. }
  199. </PickerViewColumn>
  200. </PickerView>
  201. </View>
  202. )
  203. }
  204. }
  205. RegionPicker.propTypes = {
  206. itemHeight: PropTypes.string,
  207. value: PropTypes.oneOfType([
  208. PropTypes.string,
  209. PropTypes.number,
  210. PropTypes.array
  211. ]),
  212. defaultType: PropTypes.string,
  213. hideArea: PropTypes.bool
  214. }
  215. RegionPicker.defaultProps = {
  216. itemHeight: "44px",
  217. value: "",
  218. defaultType: "label",
  219. hideArea: false
  220. };