## 技术栈
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("您的积分不足！")
}
})
到这里我们就实现了商品兑换校验的功能
