小程序公共組件之地址選擇五級聯動
阿新 • • 發佈：2018-03-08
itl 方法 -i json tap 項目 unit 三方 劃線
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-張濤
小程序公共組件之地址選擇五級聯動