Showing
2 changed files
with
156 additions
and
8 deletions
sight_harmony/features/wdComponent/src/main/ets/components/MultiPictureDetailEmptyComponent.ets
0 → 100644
| 1 | +import { CommonConstants } from 'wdConstant'; | ||
| 2 | +import { Logger } from 'wdKit'; | ||
| 3 | + | ||
| 4 | +const TAG = 'EmptyComponent'; | ||
| 5 | + | ||
| 6 | +/** | ||
| 7 | + * WDViewDefaultType 缺省页 | ||
| 8 | + */ | ||
| 9 | +export const enum WDViewDefaultType { | ||
| 10 | + ///无网 | ||
| 11 | + WDViewDefaultType_NoNetwork, | ||
| 12 | + ///网络失败 请稍后重试-倒计时 | ||
| 13 | + WDViewDefaultType_NetworkFailed, | ||
| 14 | + ///内容获取失败 | ||
| 15 | + WDViewDefaultType_ContentFailed, | ||
| 16 | +} | ||
| 17 | + | ||
| 18 | +/** | ||
| 19 | + * 空数据/无数据 | ||
| 20 | + */ | ||
| 21 | +@Preview | ||
| 22 | +@Component | ||
| 23 | +export struct MultiPictureDetailEmptyComponent { | ||
| 24 | + // private emptySize: SizeOptions = {}; | ||
| 25 | + @State emptyWidth: string | number = CommonConstants.FULL_PARENT; | ||
| 26 | + @State emptyHeight: string | number = CommonConstants.FULL_PARENT; | ||
| 27 | + @State emptyType: number = WDViewDefaultType.WDViewDefaultType_ContentFailed | ||
| 28 | + /** | ||
| 29 | + * The empty image width percentage setting. | ||
| 30 | + */ | ||
| 31 | + readonly EMPTY_IMAGE_WIDTH: string = '15%'; | ||
| 32 | + /** | ||
| 33 | + * The empty image height percentage setting. | ||
| 34 | + */ | ||
| 35 | + readonly EMPTY_IMAGE_HEIGHT: string = '15%'; | ||
| 36 | + /** | ||
| 37 | + * The empty data text component margin top. | ||
| 38 | + */ | ||
| 39 | + readonly EMPTY_TIP_TEXT_MARGIN_TOP: string = '10'; | ||
| 40 | + /** | ||
| 41 | + * The empty data text opacity. | ||
| 42 | + */ | ||
| 43 | + readonly TEXT_OPACITY: number = 1; | ||
| 44 | + | ||
| 45 | + build() { | ||
| 46 | + this.noProgrammeData(); | ||
| 47 | + } | ||
| 48 | + | ||
| 49 | + /** | ||
| 50 | + * 无数据,空白view组件 | ||
| 51 | + */ | ||
| 52 | + @Builder | ||
| 53 | + noProgrammeData() { | ||
| 54 | + Column() { | ||
| 55 | + Image(this.buildNoDataTipImage()) | ||
| 56 | + .width('this.EMPTY_IMAGE_WIDTH') | ||
| 57 | + .height(this.EMPTY_IMAGE_HEIGHT) | ||
| 58 | + .objectFit(ImageFit.Contain) | ||
| 59 | + // .border({ width: 1, color: Color.Red, radius: 6 }) | ||
| 60 | + | ||
| 61 | + Text(this.buildNoDataTip()) | ||
| 62 | + .fontSize($r('app.float.font_size_14')) | ||
| 63 | + .fontColor('#999999') | ||
| 64 | + .fontWeight(FontWeight.Normal) | ||
| 65 | + .opacity(this.TEXT_OPACITY) | ||
| 66 | + .margin({ top: this.EMPTY_TIP_TEXT_MARGIN_TOP }) | ||
| 67 | + .onClick((event: ClickEvent) => { | ||
| 68 | + Logger.info(TAG, `noProgrammeData onClick event?.source: ${event.source}`); | ||
| 69 | + }) | ||
| 70 | + Button('点击重试', { type: ButtonType.Normal, stateEffect: true }) | ||
| 71 | + .borderRadius(4) | ||
| 72 | + .margin(16) | ||
| 73 | + .height(28) | ||
| 74 | + .fontSize(12) | ||
| 75 | + .fontColor('#CCCCCC') | ||
| 76 | + .fontFamily('PingFang SC-Medium') | ||
| 77 | + .border({ width: 1, color: '#545454' }) | ||
| 78 | + .backgroundColor(Color.Black) | ||
| 79 | + } | ||
| 80 | + .justifyContent(FlexAlign.Center) | ||
| 81 | + .width(this.emptyWidth) | ||
| 82 | + .height(this.emptyHeight) | ||
| 83 | + .backgroundColor(Color.Black) | ||
| 84 | + } | ||
| 85 | + | ||
| 86 | + buildNoDataTip(): string { | ||
| 87 | + Logger.info(TAG, "buildNoDataTip"); | ||
| 88 | + let contentString: string = '获取内容失败请重试' | ||
| 89 | + if (this.emptyType === WDViewDefaultType.WDViewDefaultType_NoNetwork) { | ||
| 90 | + contentString = '网络出小差了,请检查网络后重试' | ||
| 91 | + } else if (this.emptyType === WDViewDefaultType.WDViewDefaultType_ContentFailed) { | ||
| 92 | + contentString = '获取内容失败请重试' | ||
| 93 | + } | ||
| 94 | + | ||
| 95 | + return contentString | ||
| 96 | + } | ||
| 97 | + | ||
| 98 | + buildNoDataTipImage(): Resource | string { | ||
| 99 | + Logger.info(TAG, "buildNoDataTip"); | ||
| 100 | + let imageString: Resource | string = $r('app.media.icon_no_content') | ||
| 101 | + if (this.emptyType === WDViewDefaultType.WDViewDefaultType_NoNetwork) { | ||
| 102 | + imageString = $r('app.media.icon_no_net') | ||
| 103 | + } else if (this.emptyType === WDViewDefaultType.WDViewDefaultType_ContentFailed) { | ||
| 104 | + imageString = $r('app.media.icon_no_content') | ||
| 105 | + } else if (this.emptyType === WDViewDefaultType.WDViewDefaultType_NetworkFailed) { | ||
| 106 | + imageString = $r('app.media.icon_no_net') | ||
| 107 | + } | ||
| 108 | + return imageString | ||
| 109 | + } | ||
| 110 | +} |
| 1 | import { Logger } from 'wdKit'; | 1 | import { Logger } from 'wdKit'; |
| 2 | +import { ResponseDTO } from 'wdNetwork'; | ||
| 2 | import { | 3 | import { |
| 3 | ContentDetailDTO, | 4 | ContentDetailDTO, |
| 4 | PhotoListBean, | 5 | PhotoListBean, |
| @@ -11,6 +12,7 @@ import display from '@ohos.display'; | @@ -11,6 +12,7 @@ import display from '@ohos.display'; | ||
| 11 | import font from '@ohos.font'; | 12 | import font from '@ohos.font'; |
| 12 | import { OperRowListView } from './view/OperRowListView'; | 13 | import { OperRowListView } from './view/OperRowListView'; |
| 13 | import { MultiPictureDetailItemComponent } from './MultiPictureDetailItemComponent'; | 14 | import { MultiPictureDetailItemComponent } from './MultiPictureDetailItemComponent'; |
| 15 | +import { MultiPictureDetailEmptyComponent } from './MultiPictureDetailEmptyComponent'; | ||
| 14 | import { DateTimeUtils } from 'wdKit/Index'; | 16 | import { DateTimeUtils } from 'wdKit/Index'; |
| 15 | import { HttpUrlUtils } from 'wdNetwork/Index'; | 17 | import { HttpUrlUtils } from 'wdNetwork/Index'; |
| 16 | import { WDRouterPage, WDRouterRule } from 'wdRouter/Index'; | 18 | import { WDRouterPage, WDRouterRule } from 'wdRouter/Index'; |
| @@ -34,6 +36,7 @@ export struct MultiPictureDetailPageComponent { | @@ -34,6 +36,7 @@ export struct MultiPictureDetailPageComponent { | ||
| 34 | @State swiperIndex: number = 0; | 36 | @State swiperIndex: number = 0; |
| 35 | @Provide followStatus: string = '0' // 关注状态 | 37 | @Provide followStatus: string = '0' // 关注状态 |
| 36 | private scroller: Scroller = new Scroller() | 38 | private scroller: Scroller = new Scroller() |
| 39 | + @State netStatus: number = 0 // 存储网络状态用来展示缺省图 | ||
| 37 | 40 | ||
| 38 | //watch监听页码回调 | 41 | //watch监听页码回调 |
| 39 | onCurrentPageNumUpdated(): void { | 42 | onCurrentPageNumUpdated(): void { |
| @@ -56,10 +59,6 @@ export struct MultiPictureDetailPageComponent { | @@ -56,10 +59,6 @@ export struct MultiPictureDetailPageComponent { | ||
| 56 | familySrc: $rawfile('font/BebasNeue_Regular.otf') | 59 | familySrc: $rawfile('font/BebasNeue_Regular.otf') |
| 57 | }) | 60 | }) |
| 58 | this.getContentDetailData() | 61 | this.getContentDetailData() |
| 59 | - if (HttpUrlUtils.getUserId()) { | ||
| 60 | - this.getInteractBrowsOperate() | ||
| 61 | - this.getBatchAttentionStatus() | ||
| 62 | - } | ||
| 63 | } | 62 | } |
| 64 | 63 | ||
| 65 | aboutToDisappear() { | 64 | aboutToDisappear() { |
| @@ -238,6 +237,16 @@ export struct MultiPictureDetailPageComponent { | @@ -238,6 +237,16 @@ export struct MultiPictureDetailPageComponent { | ||
| 238 | }) | 237 | }) |
| 239 | .height(px2vp(this.titleHeight) + 64) | 238 | .height(px2vp(this.titleHeight) + 64) |
| 240 | 239 | ||
| 240 | + } else { | ||
| 241 | + if (this.netStatus === 1) { | ||
| 242 | + MultiPictureDetailEmptyComponent({ emptyType: 2}) | ||
| 243 | + .id('e_empty_content') | ||
| 244 | + .alignRules({ | ||
| 245 | + center: { anchor: "__container__", align: VerticalAlign.Center }, | ||
| 246 | + middle: { anchor: "__container__", align: HorizontalAlign.Center } | ||
| 247 | + }) | ||
| 248 | + } | ||
| 249 | + } | ||
| 241 | OperRowListView({ | 250 | OperRowListView({ |
| 242 | contentDetailData: this.contentDetailData, | 251 | contentDetailData: this.contentDetailData, |
| 243 | }) | 252 | }) |
| @@ -256,7 +265,6 @@ export struct MultiPictureDetailPageComponent { | @@ -256,7 +265,6 @@ export struct MultiPictureDetailPageComponent { | ||
| 256 | .border({ width: { top: 0.5 }, color: '#FFFFFF' }) | 265 | .border({ width: { top: 0.5 }, color: '#FFFFFF' }) |
| 257 | .id('e_oper_row') | 266 | .id('e_oper_row') |
| 258 | } | 267 | } |
| 259 | - } | ||
| 260 | .width('100%') | 268 | .width('100%') |
| 261 | .height('100%') | 269 | .height('100%') |
| 262 | .backgroundColor(Color.Black) | 270 | .backgroundColor(Color.Black) |
| @@ -266,11 +274,41 @@ export struct MultiPictureDetailPageComponent { | @@ -266,11 +274,41 @@ export struct MultiPictureDetailPageComponent { | ||
| 266 | .expandSafeArea([SafeAreaType.SYSTEM], [SafeAreaEdge.TOP, SafeAreaEdge.BOTTOM]) | 274 | .expandSafeArea([SafeAreaType.SYSTEM], [SafeAreaEdge.TOP, SafeAreaEdge.BOTTOM]) |
| 267 | } | 275 | } |
| 268 | 276 | ||
| 269 | - private async getContentDetailData() { | 277 | + private getContentDetailData() { |
| 270 | try { | 278 | try { |
| 271 | - let data = await MultiPictureDetailViewModel.getDetailData(this.relId, this.contentId, this.relType) | ||
| 272 | - this.contentDetailData = data?.[0]; | 279 | + PageRepository.fetchDetailData(this.relId, this.contentId, this.relType).then((resDTO: ResponseDTO<ContentDetailDTO[]>) => { |
| 280 | + // Logger.info(TAG, `fetchDetailData then,navResDTO.timestamp ${resDTO.timestamp}`); | ||
| 281 | + // Logger.info(TAG, `fetchDetailData then,navResDTO: ${JSON.stringify(resDTO)}`); | ||
| 282 | + // Logger.info(TAG, `fetchDetailData then,navResDTO.data: ${JSON.stringify(resDTO.data)}`); | ||
| 283 | + if (!resDTO || !resDTO.data) { | ||
| 284 | + Logger.error(TAG, 'fetchDetailData is empty'); | ||
| 285 | + return | ||
| 286 | + } | ||
| 287 | + if (resDTO.code != 0) { | ||
| 288 | + Logger.error(TAG, `fetchDetailData then code:${resDTO.code}, message:${resDTO.message}`); | ||
| 289 | + return | ||
| 290 | + } | ||
| 291 | + this.contentDetailData = resDTO.data?.[0]; | ||
| 273 | Logger.info(TAG, `contentDetailData:${JSON.stringify(this.contentDetailData)}`) | 292 | Logger.info(TAG, `contentDetailData:${JSON.stringify(this.contentDetailData)}`) |
| 293 | + if (HttpUrlUtils.getUserId()) { | ||
| 294 | + this.getInteractBrowsOperate() | ||
| 295 | + this.getBatchAttentionStatus() | ||
| 296 | + } | ||
| 297 | + }).catch((err: Error) => { | ||
| 298 | + Logger.info(TAG, `fetchDetailData then,err: ${JSON.stringify(err)}`); | ||
| 299 | + /*// 请求失败处理 | ||
| 300 | + if (err.response) { | ||
| 301 | + // 请求已发出,但服务器响应的状态码不在2xx范围内 | ||
| 302 | + console.error('请求失败,状态码:', err.response.status); | ||
| 303 | + console.error('响应数据:', err.response.data); | ||
| 304 | + } else if (err.request) { | ||
| 305 | + // 请求已发出,但无响应(例如:网络故障) | ||
| 306 | + console.error('请求已发出,但无响应:', err.request); | ||
| 307 | + } else { | ||
| 308 | + // 发生了其他类型的错误(如配置错误或拒绝权限等) | ||
| 309 | + console.error('请求发生错误:', err.message); | ||
| 310 | + }*/ | ||
| 311 | + }) | ||
| 274 | } catch (exception) { | 312 | } catch (exception) { |
| 275 | 313 | ||
| 276 | } | 314 | } |
-
Please register or login to post a comment