LoginInputComponent.ets
2.58 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
import { Logger } 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 //是否可以提交
build() {
Column() {
this.addCodeLayout()
}.width('100%').padding({ left: 25, right: 25 })
}
@Builder
addCodeLayout() {
TextInput({ placeholder: "请输入手机号" })
.fontSize(16)
.height(48)
.margin({ top: 36 })
.backgroundColor("#F5F5F5")
.borderRadius(4)
.type(InputType.PhoneNumber)
.onChange((content) => {
this.phoneContent = content
this.isSubmit = (this.phoneContent.length >= 11 && this.codeContent.length >= 6)
if (content.length >= 11) {
this.codeBtnState = true
} else {
this.codeBtnState = false
}
})
Row() {
TextInput({ placeholder: "验证码" })
.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 >= 6)
})
Text(this.isCodeSend ? this.timeCount + "s" : "发送验证码")
.backgroundImage($r('app.media.login_code_bg'), ImageRepeat.NoRepeat)
.backgroundImageSize(ImageSize.Cover)
.fontColor('#ED2800')
.width(110)
.fontSize(14)
.fontWeight(this.codeBtnState ? FontWeight.Bold : FontWeight.Normal)
.height(48)
.enabled(this.codeBtnState)// .align(Alignment.End)
.textAlign(TextAlign.Center)
.onClick(() => {
if (this.phoneContent.length < 11) {
return
}
this.isCodeSend = true
let time = setInterval(() => {
Logger.debug("倒计时：" + this.timeCount)
this.timeCount--
if (this.timeCount < 1) {
this.isCodeSend = false
this.timeCount = 60
clearInterval(time)
}
}, 1000)
})
}.margin({ top: 15 }).height(61).alignItems(VerticalAlign.Center).justifyContent(FlexAlign.Start)
}
}