微信小程序自定义地址组件

迈不过友情╰ 2022-11-15 14:12 400阅读 0赞

项目需求

  1.     需要调用后台传过来的地址，存储地址时存的是地址的id，所以市面上的地址组件均不符合我的需求，只能自定义一个。

技术选取

  1.     picker-view和picker-view-column

核心代码

region.wxml

  1. <!--地址选择器-->
  2. <view wx:if="{ {show}}" class="region-picker" catchtap="hidePicker">
  3.   <view class="picker-handle" catchtap>
  4.     <view class="picker-cancel" catchtap="hidePicker">取消</view>
  5.     <view class="picker-confirm" catchtap="chooseRegion">确定</view>
  6.   </view>
  7.   <picker-view class="picker" value="{ {regions}}" bindchange="changePicker" catchtap>
  8.     <picker-view-column>
  9.       <view wx:for="{ {provinces}}" wx:key="code" class="region-province">{
  10.    {item.name}}</view>
  11.     </picker-view-column>
  12.     <picker-view-column>
  13.       <view wx:for="{ {citys}}" wx:key="code" class="region-city">{
  14.    {item.name}}</view>
  15.     </picker-view-column>
  16.     <picker-view-column>
  17.       <view wx:for="{ {areas}}" wx:key="code" class="region-area">{
  18.    {item.name}}</view>
  19.     </picker-view-column>
  20.   </picker-view>
  21. </view>

region.less

  1. .region-picker { 
  2.   width: 100%;
  3.   height: 100%;
  4.   position: fixed;
  5.   top: 0;
  6.   left: 0;
  7.   z-index: 2;
  8.   background: rgba(0, 0, 0, 0.6); .picker-handle { 
  9.     width: 100%;
  10.     height: 72rpx;
  11.     display: flex;
  12.     justify-content: space-between;
  13.     position: absolute;
  14.     bottom: 500rpx;
  15.     left: 0;
  16.     background: #fff;
  17.     box-sizing: border-box;
  18.     padding: 0 30rpx;
  19.     line-height: 72rpx;
  20.     box-shadow: 0 6rpx 12rpx rgba(0, 0, 0, 0.6); .picker-cancel, .picker-confirm { 
  21.       font-size: 30rpx;
  22.     }
  24.     .picker-cancel { 
  25.       color: #9E9E9E;
  26.     }
  28.     .picker-confirm { 
  29.       color: #018A56;
  30.     }
  31.   }
  33.   .picker { 
  34.     width: 100%;
  35.     height: 500rpx;
  36.     position: absolute;
  37.     bottom: 0;
  38.     left: 0;
  39.     background: #fff; .region-province, .region-city, .region-area { 
  40.       text-align: center;
  41.       font-size: 24rpx;
  42.     }
  43.   }
  44. }

