150 lines
4.1 KiB
Plaintext
150 lines
4.1 KiB
Plaintext
import promptAction from '@ohos.promptAction';
|
|
import { router } from '@kit.ArkUI';
|
|
|
|
@Preview
|
|
@Component
|
|
export struct ForgetPasswordComp {
|
|
@State phoneNumber: string = ''
|
|
@State smsCode: string = ''
|
|
@State password: string = ''
|
|
@State showPassword: boolean = false
|
|
@State countdown: number = 0
|
|
@State passWordSrc1: Resource = $r('app.media.icon_forgetpassword_show');
|
|
@State passWordSrc2: Resource = $r('app.media.icon_forgetpassword');
|
|
|
|
// 验证码倒计时
|
|
private startCountdown() {
|
|
this.countdown = 60
|
|
const timer = setInterval(() => {
|
|
if (this.countdown > 0) {
|
|
this.countdown--
|
|
} else {
|
|
clearInterval(timer)
|
|
}
|
|
}, 1000)
|
|
}
|
|
|
|
build() {
|
|
Column() {
|
|
Row() {
|
|
Image($r('app.media.icon_phone'))
|
|
.width(18)
|
|
.height(18)
|
|
.objectFit(ImageFit.Contain)
|
|
.margin({left:10})
|
|
// 手机号输入框
|
|
TextInput({ placeholder: '请输入手机号码' })
|
|
.fontSize(16)
|
|
.backgroundColor(Color.White)
|
|
.onChange((value: string) => {
|
|
this.phoneNumber = value
|
|
})
|
|
}
|
|
.margin({ top: 10 })
|
|
.width('95%')
|
|
.height(48)
|
|
.borderRadius(4)
|
|
.borderWidth(1)
|
|
.borderColor('#CCCCCC')
|
|
|
|
// 验证码输入区域
|
|
Row() {
|
|
Row() {
|
|
Image($r('app.media.icon_verification_code'))
|
|
.width(18)
|
|
.height(18)
|
|
.objectFit(ImageFit.Contain)
|
|
.margin({left:10})
|
|
TextInput({ placeholder: '请输入验证码' })
|
|
.fontSize(16)
|
|
.backgroundColor(Color.White)
|
|
}
|
|
.margin({ top: 10 })
|
|
.width('60%')
|
|
.height(48)
|
|
.borderRadius(4)
|
|
.borderWidth(1)
|
|
.borderColor('#CCCCCC')
|
|
|
|
Button({type:ButtonType.Normal}){
|
|
Text(this.countdown ? `${this.countdown}s` : '获取验证码')
|
|
}
|
|
.width('37%')
|
|
.height(32)
|
|
.borderRadius(5)
|
|
.borderColor($r('app.color.main_color'))
|
|
.borderWidth(1)
|
|
.backgroundColor(Color.White)
|
|
.fontColor($r('app.color.main_color'))
|
|
.fontSize(12)
|
|
.margin({ top: 10 })
|
|
.enabled(this.countdown === 0)
|
|
.onClick(() => {
|
|
if (this.phoneNumber.length >= 11) {
|
|
this.startCountdown()
|
|
} else {
|
|
promptAction.showToast({message:'请输入手机号'})
|
|
}
|
|
})
|
|
}
|
|
.width('95%')
|
|
.justifyContent(FlexAlign.SpaceBetween)
|
|
|
|
Row() {
|
|
Image($r('app.media.icon_forgetpassword_show'))
|
|
.width(18)
|
|
.height(18)
|
|
.objectFit(ImageFit.Contain)
|
|
.margin({left:10})
|
|
// 密码输入框
|
|
TextInput({ placeholder: '6~16位数字字母组合' })
|
|
.fontSize(16)
|
|
.width('95%')
|
|
.backgroundColor(Color.White)
|
|
.type(this.showPassword ? InputType.Normal : InputType.Password)
|
|
.passwordIcon({ onIconSrc: this.passWordSrc1, offIconSrc: this.passWordSrc2 })
|
|
}
|
|
.margin({ top: 10 })
|
|
.width('95%')
|
|
.height(48)
|
|
.borderRadius(4)
|
|
.borderWidth(1)
|
|
.borderColor('#CCCCCC')
|
|
|
|
// 登录按钮
|
|
Button({type:ButtonType.Normal}){
|
|
Text('登 录')
|
|
}
|
|
.width('90%')
|
|
.height(48)
|
|
.margin({ top: 40 })
|
|
.borderRadius(8)
|
|
.backgroundColor($r('app.color.main_color'))
|
|
.fontColor('#FFFFFF')
|
|
.fontSize(18)
|
|
.onClick(() => {
|
|
// 处理登录逻辑
|
|
if (!/^1[3-9]\d{9}$/.test(this.phoneNumber)) {
|
|
promptAction.showToast({message:'请输入有效手机号'})
|
|
return
|
|
}
|
|
|
|
if (!this.smsCode) {
|
|
promptAction.showToast({message:'请输入验证码'})
|
|
return
|
|
}
|
|
|
|
if (!/^(?=.*[a-zA-Z])(?=.*\d)[\w]{6,16}$/.test(this.password)) {
|
|
promptAction.showToast({message:'密码格式不正确'})
|
|
return
|
|
}
|
|
|
|
// 执行登录操作...
|
|
})
|
|
}
|
|
.width('100%')
|
|
.height('100%')
|
|
.backgroundColor('#FFFFFF')
|
|
}
|
|
}
|