与牧同行-小程序用户端
You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.

285 lines
7.1 KiB

  1. import http from '../../../utils/api'
  2. Page({
  3. /**
  4. * 页面的初始数据
  5. */
  6. data: {
  7. regionList: [], // 当前显示的区域列表
  8. selectedRegions: [], // 已选择的区域路径
  9. currentParentCode: '', // 当前父级code
  10. loading: false,
  11. showPicker: false,
  12. regionTitle: '请选择区域',
  13. autoShowPicker: false // 新增:控制是否自动弹出选择器
  14. },
  15. /**
  16. * 生命周期函数--监听页面加载
  17. */
  18. onLoad(options) {
  19. // 首次加载,获取第一级数据
  20. this.getRegionData('', () => {
  21. // 首次加载完成后自动弹出选择器
  22. this.setData({
  23. showPicker: true,
  24. regionTitle: '请选择区域'
  25. })
  26. })
  27. },
  28. // 获取区域数据
  29. getRegionData(parentCode, callback) {
  30. this.setData({
  31. loading: true
  32. })
  33. http.areaChildren({
  34. data: {
  35. parentCode: parentCode || ''
  36. },
  37. success: res => {
  38. console.log('区域数据响应:', res)
  39. if (res.code === 200 && res.data && res.data.length > 0) {
  40. this.setData({
  41. regionList: res.data,
  42. currentParentCode: parentCode,
  43. loading: false
  44. })
  45. } else {
  46. // 没有更多数据了,说明已经是最后一级
  47. this.setData({
  48. loading: false,
  49. regionList: []
  50. })
  51. // 如果是最后一级,关闭选择器
  52. if (this.data.showPicker) {
  53. this.setData({
  54. showPicker: false
  55. })
  56. wx.showToast({
  57. title: '已选择到最后一级',
  58. icon: 'none'
  59. })
  60. }
  61. }
  62. // 执行回调
  63. if (callback) {
  64. callback()
  65. }
  66. },
  67. fail: err => {
  68. console.error('请求失败:', err)
  69. this.setData({
  70. loading: false
  71. })
  72. wx.showToast({
  73. title: '加载失败',
  74. icon: 'none'
  75. })
  76. if (callback) {
  77. callback()
  78. }
  79. }
  80. })
  81. },
  82. // 开始选择(点击按钮时调用)
  83. startSelection() {
  84. // 如果还没有选择任何区域,重新加载第一级
  85. if (this.data.selectedRegions.length === 0) {
  86. this.getRegionData('', () => {
  87. this.setData({
  88. showPicker: true,
  89. regionTitle: '请选择区域'
  90. })
  91. })
  92. } else {
  93. // 如果有已选择的区域,加载下一级
  94. const lastRegion = this.data.selectedRegions[this.data.selectedRegions.length - 1]
  95. this.loadAndShowNextLevel(lastRegion.code)
  96. }
  97. },
  98. // 加载并显示下一级区域选择器
  99. loadAndShowNextLevel(parentCode) {
  100. this.getRegionData(parentCode, () => {
  101. if (this.data.regionList.length > 0) {
  102. // 有下一级数据,自动弹出选择器
  103. this.setData({
  104. showPicker: true,
  105. regionTitle: `请选择${this.data.selectedRegions[this.data.selectedRegions.length - 1].name}的下一级区域`
  106. })
  107. } else {
  108. // 没有下一级数据,提示用户
  109. wx.showToast({
  110. title: '已经是最后一级,无法继续选择',
  111. icon: 'none'
  112. })
  113. }
  114. })
  115. },
  116. // 关闭选择器
  117. closePicker() {
  118. this.setData({
  119. showPicker: false
  120. })
  121. },
  122. // 选择区域
  123. selectRegion(e) {
  124. const index = e.currentTarget.dataset.index
  125. const region = this.data.regionList[index]
  126. console.log('选择的区域:', region)
  127. // 获取当前已选择的最后一级
  128. const lastSelectedRegion = this.data.selectedRegions.length > 0 ?
  129. this.data.selectedRegions[this.data.selectedRegions.length - 1] :
  130. null
  131. // 检查是否是同级选择(替换最后一级)
  132. const isSameLevel = lastSelectedRegion &&
  133. lastSelectedRegion.parentCode === region.parentCode
  134. let selectedRegions = [...this.data.selectedRegions]
  135. if (isSameLevel) {
  136. // 同级选择,替换最后一级
  137. selectedRegions[selectedRegions.length - 1] = {
  138. code: region.code,
  139. name: region.name,
  140. parentCode: region.parentCode
  141. }
  142. } else {
  143. // 选择下一级,添加到路径
  144. selectedRegions.push({
  145. code: region.code,
  146. name: region.name,
  147. parentCode: region.parentCode
  148. })
  149. }
  150. this.setData({
  151. selectedRegions
  152. })
  153. // 关闭当前选择器
  154. this.setData({
  155. showPicker: false
  156. })
  157. // 延迟一段时间后自动加载并显示下一级选择器
  158. setTimeout(() => {
  159. this.loadAndShowNextLevel(region.code)
  160. }, 300)
  161. },
  162. // 重新选择(点击已选择的任意层级)
  163. reSelectRegion(e) {
  164. const index = e.currentTarget.dataset.index
  165. // 截断到指定级别(包括点击的层级)
  166. const selectedRegions = this.data.selectedRegions.slice(0, index + 1)
  167. this.setData({
  168. selectedRegions
  169. })
  170. // 获取该层级的数据
  171. const targetRegion = selectedRegions[selectedRegions.length - 1]
  172. // 获取点击层级的同级数据并显示选择器
  173. this.getRegionData(targetRegion.parentCode, () => {
  174. this.setData({
  175. showPicker: true,
  176. regionTitle: index === 0 ?
  177. '请选择区域' :
  178. `请选择${this.data.selectedRegions[index - 1]?.name || '区域'}的下一级`
  179. })
  180. })
  181. },
  182. // 完成选择
  183. completeSelection() {
  184. if (this.data.selectedRegions.length === 0) {
  185. wx.showToast({
  186. title: '请先选择区域',
  187. icon: 'none'
  188. })
  189. return
  190. }
  191. const lastRegion = this.data.selectedRegions[this.data.selectedRegions.length - 1]
  192. // 这里可以调用你的业务接口,传递parentCode
  193. this.submitRegion(lastRegion.code)
  194. },
  195. // 提交选择的区域(示例)
  196. submitRegion(parentCode) {
  197. console.log('提交的parentCode:', parentCode)
  198. console.log('完整选择路径:', this.data.selectedRegions)
  199. http.userCode({
  200. data: {
  201. areaCode: parentCode
  202. },
  203. success: res => {
  204. console.log(11111, res);
  205. if (res.code == 200) {
  206. wx.showModal({
  207. title: '选择完成',
  208. content: `已选择到: ${this.data.selectedRegions.map(r => r.name).join(' > ')}`,
  209. showCancel: false,
  210. success: (res) => {
  211. if (res.confirm) {
  212. wx.switchTab({
  213. url: '/pages/home/home',
  214. })
  215. }
  216. }
  217. })
  218. }
  219. }
  220. })
  221. },
  222. // 重置选择
  223. resetSelection() {
  224. wx.showModal({
  225. title: '确认重置',
  226. content: '确定要重置所有选择吗?',
  227. success: (res) => {
  228. if (res.confirm) {
  229. this.setData({
  230. selectedRegions: [],
  231. regionList: [],
  232. currentParentCode: '',
  233. showPicker: false
  234. })
  235. // 重新获取第一级数据
  236. this.getRegionData('', () => {
  237. // 重置后自动弹出第一级选择器
  238. this.setData({
  239. showPicker: true,
  240. regionTitle: '请选择区域'
  241. })
  242. })
  243. }
  244. }
  245. })
  246. },
  247. /**
  248. * 生命周期函数--监听页面显示
  249. */
  250. onShow() {
  251. }
  252. })