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

## 技术栈

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

}

})

```

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