《仿盒马》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_id
cartPush.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.phoneStr
cartPush.nikeName=this.phoneName
cartPush.address=this.addressStr
let 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逻辑
- 点赞
- 收藏
- 关注作者
评论（0）