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

鸿蒙小林
• 阅读 6

技术栈

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

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

鸿蒙开发
点赞
收藏
评论区
推荐文章
鸿蒙小林 鸿蒙小林
•
11小时前
《仿盒马》app开发技术分享-- 商品规格弹窗（11）
技术栈Appgalleryconnect开发准备上一节我们实现了商品详情页面，并且成功在页面上展示了商品的图片、商品规格、活动详情等信息，要知道同一种商品大多数都是有多种型号跟规格的，所以这一节我们来实现商品的规格弹窗。这节的要点是自定义弹窗的运用。功能分
4
0
0
鸿蒙小林 鸿蒙小林
•
11小时前
《仿盒马》app开发技术分享-- 加入购物车&加购列表展示（12）
技术栈Appgalleryconnect开发准备上一节我们实现了商品详情页面的规格选择弹窗，这在任何购物类应用中都是最常用的功能之一。当然了，作为一个购物类的应用，我们仅仅展示是用处不大的，我们还需要有添加的动作。这一节我们就来实现添加到购车里并且在购物车
4
0
0
鸿蒙小林 鸿蒙小林
•
11小时前
《仿盒马》app开发技术分享-- 分类模块顶部导航列表弹窗（16）
技术栈Appgalleryconnect开发准备上一节我们实现了分类页面的顶部导航栏列表，并且实现了首页金刚区跟首页导航栏的联动，这一节我们实现导航栏列表的弹窗功能，需要学习的知识点有自定义弹窗，同时我们的数据源需要跟分类页保持一一致。功能分析1.弹窗自定
4
0
0
鸿蒙小林 鸿蒙小林
•
4小时前
《仿盒马》app开发技术分享-- 分类左侧列表（17）
技术栈Appgalleryconnect开发准备上一节我们实现了分类页面的顶部导航栏全选弹窗列表，并实现了跟顶部列表的点击选中联动效果，这一节我们要实现的功能是，分类模块的左侧列表，它同样也需要跟弹窗列表的点击，顶部列表的点击有联动的效果功能分析1.列表展
5
0
0
鸿蒙小林 鸿蒙小林
•
4小时前
《仿盒马》app开发技术分享-- 分类右侧商品列表（18）
技术栈Appgalleryconnect开发准备上一节我们实现了分类页左侧二级分类列表功能，并实现了顶部列表&弹窗跟左侧列表的联动，这一节我们需要在它们联动的基础上继续添加右侧列表的联动效果功能分析1.列表展示当我们选择顶部一级分类列表时，左侧列表展示二级
7
0
0
鸿蒙小林 鸿蒙小林
•
4小时前
《仿盒马》app开发技术分享-- 地址管理页（24）
技术栈Appgalleryconnect开发准备上一节我们实现了个人信息页面的信息展示和页面修改，并且实现了数据的同步修改，这一节我们来实现电商应用里比较重要的模块，地址模块。首先我们来实现地址的展示。功能分析地址列表的展示相对来说是比较简单的，首先我们要
5
0
0
鸿蒙小林 鸿蒙小林
•
4小时前
《仿盒马》app开发技术分享-- 订单地址修改（31）
技术栈Appgalleryconnect开发准备上一节我们实现了订单备注弹窗，订单商品列表的提交，订单列表的提交，提交之后的业务逻辑我们并没有去处理，那么订单提交之后我们需要进入到什么页面呢？这时候我们需要一个过渡页面，它能给我们提供更多的订单相关的入口，
3
0
0
鸿蒙小林 鸿蒙小林
•
4小时前
《仿盒马》app开发技术分享-- 回收金提现（53）
技术栈Appgalleryconnect开发准备上一节我们实现了银行卡的绑定跟回显，这一节我们要真正的实现银行卡提现的功能了，在这之前我们还需要对提现页的业务逻辑进行更进一步的优化，同时为了方便我们去进行数据间的交互，我们在个人信息模块新增了金额和积分的字
3
0
0
鸿蒙小林 鸿蒙小林
•
4小时前
《仿盒马》app开发技术分享--确认订单选择优惠券（59）
技术栈Appgalleryconnect开发准备在上一节我们实现了在确认订单页查询优惠券，但是我们并没有其他优惠券相关的逻辑，我们的目的还是在订单结算的时候去使用我们对应的优惠券，现在我们要在确认订单页去进行优惠券的选择，为了方便用户操作，我们以弹窗的形式
3
0
0
鸿蒙小林 鸿蒙小林
•
4小时前
《仿盒马》app开发技术分享-- 注销账号恢复（85）
技术栈Appgalleryconnect开发准备上一节我们实现了欢迎页的逻辑，并且在欢迎页面实现了对账号状态的提示，但是如果我们的用户之前因为一些原因注销了账号，但现在又想用回我们的应用怎么办？我们这一节就要在注销账号的提示弹窗处，实现一个账号恢复功能，使
5
0
0
鸿蒙小林
鸿蒙小林
Lv1
鸿蒙原生应用系列开发
文章
90
粉丝
0
获赞
0
热门文章
《仿盒马》app开发技术分享-- 兑换订单列表框架（75）
《仿盒马》app开发技术分享--确认订单选择优惠券（59）
《仿盒马》app开发技术分享-- 回收金提现（53）
《仿盒马》app开发技术分享-- 首页商品流（7）
《仿盒马》app开发技术分享-- 旧物回收页（提交云端）（42）