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

## 技术栈

Appgallery connect

## 开发准备

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

## 功能分析

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

## 代码实现

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

```css

@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)

```

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

```css

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)

```

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

```css

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' });

}

```

完整方法

```css

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)

```

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