王士厅

图集替换缺省图为通用组件

import { CommonConstants } from 'wdConstant';
import { Logger } from 'wdKit';
const TAG = 'EmptyComponent';
/**
* WDViewDefaultType 缺省页
*/
export const enum WDViewDefaultType {
///无网
WDViewDefaultType_NoNetwork,
///网络失败 请稍后重试-倒计时
WDViewDefaultType_NetworkFailed,
///内容获取失败
WDViewDefaultType_ContentFailed,
}
/**
* 空数据/无数据
*/
@Preview
@Component
export struct MultiPictureDetailEmptyComponent {
// private emptySize: SizeOptions = {};
@State emptyWidth: string | number = CommonConstants.FULL_PARENT;
@State emptyHeight: string | number = CommonConstants.FULL_PARENT;
@State emptyType: number = WDViewDefaultType.WDViewDefaultType_ContentFailed
/**
* 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;
build() {
this.noProgrammeData();
}
/**
* 无数据,空白view组件
*/
@Builder
noProgrammeData() {
Column() {
Image(this.buildNoDataTipImage())
.width('this.EMPTY_IMAGE_WIDTH')
.height(this.EMPTY_IMAGE_HEIGHT)
.objectFit(ImageFit.Contain)
// .border({ width: 1, color: Color.Red, radius: 6 })
Text(this.buildNoDataTip())
.fontSize($r('app.float.font_size_14'))
.fontColor('#999999')
.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}`);
})
Button('点击重试', { type: ButtonType.Normal, stateEffect: true })
.borderRadius(4)
.margin(16)
.height(28)
.fontSize(12)
.fontColor('#CCCCCC')
.fontFamily('PingFang SC-Medium')
.border({ width: 1, color: '#545454' })
.backgroundColor(Color.Black)
}
.justifyContent(FlexAlign.Center)
.width(this.emptyWidth)
.height(this.emptyHeight)
.backgroundColor(Color.Black)
}
buildNoDataTip(): string {
Logger.info(TAG, "buildNoDataTip");
let contentString: string = '获取内容失败请重试'
if (this.emptyType === WDViewDefaultType.WDViewDefaultType_NoNetwork) {
contentString = '网络出小差了,请检查网络后重试'
} else if (this.emptyType === WDViewDefaultType.WDViewDefaultType_ContentFailed) {
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_NoNetwork) {
imageString = $r('app.media.icon_no_net')
} else if (this.emptyType === WDViewDefaultType.WDViewDefaultType_ContentFailed) {
imageString = $r('app.media.icon_no_content')
} else if (this.emptyType === WDViewDefaultType.WDViewDefaultType_NetworkFailed) {
imageString = $r('app.media.icon_no_net')
}
return imageString
}
}
\ No newline at end of file
... ... @@ -12,7 +12,7 @@ import display from '@ohos.display';
import font from '@ohos.font';
import { OperRowListView } from './view/OperRowListView';
import { MultiPictureDetailItemComponent } from './MultiPictureDetailItemComponent';
import { MultiPictureDetailEmptyComponent } from './MultiPictureDetailEmptyComponent';
import { EmptyComponent } from './view/EmptyComponent';
import { DateTimeUtils } from 'wdKit/Index';
import { HttpUrlUtils } from 'wdNetwork/Index';
import { WDRouterPage, WDRouterRule } from 'wdRouter/Index';
... ... @@ -37,7 +37,7 @@ export struct MultiPictureDetailPageComponent {
@State swiperIndex: number = 0;
@Provide followStatus: string = '0' // 关注状态
private scroller: Scroller = new Scroller()
@State netStatus: number = 0 // 存储网络状态用来展示缺省图
@State netStatus: number | undefined = undefined // 存储网络状态用来展示缺省图
//watch监听页码回调
onCurrentPageNumUpdated(): void {
... ... @@ -239,8 +239,8 @@ export struct MultiPictureDetailPageComponent {
.height(px2vp(this.titleHeight) + 64)
} else {
if (this.netStatus === 1) {
MultiPictureDetailEmptyComponent({ emptyType: 2})
if(this.netStatus !== undefined) {
EmptyComponent({ emptyType: this.netStatus})
.id('e_empty_content')
.alignRules({
center: { anchor: "__container__", align: VerticalAlign.Center },
... ... @@ -290,6 +290,9 @@ export struct MultiPictureDetailPageComponent {
return
}
this.contentDetailData = resDTO.data?.[0];
if(this.contentDetailData?.photoList && this.contentDetailData?.photoList?.length === 0) {
this.netStatus = 0
}
Logger.info(TAG, `contentDetailData:${JSON.stringify(this.contentDetailData)}`)
if (HttpUrlUtils.getUserId()) {
this.getInteractBrowsOperate()
... ...