《仿盒马》app 开发技术分享 -- 新增地址（28）

技术栈

Appgallery connect

开发准备

上一节我们实现了地图选点，获取当前位置，在地图上添加标记，根据当前的定位获取 poi 地址列表等功能，这些全部都为了我们这一节而铺垫，这一节我们要实现的是新增地址，把我们的用户信息，填写收件人、门牌号、手机号、经纬度、详细地址等信息添加到我们的云数据库中，然后在地址查询列表里展示出来。

功能分析

实现地址的新增对我们现在的应用完整度来说并不难，因为我们已经具备了所有的条件，地图选点返回的列表条目，我们可以获取到经纬度以及位置信息，门牌号、联系人、手机号等信息我们从 textinput 中填写获取，对应的用户我们通过存储的 user 信息获取，我们还需要生成一个对应的随机 id 即可实现

代码实现

首先我们在地图选点页面，在列表的点击事件中传递我们点击的条目数据.onClick(()=>{router.back({url:'pages/view/PushAddressPage',params:{data:JSON.stringify(item)}})})然后我们创建一个新增地址页面在生命周期事件中接收，因为这个页面我们后期会展示用户选择的地址的位置，所以我们需要实现一个堆叠布局，把信息填写放置在地图之上展示。

Stack({alignContent:Alignment.Bottom}){Column(){CommonTopBar({ title: "新增地址", alpha: 0, titleAlignment: TextAlign.Center ,backButton:true})MapComponent({ mapOptions: this.mapOptions, mapCallback: this.callback }).width('100%').height('100%');}.layoutWeight(1)Column({space:15}){Text("选择收货地址 >").textAlign(TextAlign.Center).width('100%').height(40).border({width:1,color:Color.Orange}).fontColor(Color.Orange).margin({top:15}).borderRadius(10).onClick(()=>{router.pushUrl({url:'pages/view/MapCheckPage'})})

        Row(){          Text("门牌号")            .fontColor(Color.Black)
          TextInput({text:this.addressStr,placeholder:"详细地址,例1层101室1"})              .layoutWeight(1)              .height(40)            .fontColor(Color.Black)            .placeholderColor(Color.Gray)            .onChange((str)=>{              this.addressStr=str            })

        }        Divider().strokeWidth(0.5).color("#E6E6E6")        Row(){          Text("联系人")            .fontColor(Color.Black)
          TextInput({text:this.phoneName,placeholder:"请填写收货人姓名"})            .layoutWeight(1)            .height(40)            .fontColor(Color.Black)            .placeholderColor(Color.Gray)            .onChange((str)=>{              this.phoneName=str            })        }        Divider().strokeWidth(0.5).color("#E6E6E6")        Row(){          Text("手机号")            .fontColor(Color.Black)
          TextInput({text:this.phoneStr,placeholder:"请填写收货手机号"})            .layoutWeight(1)            .height(40)            .fontColor(Color.Black)            .placeholderColor(Color.Gray)            .onChange((str)=>{              this.phoneStr=str            })
        }        Divider().strokeWidth(0.5).color("#E6E6E6")

        Text("保存地址")          .width('100%')          .height(40)          .backgroundColor(Color.Orange)          .fontColor(Color.Black)          .textAlign(TextAlign.Center)          .borderRadius(10)             }      .padding(10)        .width('90%')        .height('90%')        .backgroundColor(Color.White)
      if (this.addressSetting&&!this.locationKey){        Row(){          Text()            .width(40)
          Text("定位未开启")            .fontColor(Color.Black)
          Text("开启定位")            .fontColor(Color.White)            .backgroundColor(Color.Pink)            .borderRadius(10)            .padding(10)            .onClick(()=>{              this.reqPermissionsFromUser(permissions);              this.permissionController.open();            })        }        .padding(10)        .borderRadius(5)        .margin({bottom:30})        .backgroundColor('#33000000')        .justifyContent(FlexAlign.SpaceAround)        .width('90%')      }
    }    .backgroundColor(Color.White)    .height('100%')    .width('100%')
  }}

并且我们定义好三个 textinput 需要接收的变量，以及接受地图选点页传递过来的数据变量 private addressInfo:site.Site|null=null@State phoneStr:string=''@State phoneName:string=''@State addressStr:string=''都创建完之后我们在 onpageShow 中接收数据 onPageShow(): void {const value = await StorageUtils.getAll('user');if (value != "") {this.user=JSON.parse(value)}

if (this.mapController) {  this.mapController.show();}let params = (this.getUIContext().getRouter().getParams() as Record<string, string>)['data']if (params!=undefined&& params!=''){  this.addressInfo=JSON.parse(params)}

}这样我们的数据就接收完成，然后我们在保存地址的按钮处，来处理这些我们已经接收好的数据

Text("保存地址").width('100%').height(40).backgroundColor(Color.Orange).fontColor(Color.Black).textAlign(TextAlign.Center).borderRadius(10).onClick(async ()=>{let cartPush = new address_list();cartPush.id=Math.floor(Math.random() * 1000000);cartPush.user_id=this.user!.user_idcartPush.administrativeArea=this.addressInfo!.addressComponent.adminLevel1!cartPush.locality=this.addressInfo!.addressComponent.adminLevel2!cartPush.subLocality=this.addressInfo!.addressComponent.adminLevel3!cartPush.placeName=this.addressInfo!.addressComponent.adminLevel4!cartPush.latitude=String(this.addressInfo!.location!.latitude)cartPush.longitude=String(this.addressInfo!.location!.longitude)cartPush.phone=this.phoneStrcartPush.nikeName=this.phoneNamecartPush.address=this.addressStrlet databaseZone = cloudDatabase.zone('default');let num = await databaseZone.upsert(cartPush);hilog.info(0x0000, 'testTag', Succeeded in upserting data, result: ${num});if (num>0) {showToast("修改成功"+num+"条")router.back()}})

这里我们添加成功后关掉页面，回到地址列表展示页面，这个页面的数据查询放到 onpageshow 中，回到页面就会刷新列表，我们已经在地图选点页面选择好条目，然后跳转到地址新增页面，然后我们填写好对应的数据，点击保存，后续我们会打磨这几个页面的细节，让他更符合地址添加的商业 app 逻辑