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

## 技术栈

Appgallery connect

## 开发准备

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

## 功能分析

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

## 代码实现

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

```css

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组件这个组件用来接收数据库中查询出来的积分值

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

```css

@State isClose:boolean=false

@State user: User|null=null;

@State userInfo:UserInfo|null=null;

@State points:number=0

```

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

```css

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

}

}

}

```

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

```css

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

}

})

}

```

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

```css

.onClick(()=>{

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

})

```

写在最后的话：

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