技术栈
Appgallery connect
开发准备
上一节我们在欢迎页用户账号注销后给用户开通了一个账号恢复的功能，但是我们的账号注销一直都是从云数据库直接修改的。一直没有一个账号注销的入口，这一节我们来实现这样的一个入口，并且实现账号注销的功能
功能分析
要实现账号的注销，首先我们要在个人中心页面功能列表新增入口，通过这个入口我们进入页面，先拿到当前登陆账号的信息，用户确认无误后，输入密码点击注销，这时会出现一个弹窗二次提醒，用户点击弹窗确认后实现账号的注销
代码实现
首先在个人中心页面新增入口
new SectionLine("注销",
"注销您的账号",
$r('app.media.zhuxiao'),
false),
添加对应的跳转事件
if (item.title=='注销'){
if (this.user!=null) {
router.pushUrl({
url:'pages/view/LogOffPage'})
}else {
showToast("请先登录")
}
}
我们创建对应的注销页面，在进入页面之后拿到当前用户的信息，告知用户要注销的账号，以及一些细则
@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
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)
然后我们实现点击注销按钮的逻辑
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("您的账号已注销")
}
}
}
这里我们已经实现了注销，我们添加一个二次弹窗来让用户双重确认
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);
})
现在我们就会让用户二次确认注销。但是我们注销之后，我们修改了当前的账号状态，我们应用其实还是有账号信息，还是可以使用的，所以我们还需要把当前的账号退出，我们在注销成功的判断中实现账号退出
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);
}
到这里我们就实现了账号注销的功能了
