uni-scroll.vue 4.2 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192
  1. <template>
  2. <view class="content">
  3. <view class="popup-content">
  4. <view class="box-pack-between ft32 flex-center popup-content-title">
  5. <text @click="close">关闭</text>
  6. <text style="color: #003A9B;" @click="confirm">确认</text>
  7. </view>
  8. <view class="flex">
  9. <scroll-view scroll-y class="popup-content-scroll">
  10. <view @click="bindProv" :data-title="item.city_name" :data-code="item.cityid" :class="item.cityid==Prov_code?'act':''"
  11. class="popup-content-scroll-li flex-center" v-for="(item,index) of Prov_arr" :key='index'>
  12. {{item.city_name}}
  13. </view>
  14. </scroll-view>
  15. <scroll-view scroll-y class="popup-content-scroll">
  16. <block v-if="City_arr.length>0">
  17. <view @click="bindCity" :data-title="item.city_name" :class="item.cityid==City_code?'act':''" :data-code="item.cityid"
  18. class="popup-content-scroll-li flex-center " v-for="(item,index) of City_arr" :key='index'>
  19. {{item.city_name}}
  20. </view>
  21. </block>
  22. <view v-else class="City popup-content-scroll-li flex-center">
  23. 请选择
  24. </view>
  25. </scroll-view>
  26. <scroll-view scroll-y class="popup-content-scroll">
  27. <block v-if="Dist_arr.length>0">
  28. <view @click="bindDist" :data-title="item.city_name" :class="item.cityid==Dist_code?'act':''" :data-code="item.cityid"
  29. class="popup-content-scroll-li flex-center" v-for="(item,index) of Dist_arr" :key='index'>
  30. {{item.city_name}}
  31. </view>
  32. </block>
  33. <view v-else class="City popup-content-scroll-li flex-center">
  34. 请选择
  35. </view>
  36. </scroll-view>
  37. </view>
  38. </view>
  39. </view>
  40. </template>
  41. <script>
  42. export default {
  43. name: 'uniScroll',
  44. props: {
  45. Prov_arr: {
  46. type: Array,
  47. default () {
  48. return []
  49. }
  50. },
  51. type: {
  52. type: Number,
  53. default: 1,
  54. },
  55. },
  56. inject: ['popup'],
  57. data() {
  58. return {
  59. City_arr: [],
  60. Dist_arr: [],
  61. Prov_code: "",
  62. City_code: "",
  63. Dist_code: "",
  64. Prov_title1: "",
  65. City_title1: "",
  66. Dist_title1: "",
  67. Prov_title: "",
  68. City_title: "",
  69. Dist_title: "",
  70. }
  71. },
  72. onLoad() {
  73. },
  74. methods: {
  75. // 商户地址省
  76. bindProv(e) {
  77. this.Prov_code = e.currentTarget.dataset.code;
  78. this.Prov_title1 = e.currentTarget.dataset.title;
  79. this.Dist_arr = [];
  80. this.Dist_code = "";
  81. this.City();
  82. },
  83. // 商户地址市
  84. bindCity(e) {
  85. this.City_code = e.currentTarget.dataset.code;
  86. this.City_title1 = e.currentTarget.dataset.title;
  87. this.Dist_code = "";
  88. this.Dist();
  89. },
  90. // 商户地址区
  91. bindDist(e) {
  92. this.Dist_title1 = e.currentTarget.dataset.title;
  93. this.Dist_code = e.currentTarget.dataset.code;
  94. },
  95. close(e) {
  96. this.$refs.popup.close();
  97. },
  98. confirm(e) {
  99. let info;
  100. if (!this.Dist_code) {
  101. uni.showToast({
  102. title: "请选择区",
  103. icon: "none"
  104. })
  105. return
  106. }
  107. // if (this.type == 1) {
  108. info = {
  109. Prov_code: this.Prov_code,
  110. City_code: this.City_code,
  111. Dist_code: this.Dist_code,
  112. Prov_title: this.Prov_title1,
  113. City_title: this.City_title1,
  114. Dist_title: this.Dist_title1,
  115. }
  116. // }
  117. console.log(info)
  118. this.$emit('select', info)
  119. this.popup.close();
  120. },
  121. City(e) {
  122. this.request({
  123. url: "setting/getcity",
  124. data: {
  125. // token: uni.getStorageSync("token"),
  126. cityid: this.Prov_code,
  127. },
  128. }).then(res => {
  129. console.log(res, "res")
  130. if (res.code =="200") {
  131. this.City_arr = res.data;
  132. console.log(this.City_arr, "City_arr")
  133. }
  134. }).catch((res) => {
  135. // this.City_arr = [];
  136. });
  137. },
  138. Dist(e) {
  139. this.request({
  140. url: "setting/getcity",
  141. data: {
  142. cityid: this.City_code,
  143. },
  144. }).then(res => {
  145. console.log(res, "res")
  146. if (res.code === '200') {
  147. this.Dist_arr = res.data;
  148. }
  149. }).catch((res) => {
  150. this.Dist_arr = [];
  151. });
  152. },
  153. }
  154. }
  155. </script>
  156. <style>
  157. page .act {
  158. color: #007AFF;
  159. }
  160. .popup-content {
  161. width: 100%;
  162. height: 656rpx;
  163. background: #fff;
  164. padding: 0rpx 40rpx;
  165. }
  166. .popup-content-title {
  167. border-bottom: 1rpx solid #F1F1F1;
  168. padding: 10rpx 0rpx;
  169. }
  170. .popup-content-scroll {
  171. height: 590rpx;
  172. width: 33%;
  173. text-align: center;
  174. }
  175. .popup-content-scroll-li {
  176. padding: 8rpx 0;
  177. }
  178. </style>