HarmonyOS NEXT

《仿盒马》app开发技术分享-- 个人信息页（23）

2025-06-25 11:38:36
106次阅读
0个评论

技术栈

Appgallery connect

开发准备

上一节我们实现了个人中心的业务逻辑，实现了个人信息修改后的动态更换，而且实现了一个静态的头像选择弹窗，但是这个弹窗我们并没有使用。这一节我们在个人信息页面就会使用到这个弹窗并且还涉及其他的弹窗。以及信息的同步展示和修改

功能分析

个人信息页面的展示，我们需要通过个人中心的入口进入，个人中心页面首先要根据user_id来查询我们用户相对应的信息，然后在页面进行展示，然后我们点击某些可以修改的选项，弹出编辑弹窗在数据库层面进行修改，同时在页面实时刷新。

代码实现

首先我们在个人中心页面入口处添加跳转和传值 .onClick(()=>{ router.pushUrl({ url:'pages/view/UserInfoPage', params:{id:this.user?.user_id} }) }) 然后创建对应的个人信息展示页面，并且在生命周期中查询对应的userid对应的个人信息 import { cloudDatabase } from '@kit.CloudFoundationKit'; import { user_info } from '../clouddb/user_info'; import { UserInfo } from '../entity/UserInfo'; import { hilog } from '@kit.PerformanceAnalysisKit'; import { CommonTopBar } from '../widget/CommonTopBar'; import { EditDialog } from '../dialog/EditDialog'; import { HeadCheckDialog } from '../dialog/HeadCheckDialog';

@Entry @Component struct UserInfoPage { @State str: string=''; @State headList:ESObject[]=[] @State userInfo:UserInfo|null=null @State flag:boolean=false @State typeStr:string=''

async aboutToAppear(): Promise { let params = (this.getUIContext().getRouter().getParams() as Record<string, number>)['id']

if (params>0) {
    let databaseZone = cloudDatabase.zone('default');
    let condition = new cloudDatabase.DatabaseQuery(user_info);
    condition.equalTo("user_id",params)
    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.flag=true
  }

}

build() { Column() { CommonTopBar({ title: "个人信息", alpha: 0, titleAlignment: TextAlign.Center ,backButton:true})

  if (this.flag){
    //头像
    Row(){
      Text("头像")
        .id('HeadPageHelloWorld')
        .fontSize(14)
        .fontColor(Color.Gray)
      Blank()
      Image(this.userInfo?.head_img)
        .width(40)
        .height(40)
        .borderRadius(20)
        .onClick(()=>{
          this.headController.open()
        })

      Image($r('app.media.ic_arrow_bold'))
        .height(15)
        .width(15)
        .objectFit(ImageFit.Contain)
        .margin({left:10})

    }
    .padding({top:15,bottom:15})
    .width('100%')
    .justifyContent(FlexAlign.SpaceEvenly)
    Divider()
      .width('100%')
      .height(0.5)

      .backgroundColor(Color.Gray)



    //昵称
    Row(){
      Text("昵称")
        .fontSize(14)
        .fontColor(Color.Gray)
      Blank()
      Text(this.userInfo?.nickname)
        .height(40)
        .borderRadius(20)
        .fontColor(Color.Gray)

      Image($r('app.media.ic_arrow_bold'))
        .height(15)
        .width(15)
        .objectFit(ImageFit.Contain)
        .margin({left:10})
    }
    .padding({top:15,bottom:15})
    .width('100%')
    .justifyContent(FlexAlign.SpaceEvenly)
    .onClick(()=>{
      this.str=this.userInfo!.nickname
      this.typeStr='昵称'
      this.dialogController.open()
    })
    Divider()
      .width('100%')
      .height(0.5)

      .backgroundColor(Color.Gray)




    //性别
    Row(){
      Text("性别")
        .fontSize(14)
        .fontColor(Color.Gray)
      Blank()
      Text(this.userInfo?.sex)
        .height(40)
        .borderRadius(20)
        .fontColor(Color.Gray)

      Image($r('app.media.ic_arrow_bold'))
        .height(15)
        .width(15)
        .objectFit(ImageFit.Contain)
        .margin({left:10})

    }
    .padding({top:15,bottom:15})
    .width('100%')
    .justifyContent(FlexAlign.SpaceEvenly)
    .onClick(()=>{
      this.str=this.userInfo!.sex
      this.typeStr='性别'
      this.dialogController.open()
    })
    Divider()
      .width('100%')
      .height(0.5)

      .backgroundColor(Color.Gray)


    //绑定手机
    Row(){
      Text("绑定手机")
        .fontSize(14)
        .fontColor(Color.Gray)
      Blank()
      Text(this.userInfo?.bind_phone)
        .height(40)
        .borderRadius(20)
        .fontColor(Color.Gray)


    }
    .padding({top:15,bottom:15})

    .width('100%')
    .justifyContent(FlexAlign.SpaceEvenly)
    Divider()
      .width('100%')
      .height(0.5)
      .backgroundColor(Color.Gray)


    //注册日期
    Row(){
      Text("注册日期")
        .id('HeadPageHelloWorld')
        .fontSize(14)
        .fontColor(Color.Gray)
      Blank()
      Text(this.userInfo?.create_time)
        .height(40)
        .borderRadius(20)
        .fontColor(Color.Gray)

    }
    .padding({top:15,bottom:15})

    .width('100%')
    .justifyContent(FlexAlign.SpaceEvenly)
    Divider()
      .width('100%')
      .height(0.5)

      .backgroundColor(Color.Gray)
  }
}
.padding(10)
.backgroundColor(Color.White)
.height('100%')
.width('100%')

}

} 接下来我们进行数据的修改，首先是头像的修改，因为之前我们已经创建了对应的弹窗但是没有实现对应的逻辑，这时候我们只需要在点击事件中添加对应的修改逻辑即可 .onClick(async ()=>{ if (this.str!='') { try { let databaseZone = cloudDatabase.zone('default'); let userInfo = new user_info(); userInfo.id=this.userInfo!.id userInfo.user_id=this.userInfo!.user_id userInfo.nickname=this.userInfo!.nickname userInfo.sex=this.userInfo!.sex userInfo.bind_phone=this.userInfo!.bind_phone userInfo.create_time=this.userInfo!.create_time userInfo.head_img=this.str let num = await databaseZone.upsert(userInfo); if (num>0) { let condition = new cloudDatabase.DatabaseQuery(user_info); condition.equalTo("user_id",userInfo.user_id) let listData = await databaseZone.query(condition); let json = JSON.stringify(listData) let data2:UserInfo[]= JSON.parse(json) this.userInfo=data2[0] this.controller.close() } } catch (err) { hilog.info(0x0000, 'testTag', Succeeded in upserting data, result: ${err}); } }else { showToast("请选择头像") }

    })

