## 技术栈

Appgallery connect

## 开发准备

上一节我们实现了可兑换商品的详情，我们能够查看到商品更多的信息，这一节我们来实现商品兑换相关的功能，在进行商品兑换之前，我们在兑换详情页面，点击立即兑换按钮之后我们需要跳转到兑换详情页，但是用户的积分可能达不到我们当前商品的兑换标准，这时候如果我们进入了下个页面，在用户点击确认的时候去校验，就让用户多操作了一步，这样的操作体验非常的不友好，所以我们在兑换前进行校验，通过校验后我们在确认页实现地址添加相关的内容

## 功能分析

商品兑换校验的功能实现我们需要通过两个步骤来进行实现，首先是当用户进入商品详情页之后，我们需要在云端查询当前用户账号的总积分数，拿到积分的值用来做校验，在进行校验时我们只需要拿到这个值，根据他来判断来实现对应的逻辑即可，同时我们还要实现一个用户防误触的功能，当用户点击立即兑换的时候，我们实现一个弹窗来提醒用户，是否需要兑换

## 代码实现

首先我们实现校验功能，这里我们就需要拿到用户数据，根据用户信息去查询用户详情

```css

  @State user: User|null=null

  @State userInfo:UserInfo|null=null

 const value = await StorageUtils.getAll('user');

    if (value!='') {

      this.user=JSON.parse(value)

    }

   let condition = new cloudDatabase.DatabaseQuery(user_info);

    condition.equalTo("user_id",this.user?.user_id)

    let listData = await databaseZone.query(condition);

    let json1 = JSON.stringify(listData)

    let data2:UserInfo[]= JSON.parse(json1)

    this.userInfo=data2[0]

```

拿到用户详情之后，我们就能实现第一层校验

```css

 Text("立即兑换")

          .padding(10)

          .width('45%')

          .textAlign(TextAlign.Center)

          .backgroundColor("#FCDB29")

          .fontColor(Color.White)

          .borderRadius(15)

          .onClick(()=>{

            if (this.userInfo!.points>this.pointsProduct!.points) {

              //弹窗

            }else {

              showToast("您的积分不足！")

            }

          })

```

现在我们继续执行后续的能够兑换的逻辑,进行二次弹窗提醒

```css

@Preview

@CustomDialog

export struct CheckDialog {

  controller: CustomDialogController;

  public callback:()=>void=():void=>{}

  build() {

    Column({space:20}) {

      Text("提醒")

        .fontSize($r('app.float.size_20'))

        .fontWeight(FontWeight.Bold)

        .fontColor(Color.Black)

        .margin({top:20})

      Text("您确定要兑换这件商品吗？")

        .fontSize($r('app.float.size_20'))

        .fontWeight(FontWeight.Bold)

        .fontColor(Color.Black)

        .margin({top:20})

      Row(){

        Text("取消")

          .width('30%')

          .textAlign(TextAlign.Center)

          .height(40)

          .fontSize(18)

          .fontColor(Color.White)

          .backgroundColor(0xff0000)

          .borderRadius(30)

          .margin({top:30})

          .onClick(()=>{

              this.controller.close()

          })

        Text("确认")

          .width('30%')

          .textAlign(TextAlign.Center)

          .height(40)

          .fontSize(18)

          .fontColor(Color.White)

          .backgroundColor(0xff0000)

          .borderRadius(30)

          .margin({top:30})

          .onClick(async ()=>{

           this.callback()

          })

      }

      .width('100%')

      .justifyContent(FlexAlign.SpaceAround)

    }

    .borderRadius({topLeft:20,topRight:20})

    .justifyContent(FlexAlign.Start)

    .backgroundColor(Color.White)

    .height(400)

    .width('100%')

  }

}

```

引用弹窗

```css

  couponController: CustomDialogController| null = new CustomDialogController({

    builder: CouponCheckDialog({

      couponPrice:this.couponPrice,

      price:this.price(),

      onItemSelected:(coupon_id:number)=>{

        this.coupon_id=coupon_id

      }

    }),

    alignment: DialogAlignment.Bottom,

    customStyle:false

  });

```

我们的弹窗实现之后，我们把逻辑添加到立即兑换的按钮上

```css

 Text("立即兑换")

          .padding(10)

          .width('45%')

          .textAlign(TextAlign.Center)

          .backgroundColor("#FCDB29")

          .fontColor(Color.White)

          .borderRadius(15)

          .onClick(()=>{

            if (this.userInfo!.points>this.pointsProduct!.points) {

              this.checkController?.open()

            }else {

              showToast("您的积分不足！")

            }

          })

```

到这里我们就实现了商品兑换校验的功能