developOne / harmonyPool

Go to a project
Toggle navigation Toggle navigation pinning
wangliang_wd
3b0a7de0 2 parents 0a473a50 7ad828d3

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）bug列表缺陷修改（直播详情/电子报）
  竖屏直播入口
  竖屏直播入口
  feat(动态详情)：UI绘制
  兴趣询问卡ui
  feat：1）直播详情直播状态UI修改优化；2）直播和预约直播接口状态添加；3）直播列表跳转事件添加
  feat: 骨架屏
  注释未支持组件的占位
  feat: 骨架屏提示
  feat: 骨架屏
Inline Side-by-side
Showing 57 changed files with 1102 additions and 183 deletions
... ... @@ -2,7 +2,7 @@
* ResponseDTO
*/
export interface ResponseDTO<T = string> {
success:boolean;
success: boolean;
// 服务请求响应值/微服务响应状态码”
code: number;
... ... @@ -12,6 +12,7 @@ export interface ResponseDTO<T = string> {
// 响应结果
data?: T;
totalCount?: number;
// 请求响应时间戳（unix格式）
timestamp?: number;
... ...
... ... @@ -43,6 +43,7 @@ export class WDRouterPage {
static detailPlayVodPage = new WDRouterPage("wdDetailPlayVod", "ets/pages/DetailPlayVodPage");
// 直播详情页
static detailPlayLivePage = new WDRouterPage("wdDetailPlayLive", "ets/pages/DetailPlayLivePage");
static detailPlayVLivePage = new WDRouterPage("wdDetailPlayLive", "ets/pages/DetailPlayVLivePage");
// 多图(图集)详情页
static multiPictureDetailPage = new WDRouterPage("phone", "ets/pages/detail/MultiPictureDetailPage");
// 音乐详情页
... ...
... ... @@ -167,16 +167,19 @@ export interface LiveDetailsBean {
}
export interface LiveInfo {
//直播新闻-直播状态 wait待开播running直播中end已结束cancel已取消paused暂停
//直播新闻-直播状态 wait 待开播 running 直播中 end 已结束cancel已取消paused暂停
liveState: string
//2024-04-12 15:00:00 直播开始时间
planStartTime: string
liveStyle: number;
vlive: Array<Vlive>
mlive:MLive
mlive: MLive
}
export interface MLive {
mliveId:string
mliveId: string
}
export interface FullColumnImgUrls {
url: string
}
... ...
... ... @@ -63,3 +63,5 @@ export { SpacialTopicPageComponent } from './src/main/ets/components/SpacialTopi
export { LogoutViewModel } from "./src/main/ets/viewmodel/LogoutViewModel"
export { newsSkeleton } from "./src/main/ets/components/skeleton/newsSkeleton"
... ...
... ... @@ -58,9 +58,9 @@ export struct CardParser {
}
else {
// todo:组件未实现 / Component Not Implemented
Text(contentDTO.appStyle)
.width(CommonConstants.FULL_PARENT)
.padding(10)
// Text(contentDTO.appStyle)
// .width(CommonConstants.FULL_PARENT)
// .padding(10)
// .backgroundColor(Color.Brown) // 展示本页未实现的compStyle
}
}
... ...
... ... @@ -66,9 +66,9 @@ export struct CompParser {
}
else {
// todo:组件未实现 / Component Not Implemented
Text(compDTO.compStyle)
.width(CommonConstants.FULL_PARENT)
.padding(10)
// Text(compDTO.compStyle)
// .width(CommonConstants.FULL_PARENT)
// .padding(10)
// .backgroundColor(Color.Brown) // 展示本页未实现的compStyle
}
}
... ...
... ... @@ -35,63 +35,63 @@ export struct DynamicDetailComponent {
//logo、日期
Row() {
Image($r('app.media.ic_article_rmh'))
.width(80)
.height(28)
.margin({ left: 16 })
.width($r('app.float.margin_80'))
.height($r('app.float.margin_28'))
.margin({ left: $r('app.float.margin_16') })
Blank()
Text("2023年03月14日 08:16")
.fontColor($r('app.color.color_B0B0B0'))
.fontSize(12)
.lineHeight(28)
.margin({ right: 16 })
.fontSize($r('app.float.font_size_12'))
.lineHeight($r('app.float.margin_28'))
.margin({ right: $r('app.float.margin_16') })
}
.height(48)
.height($r('app.float.margin_48'))
.width('100%')
//分割线
Image($r('app.media.ic_news_detail_division'))
.width('100%')
.height(7)
.margin({left: 16, right: 16} )
.height($r('app.float.margin_7'))
.margin({left: $r('app.float.margin_16'), right: $r('app.float.margin_16')} )
//号主信息
Row() {
//头像
Stack() {
Image(this.contentDetailData.rmhInfo?.rmhHeadUrl)
.alt(this.contentDetailData.rmhInfo?.userType=='1'?$r('app.media.default_head'):$r('app.media.icon_default_head_mater'))
.width('32')
.height('32')
.width($r('app.float.margin_32'))
.height($r('app.float.margin_32'))
.objectFit(ImageFit.Cover)
.borderRadius(16)
.borderRadius($r('app.float.margin_16'))
Image($r('app.media.icon_border_test'))
.width('48')
.height('48')
.width($r('app.float.margin_48'))
.height($r('app.float.margin_48'))
.objectFit(ImageFit.Cover)
.borderRadius(24)
.borderRadius($r('app.float.margin_24'))
}
.width(48)
.height(48)
.width($r('app.float.margin_48'))
.height($r('app.float.margin_48'))
.alignContent(Alignment.Center)
Column(){
//昵称
Text("this.contentDetailData.rmhInfo?.rmhName")
.fontSize(14)
.fontSize($r('app.float.font_size_14'))
.fontColor($r('app.color.color_222222'))
.fontWeight(FontWeight.Medium)
.margin({ left: 5 })
.margin({ left: $r('app.float.margin_5') })
//简介
Text("this.contentDetailData.rmhInfo?.rmhDesc")
.fontSize(14)
.fontSize($r('app.float.font_size_14'))
.fontColor($r('app.color.color_B0B0B0'))
.fontWeight(FontWeight.Medium)
.margin({ left: 5 })
.margin({ left: $r('app.float.margin_5') })
}
if (!this.followStatus) {
Text('关注')
.width(60)
.height(24)
.height($r('app.float.margin_48'))
.textAlign(TextAlign.Center)
.fontSize($r('app.float.font_size_12'))
.borderRadius($r('app.float.button_border_radius'))
.borderRadius($r('app.float.vp_3'))
.backgroundColor($r('app.color.color_ED2800'))
.fontColor($r('app.color.color_fff'))
.onClick(() => {
... ... @@ -99,12 +99,12 @@ export struct DynamicDetailComponent {
})
} else {
Text('已关注')
.width(60)
.height(24)
.width($r('app.float.margin_60'))
.height($r('app.float.margin_48'))
.borderWidth(1)
.textAlign(TextAlign.Center)
.fontSize($r('app.float.font_size_12'))
.borderRadius($r('app.float.button_border_radius'))
.borderRadius($r('app.float.vp_3'))
.borderColor($r('app.color.color_CCCCCC'))
.fontColor($r('app.color.color_CCCCCC'))
.onClick(() => {
... ... @@ -113,6 +113,53 @@ export struct DynamicDetailComponent {
}
}
.width('100%')
//内容
Text("这里展示标题这里展示标题这里展示标题这里这里展示标题这里展示标题这里展示标题这里这里展示标题这里展示标题这里展示标题这里")
.fontColor($r('app.color.color_222222'))
.fontSize($r('app.float.font_size_18'))
.lineHeight($r('app.float.margin_25'))
.margin({ top: $r('app.float.margin_6')
,left: $r('app.float.margin_16')
,right: $r('app.float.margin_16') })
//特别声明
Text("特别声明：本文为人民日报新媒体平台“人民号”作者上传并发布，仅代表作者观点。人民日报仅提供信息发布平台。")
.fontColor($r('app.color.color_CCCCCC'))
.fontSize($r('app.float.font_size_12'))
.lineHeight($r('app.float.margin_16'))
.margin({ top: $r('app.float.margin_16')
,left: $r('app.float.margin_16')
,right: $r('app.float.margin_16') })
//微信/朋友圈/微博
Row(){
Image($r('app.media.xxhdpi_pic_wechat'))
.width($r('app.float.margin_116'))
.height($r('app.float.margin_36'))
.objectFit(ImageFit.Cover)
Image($r('app.media.xxhdpi_pic_pyq'))
.width($r('app.float.margin_116'))
.height($r('app.float.margin_36'))
.margin({ left: $r('app.float.margin_4_negative')})
.objectFit(ImageFit.Cover)
Image($r('app.media.xxhdpi_pic_wb'))
.width($r('app.float.margin_116'))
.height($r('app.float.margin_36'))
.margin({ left: $r('app.float.margin_4_negative')})
.objectFit(ImageFit.Cover)
}
.margin({ top: $r('app.float.margin_24')})
//点赞
Row(){
Image($r('app.media.icon_like_selected_redheart'))
.width($r('app.float.margin_24'))
.height($r('app.float.margin_24'))
.objectFit(ImageFit.Cover)
Text("2.6万")
.fontColor($r('app.color.color_999999'))
.fontSize($r('app.float.font_size_16'))
.lineHeight($r('app.float.margin_20'))
.margin({ left: $r('app.float.margin_2')})
}
//评论组件/底部组件
}
}
.backgroundColor('#FFFFFFFF')
... ...
... ... @@ -2,6 +2,7 @@ import { Action, NewspaperListItemBean, NewspaperPositionItemBean, Params } from
import { ExtraDTO } from 'wdBean/src/main/ets/bean/component/extra/ExtraDTO';
import { StringUtils } from 'wdKit';
import { WDRouterRule } from 'wdRouter';
import { newsSkeleton } from './skeleton/newsSkeleton';
@Component
export struct ENewspaperItemComponent {
... ... @@ -11,13 +12,20 @@ export struct ENewspaperItemComponent {
private startX: number = 0
private startY: number = 0
private itemBeanClicked: NewspaperPositionItemBean = {} as NewspaperPositionItemBean
@State isShowSkeleton: boolean = true
build() {
Stack() {
newsSkeleton()
.visibility(this.isShowSkeleton ? Visibility.Visible : Visibility.None)
Image(this.newspaperListItemBean.pagePic)
.width('100%')
.aspectRatio(378 / 566)
.objectFit(ImageFit.Fill)
.onComplete(() => {
this.isShowSkeleton = false
})
.visibility(this.isShowSkeleton ? Visibility.None : Visibility.Visible)
Canvas(this.context)
.width('100%')
... ... @@ -62,7 +70,7 @@ export struct ENewspaperItemComponent {
pageID: 'IMAGE_TEXT_DETAIL',
extra: {
relType: this.itemBeanClicked.relType ?? '',
relId: ''+this.itemBeanClicked.relId,
relId: '' + this.itemBeanClicked.relId,
sourcePage: '5'
} as ExtraDTO
} as Params,
... ...
... ... @@ -110,11 +110,11 @@ export struct ENewspaperPageComponent {
})
Row() {
Text(this.calendarDate)
Text(this.calendarDate?.replace('-', '.')?.replace('-', '.'))
.fontSize($r('app.float.font_size_20'))
.fontColor($r('app.color.white'))
.fontFamily('BebasNeue_Regular')
.fontWeight(FontWeight.Bold)
.fontWeight(FontWeight.Regular)
Image($r('app.media.icon_triangle'))
.width($r('app.float.border_radius_6'))
... ... @@ -167,6 +167,7 @@ export struct ENewspaperPageComponent {
.autoPlay(false)
.cachedCount(3)
.indicator(false)
.loop(false)
.displayCount(1)
.margin({ top: 35, left: 10, right: 10 })
.id('e_newspaper_content')
... ... @@ -191,12 +192,13 @@ export struct ENewspaperPageComponent {
.id('e_newspaper_shadow')
Row() {
Text('滑动查看下一版')
Text(this.swiperIndex + 1 == this.newspaperListBean?.list?.length ? '已到底部，可以选择其他日期' : '滑动查看下一版')
.fontColor(Color.White)
.fontSize($r('app.float.font_size_14'))
Image($r('app.media.icon_next_page'))
.width($r('app.float.vp_16'))
.height($r('app.float.vp_16'))
.visibility(this.swiperIndex + 1 == this.newspaperListBean?.list?.length ? Visibility.None : Visibility.Visible)
}
.justifyContent(FlexAlign.Center)
.margin({ top: $r('app.float.margin_16') })
... ...
import { CompDTO, ContentDTO } from 'wdBean';
import { CommonConstants } from 'wdConstant/Index';
import { CollectionUtils, DateTimeUtils, Logger, StringUtils, ToastUtils } from 'wdKit/Index';
import PageViewModel from '../../viewmodel/PageViewModel';
const TAG = 'Zh_Grid_Layout-02';
const FULL_PARENT: string = '100%';
... ... @@ -11,46 +13,76 @@ let listSize: number = 2;
* Zh_Grid_Layout-02
*
*/
@Preview
@Component
export struct ZhGridLayout02 {
@State compDTO: CompDTO = {} as CompDTO
@State operDataList: ContentDTO[] = []
currentPage = 1
pageSize = 12
aboutToAppear() {
if (this.compDTO.operDataList) {
listSize = this.compDTO.operDataList.length > 5 ? 2 : this.compDTO.operDataList.length;
}
Logger.debug(TAG, 'aboutToAppear ' + this.compDTO.objectTitle)
this.currentPage = 1
PageViewModel.getLiveReviewUrl(this.currentPage, this.pageSize).then((liveReviewDTO) => {
this.operDataList = []
this.operDataList.push(...liveReviewDTO.list)
})
}
build() {
Column() {
Row() {
Image($r("app.media.redLine"))
.width(3)
.height(16)
.margin({ right: 4 })
Text(this.compDTO.objectTitle)
.fontSize($r("app.float.font_size_17"))
.fontColor($r("app.color.color_222222"))
.fontWeight(600)
}
.justifyContent(FlexAlign.Start)
.margin({ top: 8, bottom: 8 })
.width(CommonConstants.FULL_WIDTH)
GridRow({
columns: { sm: listSize, md: 2 },
breakpoints: { value: ['320vp', '520vp', '840vp'] }
}) {
ForEach(this.compDTO.operDataList, (item: ContentDTO, index: number) => {
GridCol() {
this.buildItemCard(this.compDTO.operDataList[index]);
Scroll() {
Column() {
Row() {
Image($r("app.media.redLine"))
.width(3)
.height(16)
.margin({ right: 4 })
Text(this.compDTO.objectTitle)
.fontSize($r("app.float.font_size_17"))
.fontColor($r("app.color.color_222222"))
.fontWeight(600)
}
.justifyContent(FlexAlign.Start)
.margin({ top: 8, bottom: 8 })
.width(CommonConstants.FULL_WIDTH)
GridRow({
columns: { sm: listSize, md: 2 },
breakpoints: { value: ['320vp', '520vp', '840vp'] }
}) {
ForEach(this.operDataList, (item: ContentDTO, index: number) => {
GridCol() {
this.buildItemCard(item);
}
})
}
})
}
}
.width("100%")
.height("100%")
// .layoutWeight(1)
.edgeEffect(EdgeEffect.None)
.scrollBar(BarState.Off)
.onReachStart(() => {
Logger.debug(TAG, 'onReachStart')
})
.onReachEnd(() => {
Logger.debug(TAG, 'onReachEnd')
this.addItems()
})
.nestedScroll({
scrollForward: NestedScrollMode.PARENT_FIRST,
scrollBackward: NestedScrollMode.SELF_FIRST
})
}
.width(CommonConstants.FULL_WIDTH)
// .width("100%")
.height("100%")
// .layoutWeight(1)
.padding({
top: 14,
left: 16,
... ... @@ -78,6 +110,15 @@ export struct ZhGridLayout02 {
}
.width('100%')
}
addItems() {
Logger.debug(TAG, 'addItems')
this.currentPage++
PageViewModel.getLiveReviewUrl(this.currentPage, this.pageSize).then((liveReviewDTO) => {
this.operDataList.push(...liveReviewDTO.list)
Logger.debug(TAG, 'addItems after: ' + this.operDataList.length)
})
}
}
... ...
import { CompDTO, ContentDTO, Params } from 'wdBean';
import { WDRouterPage, WDRouterRule } from 'wdRouter/Index';
import { HttpUrlUtils } from 'wdNetwork/Index';
import { postInteractAccentionOperateParams } from 'wdBean';
import { PageRepository } from '../repository/PageRepository';
import { CommonConstants } from 'wdConstant/Index';
/**
* 精选评论卡
* Zh_Single_Row-06
*/
const TAG = 'Zh_Single_Row-06'
@Entry
@Component
export struct ZhSingleRow06 {
@State compDTO: CompDTO = {} as CompDTO
@State list: Array<string> = ['社会', '三个字', '是四个字', '时事', '社会', '三个字', '是四个字', '时事']
@State activeIndexs: Array<number> = []
getItemWidth(index: number) {
if (index % 4 === 0 || index % 4 === 3) {
return 80
} else {
return 96
}
}
build() {
Column() {
//顶部
this.CompHeader(this.compDTO)
Grid() {
ForEach(this.list, (item: string, index: number) => {
GridItem() {
Text(item)
.fontSize(14)
.fontColor(this.activeIndexs.includes(index) ? 0x222222 : 0x666666)
.fontWeight(this.activeIndexs.includes(index) ? 600 : 400)
.textAlign(TextAlign.Center)
}
.onClick(() => {
if (this.activeIndexs.includes(index)) {
const ind = this.activeIndexs.indexOf(index);
this.activeIndexs.splice(ind, 1)
} else {
this.activeIndexs.push(index)
}
})
})
}
.height(70)
.columnsTemplate('1fr 1fr 1fr 1fr')
.rowsTemplate('1fr 1fr')
.margin({bottom: 10})
Text('选中标签，为您推荐更多您感兴趣的内容')
.fontSize(12)
.fontColor(0xB0B0B0)
.textAlign(TextAlign.Center)
.margin({bottom: 10})
Row() {
Text('选好了')
.fontSize(14)
.fontColor(0x000000)
.width('100%')
.textAlign(TextAlign.Center)
}
.height(40)
.backgroundColor(0xf9f9f9)
.width('100%')
.borderRadius(3)
}
.padding({
left: $r('app.float.card_comp_pagePadding_lf'),
right: $r('app.float.card_comp_pagePadding_lf'),
top: $r('app.float.card_comp_pagePadding_tb'),
bottom: $r('app.float.card_comp_pagePadding_tb')
})
.backgroundColor($r('app.color.white'))
.margin({ bottom: 8 })
}
@Builder
CompHeader(item: CompDTO) {
Row() {
Row() {
Image($r("app.media.icon_interest_ask"))
.width(24)
.height(24)
.margin({ right: 4 })
Text('以下是否有您感兴趣？')
.fontSize($r("app.float.font_size_17"))
.fontColor(0x000000)
.fontWeight(600)
}
Row() {
Image($r("app.media.close_button"))
.width(14)
.height(14)
.onClick(() => {
})
}
.padding({
right: $r('app.float.card_comp_pagePadding_lf'),
})
}
.justifyContent(FlexAlign.SpaceBetween)
.margin({ top: 8, bottom: 8 })
.width('100%')
}
}
@Extend(Text)
function textOverflowStyle(maxLine: number) {
.maxLines(maxLine)
.textOverflow({ overflow: TextOverflow.Ellipsis })
}
@Component
struct CreatorItem {
@Prop item: ContentDTO
@State rmhIsAttention: number = 0
build() {
ListItem() {
Column() {
Flex({direction: FlexDirection.Row, justifyContent: FlexAlign.SpaceBetween}) {
Column() {
Row() {
Image('')
.width(20)
.height(20)
.margin({right: 4})
.border({width: 1, color: 0xcccccc, radius: 10})
Text('立志之间')
.fontColor(0x212228)
.fontSize(12)
}
}
Column() {
Row() {
Image($r('app.media.icon_like_no'))
.width(16)
.height(16)
.margin({right: 4})
Text('3835')
.fontSize(14)
.fontColor(0x999999)
}
}
}
.margin({top: 10, left: 10, right: 10, bottom: 8})
Text('就业不仅是民生问题，也是发展问题，就业不仅是民生问题，也是发展问题，就业不仅是民生问题，也是发展问题，')
.maxLines(2)
.textOverflow({overflow: TextOverflow.Ellipsis})
.margin({left: 10, right: 10, bottom: 8})
.fontSize(17)
.fontColor(0x212228)
.lineHeight(25)
Row() {
Image('')
.width(66)
.height(44)
.borderRadius({topLeft: 3, topRight: 0, bottomLeft: 3, bottomRight: 0})
Text('原文｜强化就业优先政策 健全就业促进机制原文｜强化就业优先政策 健全就业促进机制原文｜强化就业优先政策 健全就业促进机制')
.margin({left: 8})
.width(172)
.maxLines(2)
.textOverflow({overflow: TextOverflow.Ellipsis})
}
.linearGradient({
direction: GradientDirection.Right,
colors: [[0xffffff, 0.0],[0xffffff, 0.8], [0xf9f9f9, 1.0]]
})
}
.width(276)
.height(150)
.margin({ right: 10 })
.borderWidth(1)
.borderColor($r('app.color.color_EDEDED'))
.borderRadius($r('app.float.image_border_radius'))
.backgroundColor(0xf9f9f9)
}
.onClick(() => {
console.log('跳转到rmh');
})
}
/**
* 关注号主 TODO 这里后面需要抽离
*/
handleAccention(item: ContentDTO, status: number) {
this.rmhIsAttention = this.rmhIsAttention ? 0 : 1
return
// 未登录，跳转登录
if (!HttpUrlUtils.getUserId()) {
WDRouterRule.jumpWithPage(WDRouterPage.loginPage)
return
}
const params: postInteractAccentionOperateParams = {
attentionUserType: item.rmhInfo?.userType || '', //被关注用户类型（1 普通用户 2 视频号 3 矩阵号）
attentionUserId: item.rmhInfo?.userId || '', // 被关注用户号主id
attentionCreatorId: item.rmhInfo?.rmhId || '', // 被关注用户号主id
// userType: 1,
// userId: '1', // TODO 用户id需要从本地获取
status: status,
}
PageRepository.postInteractAccentionOperate(params).then(res => {
console.log(TAG, '关注号主==', JSON.stringify(res.data))
if (status === 1) {
this.rmhIsAttention = 0
} else {
this.rmhIsAttention = 1
}
})
}
}
... ...
... ... @@ -77,11 +77,13 @@ export struct PageComponent {
refreshBean: new RefreshLayoutBean(this.pageModel.isVisiblePullUpLoad, this.pageModel.pullUpLoadImage,
this.pageModel.pullUpLoadText, this.pageModel.pullUpLoadHeight)
})
} else {
} else if (!this.pageModel.contentNeedScroll) {
NoMoreLayout()
}
}
}
// comp自己处理分页，这里设置EdgeEffect.None
.edgeEffect(this.pageModel.contentNeedScroll ? EdgeEffect.None : EdgeEffect.Spring)
.scrollBar(BarState.Off)
.cachedCount(8)
.height(CommonConstants.FULL_PARENT)
... ...
/**
* 频道骨架屏
*/
@Entry
@Component
export struct channelSkeleton {
@State quantity: Array<number> = [1, 2, 3,]
build() {
Row() {
Column() {
ForEach(this.quantity, () => {
Row() {
Column() {
textArea('60%', 12)
textArea('60%', 12)
textArea('40%', 12)
}
.RightStyle()
Column() {
textArea('35%', 78)
}
.margin({ right: 0 })
}
.height(100)
.justifyContent(FlexAlign.SpaceBetween)
.SkeletonStyle()
})
Column() {
textArea('100%', 204)
}
.justifyContent(FlexAlign.SpaceBetween)
.SkeletonStyle()
ForEach([1, 2], () => {
Row() {
Column() {
textArea('60%', 12)
textArea('60%', 12)
textArea('40%', 12)
}
.RightStyle()
Column() {
textArea('35%', 78)
}
.margin({ right: 0 })
}
.height(100)
.justifyContent(FlexAlign.SpaceBetween)
.SkeletonStyle()
})
}
.width('100%')
}
.height('100%')
}
}
@Builder
function textArea(width: number | Resource | string = '100%', height: number | Resource | string = '100%') {
Row()
.width(width)
.height(height)
.backgroundColor('#FFF2F3F4')
.margin({ top: 10 })
// .borderRadius(5)
}
// 全局公共样式
@Styles
function SkeletonStyle() {
.padding({ right: 18, left: 18 })
.width('100%')
.margin({ top: 10 })
}
@Extend(Column)
function RightStyle() {
.alignItems(HorizontalAlign.Start)
.justifyContent(FlexAlign.SpaceAround)
.height('100%')
}
... ...
/**
* 详情骨架屏
*/
@Entry
@Component
export struct detailedSkeleton {
@State quantity: Array<number> = [1, 2, 3, 4, 5, 6, 7]
build() {
Row() {
Column() {
Column() {
textArea('100%', 20)
textArea('50%', 20)
}
.SkeletonStyle()
.alignItems(HorizontalAlign.Start)
Column() {
textArea('40%', 12)
textArea('40%', 12)
}
.SkeletonStyle()
.alignItems(HorizontalAlign.Start)
Column() {
textArea('100%', 12)
textArea('100%', 12)
textArea('90%', 12)
}
.SkeletonStyle()
.alignItems(HorizontalAlign.Start)
Column() {
textArea('100%', 180)
}
.justifyContent(FlexAlign.SpaceBetween)
.SkeletonStyle()
ForEach(this.quantity, () => {
Column() {
textArea('100%', 12)
textArea('90%', 12)
}
.SkeletonStyle()
.alignItems(HorizontalAlign.Start)
})
}
.width('100%')
}
.height('100%')
}
}
@Builder
function textArea(width: number | Resource | string = '100%', height: number | Resource | string = '100%') {
Row()
.width(width)
.height(height)
.backgroundColor('#FFF2F3F4')
.margin({ top: 10 })
// .borderRadius(5)
}
// 全局公共样式
@Styles
function SkeletonStyle() {
.padding({ right: 18, left: 18 })
.width('100%')
.margin({ top: 10 })
}
\ No newline at end of file
... ...
/**
* 电子报骨架屏
*/
@Entry
@Component
export struct newsSkeleton {
@State quantity: Array<number> = [1, 2, 3,]
build() {
Row() {
Column() {
Row() {
Column() {
Row() {
Column() {
Image($rawfile('apph5/image/peopleSeleton.svg')).width('100%').height(47)// 后缀名不能省略
.interpolation(ImageInterpolation.High)
textArea('100%', 9)
}.width('72.00%').alignItems(HorizontalAlign.Start).margin({ right: 5 })
Column() {
textArea(27, 25)
textArea(27, 4)
textArea(27, 20)
}
.border({ width: 1 })
.borderColor('#FFF5F5F5')
.padding({ right: 2, left: 2, top: 0, bottom: 2 })
.justifyContent(FlexAlign.SpaceEvenly)
.alignItems(HorizontalAlign.Start)
}
.justifyContent(FlexAlign.SpaceBetween)
.width('98%')
// .height(64)
BoxAndLine().width('100%')
BoxAndBox({ firstBoxNumber: '65%', boxHeight: 100 })
Column() {
textArea('100%', 79)
}
BoxAndBox({ firstBoxNumber: '30%', boxHeight: 51 })
}.width('45%')
.opacity(1)
.align(Alignment.Start)
.alignItems(HorizontalAlign.Start)
Column() {
Column() {
textArea('100%', 13)
}.width('100%')
BoxAndLine()
Column() {
textArea('95%', 126)
}
Column() {
textArea('95%', 13)
}
Row() {
Column() {
textArea('100%', 30)
}.width('50%').margin({ right: 5 })
Column() {
textArea('100%', 30)
}.layoutWeight(1)
}.width('95%').justifyContent(FlexAlign.SpaceBetween)
Column() {
textArea('95%', 100)
}
}.width('45%')
}.justifyContent(FlexAlign.SpaceBetween)
}
.width('100%')
}
.height('100%')
}
}
@Component
struct BoxAndLine {
build() {
Column() {
textArea('100%', 130)
textArea('100%', 13)
textArea('80%', 13)
}.width('98%').alignItems(HorizontalAlign.Start)
}
}
@Component
struct BoxAndBox {
@Prop firstBoxNumber: number | Resource | string
@Prop boxHeight: number | Resource | string
build() {
Row() {
Column() {
textArea('100%', this.boxHeight)
}.width(this.firstBoxNumber).margin({ right: 5 })
Column() {
textArea('100%', this.boxHeight)
}.layoutWeight(1)
}.width('100%').justifyContent(FlexAlign.SpaceBetween)
}
}
@Builder
function textArea(width: number | Resource | string = '100%', height: number | Resource | string = '100%') {
Row()
.width(width)
.height(height)
.backgroundColor('#FFF5F5F5')
.margin({ top: 5 })
// .borderRadius(5)
}
// 全局公共样式
@Styles
function SkeletonStyle() {
.padding({ right: 14, left: 14 })
.width('100%')
.margin({ top: 5 })
}
@Extend(Column)
function RightStyle() {
.alignItems(HorizontalAlign.Start)
.justifyContent(FlexAlign.SpaceAround)
.height('100%')
}
... ...
import { CommonConstants } from 'wdConstant'
import { CompDTO } from 'wdBean'
import { Action, CompDTO, ContentDTO, Params } from 'wdBean'
import { WDRouterRule } from 'wdRouter/Index'
import { Logger } from 'wdKit/Index'
import { ExtraDTO } from 'wdBean/src/main/ets/bean/component/extra/ExtraDTO'
@Component
export struct HorizontalStrokeCardThreeTwoRadioForOneComponent {
... ... @@ -57,5 +59,23 @@ export struct HorizontalStrokeCardThreeTwoRadioForOneComponent {
})
.backgroundColor($r("app.color.white"))
.margin({ bottom: 8 })
.onClick(()=>{
this.gotoLive(this.compDTO?.operDataList[0])
})
}
gotoLive(content: ContentDTO) {
let taskAction: Action = {
type: 'JUMP_DETAIL_PAGE',
params: {
detailPageType: 2,
contentID: content?.objectId,
extra: {
relType: content?.relType,
relId: content?.relId,
} as ExtraDTO
} as Params,
};
WDRouterRule.jumpWithAction(taskAction)
Logger.debug(`gotoLive, ${content.objectId}`);
}
}
\ No newline at end of file
... ...
... ... @@ -4,6 +4,9 @@ import { Action, CompDTO, ContentDTO, Params } from 'wdBean'
import { CommonConstants } from 'wdConstant'
import { WDRouterRule } from 'wdRouter/Index'
import { CardMediaInfo } from '../cardCommon/CardMediaInfo'
import { ExtraDTO } from 'wdBean/src/main/ets/bean/component/extra/ExtraDTO'
import { Logger } from 'wdKit/Index'
@Component
export struct LiveHorizontalCardComponent {
@State compDTO: CompDTO = {} as CompDTO
... ... @@ -79,6 +82,7 @@ export struct LiveHorizontalCardComponent {
.onClick(() => {
if (item.objectType != '0') {
console.log(item.objectId)
this.gotoLive(item)
}
})
})
... ... @@ -96,4 +100,19 @@ export struct LiveHorizontalCardComponent {
})
.backgroundColor($r("app.color.white"))
}
gotoLive(content: ContentDTO) {
let taskAction: Action = {
type: 'JUMP_DETAIL_PAGE',
params: {
detailPageType: 2,
contentID: content?.objectId,
extra: {
relType: content?.relType,
relId: content?.relId,
} as ExtraDTO
} as Params,
};
WDRouterRule.jumpWithAction(taskAction)
Logger.debug(`gotoLive, ${content.objectId}`);
}
}
\ No newline at end of file
... ...
// 视频直播直播预约
import { LiveHorizontalCardForOneComponent } from './LiveHorizontalCardForOneComponent'
import { CompDTO, ContentDTO } from 'wdBean'
import { Action, CompDTO, ContentDTO, Params } from 'wdBean'
import { CommonConstants } from 'wdConstant'
import { StringUtils } from 'wdKit/Index'
import { Logger, StringUtils } from 'wdKit/Index'
import { CardMediaInfo } from '../cardCommon/CardMediaInfo'
import { ExtraDTO } from 'wdBean/src/main/ets/bean/component/extra/ExtraDTO'
import { WDRouterRule } from 'wdRouter/Index'
@Component
export struct LiveHorizontalReservationComponent {
@State compDTO: CompDTO = {} as CompDTO
... ... @@ -70,6 +73,7 @@ export struct LiveHorizontalReservationComponent {
.onClick(() => {
if (item.objectType != '0') {
console.log(item.objectId)
this.gotoLive(item)
}
})
})
... ... @@ -87,4 +91,20 @@ export struct LiveHorizontalReservationComponent {
})
.backgroundColor($r("app.color.white"))
}
gotoLive(content: ContentDTO) {
let taskAction: Action = {
type: 'JUMP_DETAIL_PAGE',
params: {
detailPageType: 2,
contentID: content?.objectId,
extra: {
relType: content?.relType,
relId: content?.relId,
} as ExtraDTO
} as Params,
};
WDRouterRule.jumpWithAction(taskAction)
Logger.debug(`gotoLive, ${content.objectId}`);
}
}
\ No newline at end of file
... ...
import { PageDTO, CompDTO, PageInfoDTO } from 'wdBean';
import { ViewType } from 'wdConstant/Index';
import { DateTimeUtils, Logger } from 'wdKit';
import { CompStyle, ViewType } from 'wdConstant/Index';
import { CollectionUtils, DateTimeUtils, Logger } from 'wdKit';
import { closeRefresh } from '../utils/PullDownRefresh';
import PageModel from './PageModel';
import PageViewModel from './PageViewModel';
... ... @@ -65,39 +65,33 @@ export class PageHelper {
} else {
pageModel.hasMore = false;
}
// TODO 暂时去掉互动数据，待优化。（主要是互动数据返回，如何渲染到ui上）
// TODO updateItems(sizeBefore, data)，这里可能有时序问题，导致覆盖别的group数据，需要优化，考虑精准替换
// 二次请求，批查互动数据
PageViewModel.getInteractData(pageDto.compList).then((data: CompDTO[]) => {
// 刷新，替换所有数据
// pageModel.compList.replaceAll(...data)
pageModel.compList.updateItems(sizeBefore, data)
pageModel.timestamp = DateTimeUtils.getTimeStamp().toString()
})
// TODO 待优化，解决content级别的展现加载
// PageViewModel.getInteractData(pageDto.compList).then((data: CompDTO[]) => {
// // 刷新，替换所有数据
// // pageModel.compList.replaceAll(...data)
// pageModel.compList.updateItems(sizeBefore, data)
// pageModel.timestamp = DateTimeUtils.getTimeStamp().toString()
// })
// content级别的展现加载丢给comp自己，这里只需要处理屏蔽分页加载，pageModel.pageScroll
if (isLastGroup) {
closeRefresh(pageModel, true);
// // 最后一个楼层，特殊处理
// // 检测楼层最后一个组件业务数据是否需要通过访问接口获取
// let comp: CompDTO = pageDto.compList[pageDto.compList.length - 1]
// let compSize = CollectionUtils.getListSize(comp.operDataList)
// // 直播回放，需要二次请求数据
// if (compSize <= 0 && comp.dataSourceType == 'LIVE_END') {
// let liveReviewDTO = await PageViewModel.getLiveReviewUrl(pageModel.currentPage, pageModel.pageSize)
// // content数据回来，塞给comp
// comp.operDataList.push(...liveReviewDTO.list)
// }
// 最后一个楼层，特殊处理
// 检测楼层最后一个组件业务数据是否需要通过访问接口获取
let comp: CompDTO = pageDto.compList[pageDto.compList.length - 1]
let compSize = CollectionUtils.getListSize(comp.operDataList)
// 直播回放，需要二次请求数据
if (compSize <= 0 && comp.compStyle == CompStyle.Zh_Grid_Layout_02) {
// 这个comp，数据自己二次请求，自己分页处理，这里加flag，将page层滑动及loadmore ui去掉
pageModel.contentNeedScroll = true
}
}
}
}
/**
* 获取直播回看数据
*/
private async getLiveEnd(pageModel: PageModel) {
let liveReviewDTO = await PageViewModel.getLiveReviewUrl(pageModel.currentPage, pageModel.pageSize)
Logger.debug(TAG, 'aboutToAppear, getPreviewData ' + liveReviewDTO.hasNext);
}
/**
* comp加载更多，分页加载
*/
private compLoadMore(pageModel: PageModel) {
... ... @@ -125,14 +119,6 @@ export class PageHelper {
promptAction.showToast({ message: err });
})
}
/**
* 节目数据分页加载
* TODO 待完善框架
*/
private contentLoadMore() {
}
}
... ...
... ... @@ -20,6 +20,9 @@ export default class PageModel {
// 当前请求数据的group
groupData: GroupInfoDTO = {} as GroupInfoDTO;
compList: LazyDataSource<CompDTO> = new LazyDataSource();
// 是否comp自己处理分页加载；默认是最后一个comp下的content有分页数据，需要节目内容的分页加载
// （如：首页-视频tab-直播tab，最后一个comp是直播回看列表，视频内容需要分页加载）
contentNeedScroll: boolean = false;
// 页面状态，刷新、加载更多等，1-首次、2-下拉、3上拉
loadStrategy: number = 1;
currentPage: number = 1;
... ...
... ... @@ -37,6 +37,10 @@
"value": "18fp"
},
{
"name": "font_size_18",
"value": "18fp"
},
{
"name": "font_size_24",
"value": "24fp"
},
... ... @@ -49,6 +53,10 @@
"value": "36fp"
},
{
"name": "margin_4_negative",
"value": "-4vp"
},
{
"name": "main_margin",
"value": "14vp"
},
... ... @@ -77,6 +85,46 @@
"value": "160vp"
},
{
"name": "margin_80",
"value": "80vp"
},
{
"name": "margin_2",
"value": "2vp"
},
{
"name": "margin_5",
"value": "5vp"
},
{
"name": "margin_7",
"value": "7vp"
},
{
"name": "margin_20",
"value": "20vp"
},
{
"name": "margin_24",
"value": "24vp"
},
{
"name": "margin_25",
"value": "25vp"
},
{
"name": "margin_28",
"value": "28vp"
},
{
"name": "margin_48",
"value": "48vp"
},
{
"name": "margin_60",
"value": "60vp"
},
{
"name": "single_row_03_img_height",
"value": "88vp"
},
... ... @@ -133,6 +181,10 @@
"value": "24vp"
},
{
"name": "margin_6",
"value": "6vp"
},
{
"name": "margin_16",
"value": "16vp"
},
... ... @@ -141,6 +193,14 @@
"value": "20vp"
},
{
"name": "margin_32",
"value": "32vp"
},
{
"name": "margin_36",
"value": "36vp"
},
{
"name": "vp_3",
"value": "3vp"
},
... ... @@ -167,6 +227,10 @@
{
"name": "card_comp_pagePadding_tb",
"value": "14fp"
},
{
"name": "margin_116",
"value": "116vp"
}
]
}
... ...
This diff could not be displayed because it is too large.
This diff could not be displayed because it is too large.
This diff could not be displayed because it is too large.
This diff could not be displayed because it is too large.
This diff could not be displayed because it is too large.
This diff could not be displayed because it is too large.
This diff could not be displayed because it is too large.
This diff could not be displayed because it is too large.
This diff could not be displayed because it is too large.
<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1713249268044" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="2925" xmlns:xlink="http://www.w3.org/1999/xlink" width="200" height="200"><path d="M884.736 546.88c-1.792-5.12-7.04-9.728-12.8-7.232-3.2 1.344-10.496 12.544-11.072 9.6-2.752-14.08 16.704-18.048 19.52-25.344 3.008-8-4.224-11.52-10.24-13.888a47.232 47.232 0 0 1-16.192-11.072c-4.928-4.992-17.024-12.352-21.568-3.2-1.28 4.352-0.512 12.608-2.176 17.92-1.92 6.272-9.088 6.72-13.44 11.328-6.208 6.848 0.64 9.216 4.8 14.464 3.84 4.992 1.216 40.384-5.248 52.48-3.2 6.016-86.336 72.064-100.032 75.52-15.744 3.84-15.68 20.48-8.96 29.696 8.576 11.712 27.008 6.272 36.16-0.448 5.76-4.352 44.288-45.056 53.44-53.44 3.712-3.392 18.688-22.976 19.84-10.432a46.912 46.912 0 0 1-1.728 16.96c-1.856 5.888-5.568 14.848-5.12 21.248 0.768 10.24 19.2 24.32 28.8 20.096 6.208-2.816 6.72-12.096 6.08-18.816-0.576-7.04 0.768-49.024 2.24-62.72a46.08 46.08 0 0 1 5.952-20.8c5.248-8.768 36.928-27.072 31.744-41.92z m-226.88 26.624c-2.816 6.08-14.272-3.84-17.152-6.528-2.88-2.56-6.464-4.48-6.016-8.896 0.576-4.48 5.76-5.12 5.76-5.12 1.792-0.32 17.792-0.96 18.88 1.856a55.296 55.296 0 0 1-1.472 18.688z m14.72-97.28c-10.816-1.408-23.296 9.472-31.616 14.72-4.096 2.56-27.52 14.4-24 20.48 2.432 4.096 17.024 0.576 21.76-0.512 13.44-3.072 20.48-12.032 23.872-9.792 2.88 1.92 1.024 32.64-4.48 32.064-12.032-1.152-19.2-10.624-32.064-15.872-3.968-1.6-11.776-4.608-9.088 2.624 0.768 2.176 3.648 5.056 4.672 7.168 2.368 4.8 4.48 21.504 2.368 25.152-4.224 6.976-8.704-5.376-9.792-8.064-2.048-5.12-3.328-10.368-5.12-15.552-1.536-4.736-5.568-16.96-10.944-16.256-6.208 0.832-1.664 27.968-2.816 33.728-3.84 19.456-5.504 25.216-6.144 37.952-0.512 10.304 0 27.392 11.84 30.528 15.808 4.224 18.048-9.344 19.456-18.56 0.32-2.176 0.832-6.784 1.92-8.64 1.664-2.752 3.84-3.2 5.888-0.512 1.664 2.304 0.96 5.696 3.456 7.936 2.496 2.304 5.312 1.92 8.576 2.56 5.056 0.96 11.328-0.96 14.464 3.84 3.2 5.12 2.176 10.56 8.32 14.016 13.44 7.36 19.84-7.168 20.864-16.896 1.216-11.648 1.792-22.592 2.368-34.176 0.576-11.712 1.088-24.448 4.096-35.776a244.48 244.48 0 0 1 5.248-17.024 22.72 22.72 0 0 0 0.768-16.256c-3.776-9.728-19.648-18.368-23.936-18.88z m-165.312 2.304c4.48-4.16 12.032-9.664 10.88-16.32-4.352-25.92-44.672-8.384-59.968-0.768-22.208 11.136-11.52 5.824-50.432 24.96-5.888 2.816-3.2 7.04-2.304 9.6 3.2 9.216 17.664 13.632 23.808 9.728 5.12-3.264 54.08-37.76 56.704-34.112 4.032 5.504-20.8 24.512-32.32 29.056-5.12 2.048-13.184 9.408-14.784 15.04a12.992 12.992 0 0 0 0.192 8.96l-0.64-0.256c-1.856 0.64-6.848-0.192-8.512 0.96-1.536 1.024 1.728 20.928 8.128 33.28 2.304 4.352 4.288 8.32-1.088 11.008-6.208 3.072-17.088 15.68-4.928 16.832 2.624 0.256 5.44 0.384 7.68-0.896 1.728-1.024 4.992-2.944 7.488-2.24 2.56 0.768 4.736 8.32 6.4 10.944 5.312 8.064 24.576 43.328 33.728 45.632 8 2.048 21.312-1.152 24-9.984 1.408-4.416 2.56-36.864 2.496-41.664-0.064-4.288 0.256-9.856-0.896-13.76-1.088-3.648-3.84-9.152-8.448-7.872-4.928 1.28-5.184 8.832-6.016 12.8-1.024 4.8-2.24 26.304-7.232 26.368-3.52 0-20.16-26.624-22.016-30.336-1.92-3.776-3.52-7.36-0.96-11.008 4.48-6.464 19.2-14.976 11.264-23.68-6.272-6.784-20.48-4.992-22.592 3.584-0.64 2.56 0.896 12.608-4.416 8.96-3.072-2.112-8.704-17.088-6.656-19.2 0.832-0.832 4.224-1.472 7.296-1.792h3.2c10.88-0.96 26.496-6.72 29.952-15.296 1.152-2.88 2.56-6.592 0.064-8.576-1.984-1.664-2.624-1.92-3.2-4.16-0.64-2.688 19.52-21.504 24.128-25.792z m472.064 56.128c16.384-7.808 49.408-7.424 44.096-39.04-1.088-6.528-4.352-20.032-13.568-19.52-8 0.448-14.272 12.8-17.792 18.816-8.96 15.36-26.496 30.4-38.912 43.264-15.68 16.256-41.088 60.992-43.84 60.992-7.296-0.064 3.264-29.248 4.992-33.536 10.176-25.28 42.88-104.256 47.808-113.28 9.152-16.832 15.808-25.792 26.112-41.664 20.352-31.36-14.848-30.336-14.848-30.336-9.92 0.768-16.256 7.296-21.952 11.776-6.272 4.8-12.8 8.064-19.712 11.904-6.784 3.84-15.36 7.872-9.472 16.128 4.992 7.04 10.752 7.744 18.24 8.512a38.72 38.72 0 0 0 7.36 0.512c-1.216 7.232-25.28 50.112-30.848 66.752-11.392 34.24-20.224 98.368-36.8 128a29.888 29.888 0 0 0-3.392 23.68c2.112 6.912 14.272 11.52 21.952 5.376 6.144-4.864 6.976-29.312 28.48-67.072 6.016-10.496 9.6-6.144 14.592 3.584 4.544 8.768 8.512 31.104 14.592 39.296 19.52 26.176 41.408 18.688 44.352 9.472 4.48-13.632-3.84-23.872-9.792-29.824-16.896-16.704-59.712-28.992-49.152-48 7.872-14.08 28.544-21.504 37.504-25.792zM260.544 386.816c-0.576-9.856-6.912-17.472-16.064-22.72-4.288-2.496-19.52-9.664-23.04-6.144l1.472-0.32c-6.016 2.688-1.92 21.312-2.496 26.688-1.024 9.984-6.336 22.208-9.792 31.872-7.232 20.032-13.888 37.824-21.056 57.856a576.64 576.64 0 0 1-26.944 61.312c-9.984 19.84-19.712 40.256-29.888 59.84-5.76 11.2-11.84 22.272-19.2 32.32-6.848 9.152-14.464 20.352-22.784 28.416-6.848 6.592-15.872 12.8-24.512 16.064-10.496 4.032-20.032 4.864-30.72 6.912-4.928 0.896-26.24 2.304-31.04 4.096-13.696 4.992 7.872 11.648 13.952 11.584 21.76 0 44.992 1.536 64.64-5.568 18.944-6.912 35.84-21.12 47.936-36.736 13.44-17.344 37.632-61.76 46.976-81.216 11.52-23.808 58.24-112.64 62.912-125.312 6.08-16.64 20.544-41.408 19.648-59.008z m550.144 102.4a24.512 24.512 0 0 0 16.96-1.472 25.6 25.6 0 0 1 16.448-2.176c4.736 0.64 8.832 1.28 13.76 0.448 6.08-0.96 7.808-2.112 12.8-5.12 4.864-2.944 9.408-2.496 14.784-3.328a20.8 20.8 0 0 0 11.584-6.912c6.784-7.04 12.16-18.624 3.648-25.728-3.968-3.328-15.552-9.664-27.712-4.736a265.216 265.216 0 0 0-25.664 16.64c-9.728 6.912-21.568 9.472-31.488 15.36-3.84 2.24-9.152 5.248-11.648 8.96-3.264 4.672 1.92 6.784 6.528 8.064zM437.952 595.712c-11.008-4.672-14.912 2.624-21.632 6.464-3.264-5.12 0.128-12.416 0.96-17.856 0.96-6.4 6.72-38.4-17.92-51.008-1.984-1.024-5.568-1.472-5.568 1.408l-2.24 18.24c-5.632 43.2-9.728 53.76-10.112 60.864-0.256 6.848-0.704 16.576 3.712 21.952 3.648 4.288 9.472 7.488 15.488 5.824 5.76-1.472 24.128-17.472 29.056-22.208 5.056-4.8 19.008-19.2 8.256-23.68z m378.88-166.208c4.48 1.472 21.312 1.344 19.008 7.68-1.344 3.776-6.272 6.4-9.088 9.088-1.664 1.664-8.448 7.872-7.68 10.112 1.408 4.544 21.376-7.616 25.344-10.624 4.288-3.328 8.704-6.208 13.696-8.448 4.928-2.304 18.56-7.168 28.736-15.36 10.048-8.256 45.312-69.312 45.888-74.304 1.152-10.368-10.432-23.488-20.928-27.456-4.48-1.728-9.792 7.808-11.072 10.624-2.304 5.12-15.552 30.72-19.712 39.36a61.504 61.504 0 0 1-19.136 23.872c-8.96 6.08-18.56 8.896-28.8 11.904-5.248 1.6-26.688 6.656-28.8 9.792-2.88 4.224 8.192 12.352 12.544 13.76z m-489.088 219.136c-5.248 1.536-35.2 8.96-40.512 7.808-28.928-5.888-30.272-32.832-79.04-75.904-1.664-1.536-19.584-12.032-18.176-4.48 0 0 15.424 26.624 18.816 31.552 3.712 5.312 20.032 42.88 22.592 48.192 2.432 5.056 4.992 10.368 7.68 15.232 5.44 9.344 15.68 22.272 27.072 24.832 5.76 1.28 24.512-4.352 30.144-7.104 11.328-5.632 22.528-12.8 32.192-21.312 3.84-3.328 8.64-7.744 10.112-12.672 2.304-7.808-5.248-7.808-10.88-6.144z" p-id="2926" fill="#f6f6f6"></path></svg>
\ No newline at end of file
... ...
export { DetailPlayLivePage } from './src/main/ets/pages/DetailPlayLivePage'
\ No newline at end of file
export { DetailPlayLivePage } from './src/main/ets/pages/DetailPlayLivePage'
export { DetailPlayVLivePage } from './src/main/ets/pages/DetailPlayVLivePage'
\ No newline at end of file
... ...
... ... @@ -13,6 +13,7 @@
"wdKit": "file:../../commons/wdKit",
"wdBean": "file:../../features/wdBean",
"wdConstant": "file:../../commons/wdConstant",
"wdDetailPlayApi": "file:../../features/wdDetailPlayApi"
"wdDetailPlayApi": "file:../../features/wdDetailPlayApi",
"wdRouter": "file:../../commons/wdRouter"
}
}
... ...
import { BottomComponent } from '../widgets/details/BottomComponent';
import { TabComponent } from '../widgets/details/TabComponent';
import { TopPlayComponent } from '../widgets/details/video/TopPlayComponet';
@Component
export struct DetailPlayHLivePage {
aboutToAppear(): void {
}
build() {
Column() {
TopPlayComponent()
TabComponent()
BottomComponent()
}
.height('100%')
.width('100%')
}
onPageShow(): void {
}
aboutToDisappear(): void {
}
}
\ No newline at end of file
... ...
... ... @@ -10,11 +10,12 @@ import router from '@ohos.router';
export struct DetailPlayLivePage {
TAG: string = 'DetailPlayLivePage';
liveViewModel: LiveViewModel = new LiveViewModel()
@State relId: string = '500005302448'
@State contentId: string = '20000016340'
@State relType: string = '1'
@State relId: string = ''
@State contentId: string = ''
@State relType: string = ''
@Provide liveDetailsBean: LiveDetailsBean = {} as LiveDetailsBean
@Provide liveRoomDataBean: LiveRoomDataBean = {} as LiveRoomDataBean
@State tabs: string[] = ['直播间', '大家聊']
aboutToAppear(): void {
//https://pdapis.pdnews.cn/api/rmrb-bff-display-zh/content/zh/c/content/detail?relId=500005302448&relType=1&contentId=20000016340
... ... @@ -30,7 +31,7 @@ export struct DetailPlayLivePage {
build() {
Column() {
TopPlayComponent()
TabComponent()
TabComponent({ tabs: this.tabs })
BottomComponent()
}
.height('100%')
... ... @@ -46,6 +47,9 @@ export struct DetailPlayLivePage {
.then(
(data) => {
if (data.length > 0) {
if (data[0].liveInfo?.liveState == 'wait') {
this.tabs = ['简介', '直播间', '大家聊']
}
this.liveDetailsBean = data[0]
}
},
... ...
import { BottomComponent } from '../widgets/details/BottomComponent';
import { TopPlayComponent } from '../widgets/details/video/TopPlayComponet';
import { TopPlayVComponent } from '../widgets/details/video/TopPlayVComponet';
@Component
export struct DetailPlayVLivePage {
aboutToAppear(): void {
}
build() {
Column() {
TopPlayVComponent()
// TabComponent()
BottomComponent()
}
.height('100%')
.width('100%')
}
onPageShow(): void {
}
aboutToDisappear(): void {
}
}
\ No newline at end of file
... ...
... ... @@ -170,10 +170,10 @@ export class LiveModel {
* @param isSubscribe
* @returns
*/
liveAppointment(relationId: string, mLiveId: string, isSubscribe: boolean) {
liveAppointment(relationId: string, liveId: string, isSubscribe: boolean) {
let params: Record<string, string> = {};
params['relationId'] = relationId
params['liveId'] = mLiveId
params['liveId'] = liveId
params['isSubscribe'] = `${isSubscribe}`
let headers: HashMap<string, string> = HttpUrlUtils.getCommonHeaders();
return new Promise<ResponseDTO<string>>((success, fail) => {
... ...
... ... @@ -67,9 +67,9 @@ export class LiveViewModel {
}
//直播预约/取消预约
liveAppointment(relationId: string, mLiveId: string, isSubscribe: boolean) {
liveAppointment(relationId: string, liveId: string, isSubscribe: boolean) {
return new Promise<ResponseDTO<string>>((success, fail) => {
this.liveModel.liveAppointment(relationId, mLiveId, isSubscribe).then((data) => {
this.liveModel.liveAppointment(relationId, liveId, isSubscribe).then((data) => {
success(data)
}).catch((message: string) => {
fail(message)
... ...
... ... @@ -2,10 +2,12 @@ import font from '@ohos.font'
import { LiveDetailsBean } from 'wdBean/Index'
import { DateTimeUtils, StringUtils } from 'wdKit/Index'
import { LiveViewModel } from '../../viewModel/LiveViewModel'
import { HttpUrlUtils } from 'wdNetwork/Index'
import { WDRouterPage, WDRouterRule } from 'wdRouter/Index'
@Component
export struct LiveCountdownComponent {
@Consume @Watch('calculateDataStatus') liveDetailsBean: LiveDetailsBean
@State liveDetailsBean: LiveDetailsBean = {} as LiveDetailsBean
textTimerController: TextTimerController = new TextTimerController()
@State format: string = 'HH:mm:ss'
@State month: string = ''
... ... @@ -26,7 +28,8 @@ export struct LiveCountdownComponent {
})
setTimeout(() => {
this.textTimerController.start()
}, 2000)
}, 0)
this.updateData()
}
build() {
... ... @@ -100,7 +103,7 @@ export struct LiveCountdownComponent {
@Builder
showAppointment() {
Text('我要预约')
Text(this.isAppointmentLive ? '取消预约' : '我要预约')
.width('100%')
.height(42)
.textAlign(TextAlign.Center)
... ... @@ -113,13 +116,17 @@ export struct LiveCountdownComponent {
.border({ radius: 4 })
.backgroundColor(this.isAppointmentLive ? '#CCCCCC' : '#ED2800')
.onClick(() => {
if (!HttpUrlUtils.getUserId()) {
WDRouterRule.jumpWithPage(WDRouterPage.loginPage)
return
}
if (this.liveDetailsBean && this.liveDetailsBean.liveInfo) {
this.liveAppointment()
}
})
}
calculateDataStatus() {
updateData() {
if (!this.liveDetailsBean) {
return
}
... ...
import { LiveDetailsBean } from 'wdBean/Index'
import { TabChatComponent } from './TabChatComponent'
import { TabInfoComponent } from './TabInfoComponent'
import { TabLiveComponent } from './TabLiveComponent'
... ... @@ -9,7 +8,7 @@ export struct TabComponent {
@State selectedFontColor: string = '#222222'
@State currentIndex: number = 0
private controller: TabsController = new TabsController()
tabs: string[] = ['简介', '直播间', '大家聊']
@Prop tabs: string[] = []
aboutToAppear(): void {
... ... @@ -19,12 +18,21 @@ export struct TabComponent {
Tabs({ barPosition: BarPosition.Start, index: this.currentIndex, controller: this.controller }) {
ForEach(this.tabs, (item: string, index: number) => {
TabContent() {
if (0 == index) {
TabInfoComponent()
} else if (1 == index) {
TabLiveComponent()
} else {
TabChatComponent()
if (this.tabs.length == 3) {
if (0 == index) {
TabInfoComponent()
} else if (1 == index) {
TabLiveComponent()
} else {
TabChatComponent()
}
}
else {
if (0 == index) {
TabLiveComponent()
} else {
TabChatComponent()
}
}
}.tabBar(this.tabBuilder(index, item))
.backgroundColor('#F5F5F5')
... ...
... ... @@ -12,7 +12,7 @@ export struct TabInfoComponent {
Column() {
this.showLiveTitle()
this.showLiveDetails()
LiveCountdownComponent()
LiveCountdownComponent({liveDetailsBean:this.liveDetailsBean})
}.margin({
top: 13,
left: 16,
... ...
... ... @@ -8,12 +8,16 @@ import { TabLiveItemComponent } from './TabLiveItemComponent'
export struct TabLiveComponent {
liveViewModel: LiveViewModel = new LiveViewModel()
@State liveList: Array<LiveRoomItemBean> = []
@Consume liveDetailsBean: LiveDetailsBean
@Consume @Watch('updateDate') liveDetailsBean: LiveDetailsBean
aboutToAppear(): void {
updateDate() {
this.getLiveList()
}
aboutToAppear(): void {
}
build() {
Stack() {
if (this.liveList.length == 0) {
... ...
... ... @@ -51,14 +51,18 @@ export struct PlayUIComponent {
.margin({
right: 10
})
Text(this.liveDetailsBean.newsTitle)
.maxLines(1)
.textOverflow({ overflow: TextOverflow.Ellipsis })
.fontSize('16fp')
.fontWeight(500)
.fontColor(Color.White)
.textAlign(TextAlign.Start)
.layoutWeight(1)
if (this.liveDetailsBean.liveInfo?.liveState != 'wait') {
Text(this.liveDetailsBean.newsTitle)
.maxLines(1)
.textOverflow({ overflow: TextOverflow.Ellipsis })
.fontSize('16fp')
.fontWeight(500)
.fontColor(Color.White)
.textAlign(TextAlign.Start)
.layoutWeight(1)
} else {
Blank()
}
Image($r('app.media.icon_share'))
.width(24)
.aspectRatio(1)
... ... @@ -86,8 +90,25 @@ export struct PlayUIComponent {
getLiveStatusView() {
// 直播新闻-直播状态 wait待开播running直播中end已结束cancel已取消paused暂停
// 预约
if (this.liveDetailsBean.liveInfo?.liveState == 'wait') {
Row() {
Image($r('app.media.icon_live_status_wait'))
.width(22)
.height(18)
Text('预约')
.fontSize('11fp')
.fontWeight(400)
.fontColor(Color.White)
}
.backgroundColor('#4D000000')
.padding({
top: 1,
right: 4,
bottom: 1
})
}
// 直播中
if (this.liveDetailsBean.liveInfo?.liveState == 'running') {
else if (this.liveDetailsBean.liveInfo?.liveState == 'running') {
Row() {
Image($r('app.media.icon_live_status_running'))
.width(22)
... ...
... ... @@ -6,6 +6,8 @@ import { PlayUIComponent } from './PlayUIComponent';
export struct TopPlayComponent {
@Consume @Watch('updateData') liveDetailsBean: LiveDetailsBean
playerController: WDPlayerController = new WDPlayerController();
@State imgUrl: string = ''
@State isWait: boolean = false
aboutToAppear(): void {
this.playerController.onCanplay = () => {
... ... @@ -15,6 +17,10 @@ export struct TopPlayComponent {
updateData() {
//直播新闻-直播状态 wait待开播running直播中end已结束cancel已取消paused暂停
if (this.liveDetailsBean.fullColumnImgUrls && this.liveDetailsBean.fullColumnImgUrls.length > 0) {
this.imgUrl = this.liveDetailsBean.fullColumnImgUrls[0].url
}
this.isWait = this.liveDetailsBean?.liveInfo?.liveState == 'wait'
if (this.liveDetailsBean.liveInfo && this.liveDetailsBean.liveInfo.vlive.length > 0) {
let playUrl = ''
if (this.liveDetailsBean.liveInfo.liveState == 'running') {
... ... @@ -35,6 +41,10 @@ export struct TopPlayComponent {
})
.height('100%')
.width('100%')
.visibility(this.isWait ? Visibility.None : Visibility.Visible)
Image(this.imgUrl)
.objectFit(ImageFit.Contain)
.visibility(this.isWait ? Visibility.Visible : Visibility.None)
PlayUIComponent({ playerController: this.playerController })
}
.height(211)
... ... @@ -43,5 +53,7 @@ export struct TopPlayComponent {
aboutToDisappear(): void {
this.playerController.pause()
this.playerController.stop()
this.playerController.release()
}
}
\ No newline at end of file
... ...
import { LiveDetailsBean } from 'wdBean/Index';
import { WDPlayerController, WDPlayerRenderView } from 'wdPlayer/Index';
import { PlayUIComponent } from './PlayUIComponent';
@Component
export struct TopPlayVComponent {
@Consume @Watch('updateData') liveDetailsBean: LiveDetailsBean
playerController: WDPlayerController = new WDPlayerController();
aboutToAppear(): void {
this.playerController.onCanplay = () => {
this.playerController.play()
}
}
updateData() {
//直播新闻-直播状态 wait待开播running直播中end已结束cancel已取消paused暂停
if (this.liveDetailsBean.liveInfo && this.liveDetailsBean.liveInfo.vlive.length > 0) {
let playUrl = ''
if (this.liveDetailsBean.liveInfo.liveState == 'running') {
playUrl = this.liveDetailsBean.liveInfo.vlive[0].liveUrl
} else if (this.liveDetailsBean.liveInfo.liveState == 'end') {
playUrl = this.liveDetailsBean.liveInfo.vlive[0].replayUri
}
this.playerController.firstPlay(playUrl);
}
}
build() {
Stack() {
// https://developer.huawei.com/consumer/cn/doc/harmonyos-references/ts-universal-attributes-image-effect-0000001862607345
Image(this.liveDetailsBean.fullColumnImgUrls[0].url)
.height('100%')
.width('100%')
.expandSafeArea([SafeAreaType.SYSTEM], [SafeAreaEdge.TOP, SafeAreaEdge.BOTTOM])
.blur(100)
WDPlayerRenderView({
playerController: this.playerController,
onLoad: async () => {
}
})// .height('100%')
.width('100%')// 扩展至所有非安全区域
.onClick(() => {
this.playerController.play()
})
// PlayUIComponent({ playerController: this.playerController })
}
// .height('100%')
.width('100%')
// 扩展至所有非安全区域
.expandSafeArea([SafeAreaType.SYSTEM], [SafeAreaEdge.TOP, SafeAreaEdge.BOTTOM])
}
aboutToDisappear(): void {
this.playerController.pause()
}
}
\ No newline at end of file
... ...
import mediaquery from '@ohos.mediaquery';
import { ContentDetailDTO, InteractDataDTO } from 'wdBean';
import { WDPlayerController, WDPlayerRenderView } from 'wdPlayer';
import { PlayerConstants, WDPlayerController, WDPlayerRenderView } from 'wdPlayer';
import { ContentDetailRequest, devicePLSensorManager } from 'wdDetailPlayApi';
import { PlayControlViewContainer } from '../view/PlayControlViewContainer';
import { PlayerDetailContainer } from '../view/PlayerDetailContainer';
... ... @@ -32,6 +32,19 @@ export struct DetailPlayShortVideoPage {
@Provide videoLandScape?: number = 1; // 视频朝向， 横屏视频：1;竖屏视频：2
@Provide newsStatusOfUser: batchLikeAndCollectResult | undefined = undefined // 点赞、收藏状态
@Provide followStatus: string = '0' // 关注状态
@Link @Watch('switchVideoStatusChange') switchVideoStatus: boolean
switchVideoStatusChange() {
if (this.switchVideoStatus) {
if (this.currentIndex === this.index && this.playerController.getStatus() === PlayerConstants.STATUS_PAUSE) {
this.playerController.play()
}
} else {
if (this.currentIndex === this.index && this.playerController.getStatus() === PlayerConstants.STATUS_START) {
this.playerController.pause()
}
}
}
currentIndexChange() {
if (this.currentIndex != this.index) {
... ... @@ -166,6 +179,7 @@ export struct DetailPlayShortVideoPage {
})
.height('100%')
.width('100%')
.margin({ top: this.contentDetailData?.videoInfo[0]?.videoLandScape === 1 ? 218 : 0 })
.onClick(() => {
console.error('WDPlayerRenderView=== onClick')
this.playerController?.switchPlayOrPause();
... ...
... ... @@ -24,6 +24,7 @@ export struct DetailVideoListPage {
@State currentIndex: number = 0
@State interactDataList: InteractDataDTO[] = []
@State isFullScreen: boolean = false
@State switchVideoStatus: boolean = false
async aboutToAppear(): Promise<void> {
... ... @@ -157,6 +158,7 @@ export struct DetailVideoListPage {
ForEach(this.data, (item: ContentDetailDTO, index: number) => {
Column() {
DetailPlayShortVideoPage({
switchVideoStatus: $switchVideoStatus,
contentDetailData: item,
currentIndex: this.currentIndex,
index: index,
... ...
... ... @@ -34,14 +34,15 @@ export struct VideoChannelDetail {
private channelStrategy: string = '1' // 频道策略 1-推荐;2-时间线
// private topicId?: string = '' // 专题id
// private recommend?: string = '' // 0.非推荐，1.推荐；
@State @Watch('navIndexChange') bottomNavIndex: number = 0
@State @Watch('navIndexChange') topNavIndex: number = 0
@Link @Watch('navIndexChange') bottomNavIndex: number
@Link @Watch('navIndexChange') topNavIndex: number
private swiperController: SwiperController = new SwiperController()
@Provide showComment: boolean = false
@State data: ContentDetailDTO[] = []
@State currentIndex: number = 0
@State interactDataList: InteractDataDTO[] = []
@State totalCount: number = 0
@State switchVideoStatus: boolean = false
/**
* 监听视频频道激活或失活
... ... @@ -49,30 +50,22 @@ export struct VideoChannelDetail {
navIndexChange() {
if (this.bottomNavIndex === 2 && this.topNavIndex === 0) {
// 如果视频在暂停则播放视频
this.switchVideoStatus = true
} else {
// 如果视频在播放则暂停视频
this.switchVideoStatus = false
}
}
async aboutToAppear(): Promise<void> {
const windowStage = WindowModel.shared.getWindowStage() as window.WindowStage
const windowClass: window.Window = windowStage.getMainWindowSync();
windowClass.setWindowSystemBarProperties({
statusBarContentColor: '#ffffff',
})
console.error('aboutToAppear groupId', this.groupId)
console.error('aboutToAppear pageId', this.pageId)
console.error('aboutToAppear channelId', this.channelId)
WindowModel.shared.setWindowSystemBarProperties({ statusBarContentColor: '#ffffff', })
// 根据视频频道传参查询视频楼层信息
this.getRecCompInfo()
}
aboutToDisappear(): void {
const windowStage = WindowModel.shared.getWindowStage() as window.WindowStage
const windowClass: window.Window = windowStage.getMainWindowSync();
windowClass.setWindowSystemBarProperties({
statusBarContentColor: '#000000',
})
WindowModel.shared.setWindowSystemBarProperties({ statusBarContentColor: '#000000', })
console.error('aboutToDisappear videoChanel')
}
... ... @@ -105,8 +98,7 @@ export struct VideoChannelDetail {
}
await ContentDetailRequest.getRecCompInfo(params).then(res => {
console.log('根据视频频道传参查询视频楼层信息', res.data?.totalCount)
console.log('根据视频频道传参查询视频楼层信息', JSON.stringify(res.data?.compList))
console.log('根据视频频道传参查询视频楼层信息totalCount', res.data?.totalCount + '')
this.totalCount = res.data?.totalCount || 0
const list1: batchContentDetailParams = {
... ... @@ -136,8 +128,6 @@ export struct VideoChannelDetail {
this.batchContentDetail(list1)
this.getContentInteract(list2)
}).catch((e: BusinessError) => {
console.error('eeeeeeeeeeeeee', e)
})
}
... ... @@ -147,7 +137,7 @@ export struct VideoChannelDetail {
async batchContentDetail(list: batchContentDetailParams) {
if (list.contents.length > 0) {
await ContentDetailRequest.batchContentDetail(list).then(res => {
console.log('根据视频楼层信息批量查询视频列表', JSON.stringify(res.data))
console.log('根据视频楼层信息批量查询视频列表', res.data)
this.data = this.data.concat(res.data as [])
})
}
... ... @@ -160,7 +150,7 @@ export struct VideoChannelDetail {
if (list.contentList.length > 0) {
await ContentDetailRequest.getContentInteract(list).then(res => {
this.interactDataList = res.data || []
console.log('根据视频信息批量查询点赞、收藏状态', JSON.stringify(res))
console.log('根据视频信息批量查询点赞、收藏状态', res.data)
})
}
}
... ... @@ -171,6 +161,7 @@ export struct VideoChannelDetail {
ForEach(this.data, (item: ContentDetailDTO, index: number) => {
Column() {
DetailPlayShortVideoPage({
switchVideoStatus: $switchVideoStatus,
contentDetailData: item,
currentIndex: this.currentIndex,
index: index,
... ...
... ... @@ -48,7 +48,9 @@ export struct PlayerTitleComment {
}
getName() {
return this.contentDetailData?.newsSourceName || this.contentDetailData?.editorName || ''
// console.error(this.contentDetailData?.newsSourceName + '===========' + this.contentDetailData?.editorName)
// this.contentDetailData?.newsSourceName ||
return this.contentDetailData?.editorName || ''
}
getTitle() {
... ...
... ... @@ -41,16 +41,15 @@ class MGPlayRenderViewIns {
export struct WDPlayerRenderView {
private playerController?: WDPlayerController;
private xComponentController: XComponentController = new XComponentController();
private insId: string = "WDPlayRenderView" + insIndex;
onLoad?: ((event?: object) => void);
videoWidth: number = 0
videoHeight: number = 0
@State videoWidth: number = 0
@State videoHeight: number = 0
@State selfSize: Size = new Size('100%', '100%');
private insId: string = "WDPlayRenderView" + insIndex;
aboutToAppear() {
MGPlayRenderViewIns.add();
console.log('playerController', this.playerController)
insIndex++;
if (!this.playerController) {
return
... ... @@ -80,9 +79,7 @@ export struct WDPlayerRenderView {
})
.onLoad(async (event) => {
Logger.info(TAG, 'onLoad')
let surfaceId = this.xComponentController.getXComponentSurfaceId()
console.log('surfaceId===', surfaceId)
console.log('insId===', this.insId)
// const surfaceId = this.xComponentController.getXComponentSurfaceId()
this.xComponentController.setXComponentSurfaceSize({
surfaceWidth: 1920,
surfaceHeight: 1080
... ... @@ -94,27 +91,14 @@ export struct WDPlayerRenderView {
})
.width(this.selfSize.width)
.height(this.selfSize.height)
.margin({ top: this.getPlayerMarginTop() })
}
.id(this.insId)
.onAreaChange(() => {
// this.updateLayout()
})
.backgroundColor("#000000")
.alignItems(VerticalAlign.Center)
.justifyContent(FlexAlign.Center)
.alignItems(this.selfSize.width === '100%' ? VerticalAlign.Top : VerticalAlign.Center)
.height('100%')
.width('100%')
}
/**
* 横屏播放器非居中展示
*/
getPlayerMarginTop() {
return this.selfSize.width === '100%' && this.videoWidth > this.videoHeight ? 218 : 0
}
updateLayout() {
let info = componentUtils.getRectangleById(this.insId);
if (info.size.width > 0 && info.size.height > 0 && this.videoHeight > 0 && this.videoWidth > 0) {
... ...