《仿盒马》app开发技术分享-- 我的积分页(63)

鸿蒙小林
• 阅读 3

## 技术栈

Appgallery connect

开发准备

上一节我们实现了个人中心页面的业务逻辑优化,成功的在用户登陆退出状态下展示对应的组件内容,这一节我们来实现app中另外一个比较重要的模块---积分模块。

功能分析

因为我们的回收订单是跟回收金积分是绑定的,我们在完成回收订单时把对应的金额跟积分已经添加到了用户的个人信息表中,这里我们能够取出总的积分金额。积分的其他信息我们也可以通过回收单相关的页面进行操作

代码实现

首先我们创建积分页,为了样式的统一我们的积分页跟回收金的布局不要相差太多,这样方便用户去进行操作和查看

 build() {
    Column() {
      CommonTopBar({ title: "我的积分", alpha: 0, titleAlignment: TextAlign.Center ,backButton:true})
      Row(){
        Text()
          .fontSize(30)
          .fontColor("#333333")
          .fontWeight(FontWeight.Bold)
      }
    }
    .height('100%')
    .width('100%')
  }
}

我们首先添加了对应的toolbar,和一个text组件这个组件用来接收数据库中查询出来的积分值

我们先定义接收查询数据的对象和变量

 @State isClose:boolean=false
  @State user: User|null=null;
  @State userInfo:UserInfo|null=null;
  @State points:number=0

然后我们在生命周期中根据用户数据查询对应的用户信息,并且赋值给我们定义的对象和变量

  async aboutToAppear(): Promise<void> {
      const value = await StorageUtils.getAll('user');
      if (value != "") {
        this.user = JSON.parse(value)
        if (this.user != null) {
          let databaseZone = cloudDatabase.zone('default');
          let condition = new cloudDatabase.DatabaseQuery(user_info);
          condition.equalTo("user_id", this.user?.user_id)
          let listData = await databaseZone.query(condition);
          let json = JSON.stringify(listData)
          let data: UserInfo[] = JSON.parse(json)
          this.userInfo = data[0]
          this.points=data[0].points
          hilog.error(0x0000, 'testTag', `Failed to query data, code: ${data}`);
        }
      }

  }

接下来我们在页面上展示对应的值,并且同样添加隐藏和显示的按钮

  Row(){
        Text(this.isClose?"$****":"$"+this.points.toString())
          .fontSize(30)
          .fontColor("#333333")
          .fontWeight(FontWeight.Bold)
        Image(this.isClose?$r('app.media.ic_psd_hide'):$r('app.media.ic_psd_show'))
          .width(28)
          .height(28)
          .objectFit(ImageFit.Contain)
          .interpolation(ImageInterpolation.High)
          .margin({left:12})
          .onClick(()=>{
            if (this.isClose==false) {
              this.isClose=true
            }else {
              this.isClose=false
            }

          })
      }

然后我们把个人中心页面的积分页入口添加上跳转的事件

 .onClick(()=>{
                router.pushUrl({url:'pages/recycle/points/PointsPage'})
              })

写在最后的话: 最近harmonyOs已经更新到了6.0bate,api也已经到了20 bate 了,很多老的方法都弃用了,后期我们也会逐渐的更新一下

点赞
收藏
评论区
推荐文章
鸿蒙小林 鸿蒙小林
6小时前
《仿盒马》app开发技术分享-- 旧物回收页(静态)(40)
技术栈Appgalleryconnect开发准备上一节我们进行了购物车业务逻辑的优化,使我们的程序变得更加健壮,这一节我们将要开始电商业务以外的内容,旧物回收,这是一个全新的业务模块,我们将要在这里实现对应的,回收金,积分,回收业务相关内容功能分析要想实现
鸿蒙小林 鸿蒙小林
6小时前
《仿盒马》app开发技术分享-- 旧物回收页(业务逻辑)(41)
技术栈Appgalleryconnect开发准备上一节我们实现了旧物回收页的静态展示页,现在我们开始添加对应的模块逻辑,我们要实现的内容有,地址选择、留言、取件时间、重量选择这些模块功能分析1.地址选择要实现地址选择,我们首先要在跳转到地址列表选择页,传递
鸿蒙小林 鸿蒙小林
6小时前
《仿盒马》app开发技术分享-- 回收金提现准备页(50)
技术栈Appgalleryconnect开发准备上一节我们实现了回收金的收入、支出记录查询,并且在订单完成后成功创建对应的收支记录,但是我们暂时只有收入记录,并没有支出记录,这一节我们将要实现账号的回收金提现功能,从商业角度实现app应用的正向循环功能分析
鸿蒙小林 鸿蒙小林
6小时前
《仿盒马》app开发技术分享-- 回收金提现(53)
技术栈Appgalleryconnect开发准备上一节我们实现了银行卡的绑定跟回显,这一节我们要真正的实现银行卡提现的功能了,在这之前我们还需要对提现页的业务逻辑进行更进一步的优化,同时为了方便我们去进行数据间的交互,我们在个人信息模块新增了金额和积分的字
鸿蒙小林 鸿蒙小林
6小时前
《仿盒马》app开发技术分享-- 个人中心页优化(62)
技术栈Appgalleryconnect开发准备上一节我们实现了订单逻辑的优化,现在我们的app功能更加的完善了,并且随着我们的迭代逻辑疏漏越来越少,现在我们继续进行优化,在之前的业务逻辑中我们的个人中心页面展示了用户的余额以及积分商城入口,这里我们要展示
鸿蒙小林 鸿蒙小林
6小时前
《仿盒马》app开发技术分享-- 积分页组件新增(64)
技术栈Appgalleryconnect开发准备上一节我们创建了积分页,给页面添加了标题栏和积分展示的组件。这一节我们继续丰富积分页的内容,添加引导栏,积分明细展示等区域功能分析因为页面的关联不强,我们采用组件引入的方式实现引导栏,同时,在下方继续添加对应
鸿蒙小林 鸿蒙小林
6小时前
《仿盒马》app开发技术分享-- 插入积分信息(65)
技术栈Appgalleryconnect开发准备上一节我们实现了积分页面的大概框架,那么现在我们开始进行数据的填充和查询,积分相关的内容现在之后当回收订单结算之后才会进行积分数据的添加,那我们想查询出对应的积分数据,还需要新增一张积分信息表功能分析现在积分
鸿蒙小林 鸿蒙小林
7小时前
《仿盒马》app开发技术分享-- 兑换商品数据插入(67)
技术栈Appgalleryconnect开发准备上一节我们实现了积分列表的展示,我们可以更直观的查看当前用户积分的收支情况,但是现在我们只有积分收入并没有消费的地方,所以现在我们开始着手积分兑换相关的内容。这一节我们来实现积分兑换商品的内容功能分析首先我们
鸿蒙小林 鸿蒙小林
7小时前
《仿盒马》app开发技术分享-- 兑换商品详情(69)
技术栈Appgalleryconnect开发准备上一节我们实现了兑换商品列表的展示,用户可以在回收之后通过积分页面进入兑换列表页查看当前能够兑换的商品了,我们距离一个完整的app又更近了一步,现在我们要实现的就是当用户点击列表条目的时候能够查看数据详情。功
鸿蒙小林 鸿蒙小林
7小时前
《仿盒马》app开发技术分享-- 兑换订单列表框架(75)
技术栈Appgalleryconnect开发准备上一节我们针对订单兑换的业务逻辑进行了完善,成功的在兑换物品之后修改了用户信息的修改,新增了积分消费的记录。这一节我们实现订单创建之后进入的列表展示页框架。功能分析兑换商品的订单列表框架我们选择使用tabs,