EmptyComponent.ets
3.69 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 { CommonConstants } from 'wdConstant';
import { Logger } from 'wdKit';
const TAG = 'EmptyComponent';
/**
* WDViewDefaultType 缺省页 无网络
*/
export const enum WDViewDefaultType {
/// 0.默认
WDViewDefaultType_Default,
/// 1.无网
WDViewDefaultType_NoNetwork,
}
/**
* 空数据/无数据
*/
@Preview
@Component
export struct EmptyComponent {
@State emptyWidth: string | number = CommonConstants.FULL_PARENT;
@State emptyHeight: string | number = CommonConstants.FULL_PARENT;
@State emptyType: number = WDViewDefaultType.WDViewDefaultType_NoNetwork; // 缺省图类型,传枚举
@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 = () => {
}
build() {
this.noProgrammeData();
}
/**
* 无数据,空白view组件
*/
@Builder
noProgrammeData() {
Column() {
Image(this.buildNoDataTipImage())
.width(160)
.height(112)
.objectFit(ImageFit.Contain)
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)
}
buildNoDataTip(): string {
Logger.info(TAG, "buildNoDataTip");
let contentString: string = '暂无内容'
if (this.emptyType === WDViewDefaultType.WDViewDefaultType_NoNetwork) {
contentString = '网络出小差了,请检查网络后重试'
}
return contentString
}
buildNoDataTipImage(): Resource | string {
Logger.info(TAG, "buildNoDataTip");
let imageString: Resource | string = ""
if (this.emptyType === WDViewDefaultType.WDViewDefaultType_NoNetwork) {
imageString = $r('app.media.icon_no_net1')
}
return imageString
}
isShowButton() {
if (this.emptyType === 1 || this.emptyType === 9 || this.emptyType === 15) {
return true
} else {
return false
}
}
}