EmptyComponent.ets
10.3 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
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
import { CommonConstants } from 'wdConstant';
import { Logger } from 'wdKit';
import { router } from '@kit.ArkUI';
const TAG = 'EmptyComponent';
/**
* WDViewDefaultType 缺省页
*/
export const enum WDViewDefaultType {
/// 0.默认
WDViewDefaultType_Default,
/// 1.无网
WDViewDefaultType_NoNetwork,
/// 2.暂无内容(列表页)
WDViewDefaultType_NoListContent,
/// 3.内容找不到了(内容详情页)
WDViewDefaultType_NoContent,
/// 4.无搜索内容
WDViewDefaultType_NoSearchResult,
/// 5.无消息内容
WDViewDefaultType_NoMessage,
/// 6.无收藏内容
WDViewDefaultType_NoCollection,
/// 7.无历史记录
WDViewDefaultType_NoHistory,
/// 8.网络失败 请稍后重试-倒计时
WDViewDefaultType_NetworkFailed,
/// 9.内容获取失败
WDViewDefaultType_ContentFailed,
/// 10.无预约内容
WDViewDefaultType_NoBooking,
/// 11.无评论内容
WDViewDefaultType_NoComment,
/// 12.暂无作品
WDViewDefaultType_NoCreation,
/// 13.该号主无法访问
WDViewDefaultType_NoVisitAccount,
/// 14.暂无关注
WDViewDefaultType_NoFollow,
/// 15.视频图集加载失败
WDViewDefaultType_NoVideo,
/// 16.暂无内容1
WDViewDefaultType_NoContent1,
// 17. 暂无评论快来抢沙发
WDViewDefaultType_NoComment1,
// 18. 内容找不到了
WDViewDefaultType_NoContent2,
// 19. 暂时无法查看该创作者主页
WDViewDefaultType_NoUserHomepage
}
/**
* 空数据/无数据
*/
@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 isBlack: boolean = false // 背景是否为黑色 默认白色
@State timeNum: number = 10
///占位图上是否显示返回按钮
@State showBackButton: boolean = true
/**
* 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 = 1.0;
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);
}
}
aboutToAppear(): void {
this.createTimer()
}
aboutToDisappear() {
this.destroyTimer()
}
build() {
Stack({alignContent:Alignment.Bottom}) {
this.noProgrammeData();
if (this.showBackButton) {
Image($r("app.media.icon_arrow_left_white"))
.width(24)
.height(24)
.onClick(() => {
router.back();
})
.position({
bottom: 15,
left: 16
})
}
}
}
/**
* 无数据,空白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 })
.fontColor(this.emptyType === WDViewDefaultType.WDViewDefaultType_NoComment1 ? '#999999' : '#666666')
.onClick((event: ClickEvent) => {
Logger.info(TAG, `noProgrammeData onClick event?.source: ${event.source}`);
})
if (this.isShowButton()) {
if (this.emptyType !== 15 && !this.isBlack) {
Button('点击重试')
.type(ButtonType.Normal)
.width(80)
.height(28)
.backgroundColor(Color.White)
.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)
.layoutWeight(1)
.height(this.emptyHeight)
}
buildNoDataTip(): string {
Logger.info(TAG, "buildNoDataTip");
let contentString: string = '暂无内容'
if (this.emptyType === WDViewDefaultType.WDViewDefaultType_NoCollection) {
contentString = '暂无收藏'
} else if (this.emptyType === WDViewDefaultType.WDViewDefaultType_NoHistory) {
contentString = '暂无浏览历史'
} else if (this.emptyType === WDViewDefaultType.WDViewDefaultType_NoMessage) {
contentString = '暂无消息'
} else if (this.emptyType === WDViewDefaultType.WDViewDefaultType_NoComment) {
contentString = '暂无评论'
} else if (this.emptyType === WDViewDefaultType.WDViewDefaultType_NoSearchResult) {
contentString = '没有找到相关内容'
} else if (this.emptyType === WDViewDefaultType.WDViewDefaultType_NoNetwork) {
contentString = '网络出小差了,请检查网络后重试'
} else if (this.emptyType === WDViewDefaultType.WDViewDefaultType_ContentFailed) {
contentString = '获取内容失败,请重试'
} else if (this.emptyType === WDViewDefaultType.WDViewDefaultType_NoCreation) {
contentString = '暂无作品'
} else if (this.emptyType === WDViewDefaultType.WDViewDefaultType_NoBooking) {
contentString = '暂无预约'
} else if (this.emptyType === WDViewDefaultType.WDViewDefaultType_NetworkFailed) {
contentString = '前方拥堵,请耐心等待...' // 前方拥堵,请耐心等待...
} else if (this.emptyType === WDViewDefaultType.WDViewDefaultType_NoVisitAccount) {
contentString = '该号主暂时无法访问' // 前方拥堵,请耐心等待
} else if (this.emptyType === WDViewDefaultType.WDViewDefaultType_NoVideo) {
contentString = '获取内容失败,请重试' // 前方拥堵,请耐心等待
} else if (this.emptyType === WDViewDefaultType.WDViewDefaultType_NoContent1) {
contentString = '暂无内容'
} else if (this.emptyType === WDViewDefaultType.WDViewDefaultType_NoFollow) {
contentString = '暂无关注'
} else if (this.emptyType === WDViewDefaultType.WDViewDefaultType_NoComment1) {
contentString = '暂无评论,快来抢沙发'
} else if (this.emptyType === WDViewDefaultType.WDViewDefaultType_NoContent2) {
contentString = '内容找不到了'
} else if (this.emptyType === WDViewDefaultType.WDViewDefaultType_NoUserHomepage) {
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_NoCollection ||
this.emptyType === WDViewDefaultType.WDViewDefaultType_NoHistory) {
imageString = $r("app.media.icon_no_collection")
} else if (this.emptyType === WDViewDefaultType.WDViewDefaultType_NoMessage) {
imageString = $r('app.media.icon_no_message1')
} else if (this.emptyType === WDViewDefaultType.WDViewDefaultType_NoComment ||
this.emptyType === WDViewDefaultType.WDViewDefaultType_NoComment1) {
imageString = $r('app.media.icon_no_comment1')
} else if (this.emptyType === WDViewDefaultType.WDViewDefaultType_NoSearchResult) {
imageString = $r('app.media.icon_no_result1')
} else if (this.emptyType === WDViewDefaultType.WDViewDefaultType_NoNetwork) {
if(this.isBlack) {
imageString = $r('app.media.icon_no_net')
} else {
imageString = $r('app.media.icon_no_net1')
}
} else if (this.emptyType === WDViewDefaultType.WDViewDefaultType_ContentFailed) {
imageString = $r('app.media.icon_no_content')
} else if (this.emptyType === WDViewDefaultType.WDViewDefaultType_NoCreation) {
imageString = $r('app.media.icon_no_works1')
} else if (this.emptyType === WDViewDefaultType.WDViewDefaultType_NoBooking) {
imageString = $r('app.media.icon_no_appointmentMade1')
} else if (this.emptyType === WDViewDefaultType.WDViewDefaultType_NetworkFailed) {
imageString = $r('app.media.icon_no_limiting')
} else if (this.emptyType === WDViewDefaultType.WDViewDefaultType_NoVisitAccount) {
imageString = $r('app.media.icon_no_master1')
} else if (this.emptyType === WDViewDefaultType.WDViewDefaultType_NoVideo) {
imageString = $r('app.media.icon_no_content')
} else if (this.emptyType === WDViewDefaultType.WDViewDefaultType_NoContent1 ||
this.emptyType === WDViewDefaultType.WDViewDefaultType_NoFollow) {
imageString = $r('app.media.icon_no_appointmentMade1')
} else if (this.emptyType === WDViewDefaultType.WDViewDefaultType_NoUserHomepage) {
imageString = $r('app.media.icon_no_master1')
} else if (this.emptyType === WDViewDefaultType.WDViewDefaultType_NoContent2) {
imageString = $r('app.media.icon_no_content1')
}
return imageString
}
isShowButton() {
if (this.emptyType === 1 || this.emptyType === 9 || this.emptyType === 15 && this.emptyButton) {
return true
} else {
return false
}
}
}