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

  • 鸿蒙小林

    2025-06-26 20:27:18
  • HTML5
  • 原创


## 技术栈


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)['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%')

  }

}

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


请使用浏览器的分享功能分享到微信等