《仿盒马》app开发技术分享-- 商品兑换校验（70）

## 技术栈

Appgallery connect

开发准备

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

功能分析

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

代码实现

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

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

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

 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("您的积分不足！")
            }
          })

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

@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%')
  }
}

引用弹窗

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

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

 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("您的积分不足！")
            }
          })

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