到这里我们就能实现头像的修改了，然后我们实现性别、昵称的修改，我们先创建对应的弹窗，注意这里我们用一个弹窗修改性别昵称的数据，我们需要定义一个参数来做区分

import showToast from "../utils/ToastUtils"; import { cloudDatabase } from "@kit.CloudFoundationKit"; import { user_info } from "../clouddb/user_info"; import { UserInfo } from "../entity/UserInfo"; import { hilog } from "@kit.PerformanceAnalysisKit";

@Preview @CustomDialog export struct EditDialog { controller: CustomDialogController; @Link userInfo:UserInfo|null @Link str: string ; @Prop typeStr:string; build() { Column({space:20}) {

  Text(this.typeStr=='昵称'?"请输入你的昵称":"请输入你的性别")
    .id('HeadPageHelloWorld')
    .fontSize($r('app.float.size_20'))
    .fontWeight(FontWeight.Bold)
    .fontColor(Color.Black)
    .margin({top:20})

  TextInput({text:this.str})
    .backgroundColor("#f6f6f6")
    .placeholderColor("#ff999595")
    .fontColor("#333333")
    .maxLength(11)
    .onChange((value: String) => {
      this.str = value.toString()
    })
    .margin(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 ()=>{
        if (this.str!='') {
          try {
            let databaseZone = cloudDatabase.zone('default');
            let userInfo = new user_info();
            userInfo.id=this.userInfo!.id
            userInfo.user_id=this.userInfo!.user_id
            if (this.typeStr=='昵称') {
              userInfo.nickname= this.str
            }else {
              userInfo.nickname=this.userInfo!.nickname
            }

            if (this.typeStr=='性别') {
              userInfo.sex= this.str
            }else {
              userInfo.sex=this.userInfo!.sex
            }
            userInfo.bind_phone=this.userInfo!.bind_phone
            userInfo.create_time=this.userInfo!.create_time
            userInfo.head_img=this.userInfo!.head_img

            let num = await databaseZone.upsert(userInfo);
            if (num>0) {
              let condition = new cloudDatabase.DatabaseQuery(user_info);
              condition.equalTo("user_id",userInfo.user_id)
              let listData = await databaseZone.query(condition);
              let json = JSON.stringify(listData)
              let data2:UserInfo[]= JSON.parse(json)
              this.userInfo=data2[0]
              this.controller.close()
            }
          } catch (err) {
          hilog.info(0x0000, 'testTag', `Succeeded in upserting data, result: ${err}`);
        }
        }else {
          showToast("请填入信息")
        }

      })
  }
  .width('100%')
  .justifyContent(FlexAlign.SpaceAround)


}
.borderRadius({topLeft:20,topRight:20})
.justifyContent(FlexAlign.Start)

.backgroundColor(Color.White)
.height(300)
.width('100%')

} } 到这里我们就实现了个人信息页面的头像以及部分信息的修改

收藏0赞0

请 登录 后评论。没有帐号？ 注册 一个。

鸿蒙小林

  • 0回答
  • 0粉丝
  • 0关注
相关话题
版权所有©坚果派 陇ICP备2024014515号-1联系我们