developOne / harmonyPool

Go to a project
Toggle navigation Toggle navigation pinning
wangliang_wd
f1aa9124 2 parents a53d6bcc 931512e1

Merge branch 'main' of http://192.168.1.42/developOne/harmonyPool into main 

* 'main' of http://192.168.1.42/developOne/harmonyPool:
  feat: 1）修改金刚卡聚合页，用样板组件； 2）必修--金刚位-聚合页存在页面兼容性问题元素被遮挡
  fix: 19041 单图卡-标签和标题间距过大、标题和封面图间距过大，见对比截图
Inline Side-by-side
Showing 8 changed files with 272 additions and 135 deletions
... ... @@ -94,7 +94,7 @@ export struct Card6Component {
.alignSelf(ItemAlign.Start)
.textOverflow({ overflow: TextOverflow.Ellipsis }) // 超出的部分显示省略号。
.textIndent((this.contentDTO.newTags?.length || this.contentDTO.seoTags?.length) > 2 &&
(this.contentDTO.newTags?.length || this.contentDTO.seoTags?.length) < 5 ? 58 :
(this.contentDTO.newTags?.length || this.contentDTO.seoTags?.length) < 5 ? (12 + (this.contentDTO.newTags?.length || this.contentDTO.seoTags?.length) * 11) :
((this.contentDTO.newTags?.length > 0 || this.contentDTO.seoTags?.length > 0) || this.contentDTO.objectType == '5' || this.contentDTO.top === 1) ? 35 :
0 )
}.alignContent(Alignment.TopStart)
... ...
import { ContentDTO , Action,GoldenPositionExtraBean, CompDTO} from 'wdBean';
import { CommonConstants ,ViewType} from 'wdConstant';
import { Action, CompDTO, ContentDTO } from 'wdBean';
import { CommonConstants, ViewType } from 'wdConstant';
import PageViewModel from '../../viewmodel/PageViewModel';
import PageModel from '../../viewmodel/PageModel';
import { DateTimeUtils, LazyDataSource } from 'wdKit/Index';
import router from '@ohos.router';
import { CardParser } from '../CardParser';
import { channelSkeleton } from '../skeleton/channelSkeleton'
import { channelSkeleton } from '../skeleton/channelSkeleton';
import { ErrorComponent } from '../view/ErrorComponent';
import { EmptyComponent } from '../view/EmptyComponent';
import { listTouchEvent } from '../../utils/PullDownRefresh';
... ... @@ -14,13 +13,21 @@ import { RefreshLayoutBean } from '../refresh/RefreshLayoutBean';
import RefreshLayout from '../refresh/RefreshLayout';
import PageNoMoreLayout from './PageNoMoreLayout';
import { NoMoreBean } from './NoMoreBean';
import CommonPageTitle from './CommonPageTitle';
import TemplatePageComponent from './template/TemplatePageComponent';
import { TemplatePageConstant } from './template/TemplatePageConstant';
const TAG: string = 'ThemeListPage';
/**
* 金刚卡位聚合页
*/
@Entry
@Component
struct ThemeListPage {
@State private pageModel: PageModel = new PageModel();
@State topSafeHeight: number = AppStorage.get<number>('topSafeHeight') as number;
@State bottomSafeHeight: number = AppStorage.get<number>('bottomSafeHeight') || 0
// @State private pageModel: PageModel = new PageModel();
sort: number = 1;
currentPage: number = 1;
pageSize: number = 20;
... ... @@ -29,129 +36,27 @@ struct ThemeListPage {
@State private pageAdvModel: PageAdModel = new PageAdModel();
aboutToAppear(): void {
let par:Action = router.getParams() as Action;
let par: Action = router.getParams() as Action;
let params = par?.params;
this.extra = params?.extra?.extra || '';
this.title = params?.extra?.title || '';
this.pageModel.pageType = 1;
this.pageModel.extra = this.extra;
PageViewModel.postThemeList(this.currentPage, this.pageSize,this.extra).then((liveReviewDTO) => {
console.log(`postThemeList${JSON.stringify(liveReviewDTO)}`)
this.pageModel.compList.addItems(liveReviewDTO.list)
if(this.pageModel.compList.getDataArray().length > 0){
this.pageModel.viewType = ViewType.LOADED;
}else{
this.pageModel.viewType = ViewType.EMPTY
}
})
}
build() {
Column() {
this.TabbarNormal()
if (this.pageModel.viewType == ViewType.LOADING) {
this.LoadingLayout()
} else if (this.pageModel.viewType == ViewType.ERROR) {
ErrorComponent()
} else if (this.pageModel.viewType == ViewType.EMPTY) {
EmptyComponent()
} else {
this.ListLayout()
}
}
.padding({
bottom: $r('app.float.card_comp_pagePadding_tb')
})
.onTouch((event: TouchEvent | undefined) => {
if (event) {
if (this.pageModel.viewType === ViewType.LOADED) {
listTouchEvent(this.pageModel, this.pageAdvModel, event);
}
}
})
}
@Builder
LoadingLayout() {
channelSkeleton()
}
/*导航栏*/
@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)// .height('42lpx')
.maxLines(1)
.id("title")
.fontSize('35lpx')
.fontWeight(400)
.fontColor($r('app.color.color_222222'))
.lineHeight('42lpx')
.alignRules({
center: { anchor: "__container__", align: VerticalAlign.Center },
middle: { anchor: "__container__", align: HorizontalAlign.Center }
})
//常见标题
CommonPageTitle({ title: this.title })
// 通用模板组件
TemplatePageComponent({ pageDataSourceType: TemplatePageConstant.THEME_LIST_PAGE, extra: this.extra })
}
.height(44)
.width('100%')
.height('100%')
.backgroundColor(Color.White)
.padding({
left: $r('app.float.card_comp_pagePadding_lf'),
right: $r('app.float.card_comp_pagePadding_lf'),
})
}
@Builder
ListLayout() {
List() {
// 下拉刷新
ListItem() {
RefreshLayout({
refreshBean: new RefreshLayoutBean(this.pageModel.isVisiblePullDown, this.pageModel.load,
this.pageModel.offsetY)
})
}
LazyForEach(this.pageModel.compList, (contentDTO: ContentDTO, contentIndex: number) => {
ListItem() {
Column() {
CardParser({compDTO:new CompDTO, contentDTO });
}
}
},
(contentDTO: ContentDTO, contentIndex: number) => contentDTO.pageId + contentIndex.toString()
)
// 加载更多
ListItem() {
if (this.pageModel.hasMore) {
// LoadMoreLayout({
// refreshBean: new RefreshLayoutBean(this.pageModel.isVisiblePullUpLoad, this.pageModel.pullUpLoadImage,
// this.pageModel.pullUpLoadText, this.pageModel.pullUpLoadHeight)
// })
} else {
PageNoMoreLayout({ noMoreBean: new NoMoreBean(this.pageModel.pageInfo.baselineCopywriting) })
}
}
}
.scrollBar(BarState.Off)
.cachedCount(8)
.height(CommonConstants.FULL_PARENT)
.onScrollIndex((start: number, end: number) => {
this.pageModel.startIndex = start;
this.pageModel.endIndex = end;
top: px2vp(this.topSafeHeight),
bottom: px2vp(this.bottomSafeHeight)
})
}
}
\ No newline at end of file
... ...
import { CompDTO, ContentDTO, LiveRoomDataBean, ReserveBean, ReserveItemBean } from 'wdBean/Index'
import { DateTimeUtils, Logger } from 'wdKit/Index'
import { HttpUtils } from 'wdNetwork/Index'
import { CompDTO,
ContentBean,
ContentDTO,
InteractDataDTO,
InteractParam, LiveRoomDataBean, ReserveBean, ReserveItemBean } from 'wdBean/Index'
import { BaseDTO } from 'wdBean/src/main/ets/bean/component/BaseDTO'
import { CollectionUtils, DateTimeUtils, LazyDataSource, Logger, StringUtils } from 'wdKit/Index'
import { HttpUtils, ResponseDTO } from 'wdNetwork/Index'
import { PageRepository } from '../../../repository/PageRepository'
import { LiveModel } from '../../../viewmodel/LiveModel'
import PageViewModel from '../../../viewmodel/PageViewModel'
... ... @@ -64,7 +70,6 @@ export class BasePageHelp {
* 请求获取直播房间的动态数据
* @param compList
*/
getLiveRoomDataInfo(compList: CompDTO[]) {
let list: ContentDTO[] = []
... ... @@ -110,4 +115,143 @@ export class BasePageHelp {
});
return idList.join(',')
}
/**
* 批查稿件的互动数据，如 评论人数等
* @param compList
* @returns
*/
async getInteractData(compList: CompDTO[]) {
let param: InteractParam = this.getInteractParams(compList);
const SIZE = 20;
// 批查接口，参数size限制20，这里截断分批查询，0,20；20,40...
let count = Math.ceil(param.contentList.length / SIZE);
let promises: Array<Promise<InteractDataDTO[]>> = new Array;
if (count == 1) {
let promise: Promise<InteractDataDTO[]> = this.createInteractDataPromise(param);
promises.push(promise);
} else {
for (let i = 1; i <= count; i++) {
// 将查询参数截断（参数限制20个），分批请求接口
let subList = new Array<ContentBean>();
let start = 0;
let end = 0;
if (i == count) {
start = (i - 1) * SIZE;
end = param.contentList.length;
subList = CollectionUtils.getSubElements(param.contentList, start, end)
} else {
start = (i - 1) * SIZE;
end = start + SIZE;
subList = CollectionUtils.getSubElements(param.contentList, start, end)
}
let subParam: InteractParam = {} as InteractParam;
subParam.contentList = subList;
let promise: Promise<InteractDataDTO[]> = this.createInteractDataPromise(subParam);
promises.push(promise);
}
}
return new Promise<InteractDataDTO[]>((success, error) => {
Promise.all(promises).then((result) => {
if (!CollectionUtils.isArray(result)) {
success(new Array<InteractDataDTO>());
return;
}
let allInteractDataList: Array<InteractDataDTO> = new Array();
result.forEach((value: InteractDataDTO[]) => {
if (value != null && value.length > 0) {
allInteractDataList.push(...value);
}
})
// 批查全部完成，统一设置到comp里
// this.resetInteract(allInteractDataList, compList);
success(allInteractDataList);
})
})
}
private getInteractParams(compList: CompDTO[]): InteractParam {
if (compList == null || compList.length == 0) {
return {} as InteractParam;
}
let param: InteractParam = {} as InteractParam;
param.contentList = new Array<ContentBean>();
compList.forEach((value) => {
let contentList = value.operDataList;
let letBatch = false
// 只有稿件才能批查
if (!Number.isNaN(Number(value.compStyle))) {
letBatch = true
}
if (letBatch) {
if (contentList != null && contentList.length == 1) { // 对只有一条数据的稿件参与批查
contentList.forEach((v) => {
if (StringUtils.isNotEmpty(v.objectId)) {
let bean = {} as ContentBean;
bean.contentId = v.objectId;
bean.contentType = v.objectType;
param.contentList.push(bean);
}
})
}
}
})
return param;
}
private createInteractDataPromise(param: InteractParam) {
return new Promise<InteractDataDTO[]>((success, error) => {
PageRepository.fetchInteractData(param).then((resDTO: ResponseDTO<InteractDataDTO[]>) => {
if (!resDTO || !resDTO.data) {
Logger.info(TAG, "getInteractData then,resDTO.timeStamp:" + resDTO.timestamp);
success([]);
return;
}
success(resDTO.data);
}).catch((err: Error) => {
Logger.error(TAG, `getInteractData catch, error.name : ${err.name}, error.message:${err.message}`);
// 无论是否成功（暂不做重试），都回调结果，通知刷新数据
success([]);
})
});
}
/**
* 刷新互动数据到compList
* @param interact 批查互动数据结果
* @param compList comp list
*/
resetInteract(interact: InteractDataDTO[], compList: BaseDTO[]) {
if (interact == null || interact.length == 0) {
return
}
let time = DateTimeUtils.getTimeStamp().toString()
interact.forEach((interactData) => {
let id = interactData.contentId;
outer: for (let i = 0; i < compList.length; i++) {
let comp = compList[i] as CompDTO;
if (comp == null || comp.operDataList == null || comp.operDataList.length == 0) {
continue;
}
for (let j = 0; j < comp.operDataList.length; j++) {
let content = comp.operDataList[j];
if (content == null) {
continue;
}
if (id == content.objectId) {
content.interactData = interactData;
comp.timestamp = time
break outer;
}
}
}
})
}
}
\ No newline at end of file
... ...
... ... @@ -23,6 +23,7 @@ const TAG: string = 'TemplatePageComponent';
*/
@Component
export default struct TemplatePageComponent {
// 模板页面的数据驱动对象
@State private templatePage: TemplatePageModel = new TemplatePageModel
// 此内容主要因CustomPullToRefresh需要，目前没任何业务意义要求
... ... @@ -31,11 +32,14 @@ export default struct TemplatePageComponent {
private templateScroller: Scroller = new Scroller()
//识别不同页面的业务类型
pageDataSourceType: string = ''
@State listColor: Resource = $r('app.color.color_fff')
// 埋点字段
pageId: string = ''
pageName: string = ''
extra: string = ''
async aboutToAppear() {
Logger.debug(TAG, 'aboutToAppear')
this.requestPageData()
... ... @@ -81,8 +85,6 @@ export default struct TemplatePageComponent {
if (this.templatePage.pageCompType === TemplatePageStateType.LOADING) {
this.LoadingLayout()
} else if (this.templatePage.pageCompType === TemplatePageStateType.LOADED) {
CustomPullToRefresh({
alldata: this.pageData,
scroller: this.templateScroller,
... ... @@ -168,6 +170,7 @@ export default struct TemplatePageComponent {
}
this.templatePage.pageDataSourceType = this.pageDataSourceType
this.templatePage.extra = this.extra
TemplatePageHelp.requestPageData(this.templatePage)
}
... ...
... ... @@ -18,4 +18,10 @@ export class TemplatePageConstant {
public static LIVE_PORTEND_PAGE :string = 'live_portend_page'
/**
* 金刚卡位聚会页
*/
public static THEME_LIST_PAGE :string = 'theme_list_page'
}
\ No newline at end of file
... ...
import { CompDTO } from 'wdBean/Index';
import { CompDTO, InteractDataDTO } from 'wdBean/Index';
import { CompStyle } from 'wdConstant/Index';
import { DateTimeUtils, NetworkUtil } from 'wdKit/Index';
import PageViewModel from '../../../viewmodel/PageViewModel';
... ... @@ -40,8 +40,8 @@ export class TemplatePageHelp extends BasePageHelp {
// 加载缓存数据了，不用无网络提示
} else {
// 无网情况
pageModel.pageCompType = TemplatePageStateType.OTHER;
pageModel.noNormalState = WDViewDefaultType.WDViewDefaultType_NoNetwork
this.pageModel.pageCompType = TemplatePageStateType.OTHER
this.pageModel.noNormalState = WDViewDefaultType.WDViewDefaultType_NoNetwork
}
}
... ... @@ -61,6 +61,9 @@ export class TemplatePageHelp extends BasePageHelp {
} else if (this.pageModel.pageDataSourceType === TemplatePageConstant.LIVE_PORTEND_PAGE) {
// 直播预告
this.requestLivePortendData(this.pageModel.resolve)
} else if (this.pageModel.pageDataSourceType === TemplatePageConstant.THEME_LIST_PAGE) {
// 金刚卡位聚合页
this.requestThemeListData(this.pageModel.resolve)
}
}
... ... @@ -171,15 +174,80 @@ export class TemplatePageHelp extends BasePageHelp {
this.pageModel.isLoading = false
}
/**
* 请求金刚卡位聚合页数据
*/
private async requestThemeListData(resolve?: (value: string | PromiseLike<string>) => void) {
this.pageModel.isLoading = true
const liveReviewDTO =
await PageViewModel.postThemeList(this.pageModel.currentPage, this.pageModel.pageSize, this.pageModel.extra)
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 time = DateTimeUtils.getTimeStamp().toString()
let pageContentList: CompDTO[] = [] // 收集页面组件、稿件和本地组件容器
for (let contentDto of liveReviewDTO.list) {
let compDTO: CompDTO = new CompDTO()
compDTO.compType = 'appStyle'
contentDto.appStyle = contentDto.appStyle
if (this.pageModel.isEmitter) {
contentDto.timestamp = time
}
compDTO.operDataList.push(contentDto)
pageContentList.push(compDTO)
}
// 推送数据到懒加载机制
this.pushDataToPage(pageContentList)
// 批查
this.allCompBatchRequest(pageContentList)
} else {
this.pageModel.hasMore = false
if (this.pageModel.currentPage === 1) {
// 无业务数据
this.pageNoHaveData()
this.pageModel.pageCompType = TemplatePageStateType.OTHER
this.pageModel.noNormalState = WDViewDefaultType.WDViewDefaultType_NoContent2
}
}
this.resolveEnd(resolve)
// 完成业务请求加载
this.pageModel.isLoading = false
}
/**
* 处理页面批查业务方法
* @param list
*/
private allCompBatchRequest(compList: CompDTO[]) {
// 获取直播房间的动态数据
// 获取直播房间的动态数据 如直播观看人数
this.getLiveRoomDataInfo(compList)
// 获取互动数据，如评论数量等
this.getInteractData(compList).then((data: InteractDataDTO[]) => {
// 刷新，替换所有数据
this.resetInteract(data, compList)
})
}
... ... @@ -207,9 +275,10 @@ export class TemplatePageHelp extends BasePageHelp {
*/
private pageNoHaveData() {
this.pageModel.pageCompType = TemplatePageStateType.OTHER
this.pageModel.noNormalState = WDViewDefaultType.WDViewDefaultType_NoNetwork
this.pageModel.noNormalState = WDViewDefaultType.WDViewDefaultType_NoListContent
}
/**
* 解析结束
* @param resolve
... ...
... ... @@ -33,6 +33,9 @@ export default class TemplatePageModel {
haveDataShow: boolean = false
// 接收Emitter事件，需要刷新界面，此时就需要对展示业务进行驱动更新
isEmitter: boolean = false
// 扩展字段
extra :string = ''
/**
* 此字段可驱动组件展示不同业务的组件，
*/
... ... @@ -41,5 +44,6 @@ export default class TemplatePageModel {
* 异常状态 ——> 记录在获取数据中的不同状态，如无数据、无网络等情况
*/
noNormalState: WDViewDefaultType = WDViewDefaultType.WDViewDefaultType_Default
resolve?: (value: string | PromiseLike<string>) => void
}
\ No newline at end of file
... ...
... ... @@ -296,22 +296,28 @@ export class PageViewModel extends BaseViewModel {
})
})
}
async postThemeList(pageNum: number, pageSize: number, extra: string): Promise<LiveReviewDTO> {
/**
* 金刚卡聚合页
* @param pageNum
* @param pageSize
* @param extra
* @returns
*/
async postThemeList(pageNum: number, pageSize: number, extra: string): Promise<LiveReviewDTO | null> {
let bean: GoldenPositionExtraBean = JSON.parse(extra)
bean.pageNum = pageNum
bean.pageSize = pageSize
return new Promise<LiveReviewDTO>((success, error) => {
return new Promise<LiveReviewDTO| null>((success, error) => {
Logger.info(TAG, `postThemeList pageInfo start`);
PageRepository.postThemeList(bean).then((resDTO) => {
if (!resDTO || !resDTO.data) {
Logger.error(TAG, 'postThemeList then navResDTO is empty');
error('resDTO is empty');
success(null);
return
}
if (resDTO.code != 0) {
Logger.error(TAG, `postThemeList then code:${resDTO.code}, message:${resDTO.message}`);
error('resDTO Response Code is failure');
success(null);
return
}
// let navResStr = JSON.stringify(navResDTO);
... ... @@ -319,7 +325,7 @@ export class PageViewModel extends BaseViewModel {
success(resDTO.data);
}).catch((err: Error) => {
Logger.error(TAG, `postThemeList catch, error.name : ${err.name}, error.message:${err.message}`);
error(err);
success(null);
})
})
}
... ...