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

举报
yd_215151764 发表于 2025/06/30 10:27:04 2025/06/30
【摘要】 ## 技术栈Appgallery connect## 开发准备上一节我们实现了个人中心的业务逻辑，实现了个人信息修改后的动态更换，而且实现了一个静态的头像选择弹窗，但是这个弹窗我们并没有使用。这一节我们在个人信息页面就会使用到这个弹窗并且还涉及其他的弹窗。以及信息的同步展示和修改## 功能分析个人信息页面的展示，我们需要通过个人中心的入口进入，个人中心页面首先要根据user_id来查询我们用...


## 技术栈

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<void> {
    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%')
  }
}
到这里我们就实现了个人信息页面的头像以及部分信息的修改

【声明】本内容来自华为云开发者社区博主，不代表华为云及华为云开发者社区的观点和立场。转载时必须标注文章的来源（华为云社区）、文章链接、文章作者等基本信息，否则作者和本社区有权追究责任。如果您发现本社区中有涉嫌抄袭的内容，欢迎发送邮件进行举报，并提供相关证据，一经查实，本社区将立刻删除涉嫌侵权内容，举报邮箱： cloudbbs@huaweicloud.com
  • 点赞
  • 收藏
  • 关注作者

评论（0）

0/1000
抱歉，系统识别当前为高风险访问，暂不支持该操作

全部回复

上滑加载中

设置昵称

在此一键设置昵称，即可参与社区互动！

*长度不超过10个汉字或20个英文字符，设置后3个月内不可修改。

*长度不超过10个汉字或20个英文字符，设置后3个月内不可修改。

确认 取消

加入云驻计划，成为创作者

  • 华为云周边好礼
  • 免费体验产品
  • 特殊身份标识
  • 线下官方门票
  • 内部专家零距离
  • 与10000+优质创作者共同成长
立即加入