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

举报
yd_215151764 发表于 2025/06/30 10:47:10 2025/06/30
【摘要】 ## 技术栈Appgallery connect## 开发准备上一节我们实现了可兑换商品的详情,我们能够查看到商品更多的信息,这一节我们来实现商品兑换相关的功能,在进行商品兑换之前,我们在兑换详情页面,点击立即兑换按钮之后我们需要跳转到兑换详情页,但是用户的积分可能达不到我们当前商品的兑换标准,这时候如果我们进入了下个页面,在用户点击确认的时候去校验,就让用户多操作了一步,这样的操作体验非常...


## 技术栈

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

【声明】本内容来自华为云开发者社区博主,不代表华为云及华为云开发者社区的观点和立场。转载时必须标注文章的来源(华为云社区)、文章链接、文章作者等基本信息,否则作者和本社区有权追究责任。如果您发现本社区中有涉嫌抄袭的内容,欢迎发送邮件进行举报,并提供相关证据,一经查实,本社区将立刻删除涉嫌侵权内容,举报邮箱: cloudbbs@huaweicloud.com
  • 点赞
  • 收藏
  • 关注作者

评论(0

0/1000
抱歉,系统识别当前为高风险访问,暂不支持该操作

全部回复

上滑加载中

设置昵称

在此一键设置昵称,即可参与社区互动!

*长度不超过10个汉字或20个英文字符,设置后3个月内不可修改。

*长度不超过10个汉字或20个英文字符,设置后3个月内不可修改。