王士厅

人民号图集标题省略号显示,显示系统日期

import { NetworkUtil, Logger, NetworkType, SPHelper, } from 'wdKit';
import { NetworkUtil, Logger, NetworkType, SPHelper, WindowModel} from 'wdKit';
import { ResponseDTO } from 'wdNetwork';
import {
ContentDetailDTO,
... ... @@ -78,230 +78,236 @@ export struct MultiPictureDetailPageComponent {
build() {
RelativeContainer() {
if (this.contentDetailData?.photoList && this.contentDetailData?.photoList?.length > 0) {
Swiper(this.swiperController) {
ForEach(this.contentDetailData.photoList, (item: PhotoListBean) => {
Swiper(this.swiperControllerItem) {
MultiPictureDetailItemComponent({ MultiPictureDetailItem: item })
this.init()
}
.width('100%')
.height('100%')
.backgroundColor(Color.Black)
.id('e_picture_container')
// 设置顶部绘制延伸到状态栏
// 设置底部绘制延伸到导航条
.expandSafeArea([SafeAreaType.SYSTEM], [SafeAreaEdge.TOP, SafeAreaEdge.BOTTOM])
}
@Builder
init() {
if (this.contentDetailData.rmhPlatform == 1) {
Row() {
Row({ space: 8 }) {
Row() {
Image(this.contentDetailData?.rmhInfo?.rmhHeadUrl)
.borderRadius(24)
.aspectRatio(1)
.border({ width: 1, color: Color.White, style: BorderStyle.Solid })
.alt($r('app.media.picture_loading'))
.width(36)
.height(36)
.objectFit(ImageFit.Fill)
.interpolation(ImageInterpolation.High)
}
.width('13%')
.height('100%')
Row() {
Flex({
direction: FlexDirection.Column,
justifyContent: FlexAlign.SpaceAround,
alignItems: ItemAlign.Start
}) {
Text(`${this.contentDetailData?.rmhInfo?.rmhName}`)
.fontColor(Color.White)
.fontSize(14)
.fontFamily('PingFang PingFang SC-Medium')
.fontWeight(500)
.lineHeight(17)
.margin(0)
.height(17)
Text(`${this.contentDetailData?.rmhInfo?.rmhDesc}`)
.fontColor('#676767')
.fontSize(12)
.fontFamily('PingFang SC-Regular')
.fontWeight(400)
.lineHeight(14)
.height(14)
.textOverflow({ overflow: TextOverflow.Ellipsis })
.margin(0)
.maxLines(1)
}
.width('100%')
.height('100%')
.vertical(true)
.autoPlay(false)
.cachedCount(1)
.indicator(false)
.displayCount(1)
.onAnimationEnd(event => {
router.back()
})
})
}
.width('81%')
.height('100%')
}
.index(this.swiperIndex)
.width('100%')
.height(px2vp(this.picHeight) + 32)
.vertical(false)
.autoPlay(false)
.cachedCount(3)
.indicator(false)
.displayCount(1)
.loop(false)
.id('e_swiper_content')
.alignRules({
center: { anchor: "__container__", align: VerticalAlign.Center },
middle: { anchor: "__container__", align: HorizontalAlign.Center }
})
.onChange((index: number) => {
this.swiperIndex = index
.width('74.4%')
.height('100%')
.margin({
top: 0,
bottom: 0,
left: 16,
right: 0
})
if (this.contentDetailData.rmhPlatform == 1) {
if (this.followStatus == '0') {
Row() {
Row({ space: 8 }) {
Button({ type: ButtonType.Normal, stateEffect: true }) {
Row() {
Image(this.contentDetailData?.rmhInfo?.rmhHeadUrl)
.borderRadius(24)
.aspectRatio(1)
.border({ width: 1, color: Color.White, style: BorderStyle.Solid })
.alt($r('app.media.picture_loading'))
.width(36)
.height(36)
.objectFit(ImageFit.Fill)
.interpolation(ImageInterpolation.High)
}
.width('13%')
.height('100%')
Row() {
Flex({
direction: FlexDirection.Column,
justifyContent: FlexAlign.SpaceAround,
alignItems: ItemAlign.Start
}) {
Text(`${this.contentDetailData?.rmhInfo?.rmhName}`)
.fontColor(Color.White)
.fontSize(14)
.fontFamily('PingFang PingFang SC-Medium')
.fontWeight(500)
.lineHeight(17)
.margin(0)
.height(17)
Text(`${this.contentDetailData?.rmhInfo?.rmhDesc}`)
.fontColor('#676767')
.fontSize(12)
.fontFamily('PingFang SC-Regular')
.fontWeight(400)
.lineHeight(14)
.height(14)
.textOverflow({ overflow: TextOverflow.Ellipsis })
.margin(0)
}
}
.width('81%')
.height('100%')
Text('+关注').fontSize(12).fontColor(0xffffff)
}.alignItems(VerticalAlign.Center)
}
.width('74.4%')
.height('100%')
.margin({
top: 0,
bottom: 0,
left: 16,
right: 0
.borderRadius(4)
.backgroundColor('#ED2800')
.width(48)
.height(24)
.onClick(() => {
this.handleAccention()
})
if (this.followStatus == '0') {
Row() {
Button({ type: ButtonType.Normal, stateEffect: true }) {
Row() {
Text('+关注').fontSize(12).fontColor(0xffffff)
}.alignItems(VerticalAlign.Center)
}
.borderRadius(4)
.backgroundColor('#ED2800')
.width(48)
.height(24)
.onClick(() => {
this.handleAccention()
})
}
.justifyContent(FlexAlign.Center)
.alignItems(VerticalAlign.Center)
.width('21.6%')
.height('100%')
}
}
.justifyContent(FlexAlign.Center)
.alignItems(VerticalAlign.Center)
.width('21.6%')
.height('100%')
}
}
.width('100%')
.height(44)
.alignRules({
top: { anchor: "__container__", align: VerticalAlign.Top },
middle: { anchor: "__container__", align: HorizontalAlign.Center }
})
.id('e_attention')
}
if (this.contentDetailData?.photoList && this.contentDetailData?.photoList?.length > 0) {
Swiper(this.swiperController) {
ForEach(this.contentDetailData.photoList, (item: PhotoListBean) => {
Swiper(this.swiperControllerItem) {
MultiPictureDetailItemComponent({ MultiPictureDetailItem: item })
}
.width('100%')
.height(44)
.alignRules({
top: { anchor: "e_swiper_content", align: VerticalAlign.Top },
middle: { anchor: "e_swiper_content", align: HorizontalAlign.Center }
.height('100%')
.vertical(true)
.autoPlay(false)
.cachedCount(1)
.indicator(false)
.displayCount(1)
.onAnimationEnd(event => {
router.back()
})
.id('e_attention')
}
Row() {
Scroll(this.scroller) {
Row() {
Flex({
direction: FlexDirection.Column,
justifyContent: FlexAlign.Start
}) {
Text() {
Span(`${this.swiperIndex + 1}`)
.fontSize(24)
.fontFamily('PingFang SC-Medium')
.fontWeight(500)
.lineHeight(28)
Span(`/${this.contentDetailData.photoList.length}`)
.fontSize(14)
.fontFamily('PingFang SC-Medium')
.fontWeight(500)
.lineHeight(19)
}.fontColor(Color.White).margin(4)
})
}
.index(this.swiperIndex)
.width('100%')
.height(px2vp(this.picHeight) + 32)
.vertical(false)
.autoPlay(false)
.cachedCount(3)
.indicator(false)
.displayCount(1)
.loop(false)
.id('e_swiper_content')
.alignRules({
center: { anchor: "__container__", align: VerticalAlign.Center },
middle: { anchor: "__container__", align: HorizontalAlign.Center }
})
.onChange((index: number) => {
this.swiperIndex = index
})
Text(`${this.contentDetailData.newsTitle}`)
.fontColor(Color.White)
.fontSize(16)
.fontFamily('PingFang SC-Semibold')
.fontWeight(600)
.lineHeight(24)
.margin({
top: 4,
left: 0,
bottom: 4,
right: 0
})
Text(`${this.contentDetailData.photoList?.[this.swiperIndex].picDesc}`)
.fontColor(Color.White)
Row() {
Scroll(this.scroller) {
Row() {
Flex({
direction: FlexDirection.Column,
justifyContent: FlexAlign.Start
}) {
Text() {
Span(`${this.swiperIndex + 1}`)
.fontSize(24)
.fontFamily('PingFang SC-Medium')
.fontWeight(500)
.lineHeight(28)
Span(`/${this.contentDetailData.photoList.length}`)
.fontSize(14)
.fontFamily('PingFang SC-Regular')
.fontWeight(400)
.lineHeight(22)
.textOverflow({ overflow: TextOverflow.Ellipsis })
.margin({
top: 4,
left: 0,
bottom: 4,
right: 18
})
.maxLines(16)
}
}
.width('100%')
.margin({
top: 8,
left: 18,
bottom: 24,
right: 18
})
}
.scrollable(ScrollDirection.Vertical)
.scrollBarWidth(0)
.height(px2vp(this.titleHeight))
}
.id('e_swiper_titles')
.alignRules({
bottom: { anchor: "__container__", align: VerticalAlign.Bottom },
middle: { anchor: "__container__", align: HorizontalAlign.Center }
})
.height(px2vp(this.titleHeight) + 64)
.fontFamily('PingFang SC-Medium')
.fontWeight(500)
.lineHeight(19)
}.fontColor(Color.White).margin(4)
}
if (this.netStatus !== undefined) {
EmptyComponent({
emptyType: this.netStatus, emptyButton: true, retry: () => {
this.getContentDetailData()
Text(`${this.contentDetailData.newsTitle}`)
.fontColor(Color.White)
.fontSize(16)
.fontFamily('PingFang SC-Semibold')
.fontWeight(600)
.lineHeight(24)
.margin({
top: 4,
left: 0,
bottom: 4,
right: 0
})
Text(`${this.contentDetailData.photoList?.[this.swiperIndex].picDesc}`)
.fontColor(Color.White)
.fontSize(14)
.fontFamily('PingFang SC-Regular')
.fontWeight(400)
.lineHeight(22)
.textOverflow({ overflow: TextOverflow.Ellipsis })
.margin({
top: 4,
left: 0,
bottom: 4,
right: 18
})
.maxLines(16)
}
}
})
.id('e_empty_content')
.alignRules({
center: { anchor: "__container__", align: VerticalAlign.Center },
middle: { anchor: "__container__", align: HorizontalAlign.Center }
.width('100%')
.margin({
top: 8,
left: 18,
bottom: 24,
right: 18
})
}
.scrollable(ScrollDirection.Vertical)
.scrollBarWidth(0)
.height(px2vp(this.titleHeight))
}
OperRowListView({
contentDetailData: this.contentDetailData,
.id('e_swiper_titles')
.alignRules({
bottom: { anchor: "__container__", align: VerticalAlign.Bottom },
middle: { anchor: "__container__", align: HorizontalAlign.Center }
})
.height(px2vp(this.titleHeight) + 64)
}
if (this.netStatus !== undefined) {
EmptyComponent({
emptyType: this.netStatus, emptyButton: true, retry: () => {
this.getContentDetailData()
}
})
.id('e_empty_content')
.alignRules({
bottom: { anchor: "__container__", align: VerticalAlign.Bottom },
center: { anchor: "__container__", align: VerticalAlign.Center },
middle: { anchor: "__container__", align: HorizontalAlign.Center }
})
.width('100%')
.height(56)
.margin({
top: 16,
left: 16,
right: 16,
bottom: 0
})
.border({ width: { top: 0.5 }, color: '#FFFFFF' })
.id('e_oper_row')
}
.width('100%')
.height('100%')
.backgroundColor(Color.Black)
.id('e_picture_container')
// 设置顶部绘制延伸到状态栏
// 设置底部绘制延伸到导航条
.expandSafeArea([SafeAreaType.SYSTEM], [SafeAreaEdge.TOP, SafeAreaEdge.BOTTOM])
OperRowListView({
contentDetailData: this.contentDetailData,
})
.alignRules({
bottom: { anchor: "__container__", align: VerticalAlign.Bottom },
middle: { anchor: "__container__", align: HorizontalAlign.Center }
})
.width('100%')
.height(56)
.margin({
top: 16,
left: 16,
right: 16,
bottom: 0
})
.border({ width: { top: 0.5 }, color: '#FFFFFF' })
.id('e_oper_row')
}
getContentDetailData() {
... ... @@ -318,6 +324,11 @@ export struct MultiPictureDetailPageComponent {
}
this.netStatus = undefined
this.contentDetailData = resDTO.data?.[0];
if (this.contentDetailData.rmhPlatform == 1) {
WindowModel.shared.setWindowSystemBarProperties({
statusBarContentColor: '#ffffff',
})
}
// this.contentDetailData.photoList = []
if (this.contentDetailData?.photoList && this.contentDetailData?.photoList?.length === 0) {
// 暂无内容
... ...