EmptyComponent.ets 10.3 KB
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
    }
  }
}