developOne / harmonyPool

Go to a project
Toggle navigation Toggle navigation pinning
liyubing
99d607b1 1 parent 98eaf666

feat: 

1)搭建普通信息流模板组件，可支持不用业务接口实现通用组件和稿件展示业务数据；
2）直播列表页面改造成使用通用模板组件
Inline Side-by-side
Showing 14 changed files with 728 additions and 458 deletions
... ... @@ -84,4 +84,9 @@ export const enum CompStyle {
Card_Comp_Adv = 'card_comp_adv', // 信息流广告稿件
Card_Comp_Zh_Grid_Layout_02 = 'Card_Comp_Zh_Grid_Layout-02', // 一行两列卡业务内容
Card_Comp_Live_Big_Image_01 = 'card_comp_live_sub_big_image_01', // 直播预约大图卡
Card_Comp_Live_Big_Image_02 = 'card_comp_live_sub_big_image_02' // 直播大图卡
}
... ...
... ... @@ -18,6 +18,7 @@ import { Card21Component } from './cardview/Card21Component';
import { SearchContentComponent } from './cardview/SearchContentComponent';
import { DateTimeUtils } from 'wdKit/Index';
import { TrackConstants, TrackingPageBrowse } from 'wdTracking/Index';
import { LiveBigImage02Component } from './cardview/LiveBigImage02Component';
/**
* card适配器，卡片样式汇总，依据ContentDTO#appStyle
... ... @@ -89,7 +90,9 @@ export struct CardParser {
Card20Component({ contentDTO, compDTO: this.compDTO, pageId: this.pageId, pageName: this.pageName })
} else if (contentDTO.appStyle === CompStyle.Card_21) {
Card21Component({ contentDTO, compDTO: this.compDTO, pageId: this.pageId, pageName: this.pageName })
} else {
} else if (contentDTO.appStyle === CompStyle.Card_Comp_Live_Big_Image_02) {
LiveBigImage02Component({ contentDTO:contentDTO, compDTO: this.compDTO, pageId: this.pageId, pageName: this.pageName })
}else {
// todo:组件未实现 / Component Not Implemented
// Text(contentDTO.appStyle)
// .width(CommonConstants.FULL_PARENT)
... ...
... ... @@ -79,8 +79,6 @@ export struct CompParser {
@Builder
componentBuilder() {
//CardParser({ contentDTO: this.compDTO.operDataList[0], compDTO:this.compDTO })
if (this.compDTO.operDataList[0]?.objectType !== '3' &&
this.compDTO.operDataList[0]?.objectType !== '13') { //暂时屏蔽活动和音频详情入口
if (this.compDTO.compStyle === CompStyle.Label_03) {
... ... @@ -171,7 +169,7 @@ export struct CompParser {
AdvCardParser({ pageModel: this.pageModel, compDTO: this.compDTO })
//Text(`compIndex = ${compIndex}`).width('100%').fontSize('12fp').fontColor(Color.Red).padding({ left: 0, right: 0 })
Divider().strokeWidth(1).color('#f5f5f5').padding({ left: 16, right: 16 })
} else if (!Number.isNaN(Number(this.compDTO.compStyle))) {
} else if (!Number.isNaN(Number(this.compDTO.compStyle)) || this.compDTO.compType === 'appStyle') {
CardParser({ contentDTO: this.compDTO.operDataList[0], compDTO: this.compDTO, pageId: this.pageId, pageName: this.pageName });
Divider().strokeWidth(1).color('#f5f5f5').padding({ left: 16, right: 16 })
} else {
... ...
import { CompDTO, ContentDTO } from 'wdBean';
import { ProcessUtils } from 'wdRouter';
import { onlyWifiLoadImg } from '../../utils/lazyloadImg';
import { hasClicked, persistentStorage } from '../../utils/persistentStorage';
import { SearchShowRed, textItem, titleInitRes } from '../../utils/searchShowRed';
import { DateTimeUtils } from 'wdKit/Index';
import { LottieView } from '../lottie/LottieView';
import { router } from '@kit.ArkUI';
const TAG: string = 'Card6Component-Card13Component';
/**
* 本地样式卡：直播大图卡
*/
@Component
export struct LiveBigImage02Component {
@ObjectLink compDTO: CompDTO
@State pageId: string = '';
@State pageName: string = '';
@State contentDTO: ContentDTO = new ContentDTO();
@State loadImg: boolean = false;
@State clicked: boolean = false;
async aboutToAppear() {
const curRouter = router.getState().name;
this.clicked = hasClicked(this.contentDTO.objectId,curRouter)
this.loadImg = await onlyWifiLoadImg();
}
build() {
Column() {
Text(this.contentDTO.newsTitle)
.fontSize(18)
.maxLines(2)
.textOverflow({ overflow: TextOverflow.Ellipsis })
.margin({ top: 16, bottom: 8 })
.alignSelf(ItemAlign.Start)
.fontColor(this.clicked ? 0x848484 : $r('app.color.color_222222'))
Stack() {
if (this.contentDTO.fullColumnImgUrls && this.contentDTO.fullColumnImgUrls.length > 0) {
Image(this.contentDTO.fullColumnImgUrls[0].url)//
.backgroundColor(this.loadImg ? $r('app.color.color_B0B0B0') : 0xf5f5f5)
.width('100%')
.aspectRatio(16 / 9)
.borderRadius(4)
.borderWidth(0.5)
.borderColor($r('app.color.color_0D000000'))
}
this.LiveImage(this.contentDTO)
}
.alignContent(Alignment.BottomEnd)
Row() {
if (this.contentDTO.rmhInfo && this.contentDTO.rmhInfo.rmhName) {
Text(this.contentDTO.rmhInfo.rmhName)
.fontSize(12)
.fontWeight(400)
.fontColor($r('app.color.color_B0B0B0'))
.fontFamily('PingFang SC-Medium')
.maxLines(1)
.textOverflow({ overflow: TextOverflow.Ellipsis })
.align(Alignment.Start)
Image($r('app.media.point_live_icon'))
.objectFit(ImageFit.Auto)
.interpolation(ImageInterpolation.High)
.width(16)
.height(16)
.margin(2)
}
Text(DateTimeUtils.getCommentTime(Number.parseFloat(this.contentDTO.publishTimestamp)))
.fontSize(12)
.maxLines(1)
.textOverflow({ overflow: TextOverflow.Ellipsis })
.align(Alignment.Start)
.width('100%')
.fontColor($r('app.color.color_B0B0B0'))
}
.margin({ top: 8, bottom: 8 })
}
.width('100%')
.padding({
left: $r('app.float.card_comp_pagePadding_lf'),
right: $r('app.float.card_comp_pagePadding_lf'),
})
.onClick(() => {
this.clicked = true;
persistentStorage(this.contentDTO.objectId);
ProcessUtils.processPage(this.contentDTO)
})
}
@Builder
LiveImage(item: ContentDTO) {
Row() {
LottieView({
name: 'live_status_wait',
path: "lottie/live_detail_living.json",
lottieWidth: 14,
lottieHeight: 14,
autoplay: true,
loop: true,
title: item.newsTitle
})
.margin({
right: '2vp'
})
Text('直播中')
.fontSize('12vp')
.fontWeight(400)
.fontColor(Color.White)
.textShadow({
radius: 2,
color: 'rgba(0,0,0,0.3)',
offsetX: 0,
offsetY: 2
})
.margin({
right: '5vp'
})
Image($r('app.media.icon_comp_line_live')).height('11vp').width('1.5vp')
if (this.getLiveRoomNumber(this.compDTO.operDataList[0]).length > 0) {
Text(this.getLiveRoomNumber(this.compDTO.operDataList[0]))
.fontSize('12vp')
.fontWeight(400)
.textShadow({
radius: 2,
color: 'rgba(0,0,0,0.3)',
offsetX: 0,
offsetY: 2
})
.fontColor(Color.White)
.margin({
left: '5vp'
})
}
}
.justifyContent(FlexAlign.End)
.margin({ right: 8, bottom: 8 })
}
// 判断是否预约
getLiveRoomNumber(item: ContentDTO): string {
const objc = item.liveRoomDataBean
if (objc && objc.pv && objc.pv > 0) {
return this.computeShowNum(objc.pv)
}
return ''
}
private computeShowNum(count: number): string {
if (count >= 10000) {
let num = (count / 10000).toFixed(1)
if (Number(num.substring(num.length - 1)) == 0) {
num = num.substring(0, num.length - 2)
}
return num + '万人参加'
}
return `${count}人参加`
}
}
\ No newline at end of file
... ...
import { router } from '@kit.ArkUI'
/**
* 常见的标题
*/
@Component
export default struct CommonPageTitle {
// 标题名称
@State title:string = ''
build() {
RelativeContainer() {
//标题栏目
Image($r('app.media.icon_arrow_left'))
.width(24)
.height(24)
.objectFit(ImageFit.Auto)
.id("back_icon")
.alignRules({
center: { anchor: "__container__", align: VerticalAlign.Center },
left: { anchor: "__container__", align: HorizontalAlign.Start }
})
.onClick(() => {
router.back()
})
Text(this.title)
.maxLines(1)
.id("title")
.fontSize('18vp')
.fontWeight(400)
.fontColor($r('app.color.color_222222'))
.lineHeight('22vp')
.alignRules({
center: { anchor: "__container__", align: VerticalAlign.Center },
middle: { anchor: "__container__", align: HorizontalAlign.Center }
})
}
.height(44)
.padding({
left: $r('app.float.card_comp_pagePadding_lf'),
right: $r('app.float.card_comp_pagePadding_lf'),
})
.width('100%')
}
}
\ No newline at end of file
... ...
import { ContentDTO, LiveRoomDataBean } from 'wdBean';
import { ProcessUtils } from 'wdRouter';
import PageViewModel from '../../viewmodel/PageViewModel';
import { DateTimeUtils, LazyDataSource, Logger, NetworkUtil } from 'wdKit/Index';
import { router } from '@kit.ArkUI';
import { ViewType } from 'wdConstant/src/main/ets/enum/ViewType';
import { CustomPullToRefresh } from '../reusable/CustomPullToRefresh';
import { PeopleShipNoMoreData } from '../reusable/PeopleShipNoMoreData';
import { EmptyComponent, WDViewDefaultType } from '../view/EmptyComponent';
import { ErrorComponent } from '../view/ErrorComponent';
import LoadMoreLayout from '../page/LoadMoreLayout';
import { LottieView } from '../../components/lottie/LottieView';
import dataPreferences from '@ohos.data.preferences';
import { BusinessError } from '@ohos.base';
import { onlyWifiLoadImg } from '../../utils/lazyloadImg';
import { channelSkeleton } from '../skeleton/channelSkeleton';
import CommonPageTitle from './CommonPageTitle';
import TemplatePageComponent from './template/TemplatePageComponent';
import { TemplatePageConstant } from './template/TemplatePageConstant';
const TAG: string = 'LiveMorePage';
const PREFERENCES_NAME = 'rmrLiveMorePage.db'
let preferenceTheme: dataPreferences.Preferences | null = null
/**
* 直播更多:
* type=1 直播
* type=2 预约
* 卡片结构：上下结构
* 卡片宽度:充满父窗口
* 卡片高度,仅包含横板图片：图片高度由图片的宽度及宽高比决定，图片宽度占父窗口'100%'，宽高比为16:9:
* 直播列表
*/
@Entry
@Component
struct LiveMorePage {
@State data: LazyDataSource<ContentDTO> = new LazyDataSource();
@State topSafeHeight: number = AppStorage.get<number>('topSafeHeight') as number;
@State bottomSafeHeight: number = AppStorage.get<number>('bottomSafeHeight') || 0
type: number = 1;
pageSize: number = 20;
operDataList: ContentDTO[] = [];
title: string = '直播列表'
@State contentDTO: ContentDTO = new ContentDTO();
@State private hasMore: boolean = true
@State private currentPage: number = 1
@State private isLoading: boolean = false
private scroller: Scroller = new Scroller()
@State liveRoomList: LiveRoomDataBean[] = []
// 点击过的数据
@State clickDatas: Array<string> = []
@State loadImg: boolean = false;
@State viewType: ViewType = ViewType.LOADING
emptyType: WDViewDefaultType = WDViewDefaultType.WDViewDefaultType_Default
async aboutToAppear(): Promise<void> {
await this.getPreferencesFromStorage()
this.loadImg = await onlyWifiLoadImg();
this.getLivMoreClickPreference()
Logger.debug(TAG, '数据：' + JSON.stringify(this.clickDatas))
this.currentPage = 1
this.getData()
}
title: string = '直播列表'
build() {
Column() {
this.TabbarNormal()
if (this.viewType == ViewType.LOADING) {
this.LoadingLayout()
} else if (this.viewType == ViewType.EMPTY || this.viewType == ViewType.ERROR) {
EmptyComponent({
emptyType: this.emptyType,
emptyButton: true,
retry: () => {
this.getData()
}
})
} else {
CustomPullToRefresh({
alldata: this.data,
scroller: this.scroller,
hasMore: false,
customList: () => {
this.ListLayout()
},
onRefresh: (resolve) => {
this.currentPage = 1
this.getData(resolve)
},
})
}
//常见标题
CommonPageTitle({ title: this.title })
// 通用模板组件
TemplatePageComponent({ pageDataSourceType: TemplatePageConstant.LIVE_HORIZONTAL_CARD })
}
.height('100%')
.backgroundColor(Color.White)
.padding({
left: $r('app.float.card_comp_pagePadding_lf'),
right: $r('app.float.card_comp_pagePadding_lf'),
top: px2vp(this.topSafeHeight),
bottom: px2vp(this.bottomSafeHeight)
})
}
@Builder
LoadingLayout() {
channelSkeleton()
}
@Builder
ListLayout() {
List({ scroller: this.scroller }) {
// 下拉刷新
LazyForEach(this.data, (contentDTO: ContentDTO) => {
ListItem() {
this.buildItem(contentDTO)
}
},
(contentDTO: ContentDTO, contentIndex: number) => contentDTO.pageId + contentIndex.toString()
)
// 加载更多
ListItem() {
if (this.hasMore && this.data && this.data.totalCount() > 0) {
LoadMoreLayout({ isVisible: this.hasMore })
} else if (!this.hasMore && !this.isLoading) {
PeopleShipNoMoreData()
}
}
}
.scrollBar(BarState.Off)
.edgeEffect(EdgeEffect.None)
.cachedCount(3)
.height('calc(100% - 44vp)')
.onReachEnd(() => {
Logger.debug(TAG, "触底了");
if (!this.isLoading && this.hasMore) {
//加载分页数据
this.currentPage++;
this.getData()
}
})
}
/**
* 组件项
*
* @param programmeBean item 组件项, 上面icon,下面标题
*/
@Builder
buildItem(item: ContentDTO) {
Column() {
Text(item.newsTitle)
.fontSize(18)
.maxLines(2)
.textOverflow({ overflow: TextOverflow.Ellipsis })
.margin({ top: 16, bottom: 8 })
.alignSelf(ItemAlign.Start)
.fontColor(this.isClicked(item.objectId) ? $r('app.color.color_848484') : $r('app.color.color_222222'))
Stack() {
if (item.fullColumnImgUrls && item.fullColumnImgUrls.length > 0) {
Image(this.loadImg ? item.fullColumnImgUrls[0].url : '')
.backgroundColor(this.loadImg ? $r('app.color.color_B0B0B0') : 0xf5f5f5)
.width('100%')
.aspectRatio(16 / 9)
.borderRadius(4)
}
this.LiveImage(item)
}
.alignContent(Alignment.BottomEnd)
Row() {
if (item.rmhInfo && item.rmhInfo.rmhName) {
Text(item.rmhInfo.rmhName)
.fontSize(12)
.fontWeight(400)
.fontColor($r('app.color.color_B0B0B0'))
.fontFamily('PingFang SC-Medium')
.maxLines(1)
.textOverflow({ overflow: TextOverflow.Ellipsis })
.align(Alignment.Start)
Image($r('app.media.point_live_icon'))
.objectFit(ImageFit.Auto)
.interpolation(ImageInterpolation.High)
.width(16)
.height(16)
.margin(2)
}
Text(DateTimeUtils.getCommentTime(Number.parseFloat(item.publishTimestamp)))
.fontSize(12)
.maxLines(1)
.textOverflow({ overflow: TextOverflow.Ellipsis })
.align(Alignment.Start)
.width('100%')
.fontColor($r('app.color.color_B0B0B0'))
}
.margin({ top: 8, bottom: 8 })
Divider()
.strokeWidth(1)
.margin({ top: 6 })
.width('100%')
.color('#f5f5f5')
}
.width('100%')
.onClick(() => {
this.clickRowBuildItem(item)
ProcessUtils.processPage(item)
})
}
/*导航栏*/
@Builder
TabbarNormal() {
RelativeContainer() {
//标题栏目
Image($r('app.media.icon_arrow_left'))
.width(24)
.height(24)
.objectFit(ImageFit.Auto)
.id("back_icon")
.alignRules({
center: { anchor: "__container__", align: VerticalAlign.Center },
left: { anchor: "__container__", align: HorizontalAlign.Start }
})
.onClick(() => {
router.back()
})
Text(this.title)
.maxLines(1)
.id("title")
.fontSize('18vp')
.fontWeight(400)
.fontColor($r('app.color.color_222222'))
.lineHeight('22vp')
.alignRules({
center: { anchor: "__container__", align: VerticalAlign.Center },
middle: { anchor: "__container__", align: HorizontalAlign.Center }
})
}
.height(44)
.width('100%')
}
@Builder
LiveImage(item: ContentDTO) {
Row() {
LottieView({
name: 'live_status_wait',
path: "lottie/live_detail_living.json",
lottieWidth: 14,
lottieHeight: 14,
autoplay: true,
loop: true,
title: item.newsTitle
})
.margin({
right: '2vp'
})
Text('直播中')
.fontSize('12vp')
.fontWeight(400)
.fontColor(Color.White)
.textShadow({
radius: 2,
color: 'rgba(0,0,0,0.3)',
offsetX: 0,
offsetY: 2
})
.margin({
right: '5vp'
})
Image($r('app.media.icon_comp_line_live')).height('11vp').width('1.5vp')
if (this.getLiveRoomNumber(item).length > 0) {
Text(this.getLiveRoomNumber(item))
.fontSize('12vp')
.fontWeight(400)
.textShadow({
radius: 2,
color: 'rgba(0,0,0,0.3)',
offsetX: 0,
offsetY: 2
})
.fontColor(Color.White)
.margin({
left: '5vp'
})
}
}
.justifyContent(FlexAlign.End)
.margin({ right: 8, bottom: 8 })
}
private async getData(resolve?: (value: string | PromiseLike<string>) => void) {
if (this.isLoading) {
if (resolve) {
resolve('已更新至最新')
}
return
}
// 检测网络
let netStatus = NetworkUtil.isNetConnected()
if (!netStatus) {
this.emptyType = WDViewDefaultType.WDViewDefaultType_NoNetwork
this.viewType = ViewType.ERROR
return
}
this.isLoading = true
try {
const liveReviewDTO = await PageViewModel.getLiveMoreUrl(this.type, this.currentPage, this.pageSize)
if (liveReviewDTO && liveReviewDTO.list && liveReviewDTO.list.length > 0) {
if (liveReviewDTO.list.length === this.pageSize) {
this.hasMore = true;
} else {
this.hasMore = false;
}
if (this.currentPage == 1) {
this.data.clear()
}
this.data.push(...liveReviewDTO.list)
this.getLiveRoomDataInfo(liveReviewDTO.list)
} else {
this.hasMore = false;
}
this.resolveEnd(true, resolve)
if (liveReviewDTO.list.length == 0 && this.currentPage == 1) {
this.viewType = ViewType.EMPTY
this.emptyType = WDViewDefaultType.WDViewDefaultType_NoListContent
}
} catch (exception) {
this.resolveEnd(false, resolve)
}
}
private resolveEnd(isTop: boolean, resolve?: (value: string | PromiseLike<string>) => void) {
if (resolve) {
if (this.currentPage == 1 && isTop) {
resolve('已更新至最新')
} else {
resolve('')
}
}
if (this.currentPage == 1 && !isTop) {
this.viewType = ViewType.ERROR
this.emptyType = WDViewDefaultType.WDViewDefaultType_NoListContent
} else {
this.viewType = ViewType.LOADED
}
this.isLoading = false
}
private getLiveDetailIds(list: ContentDTO[]): string {
let idList: string[] = []
list.forEach(item => {
idList.push(item.objectId)
});
return idList.join(',')
}
// 获取评论数
async getLiveRoomDataInfo(list: ContentDTO[]) {
const reserveIds = this.getLiveDetailIds(list)
Logger.debug(TAG, '是否预约数据：' + ` ${reserveIds}`)
PageViewModel.getLiveRoomBatchInfo(reserveIds).then((result) => {
Logger.debug(TAG, '是否预约数据：' + ` ${JSON.stringify(result)}`)
if (result && result.length > 0) {
this.liveRoomList.push(...result)
this.data.reloadData()
}
}).catch(() => {
// this.data.push(...list)
})
}
// 判断是否预约
getLiveRoomNumber(item: ContentDTO): string {
const objc = this.liveRoomList.find((element: LiveRoomDataBean) => {
return element.liveId.toString() == item.objectId
})
if (objc && objc.pv && objc.pv > 0) {
return this.computeShowNum(objc.pv)
}
return ''
}
private computeShowNum(count: number): string {
if (count >= 10000) {
let num = (count / 10000).toFixed(1)
if (Number(num.substring(num.length - 1)) == 0) {
num = num.substring(0, num.length - 2)
}
return num + '万人参加'
}
return `${count}人参加`
}
isClicked(objectId: string) {
return this.clickDatas.includes(objectId)
}
clickRowBuildItem(item: ContentDTO) {
if (item.objectId && !this.clickDatas.includes(item.objectId)) {
Logger.debug(TAG, '数据：' + JSON.stringify(this.clickDatas))
this.clickDatas.push(item.objectId.toString())
this.putLiveMoreClickPreference()
}
}
async getPreferencesFromStorage() {
let context = getContext(this) as Context
preferenceTheme = await dataPreferences.getPreferences(context, PREFERENCES_NAME)
}
putLiveMoreClickPreference() {
Logger.info(TAG, `Put begin` + JSON.stringify(this.clickDatas))
if (preferenceTheme !== null && this.clickDatas.length > 0) {
// await
const arr: Array<string> = []
arr.push(...this.clickDatas)
preferenceTheme.put('liveMorePage', arr).then(() => {
Logger.debug(TAG, "Succeeded in putting value of 'startup'.");
}).catch((err: BusinessError) => {
Logger.debug(TAG, "Failed to put value of 'startup'. code =" + err.code + ", message =" + err.message);
})
// await preferenceTheme.flush()
preferenceTheme.flush((err: BusinessError) => {
if (err) {
Logger.debug(TAG, "Failed to flush. code =" + err.code + ", message =" + err.message);
return;
}
})
}
}
getLivMoreClickPreference() {
Logger.info(TAG, `Get begin`)
if (preferenceTheme !== null) {
preferenceTheme.get('liveMorePage', []).then((data: dataPreferences.ValueType) => {
if (data instanceof Array) {
this.clickDatas = data as Array<string>
}
}).catch((err: BusinessError) => {
console.error("Failed to get value of 'startup'. code =" + err.code + ", message =" + err.message);
})
}
}
}
\ No newline at end of file
... ...
import { BottomNavDTO, CompDTO, TopNavDTO } from 'wdBean';
import { BottomNavDTO, TopNavDTO } from 'wdBean';
import { SpConstants } from 'wdConstant';
import { DisplayUtils, LazyDataSource, Logger, NetworkUtil, SPHelper, ToastUtils } from 'wdKit';
import { Logger, NetworkUtil, SPHelper, ToastUtils } from 'wdKit';
import { ProcessUtils, WDRouterPage, WDRouterRule } from 'wdRouter';
import { PageComponent } from './PageComponent';
import { ChannelSubscriptionLayout } from './ChannelSubscriptionLayout';
... ... @@ -8,9 +8,8 @@ import { FirstTabTopSearchComponent } from '../search/FirstTabTopSearchComponent
import { AssignChannelParam } from 'wdRouter/src/main/ets/utils/HomeChannelUtils';
import { PeopleShipMainComponent } from '../peopleShip/PeopleShipMainComponent';
import { channelSkeleton } from '../skeleton/channelSkeleton';
import { TrackConstants, TrackingButton } from 'wdTracking/Index';
import DailyPaperTopicModel from '../../model/DailyPaperTopicModel'
import { ParamType, Tracking } from 'wdTracking/Index';
import { ParamType, TrackConstants, Tracking, TrackingButton } from 'wdTracking/Index';
import DailyPaperTopicModel from '../../model/DailyPaperTopicModel';
import { CompUtils } from '../../utils/CompUtils';
const TAG = 'TopNavigationComponent';
... ...
import { ArrayList } from '@kit.ArkTS'
import { CompDTO, ContentDTO, LiveRoomDataBean } from 'wdBean/Index'
import { DateTimeUtils, Logger } from 'wdKit/Index'
import PageViewModel from '../../../viewmodel/PageViewModel'
const TAG: string = 'BaseTemplateHelp'
export class BasePageHelp {
/**
* 请求获取直播房间的动态数据
* @param list
*/
/**
* 直播回看的批查数据
* @param list
* @param compList
*/
getLiveRoomDataInfo(compList: CompDTO[]) {
let list: ContentDTO[] = []
compList.forEach((comp: CompDTO) => {
list.push(...comp.operDataList)
})
let time = DateTimeUtils.getTimeStamp().toString()
let reserveIds = this.getLiveDetailIds(list)
PageViewModel.getLiveRoomBatchInfo(reserveIds).then((result) => {
if (result && result.length > 0) {
result.forEach((bean: LiveRoomDataBean) => {
for (let item of list) {
if (item.objectId == bean.liveId.toString()) {
item.liveRoomDataBean = bean
outer: for (let compBean of compList) {
for (let contentBean of compBean.operDataList) {
if (contentBean === item) {
compBean.timestamp = time
break outer
}
}
}
break
}
}
})
}
}).catch(() => {
})
}
/**
* 获取业务内容 objectId 集合穿 如1，2，3
* @param pageContentList
* @returns
*/
private getLiveDetailIds(pageContentList: ContentDTO[]): string {
let idList: string[] = []
pageContentList.forEach(item => {
idList.push(item.objectId)
});
return idList.join(',')
}
}
\ No newline at end of file
... ...
import { CompDTO, ContentDTO } from 'wdBean/Index'
import { LazyDataSource, Logger } from 'wdKit/Index'
import { CompParser } from '../../CompParser'
import { CustomPullToRefresh } from '../../reusable/CustomPullToRefresh'
import { PeopleShipNoMoreData } from '../../reusable/PeopleShipNoMoreData'
import { channelSkeleton } from '../../skeleton/channelSkeleton'
import { EmptyComponent } from '../../view/EmptyComponent'
import LoadMoreLayout from '../LoadMoreLayout'
import TemplatePageHelp from './TemplatePageHelp'
import TemplatePageModel from './TemplatePageModel'
import { TemplatePageStateType } from './TemplatePageStateType'
const TAG: string = 'TemplatePageComponent';
/**
* @Description: 处理通用信息展示页面，1）业务数据加载；2）异常状况处理；3）展位信息处理
* @Author:
* @Email: liyubing@wondertek.com.cn
* @CreateDate:
* @UpdateRemark: 更新说明
* @Version: 1.0
*/
@Component
export default struct TemplatePageComponent {
// 模板页面的数据驱动对象
@State private templatePage: TemplatePageModel = new TemplatePageModel
// 此内容主要因CustomPullToRefresh需要，目前没任何业务意义要求
@State pageData: LazyDataSource<ContentDTO> = new LazyDataSource();
// 滚动
private templateScroller: Scroller = new Scroller()
//识别不同页面的业务类型
pageDataSourceType: string = ''
// 埋点字段
pageId: string = ''
pageName: string = ''
async aboutToAppear() {
Logger.debug(TAG, 'aboutToAppear')
this.requestPageData()
}
aboutToDisappear(): void {
}
build() {
if (this.templatePage.pageCompType === TemplatePageStateType.LOADING) {
this.LoadingLayout()
} else if (this.templatePage.pageCompType === TemplatePageStateType.LOADED) {
CustomPullToRefresh({
alldata: this.pageData,
scroller: this.templateScroller,
hasMore: false,
customList: () => {
this.ListLayout()
},
onRefresh: (resolve) => {
this.templatePage.currentPage = 1
this.templatePage.resolve = resolve
this.requestPageData(resolve)
},
})
} else {
EmptyComponent({
emptyType: this.templatePage.noNormalState,
emptyButton: true,
retry: () => {
this.requestPageData()
}
})
}
}
@Builder
LoadingLayout() {
channelSkeleton()
}
@Builder
ListLayout() {
List({ scroller: this.templateScroller }) {
// 下拉刷新
LazyForEach(this.templatePage.compList, (compDTO: CompDTO, index: number) => {
ListItem() {
Column() {
CompParser({
compDTO: compDTO,
compIndex: index,
pageId: this.pageId,
pageName: this.pageName
});
}
}
},
(contentDTO: CompDTO, contentIndex: number) => JSON.stringify(contentDTO))
// 加载更多
ListItem() {
if (this.templatePage.hasMore && this.templatePage.compList && this.templatePage.compList.totalCount() > 0) {
LoadMoreLayout({ isVisible: this.templatePage.hasMore })
} else if (!this.templatePage.hasMore && !this.templatePage.isLoading) {
PeopleShipNoMoreData()
}
}
}
.scrollBar(BarState.Off)
.edgeEffect(EdgeEffect.None)
.cachedCount(3)
.height('calc(100% - 44vp)')
.onReachEnd(() => {
Logger.debug(TAG, "触底了");
if (!this.templatePage.isLoading && this.templatePage.hasMore) {
//加载分页数据
this.templatePage.currentPage++;
this.requestPageData()
}
})
}
/**
* 请求业务数据
*/
async requestPageData(resolve?: (value: string | PromiseLike<string>) => void) {
if (this.templatePage.isLoading) {
if (resolve) {
resolve('已更新至最新')
}
return
}
this.templatePage.pageDataSourceType = this.pageDataSourceType
TemplatePageHelp.requestPageData(this.templatePage)
}
}
\ No newline at end of file
... ...
/**
* @Description: 模板页面的常量
* @Author:
* @Email: liyubing@wondertek.com.cn
* @CreateDate:
* @UpdateRemark: 更新说明
* @Version: 1.0
*/
export class TemplatePageConstant {
/**
* 直播中
*/
public static LIVE_HORIZONTAL_CARD: string = "LIVE_HORIZONTAL_CARD"
}
\ No newline at end of file
... ...
import { CompDTO } from 'wdBean/Index';
import { CompStyle } from 'wdConstant/Index';
import { NetworkUtil } from 'wdKit/Index';
import PageViewModel from '../../../viewmodel/PageViewModel';
import { WDViewDefaultType } from '../../view/EmptyComponent';
import { BasePageHelp } from './BasePageHelp';
import { TemplatePageConstant } from './TemplatePageConstant';
import TemplatePageModel from './TemplatePageModel';
import { TemplatePageStateType } from './TemplatePageStateType';
const TAG: string = 'TemplatePageHelp';
/**
* @Description: 完成不同页面业务数据获取并加工
* @Author:
* @Email: liyubing@wondertek.com.cn
* @CreateDate:
* @UpdateRemark: 更新说明
* @Version: 1.0
*/
export class TemplatePageHelp extends BasePageHelp {
private pageModel: TemplatePageModel = new TemplatePageModel
constructor() {
super();
}
/**
* 请求业务数据
* @param pageModel
*/
async requestPageData(pageModel: TemplatePageModel) {
this.pageModel = pageModel
// 检测网络
let netStatus = NetworkUtil.isNetConnected()
if (netStatus) {
this.treatDiffBusinessDataSource()
} else if (pageModel.compList.size() > 0) {
// 加载缓存数据了，不用无网络提示
} else {
// 无网情况
pageModel.pageCompType = TemplatePageStateType.OTHER;
pageModel.noNormalState = WDViewDefaultType.WDViewDefaultType_NoNetwork
}
}
/**
* 区分不同业务数据源
*/
private treatDiffBusinessDataSource() {
if (this.pageModel.pageDataSourceType === TemplatePageConstant.LIVE_HORIZONTAL_CARD) {
// 直播列表
this.requestLiveListData(this.pageModel.resolve)
}
}
/**
* 请求直播列表数据
*/
private async requestLiveListData(resolve?: (value: string | PromiseLike<string>) => void) {
this.pageModel.isLoading = true
const liveReviewDTO = await PageViewModel.getLiveMoreUrl(1, this.pageModel.currentPage, this.pageModel.pageSize)
if (liveReviewDTO && liveReviewDTO.list && liveReviewDTO.list.length > 0) {
if (liveReviewDTO.list.length === this.pageModel.pageSize) {
this.pageModel.hasMore = true
} else {
this.pageModel.hasMore = false
}
// 依据业务请求获取的数据，转换成compDTO数据
let pageContentList: CompDTO[] = [] // 收集页面组件、稿件和本地组件容器
for (let contentDto of liveReviewDTO.list) {
let compDTO: CompDTO = new CompDTO()
compDTO.compType = 'appStyle'
contentDto.appStyle = CompStyle.Card_Comp_Live_Big_Image_02
compDTO.operDataList.push(contentDto)
pageContentList.push(compDTO)
}
// 推送数据到懒加载机制
this.pushDataToPage(pageContentList)
// 完成业务请求加载
this.pageModel.isLoading = false
// 批查
this.allCompBatchRequest(pageContentList)
} else {
this.pageModel.hasMore = false
if (this.pageModel.currentPage === 1) {
// 无业务数据
this.pageNoHaveData()
}
}
this.resolveEnd(resolve)
}
/**
* 处理页面批查业务方法
* @param list
*/
private allCompBatchRequest(compList: CompDTO[]) {
// 获取直播房间的动态数据
this.getLiveRoomDataInfo(compList)
// 测试数据
// setTimeout(() => {
// let time = DateTimeUtils.getTimeStamp().toString()
// let index = 1
// let compBean = compList[index] as CompDTO
// let contentBean = compBean.operDataList[0]
// contentBean.newsTitle = '熬阿斯蒂芬'
// //comp.operDataList[0].newsTitle = '测试111'
// let liveRoomBean: LiveRoomDataBean = {} as LiveRoomDataBean;
// liveRoomBean.pv = 6555
// contentBean.liveRoomDataBean = liveRoomBean
// compBean.timestamp = time
// Logger.debug("ZZZXXXXX",
// "-----setTimeout--------->" + time)
// }, 4 * 1000)
}
/**
* 推数据到页面
* @param list
*/
private pushDataToPage(pageContentList: CompDTO[]) {
// 请求第一页数据，需要清理pageData数据
if (this.pageModel.currentPage == 1) {
this.pageModel.compList.clear()
}
// 懒加载，推送数据
for (let contentDto of pageContentList) {
this.pageModel.compList.push(contentDto)
}
//完成业务数据请求
this.pageModel.pageCompType = TemplatePageStateType.LOADED
}
/**
* 页面没有数据
*/
private pageNoHaveData() {
this.pageModel.pageCompType = TemplatePageStateType.OTHER
this.pageModel.noNormalState = WDViewDefaultType.WDViewDefaultType_NoNetwork
}
/**
* 解析结束
* @param resolve
*/
private resolveEnd(resolve?: (value: string | PromiseLike<string>) => void) {
if (resolve) {
if (this.pageModel.currentPage == 1) {
resolve('已更新至最新')
} else {
resolve('')
}
}
}
}
let templatePageHelp = new TemplatePageHelp();
export default templatePageHelp as TemplatePageHelp;
\ No newline at end of file
... ...
import { ContentDTO } from 'wdBean/Index';
import { BaseDTO } from 'wdBean/src/main/ets/bean/component/BaseDTO';
import { LazyDataSource } from 'wdKit/Index';
import { WDViewDefaultType } from '../../view/EmptyComponent';
import { TemplatePageStateType } from './TemplatePageStateType';
/**
* @Description: 与TemplatePageCompent结合使用，处理业务、异常等数据
* @Author:
* @Email: liyubing@wondertek.com.cn
* @CreateDate:
* @UpdateRemark: 更新说明
* @Version: 1.0
*/
export default class TemplatePageModel {
/**
* 不用的页面所展示的业务数据都转换CompDTO对象
*/
compList: LazyDataSource<BaseDTO> = new LazyDataSource();
/**
* 识别不同页面的业务类型
*/
pageDataSourceType: string = ''
// 页码
currentPage: number = 1
// 一页最多信息量
pageSize: number = 20
// 是否支持加载更多数据
hasMore:boolean = false
// 是否正在请求数据
isLoading: boolean = false
/**
* 此字段可驱动组件展示不同业务的组件，
*/
pageCompType: number = TemplatePageStateType.LOADING
/**
* 异常状态 ——> 记录在获取数据中的不同状态，如无数据、无网络等情况
*/
noNormalState: WDViewDefaultType = WDViewDefaultType.WDViewDefaultType_Default
resolve?: (value: string | PromiseLike<string>) => void
}
\ No newline at end of file
... ...
/**
*
* 组件加载数据的不同状态
*
*/
export const enum TemplatePageStateType {
// 已初始化，但尚未发出请求
INITIAL = 0,
// 加载中:已发出请求,但请求尚未返回；
LOADING,
//
OTHER,
// 已加载结束/非失败/非空/可以是仅一页数据，即楼层数据列表PAGE_GROUP_LIST/
LOADED,
}
\ No newline at end of file
... ...
... ... @@ -263,6 +263,13 @@ export class PageViewModel extends BaseViewModel {
})
}
/**
*
* @param type 1：正在直播，2：预告
* @param pageNum
* @param pageSize
* @returns
*/
async getLiveMoreUrl(type: number, pageNum: number, pageSize: number): Promise<LiveReviewDTO> {
return new Promise<LiveReviewDTO>((success, error) => {
Logger.info(TAG, `getLiveMoreUrl pageInfo start`);
... ... @@ -363,21 +370,22 @@ export class PageViewModel extends BaseViewModel {
async getPageGroupCacheData(pageModel: PageUIReqBean): Promise<PageDTO | null> {
Logger.debug(TAG, 'getPageData pageId: ' + pageModel.pageId);
return new Promise<PageDTO | null>((success) => {
CacheData.getLocalCacheData(CacheData.compGroupInfoDataCacheKey + pageModel.pageId + pageModel.groupId).then((data) => {
// Logger.debug(TAG, 'getPageGroupCacheData 333 ' + JSON.stringify(data));
if (data) {
let navBean = JSON.parse(CacheData.getNetworkData(data)) as PageDTO
success(navBean)
} else {
CacheData.getLocalCacheData(CacheData.compGroupInfoDataCacheKey + pageModel.pageId + pageModel.groupId)
.then((data) => {
// Logger.debug(TAG, 'getPageGroupCacheData 333 ' + JSON.stringify(data));
if (data) {
let navBean = JSON.parse(CacheData.getNetworkData(data)) as PageDTO
success(navBean)
} else {
success(null)
}
})
.catch((err: object) => {
Logger.error(TAG, 'getPageGroupCacheData catch err: ' + JSON.stringify(err));
success(null)
}
}).catch((err: object) => {
Logger.error(TAG, 'getPageGroupCacheData catch err: ' + JSON.stringify(err));
success(null)
})
})
});
}
}
... ...