graceAddressPicker.nvue 4.5 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118
  1. <template>
  2. <view class="gap" v-if="show" @touchmove.stop.prevent="" @tap.stop="" :style="{backgroundColor:background}">
  3. <view class="gap-body">
  4. <view class="gap-header grace-space-between">
  5. <text class="gap-header-btn" :style="{color:cancelTColor}" @tap="close">{{cancelText}}</text>
  6. <text class="gap-header-btn" :style="{textAlign:'right', color:confirmColor}" @tap="confirm">{{confirmText}}</text>
  7. </view>
  8. <picker-view :indicator-style="indicatorStyle" class="gap-main" :value="defaultVal" @change="change">
  9. <picker-view-column v-if="level >= 1">
  10. <text class="gap-item" v-for="(item, index) in province" :key="index">{{item.label}}</text>
  11. </picker-view-column>
  12. <picker-view-column v-if="level >= 2">
  13. <text class="gap-item" v-for="(item, index) in city[defaultVal[0]]" :key="index">{{item.label}}</text>
  14. </picker-view-column>
  15. <picker-view-column v-if="level >= 3">
  16. <text class="gap-item" v-for="(item, index) in area[defaultVal[0]][defaultVal[1]]" :key="index">{{item.label}}</text>
  17. </picker-view-column>
  18. </picker-view>
  19. </view>
  20. </view>
  21. </template>
  22. <script>
  23. import provinceData from '../data/city-data/province.js';
  24. import cityData from '../data/city-data/city.js';
  25. import areaData from '../data/city-data/area.js';
  26. export default {
  27. name: "graceAddressPicker",
  28. props: {
  29. show : { type : Boolean, default : true },
  30. background:{ type : String, default : 'rgba(0, 0, 0, 0.5)' },
  31. cancelText : { type : String, default : '取消' },
  32. cancelTColor : { type : String, default : '#888888' },
  33. confirmText : { type : String, default : '确定' },
  34. confirmColor : { type : String, default : '#3688FF' },
  35. value : { type : Array , default () { return ['', '', ''] }},
  36. level : {type : Number, default : 3}
  37. },
  38. data() {
  39. return {
  40. indicatorStyle : 'height:35px',
  41. province : provinceData,
  42. city : cityData,
  43. area : areaData,
  44. defaultVal : [0,0,0]
  45. }
  46. },
  47. created() {
  48. this.setDefault();
  49. },
  50. watch:{
  51. value:function(nv, ov){this.setDefault();},
  52. defaultVal : function(nv, ov){
  53. if(ov[0] != nv[0]){
  54. this.defaultVal.splice(1,1,0);
  55. this.defaultVal.splice(2,1,0);
  56. }else if(ov[1] != nv[1]){
  57. this.defaultVal.splice(2,1,0);
  58. }
  59. }
  60. },
  61. methods: {
  62. setDefault:function(){
  63. if(this.value[0] == ''){return ;}
  64. setTimeout(()=>{
  65. this.defaultVal.splice(0, 1, this.arrayIndexOf(this.province, this.value[0]));
  66. if(this.value[1] == ''){return ;}
  67. setTimeout(()=>{
  68. this.defaultVal.splice(1,1, this.arrayIndexOf(this.city[this.defaultVal[0]], this.value[1]));
  69. if(this.value[2] == ''){return ;}
  70. setTimeout(()=>{
  71. this.defaultVal.splice(2,1, this.arrayIndexOf(this.area[this.defaultVal[0]][this.defaultVal[1]], this.value[2]));
  72. }, 500);
  73. }, 500);
  74. }, 500);
  75. },
  76. arrayIndexOf : function(arr, needFind){
  77. var index = 0;
  78. for(let i = 0; i < arr.length; i++){if(arr[i].label == needFind){index = i; return i;}}
  79. return index;
  80. },
  81. change : function (e) {
  82. var res = e.detail.value;
  83. if(!res[0]){res[0] = 0;}
  84. if(!res[1]){res[1] = 0;}
  85. if(!res[2]){res[2] = 0;}
  86. this.defaultVal = res;
  87. },
  88. confirm:function () {
  89. var codes = [
  90. provinceData[this.defaultVal[0]].value,
  91. cityData[this.defaultVal[0]][this.defaultVal[1]].value,
  92. areaData[this.defaultVal[0]][this.defaultVal[1]][this.defaultVal[2]].value ? areaData[this.defaultVal[0]][this.defaultVal[1]][this.defaultVal[2]].value : 0
  93. ];
  94. var names = [
  95. provinceData[this.defaultVal[0]].label,
  96. cityData[this.defaultVal[0]][this.defaultVal[1]].label,
  97. areaData[this.defaultVal[0]][this.defaultVal[1]][this.defaultVal[2]].label ? areaData[this.defaultVal[0]][this.defaultVal[1]][this.defaultVal[2]].label : ''
  98. ];
  99. codes = codes.splice(0, this.level);
  100. names = names.splice(0, this.level);
  101. var res = {codes : codes, names : names, indexs : this.defaultVal};
  102. this.$emit('confirm', res);
  103. },
  104. close : function () {
  105. this.$emit('close');
  106. }
  107. }
  108. }
  109. </script>
  110. <style scoped>
  111. .gap{position:fixed; width:750rpx; flex:1; top:0; left:0; bottom:0;}
  112. .gap-body{background-color:#FFFFFF; position:absolute; bottom:0; left:0; width:750rpx;}
  113. .gap-header{padding:25rpx;}
  114. .gap-header-btn{width:200rpx; line-height:38rpx; height:38rpx; font-size:28rpx;}
  115. .gap-main{width:750rpx; height:280px;}
  116. .gap-item{height:35px; font-size:12px; line-height:35px; overflow:hidden; text-align:center;}
  117. </style>