region.js

  1. const app = getApp();
  2. Component({ 
  3.   /** * 组件的属性列表 */
  4.   properties: { 
  5.     // 是否展示选择器
  6.     showPicker: { 
  7.       type: Boolean,
  8.       value: false
  9.     },
  10.     // 初始省市区数组
  11.     initRegions: { 
  12.       type: Array,
  13.       value: []
  14.     }
  15.   },
  17.   /** * 组件的初始数据 */
  18.   data: { 
  19.     // 当前省市区 0 省 1 市 2 区
  20.     regions: [0, 0, 0],
  21.     // 滑动选择器之前的省市区信息
  22.     oldRegions: [0, 0, 0],
  23.     // 上一次选中的省市区信息
  24.     prevRegions: [0, 0, 0],
  25.     // 省列表
  26.     provinces: [],
  27.     // 市列表
  28.     citys: [],
  29.     // 区列表
  30.     areas: [],
  31.     // 省
  32.     province: { 
  33.       name: '',
  34.       code: ''
  35.     },
  36.     // 市
  37.     city: { 
  38.       name: '',
  39.       code: ''
  40.     },
  41.     // 区
  42.     area: { 
  43.       name: '',
  44.       code: ''
  45.     },
  46.     // 是否展示
  47.     show: false
  48.   },
  50.   lifetimes: { 
  51.     attached: function () { 
  53.     }
  54.   },
  56.   observers: { 
  57.     'showPicker': function (value) { 
  58.       if (value) { 
  59.         this.setData({ 
  60.           show: true
  61.         })
  62.         this.initPage();
  63.       } else { 
  64.         this.setData({ 
  65.           show: false
  66.         })
  67.       }
  68.     }
  69.   },
  71.   /** * 组件的方法列表 */
  72.   methods: { 
  73.     // 初始化页面
  74.     initPage() { 
  75.       let regions = wx.getStorageSync('initRegions') || '';
  76.       if (regions) { 
  77.         // 设置省
  78.         app.api.region.index().then(res1 => { 
  79.           if (res1.code === 2000) { 
  80.             let data1 = res1.data;
  81.             this.setData({ 
  82.               provinces: data1.map(item => { 
  83.                 return { 
  84.                   name: item.name,
  85.                   code: item.rid
  86.                 }
  87.               })
  88.             })
  89.             this.data.provinces.forEach((item, index) => { 
  90.               if (item.code === regions[0]) { 
  91.                 this.setData({ 
  92.                   ['regions[0]']: index,
  93.                   ['oldRegions[0]']: index,
  94.                   ['prevRegions[0]']: index,
  95.                   province: { 
  96.                     name: item.name,
  97.                     code: item.code
  98.                   }
  99.                 })
  100.                 // 设置市
  101.                 app.api.region.index({ 
  102.                   parent_id: regions[0]
  103.                 }).then(async res2 => { 
  104.                   if (res2.code === 2000) { 
  105.                     res2.data.forEach((item, index) => { 
  106.                       this.setData({ 
  107.                         [`citys[${ this.data.citys.length}]`]: { 
  108.                           name: item.name,
  109.                           code: item.rid
  110.                         }
  111.                       })
  112.                       if (item.rid === regions[1]) { 
  113.                         this.setData({ 
  114.                           ['regions[1]']: index,
  115.                           ['oldRegions[1]']: index,
  116.                           ['prevRegions[1]']: index,
  117.                           city: { 
  118.                             name: item.name,
  119.                             code: item.rid
  120.                           }
  121.                         })
  122.                       }
  123.                     })
  124.                     // 设置区
  125.                     await app.api.region.index({ 
  126.                       parent_id: regions[1]
  127.                     }).then(res3 => { 
  128.                       if (res3.code === 2000) { 
  129.                         res3.data.forEach((item, index) => { 
  130.                           this.setData({ 
  131.                             [`areas[${ this.data.areas.length}]`]: { 
  132.                               name: item.name,
  133.                               code: item.rid
  134.                             }
  135.                           })
  136.                           if (item.rid === regions[2]) { 
  137.                             this.setData({ 
  138.                               ['regions[2]']: index,
  139.                               ['oldRegions[2]']: index,
  140.                               ['prevRegions[2]']: index,
  141.                               area: { 
  142.                                 name: item.name,
  143.                                 code: item.rid
  144.                               },
  145.                             })
  146.                           }
  147.                         })
  148.                       } else if (res3.code === 2001) { 
  149.                         app.deletetoken();
  150.                       } else { 
  151.                         app.toast(res3.msg, 'none');
  152.                       }
  153.                     })
  154.                   } else if (res2.code === 2001) { 
  155.                     app.deletetoken();
  156.                   } else { 
  157.                     app.toast(res2.msg, 'none');
  158.                   }
  159.                 })
  160.               }
  161.             })
  162.           } else if (res.code === 2001) { 
  163.             app.deletetoken();
  164.           } else { 
  165.             app.toast(res.msg, 'none');
  166.           }
  167.         })
  168.       } else { 
  169.         this.getProvinces();
  170.       }
  171.     },
  172.     /** * 获取省 */
  173.     async getProvinces() { 
  174.       await app.api.region.index().then(res => { 
  175.         if (res.code === 2000) { 
  176.           let data = res.data;
  177.           let provinceList = data.map(item => { 
  178.             return { 
  179.               name: item.name,
  180.               code: item.rid
  181.             }
  182.           })
  183.           this.setData({ 
  184.             provinces: provinceList
  185.           })
  186.           this.initCitysAreas();
  187.         } else if (res.code === 2001) { 
  188.           app.deletetoken();
  189.         } else { 
  190.           app.toast(res.msg, 'none');
  191.         }
  192.       })
  193.     },
  195.     /** * 省改变 * @param {number} code 省id */
  196.     changeProvince(code) { 
  197.       app.api.region.index({ 
  198.         parent_id: code
  199.       }).then(res1 => { 
  200.         if (res1.code === 2000) { 
  201.           let data1 = res1.data;
  202.           let cityList = data1.map(item => { 
  203.             return { 
  204.               name: item.name,
  205.               code: item.rid
  206.             }
  207.           })
  208.           this.setData({ 
  209.             citys: cityList
  210.           })
  211.           app.api.region.index({ 
  212.             parent_id: this.data.citys[0].code
  213.           }).then(res2 => { 
  214.             if (res2.code === 2000) { 
  215.               let data2 = res2.data;
  216.               let areaList = data2.map(item => { 
  217.                 return { 
  218.                   name: item.name,
  219.                   code: item.rid
  220.                 }
  221.               })
  222.               this.setData({ 
  223.                 areas: areaList
  224.               })
  225.             } else if (res2.code === 2001) { 
  226.               app.deletetoken();
  227.             } else { 
  228.               app.toast(res2.msg, 'none');
  229.             }
  230.           })
  231.         } else if (res1.code === 2001) { 
  232.           app.deletetoken();
  233.         } else { 
  234.           app.toast(res1.msg, 'none');
  235.         }
  236.       })
  237.     },
  239.     /** * 市改变 * @param {number} code 市id */
  240.     changeCity(code) { 
  241.       app.api.region.index({ 
  242.         parent_id: code
  243.       }).then(res => { 
  244.         if (res.code === 2000) { 
  245.           let data = res.data;
  246.           let areaList = data.map(item => { 
  247.             return { 
  248.               name: item.name,
  249.               code: item.rid
  250.             }
  251.           })
  252.           this.setData({ 
  253.             areas: areaList
  254.           })
  255.         } else if (res.code === 2001) { 
  256.           app.deletetoken();
  257.         } else { 
  258.           app.toast(res.msg, 'none');
  259.         }
  260.       })
  261.     },
  263.     /** * 改变picker */
  264.     changePicker(e) { 
  265.       let newRegion = e.detail.value;
  266.       for (let i = 0; i < newRegion.length; i++) { 
  267.         // 找到改变的那一列
  268.         if (newRegion[i] !== this.data.oldRegions[i]) { 
  269.           switch (i + 1) { 
  270.             case 1:
  271.               // 省改变了
  272.               this.changeProvince(this.data.provinces[newRegion[i]].code)
  273.               this.setData({ 
  274.                 regions: [newRegion[i], 0, 0],
  275.                 oldRegions: [newRegion[i], 0, 0]
  276.               })
  277.               newRegion = [
  278.                 newRegion[0], 0, 0
  279.               ]
  280.               break;
  281.             case 2:
  282.               // 市改变了
  283.               this.changeCity(this.data.citys[newRegion[i]].code)
  284.               this.setData({ 
  285.                 regions: [this.data.oldRegions[0], newRegion[i], 0],
  286.                 oldRegions: [this.data.oldRegions[0], newRegion[i], 0]
  287.               })
  288.               break;
  289.             case 3:
  290.               // 区改变
  291.               this.setData({ 
  292.                 regions: [this.data.oldRegions[0], this.data.oldRegions[1], newRegion[i]],
  293.                 oldRegions: [this.data.oldRegions[0], this.data.oldRegions[1], newRegion[i]]
  294.               })
  295.               break;
  296.           }
  297.         }
  298.       }
  299.     },
  300.     /** * 初始化市区列表 */
  301.     initCitysAreas() { 
  302.       // 获取市
  303.       app.api.region.index({ 
  304.         parent_id: this.data.provinces[this.data.regions[0]].code
  305.       }).then(res1 => { 
  306.         if (res1.code === 2000) { 
  307.           let data1 = res1.data;
  308.           let cityList = data1.map(item => { 
  309.             return { 
  310.               name: item.name,
  311.               code: item.rid
  312.             }
  313.           })
  314.           this.setData({ 
  315.             citys: cityList
  316.           })
  317.           // 获取区
  318.           app.api.region.index({ 
  319.             parent_id: this.data.citys[this.data.regions[1]].code
  320.           }).then(res2 => { 
  321.             if (res2.code === 2000) { 
  322.               let data2 = res2.data;
  323.               let areaList = data2.map(item => { 
  324.                 return { 
  325.                   name: item.name,
  326.                   code: item.rid
  327.                 }
  328.               })
  329.               this.setData({ 
  330.                 areas: areaList,
  331.                 regions: this.data.regions
  332.               })
  333.             } else if (res2.code === 2001) { 
  334.               app.deletetoken();
  335.             } else { 
  336.               app.toast(res2.msg, 'none');
  337.             }
  338.           })
  339.         } else if (res1.code === 2001) { 
  340.           app.deletetoken();
  341.         } else { 
  342.           app.toast(res1.msg, 'none');
  343.         }
  344.       })
  345.     },
  346.     /** * 隐藏选择器 */
  347.     hidePicker() { 
  348.       this.setData({ 
  349.         show: false,
  350.         regions: this.data.prevRegions,
  351.         oldRegions: this.data.prevRegions
  352.       })
  353.     },
  354.     /** * 确定选择地址 */
  355.     chooseRegion() { 
  356.       this.setData({ 
  357.         province: { 
  358.           name: this.data.provinces[this.data.regions[0]].name,
  359.           code: this.data.provinces[this.data.regions[0]].code
  360.         },
  361.         city: { 
  362.           name: this.data.citys[this.data.regions[1]].name,
  363.           code: this.data.citys[this.data.regions[1]].code
  364.         },
  365.         area: { 
  366.           name: this.data.areas[this.data.regions[2]].name,
  367.           code: this.data.areas[this.data.regions[2]].code
  368.         },
  369.         prevRegions: this.data.regions,
  370.       })
  371.       this.triggerEvent("chooseRegion", { 
  372.         initRegions: [this.data.province.code, this.data.city.code, this.data.area.code],
  373.         region: this.data.province.name + ' ' + this.data.city.name + ' ' + this.data.area.name
  374.       })
  375.       wx.setStorageSync('initRegions', [this.data.province.code, this.data.city.code, this.data.area.code]);
  376.       this.hidePicker();
  377.     },
  378.   }
  379. })

