《仿盒马》app开发技术分享-- 个人中心页优化（62）

技术栈 Appgallery connect

开发准备 上一节我们实现了订单逻辑的优化，现在我们的app功能更加的完善了，并且随着我们的迭代逻辑疏漏越来越少，现在我们继续进行优化，在之前的业务逻辑中我们的个人中心页面展示了用户的余额以及积分商城入口，这里我们要展示余额准确的值，积分商城的入口我们修改为积分相关的功能入口。并且展示当前账号的积分余额

功能分析 因为我们的tabs切换之后会触发组件内的刷新请求逻辑，所以我们需要根据当前的用户id查询出userinfo的信息，然后展示到页面上，同时当用户退出登陆，我们需要给积分和余额一个默认状态。

代码实现 首先我们在个人中心页面查询出对应的userinfo信息

  async onRefresh(): Promise<void> {
    if (this.currentIndexCheck==this.currentIndex) {
      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 data2:UserInfo[]= JSON.parse(json)
          this.userInfo=data2[0]
          hilog.error(0x0000, 'testTag', `Failed to query data, code: ${data2}`);
        }
      }else {
        this.userInfo=null
        this.user=null
      }
      this.flag=true
    }
  }

查出信息之后我们定义两个变量去接收余额跟积分的值，给他们一个默认空值

 @State money:string=''
  @State score:string=''

给定义的变量赋值，接收对应的参数值

  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 data2:UserInfo[]= JSON.parse(json)
          this.userInfo=data2[0]
          hilog.error(0x0000, 'testTag', `Failed to query data, code: ${data2}`);
          this.money=String(data2[0].money)
          this.score=String(data2[0].points)

把接收到的数据填充到组件上

  Row(){
              Row(){
                Image($r('app.media.balance'))
                  .margin({left:8})
                  .height(34)
                  .width(34)
                  .objectFit(ImageFit.Contain)
                  .interpolation(ImageInterpolation.High)
                Column(){
                  Text(this.money!=''?"￥"+this.money:"--")
                    .fontSize(14)
                    .fontColor($r('app.color.color_333'))
                  Row(){
                    Text("余额")
                      .fontSize(13)
                      .fontColor($r('app.color.color_999'))

                    Image($r('app.media.back_right_recycle'))
                      .margin({left:6})
                      .height(14)
                      .width(14)
                      .objectFit(ImageFit.Contain)
                      .interpolation(ImageInterpolation.High)
                  }
                }
                .alignItems(HorizontalAlign.Start)
                .margin({left:13})
                .onClick(()=>{
                  router.pushUrl({url:'pages/recycle/money/RecycleMoneyPage'})
                })
              }
              .width('40%')
              Divider()
                .vertical(true)
                .height('100%').margin({top:5,bottom:5})
                .margin({left:20})
              Row(){
                Image($r('app.media.points'))
                  .height(34)
                  .width(34)
                  .objectFit(ImageFit.Contain)
                  .interpolation(ImageInterpolation.High)
                Column(){
                  Text(this.score!=''?"$"+this.score:"--")
                    .fontSize(14)
                    .fontColor($r('app.color.color_333'))
                  Row(){
                    Text("积分")
                      .fontSize(13)
                      .fontColor($r('app.color.color_reds'))
                    Image($r('app.media.back_right_recycle'))
                      .margin({left:6})
                      .height(14)
                      .width(14)
                      .objectFit(ImageFit.Contain)
                      .interpolation(ImageInterpolation.High)
                  }

                }
                .margin({left:8})
                .alignItems(HorizontalAlign.Start)
              }
              .margin({left:8})
              .alignItems(VerticalAlign.Center)
              .width('40%')

            }
            .justifyContent(FlexAlign.Start)
            .height(80)
            .width('100%')
            .padding(8)
            .margin({top:40})
            .backgroundColor(Color.White)
            .borderRadius(8)

现在我们已经完成了数据的填充，但是当我们用户在个人中心页面进入退出页面点击了退出，我们的数据并不会去修改，所以我们还需要在接收退出状态的emitter出把变量置空

 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 data2: UserInfo[] = JSON.parse(json)
          this.userInfo = data2[0]
          hilog.error(0x0000, 'testTag', `Failed to query data, code: ${data2}`);
        }
      }else {
        this.userInfo=null
        this.user=null
        this.money=''
        this.score=''
      }

这样我们的个人中心页面逻辑也就变得完善了