LiveCountdownComponent.ets
2.46 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
import font from '@ohos.font'
@Component
export struct LiveCountdownComponent {
textTimerController: TextTimerController = new TextTimerController()
@State format: string = 'HH:mm:ss'
aboutToAppear(): void {
//注册字体
font.registerFont({
familyName: 'BebasNeue_Regular',
familySrc: $rawfile('font/BebasNeue_Regular.otf')
})
setTimeout(() => {
this.textTimerController.start()
}, 2000)
}
build() {
Column() {
this.showTitle()
this.showCountDown()
this.showAppointment()
}.padding({
top: 20,
left: 20,
right: 20,
bottom: 24
})
.backgroundColor(Color.White)
.border({ radius: 6 })
.margin({ top: 16 })
}
aboutToDisappear(): void {
this.textTimerController.pause()
}
@Builder
showTitle() {
Text('距离直播开始还有')
.maxLines(2)
.textOverflow({ overflow: TextOverflow.Ellipsis })
.fontSize('14fp')
.fontWeight(400)
.fontColor('#222222')
}
@Builder
showCountDown() {
Row() {
this.showTimeStyle('10', true, 0)
this.showTimeStyle('月', false, 3)
this.showTimeStyle('8', true, 3)
this.showTimeStyle('日', false, 3)
this.showTimeStyle('16', true, 10)
this.showTimeStyle(':', true, 0)
this.showTimeStyle('05', true, 0)
}
.margin({ top: 10 })
.visibility(Visibility.None)
TextTimer({ isCountDown: true, count: 24 * 60 * 60 * 1000 - 1000, controller: this.textTimerController })
.format(this.format)
.fontSize('40fp')
.fontWeight(FontWeight.Bold)
.fontColor('#222222')
.fontFamily('BebasNeue_Regular')
.onTimer((utc: number, elapsedTime: number) => {
console.info('textTimer notCountDown utc is：' + utc + ', elapsedTime: ' + elapsedTime)
})
.margin({ top: 10 })
}
@Builder
showAppointment() {
Text('我要预约')
.width('100%')
.height(42)
.textAlign(TextAlign.Center)
.fontSize('16fp')
.fontWeight(400)
.fontColor(Color.White)
.margin({
top: 16
})
.border({ radius: 4 })
.backgroundColor('#ED2800')
// .backgroundColor('#CCCCCC')
}
@Builder
showTimeStyle(value: string, isBold: boolean, left: number) {
Text(value)
.fontSize(isBold ? '40fp' : '16fp')
.fontFamily(isBold ? 'BebasNeue_Regular' : '')
.fontWeight(isBold ? FontWeight.Bold : 500)
.fontColor('#222222')
.margin({ left: left })
}
}