确认订单添加地址功能
进入确认订单页面
点击添加地址,进入地址列表页面
点击地址列表返回确认订单页面,带回所选地址
具体实现:
确认订单添加地址代码如下
<ion-list> <ion-item (click)="goAddress()" *ngIf="addressFlag == false">
<ion-avatar item-start> <img src="../../assets/imgs/add_address.png"> </ion-avatar> <p>添加收货地址</p> </ion-item> </ion-list>
执行 goAddress()方法
goAddress() { let data: Object = { order:1, callback: data => { //回调函数,返回页面的数据在回调函数中处理 console.log(data.info) this.addressFlag = false; this.name = data.info.name; this.phone = data.info.phone; this.address = data.info.address; } }; this.navCtrl.push(AddressPage,data);//确认订单页面 挑战到地址列表页面 }
地址列表页面
<ion-list class="mb80"> <ion-item no-padding class="no-border-top mb10" *ngFor="let item of addressLists,let i = index"> <div class="padl15 border-bottom padr15 mt10 padb10" (click)="checkAddress(item)"> <h2 class="of mb5"> <span float-left>{{item.name}}</span> <span float-right>{{item.phone}}</span> </h2> <p> <span class="red" [hidden]="item.is_default == 'N'">[默认地址]</span> {{item.address}}</p> </div> <div class="padl15 padr15 of padt5 padb5"> <div float-left> <button ion-button icon-start clear (click)="setAddress(item,addressLists)"> <ion-icon *ngIf="item.is_default == 'Y'" name="checked"></ion-icon> <ion-icon *ngIf="item.is_default == 'N'" name="check"></ion-icon> 默认地址 </button> </div> <div float-right> <button ion-button icon-end clear (click)="goEdit(item)"> <ion-icon name="edit"></ion-icon>编辑</button> <button ion-button icon-end clear (click)="delete(item)"> <ion-icon name="del"></ion-icon>删除</button> </div> </div> </ion-item> </ion-list>
执行 checkAddress(item)方法
//确认订单-选择地址 checkAddress(item) { let callback = this.navParams.get('callback'); let data: Object = { info: item }; callback(data); this.navCtrl.pop(); }
这样就完成了带参数返回页面