uni-scroll.vue 4.3 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198
  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.popup.close();
  97. },
  98. confirm(e) {
  99. let info;
  100. if (!this.City_code) {
  101. uni.showToast({
  102. title: "请选择市",
  103. icon: "none"
  104. })
  105. return
  106. }
  107. info = {
  108. Prov_code: this.Prov_code,
  109. City_code: this.City_code,
  110. Dist_code: this.Dist_code,
  111. Prov_title: this.Prov_title1,
  112. City_title: this.City_title1,
  113. Dist_title: this.Dist_title1,
  114. }
  115. console.log(info)
  116. this.$emit('select', info)
  117. this.popup.close();
  118. },
  119. City(e) {
  120. this.request({
  121. url: "Smdcshop/getcity",
  122. data: {
  123. cityid: this.Prov_code,
  124. },
  125. }).then(res => {
  126. console.log(res, "res")
  127. if (res.code =="200") {
  128. this.City_arr = res.data;
  129. console.log(this.City_arr, "City_arr")
  130. }
  131. }).catch((res) => {
  132. // this.City_arr = [];
  133. });
  134. },
  135. Dist(e) {
  136. this.request({
  137. url: "Smdcshop/getcity",
  138. data: {
  139. token: uni.getStorageSync("token"),
  140. cityid: this.City_code,
  141. },
  142. }).then(res => {
  143. console.log(res, "res")
  144. if (res.code === '200') {
  145. this.Dist_arr = res.data;
  146. }
  147. }).catch((res) => {
  148. this.Dist_arr = [];
  149. });
  150. },
  151. }
  152. }
  153. </script>
  154. <style>
  155. page .act {
  156. color: #007AFF;
  157. }
  158. .popup-content {
  159. width: 100%;
  160. height: 656rpx;
  161. background: #fff;
  162. padding: 0rpx 40rpx;
  163. }
  164. .popup-content-title {
  165. border-bottom: 1rpx solid #F1F1F1;
  166. padding: 10rpx 0rpx;
  167. }
  168. .popup-content-scroll {
  169. height: 590rpx;
  170. width: 50%;
  171. text-align: center;
  172. }
  173. .popup-content-scroll-li {
  174. padding: 8rpx 0;
  175. }
  176. </style>