《仿盒马》app开发技术分享-- 兑换页地址商品展示（71）

## 技术栈

Appgallery connect

## 开发准备

上一节我们实现了商品兑换的校验功能，这能很好的帮助用户节省更多的时间，同时也能减小服务器的开销，同时我们的业务逻辑也会更加的完善功能也更加的丰富了，这一节我们实现校验通过后的内容，实现地址的选择和兑换商品信息的展示

## 功能分析

地址的选择我们通过获取地址管理页的地址来实现，商品兑换信息的展示我们通过传递详情页的商品id来这个页面继续进行查询。保证数据的实时性。地址的传递我们在点击事件中去传递，然后我们在兑换地址商品展示页去拿到我们传递的地址，在传输地址之前我们需要先新建地址传递的实体类，商品id传递的实体类，在拿到数据之后在页面的生命周期中拿到传递的数据。

## 代码实现

首先我们实现地址的选择，因为我们需要从另一个页面中传递数据，为了避免数据获取不到的情况，所以我们选择在onpageshow中拿到传递的数据，拿到传递的数据之后把传递过来的string字符串数据转换为json实体。

```css

@State addressInfo:AddressList|null=null

onPageShow(): void {

let params1 = router.getParams() as AddressModel

if (params1!=null&&params1.address!=undefined){

this.addressInfo=JSON.parse(params1.address)

}

}

```

然后我们在页面中拿到传递过来的id，后续根据id查询对应的商品信息，在使用云数据库条件查询数据源，拿到数据源之后我们得到一个数组类型的数据，因为我们查询到的数据只有一条，所以直接拿下标为0的数据即可

```css

@State pointsProduct:PointsProduct|null=null

async aboutToAppear(): Promise<void> {

let databaseZone = cloudDatabase.zone('default');

let product = await router.getParams() as ProductDetailModel;

let condition1 = new cloudDatabase.DatabaseQuery(points_product);

condition1.equalTo("id",product.id)

let productDetail = await databaseZone.query(condition1);

let json = JSON.stringify(productDetail)

let list:PointsProduct[]= JSON.parse(json)

this.pointsProduct=list[0]

}

```

把获取到的地址信息展示到页面上

```css

if (this.addressInfo!=null){

Column({space:10}){

Row({space:20}){

Image($r('app.media.order_location'))

.height(20)

.width(20)

Column(){

Row(){

Text(this.addressInfo.nikeName)

.fontColor(Color.Black)

.fontSize(16)

.fontWeight(FontWeight.Bold)

Text(this.addressInfo.phone)

.fontColor(Color.Black)

.fontSize(16)

.fontWeight(FontWeight.Bold)

.margin({left:20})

}

Text(this.addressInfo.administrativeArea+this.addressInfo.locality+this.addressInfo.subLocality+this.addressInfo.placeName+this.addressInfo.address)

.fontColor(Color.Black)

.fontSize(16)

.margin({top:10})

.width('80%')

}

.alignItems(HorizontalAlign.Start)

.width('100%')

}

}

.alignItems(HorizontalAlign.Start)

.justifyContent(FlexAlign.Center)

.padding(15)

.width('100%')

.justifyContent(FlexAlign.SpaceBetween)

.onClick(()=>{

let status:AddressPointsStatusModel={

status:true

}

router.pushUrl({url:'pages/view/AddressListPage',params:status})

})

}else {

Row({space:20}){

Image($r('app.media.order_location'))

.height(20)

.width(20)

Text("请选择收货地址")

.fontColor(Color.Black)

.fontSize(16)

Blank()

Image($r('app.media.right'))

.height(20)

.width(20)

}

.padding(10)

.width('100%')

.justifyContent(FlexAlign.SpaceBetween)

.height(40)

.alignItems(VerticalAlign.Center)

.onClick(()=>{

let status:AddressPointsStatusModel={

status:true

}

router.pushUrl({url:'pages/view/AddressListPage',params:status})

})

}

```

然后我们把查询出的兑换商品展示到页面上

```css

Column(){

Row() {

Row({ space: 10 }) {

Image(this.pointsProduct?.url)

.height(70)

.width(70)

.margin({ left: 10 })

.borderRadius(10)

Column({ space: 5 }) {

Text(this.pointsProduct?.name)

.fontColor(Color.Black)

.fontSize(14)

Text(this.pointsProduct?.spec_str)

.fontColor(Color.Grey)

.fontSize(14)

Row() {

Text() {

Span("$ ")

.fontSize(14)

.fontColor(Color.Red)

Span(this.pointsProduct?.points + "")

.fontSize(16)

.fontColor(Color.Red)

}

}

.alignItems(VerticalAlign.Bottom)

Text("数量：" + this.pointsProduct?.amount)

.fontColor(Color.Black)

.fontColor(Color.Gray)

.fontSize(12)

}

.alignItems(HorizontalAlign.Start)

}

.justifyContent(FlexAlign.Start)

.alignItems(VerticalAlign.Top)

Blank()

Text("$ " + this.pointsProduct!.points*this.pointsProduct!.amount)

.fontColor(Color.Black)

.fontSize(14)

}

.padding(10)

.width('100%')

.alignItems(VerticalAlign.Top)

.justifyContent(FlexAlign.SpaceBetween)

Divider()

.width('100%')

.height(1)

.backgroundColor("#f7f7f7")

}

```

现在我们就实现了兑换页地址和商品的展示逻辑