LiveEmptyComponent.ets
4.82 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
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
import { CommonConstants } from 'wdConstant';
import { Logger } from 'wdKit';
const TAG = 'LiveEmptyComponent';
/**
* WDViewDefaultType 缺省页
*/
export const enum WDViewDefaultType {
/// 1.默认
WDViewDefaultType_Default,
/// 16.直播结束
WDViewDefaultType_NoLiveEnd,
/// 17.直播暂停
WDViewDefaultType_NoLiveSuspend,
}
/**
* 空数据/无数据
*/
@Preview
@Component
export struct EmptyComponent {
// private emptySize: SizeOptions = {};
@State emptyWidth: string | number = CommonConstants.FULL_PARENT;
@State emptyHeight: string | number = CommonConstants.FULL_PARENT;
@State emptyType: number = WDViewDefaultType.WDViewDefaultType_Default; // 缺省图类型,传枚举
@State emptyButton: boolean = false
@State timeNum: number = 10
/**
* The empty image width percentage setting.
*/
readonly EMPTY_IMAGE_WIDTH: string = '15%';
/**
* The empty image height percentage setting.
*/
readonly EMPTY_IMAGE_HEIGHT: string = '15%';
/**
* The empty data text component margin top.
*/
readonly EMPTY_TIP_TEXT_MARGIN_TOP: string = '10';
/**
* The empty data text opacity.
*/
readonly TEXT_OPACITY: number = 0.4;
private timer: number = -1
retry: () => void = () => {
}
createTimer() {
if (this.emptyType === 8) {
this.timer = setInterval(() => {
this.timeNum--;
if (this.timeNum === 0) {
clearInterval(this.timer);
}
}, 1000);
}
}
destroyTimer() {
if (this.emptyType === 8) {
clearInterval(this.timer);
}
}
onPageShow(): void {
this.createTimer()
}
aboutToAppear(): void {
this.createTimer()
}
onPageHide(): void {
this.destroyTimer()
}
aboutToDisappear() {
this.destroyTimer()
}
build() {
this.noProgrammeData();
}
/**
* 无数据,空白view组件
*/
@Builder
noProgrammeData() {
Column() {
Image(this.buildNoDataTipImage())
.width(160)
.height(112)
.objectFit(ImageFit.Contain)
// .border({ width: 1, color: Color.Red, radius: 6 })
// .width('this.EMPTY_IMAGE_WIDTH')
// .height(this.EMPTY_IMAGE_HEIGHT)
Text(this.emptyType !== 8 ? this.buildNoDataTip() : `${this.buildNoDataTip()}(${this.timeNum}s)`)
.fontSize($r('app.float.font_size_14'))
.fontColor('#FF999999')
.fontWeight(FontWeight.Normal)
.opacity(this.TEXT_OPACITY)
.margin({ top: this.EMPTY_TIP_TEXT_MARGIN_TOP })
.onClick((event: ClickEvent) => {
Logger.info(TAG, `noProgrammeData onClick event?.source: ${event.source}`);
})
if (this.isShowButton()) {
if (this.emptyType !== 15) {
Button('点击重试')
.type(ButtonType.Normal)
.width(80)
.height(28)
.backgroundColor('#fffffff')
.fontColor('#FF666666')
.border({ width: 1 })
.borderColor('#FFEDEDED')
.borderRadius(4)
.fontSize($r('app.float.font_size_12'))
.margin({ top: 16 })
.padding(0)
.onClick(() => {
this.retry()
})
} else {
Button('点击重试')
.type(ButtonType.Normal)
.width(80)
.height(28)
.backgroundColor(Color.Black)
.fontColor('#FFCCCCCC')
.border({ width: 1 })
.borderColor('#4DFFFFFF')
.borderRadius(4)
.fontSize($r('app.float.font_size_12'))
.margin({ top: 16 })
.padding(0)
.onClick(() => {
this.retry()
})
}
}
}
.justifyContent(FlexAlign.Center)
.width(this.emptyWidth)
.height(this.emptyHeight)
// .backgroundColor(Color.Black)
}
buildNoDataTip(): string {
Logger.info(TAG, "buildNoDataTip");
let contentString: string = '暂无内容'
if (this.emptyType === WDViewDefaultType.WDViewDefaultType_NoLiveEnd) {
contentString = '直播已结束' // 前方拥堵,请耐心等待
} else if (this.emptyType === WDViewDefaultType.WDViewDefaultType_NoLiveSuspend) {
contentString = '主播暂时离开,马上回来' // 前方拥堵,请耐心等待
}
return contentString
}
buildNoDataTipImage(): Resource | string {
Logger.info(TAG, "buildNoDataTip");
let imageString: Resource | string = $r('app.media.icon_no_content')
if (this.emptyType === WDViewDefaultType.WDViewDefaultType_NoLiveEnd) {
imageString = $r('app.media.icon_no_end')
} else if (this.emptyType === WDViewDefaultType.WDViewDefaultType_NoLiveSuspend) {
imageString = $r('app.media.icon_no_liver')
}
return imageString
}
isShowButton() {
if (this.emptyType === 1 || this.emptyType === 9 || this.emptyType === 15) {
return true
} else {
return false
}
}
}