region-picker.vue 4.6 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184
  1. <template>
  2. <view class="w-picker-view">
  3. <picker-view class="d-picker-view" :indicator-style="itemHeight" :value="pickVal" @change="handlerChange">
  4. <picker-view-column>
  5. <view class="w-picker-item" v-for="(item,index) in range.provinces" :key="index">{{item.label}}</view>
  6. </picker-view-column>
  7. <picker-view-column>
  8. <view class="w-picker-item" v-for="(item,index) in range.citys" :key="index">{{item.label}}</view>
  9. </picker-view-column>
  10. <picker-view-column v-if="!hideArea">
  11. <view class="w-picker-item" v-for="(item,index) in range.areas" :key="index">{{item.label}}</view>
  12. </picker-view-column>
  13. </picker-view>
  14. </view>
  15. </template>
  16. <script>
  17. import areaData from "./areadata/areadata.js"
  18. export default {
  19. data() {
  20. return {
  21. pickVal:[],
  22. range:{
  23. provinces:[],
  24. citys:[],
  25. areas:[]
  26. },
  27. checkObj:{}
  28. };
  29. },
  30. props:{
  31. itemHeight:{
  32. type:String,
  33. default:"44px"
  34. },
  35. value:{
  36. type:[Array,String],
  37. default:""
  38. },
  39. defaultType:{
  40. type:String,
  41. default:"label"
  42. },
  43. hideArea:{
  44. type:Boolean,
  45. default:false
  46. }
  47. },
  48. watch:{
  49. value(val){
  50. this.initData();
  51. }
  52. },
  53. created() {
  54. this.initData();
  55. },
  56. methods:{
  57. getData(){
  58. //用来处理初始化数据
  59. let provinces=areaData;
  60. let dVal=[];
  61. let value=this.value;
  62. let a1=value[0];//默认值省
  63. let a2=value[1];//默认值市
  64. let a3=value[2];//默认值区、县
  65. let province,city,area;
  66. let provinceIndex=provinces.findIndex((v)=>{
  67. return v[this.defaultType]==a1
  68. });
  69. provinceIndex=value?(provinceIndex!=-1?provinceIndex:0):0;
  70. let citys=provinces[provinceIndex].children;
  71. let cityIndex=citys.findIndex((v)=>{
  72. return v[this.defaultType]==a2
  73. });
  74. cityIndex=value?(cityIndex!=-1?cityIndex:0):0;
  75. let areas=citys[cityIndex].children;
  76. let areaIndex=areas.findIndex((v)=>{
  77. return v[this.defaultType]==a3;
  78. });
  79. areaIndex=value?(areaIndex!=-1?areaIndex:0):0;
  80. dVal=this.hideArea?[provinceIndex,cityIndex]:[provinceIndex,cityIndex,areaIndex];
  81. province=provinces[provinceIndex];
  82. city=citys[cityIndex];
  83. area=areas[areaIndex];
  84. let obj=this.hideArea?{
  85. province,
  86. city
  87. }:{
  88. province,
  89. city,
  90. area
  91. }
  92. return this.hideArea?{
  93. provinces,
  94. citys,
  95. dVal,
  96. obj
  97. }:{
  98. provinces,
  99. citys,
  100. areas,
  101. dVal,
  102. obj
  103. }
  104. },
  105. initData(){
  106. let dataData=this.getData();
  107. let provinces=dataData.provinces;
  108. let citys=dataData.citys;
  109. let areas=this.hideArea?[]:dataData.areas;
  110. let obj=dataData.obj;
  111. let province=obj.province,city=obj.city,area=this.hideArea?{}:obj.area;
  112. let value=this.hideArea?[province.value,city.value]:[province.value,city.value,area.value];
  113. let result=this.hideArea?`${province.label+city.label}`:`${province.label+city.label+area.label}`;
  114. this.range=this.hideArea?{
  115. provinces,
  116. citys,
  117. }:{
  118. provinces,
  119. citys,
  120. areas
  121. };
  122. this.checkObj=obj;
  123. this.$nextTick(()=>{
  124. this.pickVal=dataData.dVal;
  125. });
  126. this.$emit("change",{
  127. result:result,
  128. value:value,
  129. obj:obj
  130. })
  131. },
  132. handlerChange(e){
  133. let arr=[...e.detail.value];
  134. let provinceIndex=arr[0],cityIndex=arr[1],areaIndex=this.hideArea?0:arr[2];
  135. let provinces=areaData;
  136. let citys=(provinces[provinceIndex]&&provinces[provinceIndex].children)||provinces[provinces.length-1].children||[];
  137. let areas=this.hideArea?[]:((citys[cityIndex]&&citys[cityIndex].children)||citys[citys.length-1].children||[]);
  138. let province=provinces[provinceIndex]||provinces[provinces.length-1],
  139. city=citys[cityIndex]||[citys.length-1],
  140. area=this.hideArea?{}:(areas[areaIndex]||[areas.length-1]);
  141. let obj=this.hideArea?{
  142. province,
  143. city
  144. }:{
  145. province,
  146. city,
  147. area
  148. }
  149. if(this.checkObj.province.label!=province.label){
  150. //当省更新的时候需要刷新市、区县的数据;
  151. this.range.citys=citys;
  152. if(!this.hideArea){
  153. this.range.areas=areas;
  154. }
  155. }
  156. if(this.checkObj.city.label!=city.label){
  157. //当市更新的时候需要刷新区县的数据;
  158. if(!this.hideArea){
  159. this.range.areas=areas;
  160. }
  161. }
  162. this.checkObj=obj;
  163. this.$nextTick(()=>{
  164. this.pickVal=arr;
  165. })
  166. let result=this.hideArea?`${province.label+city.label}`:`${province.label+city.label+area.label}`;
  167. let value=this.hideArea?[province.value,city.value]:[province.value,city.value,area.value];
  168. this.$emit("change",{
  169. result:result,
  170. value:value,
  171. obj:obj
  172. })
  173. }
  174. }
  175. }
  176. </script>
  177. <style lang="scss">
  178. @import "./w-picker.css";
  179. </style>