developOne / harmonyPool

Go to a project
Toggle navigation Toggle navigation pinning
张善主
f9933847 1 parent 724134e6

feat(动态)：增加底部按钮

Inline Side-by-side
Showing 1 changed file with 286 additions and 237 deletions
... ... @@ -14,6 +14,7 @@ import display from '@ohos.display';
import { BusinessError } from '@ohos.base';
import { CommonConstants } from 'wdConstant/Index';
import { CardMediaInfo } from '../components/cardCommon/CardMediaInfo'
import router from '@ohos.router';
const TAG = 'DynamicDetailComponent'
@Preview
@Component
... ... @@ -32,6 +33,7 @@ export struct DynamicDetailComponent {
newsType:15
} as ContentDetailDTO
//变量
scroller: Scroller = new Scroller();
/**
* 默认未关注 点击去关注
*/
... ... @@ -55,7 +57,6 @@ export struct DynamicDetailComponent {
}
build() {
Row() {
Column(){
//logo、日期
Row() {
... ... @@ -77,259 +78,307 @@ export struct DynamicDetailComponent {
.width('100%')
.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($r('app.float.margin_32'))
.height($r('app.float.margin_32'))
.objectFit(ImageFit.Cover)
.borderRadius($r('app.float.margin_16'))
Image($r('app.media.icon_border_test'))
.width($r('app.float.margin_48'))
.height($r('app.float.margin_48'))
.objectFit(ImageFit.Cover)
.borderRadius($r('app.float.margin_24'))
}
.width($r('app.float.margin_48'))
.height($r('app.float.margin_48'))
.alignContent(Alignment.Center)
Column(){
//昵称
Text(this.contentDetailData.rmhInfo?.rmhName)
.fontSize($r('app.float.font_size_14'))
.fontColor($r('app.color.color_222222'))
.fontWeight(FontWeight.Medium)
.margin({ left: $r('app.float.margin_5') })
.alignSelf(ItemAlign.Start)
//简介
Text(this.contentDetailData.rmhInfo?.rmhDesc)
.fontSize($r('app.float.font_size_14'))
.fontColor($r('app.color.color_B0B0B0'))
.fontWeight(FontWeight.Medium)
.maxLines(1)
.margin({ left: $r('app.float.margin_5') })
.alignSelf(ItemAlign.Start)
}
.width('63%')
.margin({right: $r('app.float.margin_6')})
if (this.followStatus == '0') {
Text('关注')
.width($r('app.float.margin_54'))
.height($r('app.float.margin_24'))
.textAlign(TextAlign.Center)
.fontSize($r('app.float.font_size_12'))
.borderRadius($r('app.float.vp_3'))
.backgroundColor($r('app.color.color_ED2800'))
.fontColor($r('app.color.color_fff'))
.onClick(() => {
// this.handleAccention(this.item, 1)
})
} else {
Text('已关注')
.width($r('app.float.margin_54'))
.height($r('app.float.margin_24'))
.borderWidth(1)
.textAlign(TextAlign.Center)
.fontSize($r('app.float.font_size_12'))
.borderRadius($r('app.float.vp_3'))
.borderColor($r('app.color.color_CCCCCC'))
.fontColor($r('app.color.color_CCCCCC'))
.onClick(() => {
// this.handleAccention(this.item, 0)
})
}
}
.width('100%')
.margin({ left: $r('app.float.margin_16')})
//内容
Text(StringUtils.isEmpty(this.contentDetailData.newsContent)
?StringUtils.isEmpty(this.contentDetailData.newsSummary)
?this.contentDetailData.newsTitle
:this.contentDetailData.newsSummary
:this.contentDetailData.newsContent)
.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') })
.alignSelf(ItemAlign.Start)
if(this.contentDetailData.newsType+"" == ContentConstants.TYPE_FOURTEEN){
//附件内容：图片/视频
if(this.contentDetailData.photoList!= null && this.contentDetailData.photoList.length>0){
// 图片-从无图到9图展示
GridRow({
gutter: { x: 2, y: 2 }
}) {
ForEach(this.contentDetailData.photoList, (item: PhotoListBean, index: number) => {
if (this.contentDetailData.photoList.length === 1) {
if (this.getPicType(item) !== 3) {
GridCol({
span: this.getPicType(item) === 1 ? 12 : 8
}){
Stack({
alignContent: Alignment.BottomEnd
}) {
if (this.getPicType(item) === 1) {
Stack({ alignContent: Alignment.Bottom }) {
Scroll(this.scroller) {
Column() {
//号主信息
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($r('app.float.margin_32'))
.height($r('app.float.margin_32'))
.objectFit(ImageFit.Cover)
.borderRadius($r('app.float.margin_16'))
Image($r('app.media.icon_border_test'))
.width($r('app.float.margin_48'))
.height($r('app.float.margin_48'))
.objectFit(ImageFit.Cover)
.borderRadius($r('app.float.margin_24'))
}
.width($r('app.float.margin_48'))
.height($r('app.float.margin_48'))
.alignContent(Alignment.Center)
Column(){
//昵称
Text(this.contentDetailData.rmhInfo?.rmhName)
.fontSize($r('app.float.font_size_14'))
.fontColor($r('app.color.color_222222'))
.fontWeight(FontWeight.Medium)
.margin({ left: $r('app.float.margin_5') })
.alignSelf(ItemAlign.Start)
//简介
Text(this.contentDetailData.rmhInfo?.rmhDesc)
.fontSize($r('app.float.font_size_14'))
.fontColor($r('app.color.color_B0B0B0'))
.fontWeight(FontWeight.Medium)
.maxLines(1)
.textOverflow({ overflow: TextOverflow.Ellipsis })
.margin({ left: $r('app.float.margin_5') })
.alignSelf(ItemAlign.Start)
}
.width('63%')
.margin({right: $r('app.float.margin_6')})
if (this.followStatus == '0') {
Text('关注')
.width($r('app.float.margin_54'))
.height($r('app.float.margin_24'))
.textAlign(TextAlign.Center)
.fontSize($r('app.float.font_size_12'))
.borderRadius($r('app.float.vp_3'))
.backgroundColor($r('app.color.color_ED2800'))
.fontColor($r('app.color.color_fff'))
.onClick(() => {
// this.handleAccention(this.item, 1)
})
} else {
Text('已关注')
.width($r('app.float.margin_54'))
.height($r('app.float.margin_24'))
.borderWidth(1)
.textAlign(TextAlign.Center)
.fontSize($r('app.float.font_size_12'))
.borderRadius($r('app.float.vp_3'))
.borderColor($r('app.color.color_CCCCCC'))
.fontColor($r('app.color.color_CCCCCC'))
.onClick(() => {
// this.handleAccention(this.item, 0)
})
}
}
.width('100%')
.margin({ left: $r('app.float.margin_16')})
//内容
Text(StringUtils.isEmpty(this.contentDetailData.newsContent)
?StringUtils.isEmpty(this.contentDetailData.newsSummary)
?this.contentDetailData.newsTitle
:this.contentDetailData.newsSummary
:this.contentDetailData.newsContent)
.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') })
.alignSelf(ItemAlign.Start)
if(this.contentDetailData.newsType+"" == ContentConstants.TYPE_FOURTEEN){
//附件内容：图片/视频
if(this.contentDetailData.photoList!= null && this.contentDetailData.photoList.length>0){
// 图片-从无图到9图展示
GridRow({
gutter: { x: 2, y: 2 }
}) {
ForEach(this.contentDetailData.photoList, (item: PhotoListBean, index: number) => {
if (this.contentDetailData.photoList.length === 1) {
if (this.getPicType(item) !== 3) {
GridCol({
span: this.getPicType(item) === 1 ? 12 : 8
}){
Stack({
alignContent: Alignment.BottomEnd
}) {
if (this.getPicType(item) === 1) {
Image(item.picPath)
.width('100%')
.height(172)
.autoResize(true)
.borderRadius(this.caclImageRadius(index))
} else if (this.getPicType(item) === 2) {
Image(item.picPath)
.width('100%')
.height(305)
.autoResize(true)
.borderRadius(this.caclImageRadius(index))
}
Flex({ direction: FlexDirection.Row }) {
Image($r('app.media.icon_long_pic'))
.width(14)
.height(14)
.margin({right: 4})
Text('长图')
.fontSize(12)
.fontWeight(400)
.fontColor(0xffffff)
.fontFamily('PingFang SC')
}
.width(48)
.padding({bottom: 9})
}
}
.onClick((event: ClickEvent) => {
ProcessUtils.gotoMultiPictureListPage(this.contentDetailData.photoList)
})
} else {
GridCol({
span: { xs: 8 }
}) {
Image(item.picPath)
.width('100%')
.borderRadius(this.caclImageRadius(index))
.autoResize(true)
.opacity(!item.width && !item.height ? 0 : 1)
.onComplete(callback => {
item.width = callback?.width || 0;
item.height = callback?.height || 0;
})
}
}
} else if (this.contentDetailData.photoList.length === 4) {
GridCol({
span: { xs: 4 }
}) {
Image(item.picPath)
.width('100%')
.height(172)
.autoResize(true)
.aspectRatio(1)
.borderRadius(this.caclImageRadius(index))
} else if (this.getPicType(item) === 2) {
}
} else {
GridCol({
span: { sm: 4, lg: 3 }
}) {
Image(item.picPath)
.width('100%')
.height(305)
.autoResize(true)
.aspectRatio(1)
.borderRadius(this.caclImageRadius(index))
}
Flex({ direction: FlexDirection.Row }) {
Image($r('app.media.icon_long_pic'))
.width(14)
.height(14)
.margin({right: 4})
Text('长图')
.fontSize(12)
.fontWeight(400)
.fontColor(0xffffff)
.fontFamily('PingFang SC')
}
.width(48)
.padding({bottom: 9})
}
}
.onClick((event: ClickEvent) => {
ProcessUtils.gotoMultiPictureListPage(this.contentDetailData.photoList)
})
} else {
GridCol({
span: { xs: 8 }
}) {
Image(item.picPath)
.width('100%')
.borderRadius(this.caclImageRadius(index))
.autoResize(true)
.opacity(!item.width && !item.height ? 0 : 1)
.onComplete(callback => {
item.width = callback?.width || 0;
item.height = callback?.height || 0;
})
}
}
} else if (this.contentDetailData.photoList.length === 4) {
GridCol({
span: { xs: 4 }
}) {
Image(item.picPath)
.aspectRatio(1)
.borderRadius(this.caclImageRadius(index))
}
} else {
GridCol({
span: { sm: 4, lg: 3 }
}) {
Image(item.picPath)
.aspectRatio(1)
.borderRadius(this.caclImageRadius(index))
}
.margin({ left: $r('app.float.margin_16'),right: $r('app.float.margin_16'),top: $r('app.float.margin_8')})
}
})
}
.margin({ left: $r('app.float.margin_16'),right: $r('app.float.margin_16'),top: $r('app.float.margin_8')})
}
}else{
if(this.contentDetailData.videoInfo!= null && this.contentDetailData.videoInfo.length>0){
GridRow() {
if (this.contentDetailData.videoInfo[0].videoLandScape === 1) {
// 横屏
GridCol({
span: { xs: 12 }
}) {
Stack() {
Image(this.contentDetailData.fullColumnImgUrls!= null && this.contentDetailData.fullColumnImgUrls.length>0&&!StringUtils.isEmpty(this.contentDetailData.fullColumnImgUrls[0].url)?
this.contentDetailData.fullColumnImgUrls[0].url:
this.contentDetailData.videoInfo[0].firstFrameImageUri)
.width(CommonConstants.FULL_WIDTH)
.aspectRatio(16 / 9)
.borderRadius($r('app.float.image_border_radius'))
CardMediaInfo({ contentDTO: this.mJumpInfo })
}
.align(Alignment.BottomEnd)
}
} else {
// 竖图显示，宽度占50%，高度自适应
GridCol({
span: { xs: 6 }
}) {
Stack() {
Image(this.contentDetailData.fullColumnImgUrls!= null && this.contentDetailData.fullColumnImgUrls.length>0&&!StringUtils.isEmpty(this.contentDetailData.fullColumnImgUrls[0].url)?
this.contentDetailData.fullColumnImgUrls[0].url:
this.contentDetailData.videoInfo[0].firstFrameImageUri)
.width(CommonConstants.FULL_WIDTH)
.borderRadius($r('app.float.image_border_radius'))
CardMediaInfo({ contentDTO: this.mJumpInfo })
}else{
if(this.contentDetailData.videoInfo!= null && this.contentDetailData.videoInfo.length>0){
GridRow() {
if (this.contentDetailData.videoInfo[0].videoLandScape === 1) {
// 横屏
GridCol({
span: { xs: 12 }
}) {
Stack() {
Image(this.contentDetailData.fullColumnImgUrls!= null && this.contentDetailData.fullColumnImgUrls.length>0&&!StringUtils.isEmpty(this.contentDetailData.fullColumnImgUrls[0].url)?
this.contentDetailData.fullColumnImgUrls[0].url:
this.contentDetailData.videoInfo[0].firstFrameImageUri)
.width(CommonConstants.FULL_WIDTH)
.aspectRatio(16 / 9)
.borderRadius($r('app.float.image_border_radius'))
CardMediaInfo({ contentDTO: this.mJumpInfo })
}
.align(Alignment.BottomEnd)
}
} else {
// 竖图显示，宽度占50%，高度自适应
GridCol({
span: { xs: 6 }
}) {
Stack() {
Image(this.contentDetailData.fullColumnImgUrls!= null && this.contentDetailData.fullColumnImgUrls.length>0&&!StringUtils.isEmpty(this.contentDetailData.fullColumnImgUrls[0].url)?
this.contentDetailData.fullColumnImgUrls[0].url:
this.contentDetailData.videoInfo[0].firstFrameImageUri)
.width(CommonConstants.FULL_WIDTH)
.borderRadius($r('app.float.image_border_radius'))
CardMediaInfo({ contentDTO: this.mJumpInfo })
}
.align(Alignment.BottomEnd)
}
}
}
.align(Alignment.BottomEnd)
.margin({ left: $r('app.float.margin_16'),right: $r('app.float.margin_16'),top: $r('app.float.margin_8')})
.onClick((event: ClickEvent) => {
this.mJumpInfo.objectType = ContentConstants.TYPE_VOD;
ProcessUtils.processPage(this.mJumpInfo)
})
}
}
//特别声明
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')})
}
.margin({top:$r('app.float.margin_16')})
//fixme 评论组件
}
.margin({ left: $r('app.float.margin_16'),right: $r('app.float.margin_16'),top: $r('app.float.margin_8')})
.onClick((event: ClickEvent) => {
this.mJumpInfo.objectType = ContentConstants.TYPE_VOD;
ProcessUtils.processPage(this.mJumpInfo)
})
}
}
//特别声明
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')})
}
//评论组件/底部组件
.width(CommonConstants.FULL_WIDTH)
.height(CommonConstants.FULL_HEIGHT)
.padding({ bottom: 76 })
.scrollBar(BarState.Off)
.alignSelf(ItemAlign.Start)
//底部交互区
Row() {
Image($r('app.media.icon_arrow_left'))
.width(24)
.height(24)
.onClick((event: ClickEvent) => {
router.back()
})
Row() {
Image($r('app.media.icon_comment'))
.width(24)
.height(24)
.margin({ right: 24 })
.id('comment')
Image($r('app.media.icon_star'))
.width(24)
.height(24)
.margin({ right: 24 })
Image($r('app.media.icon_listen'))
.width(24)
.height(24)
.margin({ right: 24 })
Image($r('app.media.icon_forward'))
.width(24)
.height(24)
}
}
.width(CommonConstants.FULL_WIDTH)
.height(56)
.padding({ left: 15, right: 15, bottom: 50, top: 20 })
.justifyContent(FlexAlign.SpaceBetween)
.backgroundColor(Color.White)
}
}
.alignSelf(ItemAlign.Start)
}
.backgroundColor('#FFFFFFFF')
.width('100%')
.height('100%')
.backgroundColor('#FFFFFFFF')
.width('100%')
.height('100%')
}
/**
* 请求（动态）详情页数据
... ...