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 /* 51 *组件生命周期函数，在组件实例进入页面节点树时执行 52 */ 53 attached:function(){ 54 this.getProvince(); 55 }, 56 /** 57 * 组件的方法列表 58 */ 59 methods: { 60 //隐藏弹框 61 hideDialog(){ 62 this.setData({ 63 isShow: !this.data.isShow 64 }) 65 }, 66 //展示弹框 67 showDialog(){ 68 this.setData({ 69 isShow: !this.data.isShow 70 }) 71 }, 72 /* 73 * 内部私有方法建议以下划线开头 74 * triggerEvent 用于触发事件 75 */ 76 _cancelEvent(){ 77 //触发取消回调 78 this.triggerEvent("cancelEvent"); 79 }, 80 _confirmEvent(){ 81 // 判断地址是否选择完毕 82 if (this.data.isHaveSubset) { 83 return false; 84 } 85 //触发成功回调 86 this.triggerEvent("confirmEvent"); 87 }, 88 /* 89 * 公有方法 90 */ 91 // 地址三级请求函数 92 // 省 93 getProvince(){ 94 var _this=this; 95 util.POST(‘/mobile/common/getArea‘,‘‘,{‘parentCode‘:this.data.provinceCode},function(res){ 96 // 为所有的省添加checked 97 res.data.result.forEach(function(item){ 98 item.checked=false; 99 }) 100 _this.data.area.province=res.data.result; 101 _this.setData({ 102 area:_this.data.area, 103 list:res.data.result 104 }) 105 }) 106 }, 107 // 市 108 getCity(){ 109 var _this=this; 110 util.POST(‘/mobile/common/getArea‘,‘‘,{‘parentCode‘:this.data.provinceCode},function(res){ 111 // 为所有的省添加checked 112 res.data.result.forEach(function(item){ 113 item.checked=false; 114 }) 115 _this.data.area.city=res.data.result; 116 _this.setData({ 117 area:_this.data.area, 118 list:res.data.result 119 }) 120 }) 121 }, 122 // 区 123 getArea(){ 124 var _this=this; 125 util.POST(‘/mobile/common/getArea‘,‘‘,{‘parentCode‘:this.data.cityCode},function(res){ 126 // 为所有的省添加checked 127 res.data.result.forEach(function(item){ 128 item.checked=false; 129 }) 130 _this.data.area.area=res.data.result; 131 _this.setData({ 132 area:_this.data.area, 133 list:res.data.result 134 }) 135 }) 136 }, 137 // 街道 138 getAddress(){ 139 var _this=this; 140 util.POST(‘/mobile/common/getArea‘,‘‘,{‘parentCode‘:this.data.areaCode},function(res){ 141 // 为所有的省添加checked 142 res.data.result.forEach(function(item){ 143 item.checked=false; 144 }) 145 _this.data.area.address=res.data.result; 146 _this.setData({ 147 area:_this.data.area, 148 list:res.data.result 149 }) 150 }) 151 }, 152 // 小区 153 getCommunity(){ 154 var _this=this; 155 util.POST(‘/mobile/common/getArea‘,‘‘,{‘parentCode‘:this.data.addressCode},function(res){ 156 // 为所有的省添加checked 157 res.data.result.forEach(function(item){ 158 item.checked=false; 159 }) 160 _this.data.area.community=res.data.result; 161 _this.setData({ 162 area:_this.data.area, 163 list:res.data.result 164 }) 165 }) 166 }, 167 // 点击tab进行切换 168 tabBtn(event){ 169 // 判断点击的级别 170 if (event.currentTarget.id==1) { 171 // 更新列表 172 this.data.list=this.data.area.province; 173 // 更新点击框 174 this.data.selectNum=0; 175 }else if (event.currentTarget.id==2) { 176 this.data.list=this.data.area.city; 177 this.data.selectNum=1; 178 }else if (event.currentTarget.id==3) { 179 this.data.list=this.data.area.area; 180 this.data.selectNum=2; 181 }else if (event.currentTarget.id==4) { 182 this.data.list=this.data.area.address; 183 this.data.selectNum=3; 184 }else if (event.currentTarget.id==5) { 185 this.data.list=this.data.area.community; 186 this.data.selectNum=4; 187 } 188 this.setData({ 189 list:this.data.list, 190 selectNum:this.data.selectNum, 191 isHaveSubset:this.data.list[0]?true:false 192 }) 193 }, 194 // 点击地址进行选择处理 195 selectBtn(event){ 196 // 判断当前的点击区域selectNum值 0：省。1：市。2：区。3：街道。 197 if (this.data.selectNum==0) { 198 // 保存信息 199 this.data.area.province.forEach(function(item){ 200 if (item.code==event.currentTarget.dataset.item.code) { 201 item.checked=true; 202 }else{ 203 item.checked=false; 204 } 205 }) 206 this.data.selectNum=1; 207 this.setData({ 208 provinceCode:event.currentTarget.dataset.item.code, 209 area:this.data.area, 210 selectNum:this.data.selectNum, 211 provinceName:event.currentTarget.dataset.item.name, 212 list:this.data.area.province, 213 isHaveSubset:event.currentTarget.dataset.item.isHaveSubset?true:false 214 }) 215 this.getCity(); 216 } 217 // 市 218 else if (this.data.selectNum==1) { 219 // 保存信息 220 this.data.area.city.forEach(function(item){ 221 if (item.code==event.currentTarget.dataset.item.code) { 222 item.checked=true; 223 }else{ 224 item.checked=false; 225 } 226 }) 227 this.data.selectNum=2; 228 this.setData({ 229 cityCode:event.currentTarget.dataset.item.code, 230 area:this.data.area, 231 selectNum:this.data.selectNum, 232 cityName:event.currentTarget.dataset.item.name, 233 list:this.data.area.city, 234 isHaveSubset:event.currentTarget.dataset.item.isHaveSubset?true:false 235 }) 236 this.getArea(); 237 }else if(this.data.selectNum==2){ 238 // 保存信息 239 this.data.area.area.forEach(function(item){ 240 if (item.code==event.currentTarget.dataset.item.code) { 241 item.checked=true; 242 }else{ 243 item.checked=false; 244 } 245 }) 246 this.data.selectNum=3; 247 this.setData({ 248 areaCode:event.currentTarget.dataset.item.code, 249 area:this.data.area, 250 selectNum:this.data.selectNum, 251 areaName:event.currentTarget.dataset.item.name, 252 list:this.data.area.area, 253 isHaveSubset:event.currentTarget.dataset.item.isHaveSubset?true:false 254 }) 255 this.getAddress(); 256 257 }else if (this.data.selectNum==3) { 258 // 保存信息 259 this.data.area.address.forEach(function(item){ 260 if (item.code==event.currentTarget.dataset.item.code) { 261 item.checked=true; 262 }else{ 263 item.checked=false; 264 } 265 }) 266 this.data.selectNum=4; 267 this.setData({ 268 addressCode:event.currentTarget.dataset.item.code, 269 area:this.data.area, 270 selectNum:this.data.selectNum, 271 addressName:event.currentTarget.dataset.item.name, 272 list:this.data.area.address, 273 isHaveSubset:event.currentTarget.dataset.item.isHaveSubset?true:false 274 }) 275 this.getCommunity(); 276 }else if(this.data.selectNum==4){ 277 // 保存信息 278 this.data.area.community.forEach(function(item){ 279 if (item.code==event.currentTarget.dataset.item.code) { 280 item.checked=true; 281 }else{ 282 item.checked=false; 283 } 284 }) 285 this.data.selectNum=4; 286 this.setData({ 287 communityCode:event.currentTarget.dataset.item.code, 288 selectNum:this.data.selectNum, 289 area:this.data.area, 290 communityName:event.currentTarget.dataset.item.name, 291 list:this.data.area.community, 292 isHaveSubset:event.currentTarget.dataset.item.isHaveSubset?true:false 293 }) 294 } 295 296 this.setData({ 297 addressObj:{ 298 province:{ 299 ‘provinceName‘:this.data.provinceName, 300 ‘provinceCode‘:this.data.provinceCode 301 }, 302 city:{ 303 ‘cityName‘:this.data.cityName, 304 ‘cityCode‘:this.data.cityCode 305 }, 306 area:{ 307 ‘areaName‘:this.data.areaName, 308 ‘areaCode‘:this.data.areaCode 309 }, 310 address:{ 311 ‘addressName‘:this.data.addressName, 312 ‘addressCode‘:this.data.addressCode 313 }, 314 community:{ 315 ‘communityName‘:this.data.communityName, 316 ‘communityCode‘:this.data.communityCode 317 } 318 } 319 }) 320 } 321 } 322 }) 323 // 使用方式参照三级联动
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;}
自定义组件地址组件，使用第三方地址包，可以任意更改样式，生成符合自己喜好的样式，更加符合项目的需要
使用方式如下
首先需要在wxll中引入 （其中的事件绑定名称可以在组件js中进行修改）
<area id="areaSelect" bind:cancelEvent="_cancelEvent" bind:confirmEvent="_confirmEvent"></area>
其次需要在引入组件的js中定义该组件
this.areaSelect=this.selectComponent("#areaSelect");
最后一点一定要在json文件中添加插件的地址
"usingComponents":{"area": "/components/area-select/area-select"}
做完这些后就是在js中绑定好事件
取消事件：_canceEvent
确认事件：_cnnfirmEvent
地址组件的最重要的参数即是 this.areaSelect.data.addressObj
比较重要的一点就是显示地址选择框
this.areaSelect.showDialog();
this.areaSelect.hideDialog();
创作于20180308-by-张涛
