《仿盒马》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")

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