LoginInputComponent.ets
4.39 KB
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
import { SpConstants } from 'wdConstant/Index'
import { DateTimeUtils, Logger, SPHelper } from 'wdKit'
@Component
export struct LoginInputComponent {
@State timeCount: number = 60
@Link phoneContent: string
@Link codeContent: string
@State codeBtnState: boolean = false //发送验证码控件是否可以 默认不可用
@Link isCodeSend: boolean //验证码控件是否点击 默认没有 发送接口
@Link isSubmit: boolean //是否可以提交
isFirst:boolean=true//是否第一次获取验证码
pageType?:number; //0、登录->忘记密码 1、设置->重置密码 2、设置->更换手机号页面1 3、设置->更换手机号页面2
lastTime: number = 0
@Link @Watch('startCount') codeStateSuccess: boolean //验证码获取成功与否回调 成功显示倒计时
build() {
Column() {
this.addCodeLayout()
}.width('100%').padding({ left: 25, right: 25 })
}
async aboutToAppear(){
if (this.pageType == 1) {
this.phoneContent = await SPHelper.default.get(SpConstants.USER_PHONE,"") as string;
}
}
@Builder
addCodeLayout() {
if (this.pageType == 1){
TextInput({ placeholder: this.securityPhone(this.phoneContent) })
.placeholderColor("#CCCCCC")
.fontSize(16)
.height(48)
.maxLength(11)
.margin({ top: 36 })
.backgroundColor("#F5F5F5")
.borderRadius(4)
.enabled(false)
.type(InputType.PhoneNumber)
.onChange((content) => {
this.phoneContent = content
this.isSubmit = (this.phoneContent.length >= 11 && this.codeContent.length >= 4)
if (content.length >= 11) {
this.codeBtnState = true
} else {
this.codeBtnState = false
}
})
}else{
TextInput({text: this.phoneContent, placeholder: "请输入手机号" })
.fontSize(16)
.height(48)
.placeholderColor("#CCCCCC")
.maxLength(11)
.margin({ top: 36 })
.backgroundColor("#F5F5F5")
.borderRadius(4)
.type(InputType.Number)
.onChange((content) => {
this.phoneContent = content
this.isSubmit = (this.phoneContent.length >= 11 && this.codeContent.length >= 4)
if (content.length >= 11) {
this.codeBtnState = true
} else {
this.codeBtnState = false
}
})
}
Row() {
TextInput({ text: this.codeContent,placeholder: "验证码" })
.placeholderColor("#CCCCCC")
.layoutWeight(1)
.fontSize(16)
.height(48)
.type(InputType.Number)
.fontColor("#222222")
.backgroundColor("#00000000")
.borderRadius({ topLeft: 4, bottomLeft: 4 })
// .backgroundImage($r('app.media.login_code_bg_one'), ImageRepeat.NoRepeat)
// .backgroundImageSize(ImageSize.Contain)
.onChange((value) => {
this.codeContent = value
this.isSubmit = (this.phoneContent.length >= 11 && this.codeContent.length >= 4)
})
Text(this.codeStateSuccess ? this.timeCount + "s" : this.isFirst?"发送验证码":'重新获取')
.fontColor(this.codeBtnState?'#ED2800':'#80ED2800')
.width(110)
.fontSize(14)
.fontWeight( FontWeight.Bold)
.height(48)
.textAlign(TextAlign.Center)
.enabled(this.codeStateSuccess?false:true)
.onClick(() => {
if (this.phoneContent.length < 11) {
return
}
let currentTime = DateTimeUtils.getTimeStamp()
if (currentTime - this.lastTime < 500) {
return
}
this.lastTime = currentTime;
this.isCodeSend = true
})
}.margin({ top: 12 })
.height(48)
.alignItems(VerticalAlign.Center)
.justifyContent(FlexAlign.Start)
.backgroundImage($r('app.media.code_login_bg'))
.backgroundImageSize({width:'100%',height:48})
}
securityPhone(phoneNum:string):string{
let securityNum:string;
let needSecurityString = phoneNum.substring(3, phoneNum.length - 4);
securityNum = phoneNum.replace(needSecurityString,'****')
return securityNum;
}
startCount() {
this.isFirst = false
let time = setInterval(() => {
Logger.debug("倒计时：" + this.timeCount)
this.timeCount--
if (this.timeCount < 1) {
this.codeStateSuccess = false
this.timeCount = 60
clearInterval(time)
}
}, 1000)
}
}