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

鸿蒙小林
• 阅读 7

技术栈

Appgallery connect

开发准备

上一节我们实现了欢迎页的逻辑,并且在欢迎页面实现了对账号状态的提示,但是如果我们的用户之前因为一些原因注销了账号,但现在又想用回我们的应用怎么办?我们这一节就要在注销账号的提示弹窗处,实现一个账号恢复功能,使我们的用户可以继续使用我们的应用

功能分析

要实现账号恢复,首先我们需要在注销弹窗的事件出实现页面的跳转,在新页面里,我们通过修改用户当前账号的状态来实现,当然了,我们也需要在里边添加一些恢复的说明,避免引起不必要的麻烦

代码实现

首先我们实现账号恢复的ui页面,创建好等会要使用的变量

 @State message: string = '提示语句';
  @State acc:string = ''
  @State psw:string = ''

 CommonTopBar({ title: "账号恢复", alpha: 0, titleAlignment: TextAlign.Center ,backButton:true})
      Text(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)
      Column() {
        TextInput({text:this.acc,
          placeholder: '请输入注销前的账号'
        })
          .backgroundColor("#f6f6f6")
          .placeholderColor("#ff999595")
          .fontColor("#333333")
          .maxLength(11)
          .type(InputType.Number)
          .onChange((value: String) => {
            this.acc = value.toString()
          }).margin(20)

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

然后我们来实现点击账号恢复的业务逻辑,在点击账号恢复时,我们先要根据用户输入的账号密码校验准确性

 let databaseZone = cloudDatabase.zone('default');

              let condition = new cloudDatabase.DatabaseQuery(user);
              condition.equalTo("user_name",this.acc).and().equalTo("psw",this.psw)
              let listData = await databaseZone.query(condition);
              let json = JSON.stringify(listData)
              let data1:User[]= JSON.parse(json)

当用户输入的账号密码准确,我们紧接着修改账号状态,并且跳转到首页

 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=false
                let num = await databaseZone.upsert(userInfo);
                if (num>0) {
                  showToast("账号恢复成功")
                  router.replaceUrl({ url: 'pages/Index' });
                }

完整方法


        Row() {
          Text('账号恢复')
            .fontColor(Color.White)
            .fontSize(18)
            .backgroundColor("#ffe74141")
            .padding(10)
            .borderRadius(10)
            .onClick(async ()=>{
              let databaseZone = cloudDatabase.zone('default');

              let condition = new cloudDatabase.DatabaseQuery(user);
              condition.equalTo("user_name",this.acc).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=false
                let num = await databaseZone.upsert(userInfo);
                if (num>0) {
                  showToast("账号恢复成功")
                  router.replaceUrl({ url: 'pages/Index' });
                }
              }



            })

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

到这里我们就实现了账号的恢复功能

点赞
收藏
评论区
推荐文章
鸿蒙小林 鸿蒙小林
17小时前
《仿盒马》app开发技术分享-- 加入购物车&加购列表展示(12)
技术栈Appgalleryconnect开发准备上一节我们实现了商品详情页面的规格选择弹窗,这在任何购物类应用中都是最常用的功能之一。当然了,作为一个购物类的应用,我们仅仅展示是用处不大的,我们还需要有添加的动作。这一节我们就来实现添加到购车里并且在购物车
鸿蒙小林 鸿蒙小林
17小时前
《仿盒马》app开发技术分享-- 分类模块顶部导航列表弹窗(16)
技术栈Appgalleryconnect开发准备上一节我们实现了分类页面的顶部导航栏列表,并且实现了首页金刚区跟首页导航栏的联动,这一节我们实现导航栏列表的弹窗功能,需要学习的知识点有自定义弹窗,同时我们的数据源需要跟分类页保持一一致。功能分析1.弹窗自定
鸿蒙小林 鸿蒙小林
11小时前
《仿盒马》app开发技术分享-- 用户登录页(业务逻辑)(21)
技术栈Appgalleryconnect开发准备上一节我们实现了静态的用户登录页,这一节我们需要给他添加上业务逻辑,实现跟云数据库的互通,同时跟整个应用关联起来,因为我们还没有实现用户的注册页面,所以这里我们在云数据库的用户数据插入暂时先不做同用户名的校验
鸿蒙小林 鸿蒙小林
11小时前
《仿盒马》app开发技术分享-- 个人信息页(23)
技术栈Appgalleryconnect开发准备上一节我们实现了个人中心的业务逻辑,实现了个人信息修改后的动态更换,而且实现了一个静态的头像选择弹窗,但是这个弹窗我们并没有使用。这一节我们在个人信息页面就会使用到这个弹窗并且还涉及其他的弹窗。以及信息的同步
鸿蒙小林 鸿蒙小林
11小时前
《仿盒马》app开发技术分享-- 回收金查询页面(48)
技术栈Appgalleryconnect开发准备上一节我们实现了查看当前账号下的预收益,以及当下收益,并且展示了已完成订单的列表,现在我们可以针对收益来做更多的内容了,在之前的开发中我们在个人中心页面实现了一个静态的金额展示,后续我们将会在这里展示当前账号
鸿蒙小林 鸿蒙小林
11小时前
《仿盒马》app开发技术分享-- 回收金提现准备页(50)
技术栈Appgalleryconnect开发准备上一节我们实现了回收金的收入、支出记录查询,并且在订单完成后成功创建对应的收支记录,但是我们暂时只有收入记录,并没有支出记录,这一节我们将要实现账号的回收金提现功能,从商业角度实现app应用的正向循环功能分析
鸿蒙小林 鸿蒙小林
11小时前
《仿盒马》app开发技术分享-- 优惠券展示页(57)
技术栈Appgalleryconnect开发准备上一节我们实现了优惠券的领取功能,并且在云端已经成功查询出优惠券信息,那么我们需要来实现一个优惠券展示的页面来向用户展示当前账号下的优惠券信息,辅助用户更好的去购买需要的商品,因为优惠券会有多种状态,在展示时
鸿蒙小林 鸿蒙小林
11小时前
《仿盒马》app开发技术分享-- 我的积分页(63)
技术栈Appgalleryconnect开发准备上一节我们实现了个人中心页面的业务逻辑优化,成功的在用户登陆退出状态下展示对应的组件内容,这一节我们来实现app中另外一个比较重要的模块积分模块。功能分析因为我们的回收订单是跟回收金积分是绑定的,我们在完成回
鸿蒙小林 鸿蒙小林
11小时前
《仿盒马》app开发技术分享-- 商品兑换校验(70)
技术栈Appgalleryconnect开发准备上一节我们实现了可兑换商品的详情,我们能够查看到商品更多的信息,这一节我们来实现商品兑换相关的功能,在进行商品兑换之前,我们在兑换详情页面,点击立即兑换按钮之后我们需要跳转到兑换详情页,但是用户的积分可能达不
鸿蒙小林 鸿蒙小林
11小时前
《仿盒马》app开发技术分享-- 账号注销(86)
技术栈Appgalleryconnect开发准备上一节我们在欢迎页用户账号注销后给用户开通了一个账号恢复的功能,但是我们的账号注销一直都是从云数据库直接修改的。一直没有一个账号注销的入口,这一节我们来实现这样的一个入口,并且实现账号注销的功能功能分析要实现