uni-scrollail1.vue 4.2 KB

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