使用

wxml

  1. <region showPicker="{ {show.picker}}" initRegions="{ {initRegions}}" bind:chooseRegion="chooseRegion"></region>

js

  1. // pages/settled/settled.js
  2. const app = getApp();
  3. Page({ 
  5.   /** * 页面的初始数据 */
  6.   data: { 
  7.     // 选中的省市区id数组
  8.     initRegions: [],
  9.     // 常住地址
  10.     region: '',
  11.     // 展示控制
  12.     show: { 
  13.       picker: false, // 地址选择器
  14.     }
  15.   },
  17.   /** * 监听页面卸载 */
  18.   onUnload: function() { 
  19.     wx.removeStorageSync('initRegions');
  20.   },
  21.   /** * 展示常住地址选择器 */
  22.   showPicker() { 
  23.     this.setData({ 
  24.       ['show.picker']: true
  25.     })
  26.   },
  28.   /** * 选择常住地址 */
  29.   chooseRegion(e) { 
  30.     this.setData({ 
  31.       initRegions: e.detail.initRegions,
  32.       region: e.detail.region
  33.     })
  34.   }
  35. })

效果

在这里插入图片描述

参考文档
picker-view | 微信开放文档
picker-view-column | 微信开放文档

发表评论

表情：
评论列表 （有 0 条评论，400人围观）

还没有评论，来说两句吧...

相关阅读

    相关 微信小程序自定义组件

    在写小程序的时候，有时候页面的内容过多，逻辑比较复杂，如果全部都写在一个页面的话，会比较繁杂，代码可读性比较差，也不易于后期代码维护，这时候可以把里面某部分功能抽出来，单独封装

    ╰半橙微兮°╰半橙微兮°/ 0 赞/ 86 阅读