## 技术栈

Appgallery connect

## 开发准备

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

## 功能分析

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

## 代码实现

首先我们实现地址的选择

```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查询对应的商品

```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")

        }

```

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