王士厅

图集增加缺省图逻辑

  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 }