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

技术栈

Appgallery connect

开发准备

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

功能分析

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

代码实现

首先我们实现地址的选择

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

@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]
  }

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

        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})
          })
        }

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

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

        }

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