Showing
1 changed file
with
96 additions
and
12 deletions
| @@ -7,13 +7,12 @@ const TAG = 'LiveEmptyComponent'; | @@ -7,13 +7,12 @@ const TAG = 'LiveEmptyComponent'; | ||
| 7 | * WDViewDefaultType 缺省页 | 7 | * WDViewDefaultType 缺省页 |
| 8 | */ | 8 | */ |
| 9 | export const enum WDViewDefaultType { | 9 | export const enum WDViewDefaultType { |
| 10 | - /// 1.默认 | 10 | + /// 1.默认 |
| 11 | WDViewDefaultType_Default, | 11 | WDViewDefaultType_Default, |
| 12 | /// 16.直播结束 | 12 | /// 16.直播结束 |
| 13 | WDViewDefaultType_NoLiveEnd, | 13 | WDViewDefaultType_NoLiveEnd, |
| 14 | /// 17.直播暂停 | 14 | /// 17.直播暂停 |
| 15 | WDViewDefaultType_NoLiveSuspend, | 15 | WDViewDefaultType_NoLiveSuspend, |
| 16 | - | ||
| 17 | } | 16 | } |
| 18 | 17 | ||
| 19 | /** | 18 | /** |
| @@ -21,11 +20,13 @@ export const enum WDViewDefaultType { | @@ -21,11 +20,13 @@ export const enum WDViewDefaultType { | ||
| 21 | */ | 20 | */ |
| 22 | @Preview | 21 | @Preview |
| 23 | @Component | 22 | @Component |
| 24 | -export struct LiveEmptyComponent { | 23 | +export struct EmptyComponent { |
| 25 | // private emptySize: SizeOptions = {}; | 24 | // private emptySize: SizeOptions = {}; |
| 26 | @State emptyWidth: string | number = CommonConstants.FULL_PARENT; | 25 | @State emptyWidth: string | number = CommonConstants.FULL_PARENT; |
| 27 | @State emptyHeight: string | number = CommonConstants.FULL_PARENT; | 26 | @State emptyHeight: string | number = CommonConstants.FULL_PARENT; |
| 28 | - @State emptyType: number = WDViewDefaultType.WDViewDefaultType_Default | 27 | + @State emptyType: number = WDViewDefaultType.WDViewDefaultType_Default; // 缺省图类型,传枚举 |
| 28 | + @State emptyButton: boolean = false | ||
| 29 | + @State timeNum: number = 10 | ||
| 29 | /** | 30 | /** |
| 30 | * The empty image width percentage setting. | 31 | * The empty image width percentage setting. |
| 31 | */ | 32 | */ |
| @@ -42,6 +43,42 @@ export struct LiveEmptyComponent { | @@ -42,6 +43,42 @@ export struct LiveEmptyComponent { | ||
| 42 | * The empty data text opacity. | 43 | * The empty data text opacity. |
| 43 | */ | 44 | */ |
| 44 | readonly TEXT_OPACITY: number = 0.4; | 45 | readonly TEXT_OPACITY: number = 0.4; |
| 46 | + private timer: number = -1 | ||
| 47 | + retry: () => void = () => { | ||
| 48 | + } | ||
| 49 | + | ||
| 50 | + createTimer() { | ||
| 51 | + if (this.emptyType === 8) { | ||
| 52 | + this.timer = setInterval(() => { | ||
| 53 | + this.timeNum--; | ||
| 54 | + if (this.timeNum === 0) { | ||
| 55 | + clearInterval(this.timer); | ||
| 56 | + } | ||
| 57 | + }, 1000); | ||
| 58 | + } | ||
| 59 | + } | ||
| 60 | + | ||
| 61 | + destroyTimer() { | ||
| 62 | + if (this.emptyType === 8) { | ||
| 63 | + clearInterval(this.timer); | ||
| 64 | + } | ||
| 65 | + } | ||
| 66 | + | ||
| 67 | + onPageShow(): void { | ||
| 68 | + this.createTimer() | ||
| 69 | + } | ||
| 70 | + | ||
| 71 | + aboutToAppear(): void { | ||
| 72 | + this.createTimer() | ||
| 73 | + } | ||
| 74 | + | ||
| 75 | + onPageHide(): void { | ||
| 76 | + this.destroyTimer() | ||
| 77 | + } | ||
| 78 | + | ||
| 79 | + aboutToDisappear() { | ||
| 80 | + this.destroyTimer() | ||
| 81 | + } | ||
| 45 | 82 | ||
| 46 | build() { | 83 | build() { |
| 47 | this.noProgrammeData(); | 84 | this.noProgrammeData(); |
| @@ -54,24 +91,64 @@ export struct LiveEmptyComponent { | @@ -54,24 +91,64 @@ export struct LiveEmptyComponent { | ||
| 54 | noProgrammeData() { | 91 | noProgrammeData() { |
| 55 | Column() { | 92 | Column() { |
| 56 | Image(this.buildNoDataTipImage()) | 93 | Image(this.buildNoDataTipImage()) |
| 57 | - .width('this.EMPTY_IMAGE_WIDTH') | ||
| 58 | - .height(this.EMPTY_IMAGE_HEIGHT) | 94 | + .width(160) |
| 95 | + .height(112) | ||
| 59 | .objectFit(ImageFit.Contain) | 96 | .objectFit(ImageFit.Contain) |
| 60 | // .border({ width: 1, color: Color.Red, radius: 6 }) | 97 | // .border({ width: 1, color: Color.Red, radius: 6 }) |
| 98 | + // .width('this.EMPTY_IMAGE_WIDTH') | ||
| 99 | + // .height(this.EMPTY_IMAGE_HEIGHT) | ||
| 61 | 100 | ||
| 62 | - Text(this.buildNoDataTip()) | ||
| 63 | - .fontSize($r('app.float.normal_text_size')) | ||
| 64 | - .fontColor('#000000') | 101 | + Text(this.emptyType !== 8 ? this.buildNoDataTip() : `${this.buildNoDataTip()}(${this.timeNum}s)`) |
| 102 | + .fontSize($r('app.float.font_size_14')) | ||
| 103 | + .fontColor('#FF999999') | ||
| 65 | .fontWeight(FontWeight.Normal) | 104 | .fontWeight(FontWeight.Normal) |
| 66 | .opacity(this.TEXT_OPACITY) | 105 | .opacity(this.TEXT_OPACITY) |
| 67 | .margin({ top: this.EMPTY_TIP_TEXT_MARGIN_TOP }) | 106 | .margin({ top: this.EMPTY_TIP_TEXT_MARGIN_TOP }) |
| 68 | .onClick((event: ClickEvent) => { | 107 | .onClick((event: ClickEvent) => { |
| 69 | Logger.info(TAG, `noProgrammeData onClick event?.source: ${event.source}`); | 108 | Logger.info(TAG, `noProgrammeData onClick event?.source: ${event.source}`); |
| 70 | }) | 109 | }) |
| 110 | + | ||
| 111 | + if (this.isShowButton()) { | ||
| 112 | + if (this.emptyType !== 15) { | ||
| 113 | + Button('点击重试') | ||
| 114 | + .type(ButtonType.Normal) | ||
| 115 | + .width(80) | ||
| 116 | + .height(28) | ||
| 117 | + .backgroundColor('#fffffff') | ||
| 118 | + .fontColor('#FF666666') | ||
| 119 | + .border({ width: 1 }) | ||
| 120 | + .borderColor('#FFEDEDED') | ||
| 121 | + .borderRadius(4) | ||
| 122 | + .fontSize($r('app.float.font_size_12')) | ||
| 123 | + .margin({ top: 16 }) | ||
| 124 | + .padding(0) | ||
| 125 | + .onClick(() => { | ||
| 126 | + this.retry() | ||
| 127 | + }) | ||
| 128 | + } else { | ||
| 129 | + Button('点击重试') | ||
| 130 | + .type(ButtonType.Normal) | ||
| 131 | + .width(80) | ||
| 132 | + .height(28) | ||
| 133 | + .backgroundColor(Color.Black) | ||
| 134 | + .fontColor('#FFCCCCCC') | ||
| 135 | + .border({ width: 1 }) | ||
| 136 | + .borderColor('#4DFFFFFF') | ||
| 137 | + .borderRadius(4) | ||
| 138 | + .fontSize($r('app.float.font_size_12')) | ||
| 139 | + .margin({ top: 16 }) | ||
| 140 | + .padding(0) | ||
| 141 | + .onClick(() => { | ||
| 142 | + this.retry() | ||
| 143 | + }) | ||
| 144 | + } | ||
| 145 | + } | ||
| 71 | } | 146 | } |
| 72 | .justifyContent(FlexAlign.Center) | 147 | .justifyContent(FlexAlign.Center) |
| 73 | .width(this.emptyWidth) | 148 | .width(this.emptyWidth) |
| 74 | .height(this.emptyHeight) | 149 | .height(this.emptyHeight) |
| 150 | + | ||
| 151 | + // .backgroundColor(Color.Black) | ||
| 75 | } | 152 | } |
| 76 | 153 | ||
| 77 | buildNoDataTip(): string { | 154 | buildNoDataTip(): string { |
| @@ -84,15 +161,22 @@ export struct LiveEmptyComponent { | @@ -84,15 +161,22 @@ export struct LiveEmptyComponent { | ||
| 84 | } | 161 | } |
| 85 | return contentString | 162 | return contentString |
| 86 | } | 163 | } |
| 87 | - | ||
| 88 | buildNoDataTipImage(): Resource | string { | 164 | buildNoDataTipImage(): Resource | string { |
| 89 | Logger.info(TAG, "buildNoDataTip"); | 165 | Logger.info(TAG, "buildNoDataTip"); |
| 90 | let imageString: Resource | string = $r('app.media.icon_no_content') | 166 | let imageString: Resource | string = $r('app.media.icon_no_content') |
| 91 | - if (this.emptyType === WDViewDefaultType.WDViewDefaultType_NoLiveEnd) { | 167 | + if (this.emptyType === WDViewDefaultType.WDViewDefaultType_NoLiveEnd) { |
| 92 | imageString = $r('app.media.icon_no_end') | 168 | imageString = $r('app.media.icon_no_end') |
| 93 | } else if (this.emptyType === WDViewDefaultType.WDViewDefaultType_NoLiveSuspend) { | 169 | } else if (this.emptyType === WDViewDefaultType.WDViewDefaultType_NoLiveSuspend) { |
| 94 | imageString = $r('app.media.icon_no_liver') | 170 | imageString = $r('app.media.icon_no_liver') |
| 95 | } | 171 | } |
| 96 | return imageString | 172 | return imageString |
| 97 | } | 173 | } |
| 98 | -} | ||
| 174 | + | ||
| 175 | + isShowButton() { | ||
| 176 | + if (this.emptyType === 1 || this.emptyType === 9 || this.emptyType === 15) { | ||
| 177 | + return true | ||
| 178 | + } else { | ||
| 179 | + return false | ||
| 180 | + } | ||
| 181 | + } | ||
| 182 | +} |
-
Please register or login to post a comment