《仿盒马》app开发技术分享-- 账号注销(86)

举报
yd_215151764 发表于 2025/06/30 10:53:44 2025/06/30
【摘要】 ## 技术栈Appgallery connect## 开发准备上一节我们在欢迎页用户账号注销后给用户开通了一个账号恢复的功能,但是我们的账号注销一直都是从云数据库直接修改的。一直没有一个账号注销的入口,这一节我们来实现这样的一个入口,并且实现账号注销的功能## 功能分析要实现账号的注销,首先我们要在个人中心页面功能列表新增入口,通过这个入口我们进入页面,先拿到当前登陆账号的信息,用户确认无误...


## 技术栈

Appgallery connect

## 开发准备
上一节我们在欢迎页用户账号注销后给用户开通了一个账号恢复的功能,但是我们的账号注销一直都是从云数据库直接修改的。一直没有一个账号注销的入口,这一节我们来实现这样的一个入口,并且实现账号注销的功能


## 功能分析
要实现账号的注销,首先我们要在个人中心页面功能列表新增入口,通过这个入口我们进入页面,先拿到当前登陆账号的信息,用户确认无误后,输入密码点击注销,这时会出现一个弹窗二次提醒,用户点击弹窗确认后实现账号的注销


## 代码实现
首先在个人中心页面新增入口

```c
  new SectionLine("注销",
        "注销您的账号",
        $r('app.media.zhuxiao'),
        false),
```
添加对应的跳转事件

```c
if (item.title=='注销'){
        if (this.user!=null) {
          router.pushUrl({url:'pages/view/LogOffPage'})

        }else {
          showToast("请先登录")

        }
      }
```
我们创建对应的注销页面,在进入页面之后拿到当前用户的信息,告知用户要注销的账号,以及一些细则

```c
@State message: string ="提示信息";
  @State user: User|null=null
  @State psw:string = ''
 async aboutToAppear(): Promise<void> {
    const  userInfo= await StorageUtils.getAll('user')
    if (userInfo!=null) {
      this.user=JSON.parse(userInfo)
    }
  }
```
拿到用户信息之后我们实现对应的ui

```c
 CommonTopBar({ title: "账号注销", alpha: 0, titleAlignment: TextAlign.Center ,backButton:true})
      Text("尊敬的"+this.user?.user_name+"您好,"+this.message)
        .border({width:1,color:Color.Black})
        .borderRadius(15)
        .margin({left:15,right:15})
        .fontColor(Color.Black)
        .padding(10)
        .fontSize(16)
        .fontWeight(FontWeight.Bold)


      TextInput({text:this.psw,
        placeholder: '请输入密码'
      })
        .backgroundColor("#f6f6f6")
        .placeholderColor("#ff999595")
        .fontColor("#333333")
        .type(InputType.Password)
        .onChange((value: String) => {
          this.psw = value.toString()
        }).margin(20)

      Row() {
        Text('注销')
          .fontColor(Color.White)
          .fontSize(18)
          .backgroundColor("#ffe74141")
          .padding(10)
          .borderRadius(10)
```
然后我们实现点击注销按钮的逻辑

```c
 
            let databaseZone = cloudDatabase.zone('default');
            let condition = new cloudDatabase.DatabaseQuery(user);
            condition.equalTo("user_name",this.user?.user_name).and().equalTo("psw",this.psw)
            let listData = await databaseZone.query(condition);
            let json = JSON.stringify(listData)
            let data1:User[]= JSON.parse(json)
            if (data1.length>0) {
              let userInfo = new user();
              userInfo.id=data1[0].id
              userInfo.user_id=data1[0].user_id
              userInfo.user_name=data1[0].user_name
              userInfo.psw=data1[0].psw
              userInfo.is_vip=false
              userInfo.user_code=data1[0].user_code;
              userInfo.is_log_off=true
              let num = await databaseZone.upsert(userInfo);
              if (num>0) {
                showToast("您的账号已注销")
              }
            }
      }
     
```
这里我们已经实现了注销,我们添加一个二次弹窗来让用户双重确认

```c
  promptAction.showDialog({
              title: '提示',
              message: '您正在注销账号',
              buttons: [
                {
                  text: '取消',
                  color: '#ffffff'
                },
                {
                  text: '确认',
                  color: '#ffffff'
                }
              ],
            })
              .then(async data => {
                if (data.index==0) {
                }
                if (data.index==1) {
                  let databaseZone = cloudDatabase.zone('default');
                  let condition = new cloudDatabase.DatabaseQuery(user);
                  condition.equalTo("user_name",this.user?.user_name).and().equalTo("psw",this.psw)
                  let listData = await databaseZone.query(condition);
                  let json = JSON.stringify(listData)
                  let data1:User[]= JSON.parse(json)
                  if (data1.length>0) {
                    let userInfo = new user();
                    userInfo.id=data1[0].id
                    userInfo.user_id=data1[0].user_id
                    userInfo.user_name=data1[0].user_name
                    userInfo.psw=data1[0].psw
                    userInfo.is_vip=false
                    userInfo.user_code=data1[0].user_code;
                    userInfo.is_log_off=true
                    let num = await databaseZone.upsert(userInfo);
                    if (num>0) {
                      showToast("您的账号已注销")
                    }
                  }
                }
                console.info('showDialog success, click button: ' + data.index);
              })
              .catch((err: Error) => {
                console.info('showDialog error: ' + err);
              })
            
```
现在我们就会让用户二次确认注销。但是我们注销之后,我们修改了当前的账号状态,我们应用其实还是有账号信息,还是可以使用的,所以我们还需要把当前的账号退出,我们在注销成功的判断中实现账号退出

```c
 let num = await databaseZone.upsert(userInfo);
                    if (num>0) {
                      showToast("您的账号已注销")

                      StorageUtils.remove('user')
                      router.back()
                      let eventData: emitter.EventData = {
                        data: {}
                      };

                      let innerEvent: emitter.InnerEvent = {
                        eventId: 2001,
                        priority: emitter.EventPriority.HIGH
                      };

                      emitter.emit(innerEvent, eventData);
                    }
```
到这里我们就实现了账号注销的功能了

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

评论(0

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

全部回复

上滑加载中

设置昵称

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

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

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