1 <!--components/area-select.wxmlby:张涛20180308--> 2 <view class="area-select-bg" wx:if="{{isShow}}"> 3 <view class="area-select-box"> 4 <view class="area-select-title"> 5 <view catchtap='_cancelEvent' class="select-off">取消</view> 6 地址选择 7 <view catchtap='_confirmEvent' class="select-on">确认</view> 8 </view> 9 <view class="area-select-btn"> 10 <view class="area-select-btn-item" wx:if="{{selectNum>0}}" id="1" bindtap="tabBtn">{{provinceName}}</view> 11 <view class="area-select-btn-item" wx:if="{{selectNum>1}}" id="2" bindtap="tabBtn">{{cityName}}</view> 12 <view class="area-select-btn-item" wx:if="{{selectNum>2}}" id="3" bindtap="tabBtn">{{areaName}}</view> 13 <view class="area-select-btn-item" wx:if="{{selectNum>3}}" id="4" bindtap="tabBtn">{{addressName}}</view> 14 <view class="area-select-btn-item" wx:if="{{selectNum>=4}}" id="5" bindtap="tabBtn">{{communityName}}</view> 15 <view class="area-select-btn-active area-select-btn-item" wx:if="{{isHaveSubset}}">请选择</view> 16 </view> 17 <view class="area-select-show"> 18 <scroll-view scroll-y style="height:660rpx;"> 19 <block wx:for="{{list}}" wx:key=""> 20 <view class="area-select-show-item" data-item="{{item}}" bindtap="selectBtn"> 21 <view class="area-select-show-item-name" style="color:{{item.checked?'#ea8842':''}}">{{item.name}}</view> 22 <image class="area-select-show-item-checked" wx:if="{{item.checked}}" src="/img/select-on.png"></image> 23 </view> 24 </block> 25 </scroll-view> 26 </view> 27 </view> 28 </view>
1 // components/area-select.js by:张涛20180308 2 const util = require('../../utils/request.js'); 3 Component({ 4 /** 5 * 组件的属性列表 6 */ 7 properties: { 8 9 }, 10 11 /** 12 * 组件的初始数据 13 */ 14 data: { 15 isShow:false, 16 // 公用列表数据 17 list:[], 18 // 获取的列表数组 19 area:{ 20 province:[], 21 city:[], 22 area:[], 23 address:[], 24 community:[] 25 }, 26 // 地址code 27 provinceCode:'', 28 cityCode:'', 29 areaCode:'', 30 addressCode:'', 31 // 选择按钮 32 selectNum:0, 33 // 地址名称 34 provinceName:'', 35 cityName:'', 36 areaName:'', 37 addressName:'', 38 communityName:'', 39 // 判断是否还有下一级 40 isHaveSubset:true, 41 // 外部使用的数据包，如需使用地址数据请，在外部定义后直接调用this.data.addressObj即可 42 addressObj:{ 43 province:'', 44 city:'', 45 area:'', 46 address:'', 47 community:'' 48 }, 49 // 请求函数通道 50 getBol:false 51 }, 52 /* 53 *组件生命周期函数，在组件实例进入页面节点树时执行 54 */ 55 attached:function(){ 56 this.getProvince(); 57 }, 58 /** 59 * 组件的方法列表 60 */ 61 methods: { 62 //隐藏弹框 63 hideDialog(){ 64 this.setData({ 65 isShow: !this.data.isShow 66 }) 67 }, 68 //展示弹框 69 showDialog(){ 70 this.setData({ 71 isShow: !this.data.isShow 72 }) 73 }, 74 /* 75 * 内部私有方法建议以下划线开头 76 * triggerEvent 用于触发事件 77 */ 78 _cancelEvent(){ 79 //触发取消回调 80 this.triggerEvent("cancelEvent"); 81 }, 82 _confirmEvent(){ 83 // 判断地址是否选择完毕 84 if (this.data.isHaveSubset) { 85 return false; 86 } 87 //触发成功回调 88 this.triggerEvent("confirmEvent"); 89 }, 90 /* 91 * 公有方法 92 */ 93 // 地址三级请求函数 94 // 省 95 getProvince(){ 96 var _this=this; 97 util.POST('/mobile/common/getArea','',{'parentCode':this.data.provinceCode},function(res){ 98 // 为所有的省添加checked 99 res.data.result.forEach(function(item){ 100 item.checked=false; 101 }) 102 _this.data.area.province=res.data.result; 103 _this.setData({ 104 area:_this.data.area, 105 list:res.data.result 106 }) 107 }) 108 }, 109 // 市 110 getCity(){ 111 var _this=this; 112 util.POST('/mobile/common/getArea','',{'parentCode':this.data.provinceCode},function(res){ 113 // 为所有的省添加checked 114 res.data.result.forEach(function(item){ 115 item.checked=false; 116 }) 117 _this.data.area.city=res.data.result; 118 _this.setData({ 119 area:_this.data.area, 120 list:res.data.result 121 }) 122 }) 123 }, 124 // 区 125 getArea(){ 126 var _this=this; 127 util.POST('/mobile/common/getArea','',{'parentCode':this.data.cityCode},function(res){ 128 // 为所有的省添加checked 129 res.data.result.forEach(function(item){ 130 item.checked=false; 131 }) 132 _this.data.area.area=res.data.result; 133 _this.setData({ 134 area:_this.data.area, 135 list:res.data.result 136 }) 137 }) 138 }, 139 // 街道 140 getAddress(){ 141 var _this=this; 142 util.POST('/mobile/common/getArea','',{'parentCode':this.data.areaCode},function(res){ 143 // 为所有的省添加checked 144 res.data.result.forEach(function(item){ 145 item.checked=false; 146 }) 147 _this.data.area.address=res.data.result; 148 _this.setData({ 149 area:_this.data.area, 150 list:res.data.result 151 }) 152 }) 153 }, 154 // 小区 155 getCommunity(){ 156 var _this=this; 157 util.POST('/mobile/common/getArea','',{'parentCode':this.data.addressCode},function(res){ 158 // 为所有的省添加checked 159 res.data.result.forEach(function(item){ 160 item.checked=false; 161 }) 162 _this.data.area.community=res.data.result; 163 _this.setData({ 164 area:_this.data.area, 165 list:res.data.result 166 }) 167 }) 168 }, 169 // 点击tab进行切换 170 tabBtn(event){ 171 // 判断点击的级别 172 if (event.currentTarget.id==1) { 173 // 更新列表 174 this.data.list=this.data.area.province; 175 // 更新点击框 176 this.data.selectNum=0; 177 }else if (event.currentTarget.id==2) { 178 this.data.list=this.data.area.city; 179 this.data.selectNum=1; 180 }else if (event.currentTarget.id==3) { 181 this.data.list=this.data.area.area; 182 this.data.selectNum=2; 183 }else if (event.currentTarget.id==4) { 184 this.data.list=this.data.area.address; 185 this.data.selectNum=3; 186 }else if (event.currentTarget.id==5) { 187 this.data.list=this.data.area.community; 188 this.data.selectNum=4; 189 } 190 this.setData({ 191 list:this.data.list, 192 selectNum:this.data.selectNum, 193 isHaveSubset:this.data.list[0]?true:false 194 }) 195 }, 196 // 点击地址进行选择处理 197 selectBtn(event){ 198 // 清空列表 199 this.setData({ 200 list:[] 201 }) 202 // 判断当前的点击区域selectNum值 0：省。1：市。2：区。3：街道。 203 if (this.data.selectNum==0) { 204 // 保存信息 205 this.data.area.province.forEach(function(item){ 206 if (item.code==event.currentTarget.dataset.item.code) { 207 item.checked=true; 208 }else{ 209 item.checked=false; 210 } 211 }) 212 this.data.selectNum=1; 213 this.setData({ 214 provinceCode:event.currentTarget.dataset.item.code, 215 area:this.data.area, 216 selectNum:this.data.selectNum, 217 provinceName:event.currentTarget.dataset.item.name, 218 isHaveSubset:event.currentTarget.dataset.item.isHaveSubset?true:false 219 }) 220 this.getCity(); 221 } 222 // 市 223 else if (this.data.selectNum==1) { 224 // 保存信息 225 this.data.area.city.forEach(function(item){ 226 if (item.code==event.currentTarget.dataset.item.code) { 227 item.checked=true; 228 }else{ 229 item.checked=false; 230 } 231 }) 232 this.data.selectNum=2; 233 this.setData({ 234 cityCode:event.currentTarget.dataset.item.code, 235 area:this.data.area, 236 selectNum:this.data.selectNum, 237 cityName:event.currentTarget.dataset.item.name, 238 isHaveSubset:event.currentTarget.dataset.item.isHaveSubset?true:false 239 }) 240 this.getArea(); 241 }else if(this.data.selectNum==2){ 242 // 保存信息 243 this.data.area.area.forEach(function(item){ 244 if (item.code==event.currentTarget.dataset.item.code) { 245 item.checked=true; 246 }else{ 247 item.checked=false; 248 } 249 }) 250 this.data.selectNum=3; 251 this.setData({ 252 areaCode:event.currentTarget.dataset.item.code, 253 area:this.data.area, 254 selectNum:this.data.selectNum, 255 areaName:event.currentTarget.dataset.item.name, 256 isHaveSubset:event.currentTarget.dataset.item.isHaveSubset?true:false 257 }) 258 // 判断是否还有下一级// 由于数据源不对等，有三级数据源，所以需要做数据重置处理以免造成返回数据叠加问题 259 if (!this.data.isHaveSubset) { 260 this.setData({ 261 addressCode:'', 262 addressName:'', 263 communityName:'', 264 communityCode:'' 265 }) 266 } 267 this.getAddress(); 268 269 }else if (this.data.selectNum==3) { 270 // 保存信息 271 this.data.area.address.forEach(function(item){ 272 if (item.code==event.currentTarget.dataset.item.code) { 273 item.checked=true; 274 }else{ 275 item.checked=false; 276 } 277 }) 278 this.data.selectNum=4; 279 this.setData({ 280 addressCode:event.currentTarget.dataset.item.code, 281 area:this.data.area, 282 selectNum:this.data.selectNum, 283 addressName:event.currentTarget.dataset.item.name, 284 isHaveSubset:event.currentTarget.dataset.item.isHaveSubset?true:false 285 }) 286 // 由于数据源不对等，有三级数据源，所以需要做数据重置处理以免造成返回数据叠加问题 287 if (!this.data.isHaveSubset) { 288 this.setData({ 289 communityName:'', 290 communityCode:'' 291 }) 292 } 293 this.getCommunity(); 294 }else if(this.data.selectNum==4){ 295 // 保存信息 296 this.data.area.community.forEach(function(item){ 297 if (item.code==event.currentTarget.dataset.item.code) { 298 item.checked=true; 299 }else{ 300 item.checked=false; 301 } 302 }) 303 this.data.selectNum=4; 304 this.setData({ 305 communityCode:event.currentTarget.dataset.item.code, 306 selectNum:this.data.selectNum, 307 area:this.data.area, 308 communityName:event.currentTarget.dataset.item.name, 309 isHaveSubset:event.currentTarget.dataset.item.isHaveSubset?true:false 310 }) 311 } 312 313 this.setData({ 314 addressObj:{ 315 province:{ 316 'provinceName':this.data.provinceName, 317 'provinceCode':this.data.provinceCode 318 }, 319 city:{ 320 'cityName':this.data.cityName, 321 'cityCode':this.data.cityCode 322 }, 323 area:{ 324 'areaName':this.data.areaName, 325 'areaCode':this.data.areaCode 326 }, 327 address:{ 328 'addressName':this.data.addressName, 329 'addressCode':this.data.addressCode 330 }, 331 community:{ 332 'communityName':this.data.communityName, 333 'communityCode':this.data.communityCode 334 } 335 } 336 }) 337 } 338 } 339 })
1 /* components/area-select.wxssby:张涛20180308 */ 2 .area-select-bg{width:750rpx;height:100%;position:fixed;top:0;left:0;background:rgba(0,0,0,.5);z-index:11;} 3 .area-select-box{width:750rpx;height:800rpx;background:white;position:absolute;bottom:0;left:0;} 4 .area-select-box .area-select-title{width:100%;line-height:80rpx;font-size:30rpx;color:#999999;text-align:center;display:flex;justify-content:space-between;align-items:center;} 5 .area-select-box .area-select-title .select-off{width:100rpx;line-height:80rpx;} 6 .area-select-box .area-select-title .select-on{width:100rpx;line-height:80rpx;color:#ea8842;} 7 .area-select-box .area-select-btn{height:60rpx;display:flex;justify-content:flex-start;align-items:center;position:relative;top:0;left:0;} 8 .area-select-box .area-select-btn .area-select-btn-item{height:56rpx;border-bottom:4rpx solid white;font-size:28rpx;line-height:56rpx;color:#666666;margin:0 10rpx;} 9 .area-select-box .area-select-btn .area-select-btn-active{border-bottom:4rpx solid #ea8842;color:#ea8842;} 10 .area-select-box .area-select-btn:after{content:'';width:100%;height:1rpx;background:#e5e5e5;position:absolute;bottom:0;left:0;} 11 .area-select-box .area-select-show{width:750rpx;height:660rpx;} 12 .area-select-box .area-select-show .area-select-show-item{width:auto;padding:0 26rpx;font-size:28rpx;color:#666666;line-height:76rpx;display:flex;justify-content:flex-start;align-items:center;} 13 .area-select-box .area-select-show .area-select-show-item image{width:28rpx;height:20rpx;margin-left:20rpx;}
自定义组件地址组件，使用第三方地址包，可以任意更改样式，生成符合自己喜好的样式，更加符合项目的需要
使用方式如下
首先需要在wxml中引入 （其中的事件绑定名称可以在组件js中进行修改）
<area-select id="areaSelect" bind:cancelEvent="_cancelEvent" bind:confirmEvent="_confirmEvent"></area-select>
其次需要在引入组件的js中定义该组件(onReady)
this.areaSelect=this.selectComponent("#areaSelect");
最后一点一定要在json文件中添加插件的地址
"usingComponents":{"area-select": "/components/area-select/area-select"}
做完这些后就是在js中绑定好事件
取消事件：_canceEvent
确认事件：_cnnfirmEvent
地址组件的最重要的参数即是 this.areaSelect.data.addressObj
比较重要的一点就是显示地址选择框
this.areaSelect.showDialog();
this.areaSelect.hideDialog();
创作于20180308-by-张涛