developOne / harmonyPool

Go to a project
Toggle navigation Toggle navigation pinning
zhenghy
5c6a4983 1 parent d3282e4a

评论组件修改

Inline Side-by-side
Showing 13 changed files with 685 additions and 585 deletions
import { SPHelper,Logger,ToastUtils } from 'wdKit';
import { ContentDetailDTO, Action, ContentDTO,batchLikeAndCollectResult } from 'wdBean';
import { SPHelper, Logger, ToastUtils } from 'wdKit';
import { ContentDetailDTO, Action, ContentDTO, batchLikeAndCollectResult } from 'wdBean';
import { ProcessUtils } from 'wdRouter';
import router from '@ohos.router';
import { batchLikeAndCollectParams } from 'wdDetailPlayApi/src/main/ets/request/ContentDetailRequest';
import { MultiPictureDetailViewModel } from '../viewmodel/MultiPictureDetailViewModel';
import { SpConstants } from 'wdConstant/Index';
import { WDShare } from 'wdShare/Index';
import {LikeComponent} from './view/LikeComponent'
import { LikeComponent } from './view/LikeComponent'
const TAG = 'CarderInteraction'
/**
* 卡片 分享、评论、点赞公用组件
*/
... ... @@ -15,9 +17,10 @@ const TAG = 'CarderInteraction'
export struct CarderInteraction {
@Prop contentDTO: ContentDTO
@State contentId: string = ''
@State contentDetailData: ContentDetailDTO = {} as ContentDetailDTO
@State newsStatusOfUser: batchLikeAndCollectResult = {} as batchLikeAndCollectResult// 点赞、收藏状态
@Provide contentDetailData: ContentDetailDTO = {} as ContentDetailDTO
@State newsStatusOfUser: batchLikeAndCollectResult = {} as batchLikeAndCollectResult // 点赞、收藏状态
@State likeBean: Record<string, string> = {}
async aboutToAppear() {
await this.getContentDetailData()
// 点赞需要数据
... ... @@ -28,51 +31,55 @@ export struct CarderInteraction {
this.likeBean['userHeaderUrl'] = this.contentDetailData.userInfo?.headPhotoUrl + ''
this.likeBean['channelId'] = this.contentDetailData.reLInfo?.channelId + ''
}
build() {
Row(){
Row(){
Image($r('app.media.CarderInteraction_share'))
.width(18)
.height(18)
Text('分享')
.margin({left:4})
.fontSize(14)
.fontColor('#666666')
}
.justifyContent(FlexAlign.Center)
.onClick(()=>{
WDShare.shareContent(this.contentDetailData)
})
Row(){
Image($r('app.media.CarderInteraction_comment'))
.width(18)
.height(18)
Text('评论')
.margin({left:4})
.fontSize(14)
.fontColor('#666666')
}
.justifyContent(FlexAlign.Center)
.onClick(()=>{
ProcessUtils.processPage(this.contentDTO)
})
this.builderLike()
build() {
Row() {
Row() {
Image($r('app.media.CarderInteraction_share'))
.width(18)
.height(18)
Text('分享')
.margin({ left: 4 })
.fontSize(14)
.fontColor('#666666')
}
.width('100%')
.margin({top:11})
.padding({
left:21,
right:21
})
.justifyContent(FlexAlign.SpaceBetween)
.alignItems(VerticalAlign.Center)
}
.justifyContent(FlexAlign.Center)
.onClick(() => {
WDShare.shareContent(this.contentDetailData)
})
Row() {
Image($r('app.media.CarderInteraction_comment'))
.width(18)
.height(18)
Text('评论')
.margin({ left: 4 })
.fontSize(14)
.fontColor('#666666')
}
.justifyContent(FlexAlign.Center)
.onClick(() => {
ProcessUtils.processPage(this.contentDTO)
})
this.builderLike()
}
.width('100%')
.margin({ top: 11 })
.padding({
left: 21,
right: 21
})
.justifyContent(FlexAlign.SpaceBetween)
.alignItems(VerticalAlign.Center)
}
/**
* 点赞组件
*/
@Builder
builderLike() {
Row(){
Row() {
if (this.likeBean?.contentId) {
LikeComponent({
data: this.likeBean,
... ... @@ -88,13 +95,13 @@ export struct CarderInteraction {
* */
private async getContentDetailData() {
try {
let data = await MultiPictureDetailViewModel.getDetailData(this.contentDTO.relId, this.contentDTO.objectId, this.contentDTO.relType)
let data = await MultiPictureDetailViewModel.getDetailData(this.contentDTO.relId, this.contentDTO.objectId,
this.contentDTO.relType)
this.contentDetailData = data[0];
console.log('动态详情',JSON.stringify(this.contentDetailData))
console.log('动态详情', JSON.stringify(this.contentDetailData))
} catch (exception) {
console.log('请求失败',JSON.stringify(exception))
console.log('请求失败', JSON.stringify(exception))
}
}
}
... ...
import { AccountManagerUtils, Logger, DateTimeUtils, SPHelper, NumberFormatterUtils, DisplayUtils,
NetworkUtil } from 'wdKit';
import {
AccountManagerUtils,
Logger,
DateTimeUtils,
SPHelper,
NumberFormatterUtils,
DisplayUtils,
NetworkUtil
} from 'wdKit';
import { MultiPictureDetailViewModel } from '../viewmodel/MultiPictureDetailViewModel';
import { ContentDetailDTO,postBatchAttentionStatusParams,
import {
ContentDetailDTO,
postBatchAttentionStatusParams,
PhotoListBean,
ContentDTO,
batchLikeAndCollectResult,
RmhInfoDTO,
InteractDataDTO, } from 'wdBean';
InteractDataDTO,
} from 'wdBean';
import media from '@ohos.multimedia.media';
import { OperRowListView } from './view/OperRowListView';
import { WDPlayerController } from 'wdPlayer/Index';
... ... @@ -33,6 +43,7 @@ import { detailedSkeleton } from './skeleton/detailSkeleton';
const TAG = 'DynamicDetailComponent'
const PATTERN_DATE_CN_RN: string = 'yyyy年MM月dd日 HH:mm';
// @Preview
@Component
export struct DynamicDetailComponent {
... ... @@ -40,413 +51,431 @@ export struct DynamicDetailComponent {
private relId: string = ''
private contentId: string = ''
private relType: string = ''
//出参
@State contentDetailData: ContentDetailDTO = {} as ContentDetailDTO
@Provide contentDetailData: ContentDetailDTO = {} as ContentDetailDTO
//UI
scroller: Scroller = new Scroller();
//点赞 收藏 评论 数量
@State interactDataDTO: InteractDataDTO = {likeNum:0} as InteractDataDTO
@State interactDataDTO: InteractDataDTO = { likeNum: 0 } as InteractDataDTO
/**
* 关注状态：默认未关注 点击去关注
*/
@State followStatus: String = '';
@State newsStatusOfUser: batchLikeAndCollectResult = {} as batchLikeAndCollectResult// 点赞、收藏状态
@State followStatus: String = '';
@State newsStatusOfUser: batchLikeAndCollectResult = {} as batchLikeAndCollectResult // 点赞、收藏状态
//跳转
private mJumpInfo: ContentDTO = new ContentDTO();
private mJumpInfo: ContentDTO = new ContentDTO();
@State publishTime: string = ''
@State isNetConnected: boolean = true
@State isPageEnd: boolean = false
@State publishCommentModel: publishCommentModel = new publishCommentModel()
async aboutToAppear() {
await this.getContentDetailData()
}
onPageHide() {
}
build() {
Column(){
//logo、日期
Row() {
Image($r('app.media.ic_article_rmh'))
.width($r('app.float.margin_80'))
.height($r('app.float.margin_28'))
.margin({ left: $r('app.float.margin_16') })
Blank()
Text(this.publishTime)
.fontColor($r('app.color.color_B0B0B0'))
.fontSize($r('app.float.font_size_12'))
.lineHeight($r('app.float.margin_28'))
.margin({ right: $r('app.float.margin_16') })
}
.height($r('app.float.margin_48'))
Column() {
//logo、日期
Row() {
Image($r('app.media.ic_article_rmh'))
.width($r('app.float.margin_80'))
.height($r('app.float.margin_28'))
.margin({ left: $r('app.float.margin_16') })
Blank()
Text(this.publishTime)
.fontColor($r('app.color.color_B0B0B0'))
.fontSize($r('app.float.font_size_12'))
.lineHeight($r('app.float.margin_28'))
.margin({ right: $r('app.float.margin_16') })
}
.height($r('app.float.margin_48'))
.width('100%')
.alignItems(VerticalAlign.Bottom)
.padding({ bottom: 5 })
//分割线
Image($r('app.media.ic_news_detail_division'))
.width('100%')
.alignItems(VerticalAlign.Bottom)
.padding({bottom:5})
//分割线
Image($r('app.media.ic_news_detail_division'))
.width('100%')
.height($r('app.float.margin_7'))
.padding({left: $r('app.float.margin_16'), right: $r('app.float.margin_16')} )
Stack({ alignContent: Alignment.Bottom }) {
if (!this.isNetConnected) {
EmptyComponent({
emptyType: 1,
emptyButton: true,
retry: () => {
this.getContentDetailData()
}
}).padding({ bottom: 200 })
.height($r('app.float.margin_7'))
.padding({ left: $r('app.float.margin_16'), right: $r('app.float.margin_16') })
Stack({ alignContent: Alignment.Bottom }) {
if (!this.isNetConnected) {
EmptyComponent({
emptyType: 1,
emptyButton: true,
retry: () => {
this.getContentDetailData()
}
}).padding({ bottom: 200 })
} else {
if (!this.isPageEnd) {
detailedSkeleton()
} else {
if (!this.isPageEnd) {
detailedSkeleton()
}else{
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(this.contentDetailData.rmhInfo?.honoraryIcon)
.width($r('app.float.margin_48'))
.height($r('app.float.margin_48'))
.objectFit(ImageFit.Cover)
.borderRadius($r('app.float.margin_24'))
if(!StringUtils.isEmpty(this.contentDetailData.rmhInfo?.authIcon)){
Stack() {
Image(this.contentDetailData.rmhInfo?.authIcon)
.width($r('app.float.vp_12'))
.height($r('app.float.vp_12'))
.objectFit(ImageFit.Cover)
}
.width($r('app.float.margin_48'))
.height($r('app.float.margin_48'))
.alignContent(Alignment.BottomEnd)
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(this.contentDetailData.rmhInfo?.honoraryIcon)
.width($r('app.float.margin_48'))
.height($r('app.float.margin_48'))
.objectFit(ImageFit.Cover)
.borderRadius($r('app.float.margin_24'))
if (!StringUtils.isEmpty(this.contentDetailData.rmhInfo?.authIcon)) {
Stack() {
Image(this.contentDetailData.rmhInfo?.authIcon)
.width($r('app.float.vp_12'))
.height($r('app.float.vp_12'))
.objectFit(ImageFit.Cover)
}
.width($r('app.float.margin_48'))
.height($r('app.float.margin_48'))
.alignContent(Alignment.BottomEnd)
}
.width($r('app.float.margin_48'))
.height($r('app.float.margin_48'))
.alignContent(Alignment.Center)
.onClick(() => {
ProcessUtils.gotoPeopleShipHomePage(this.contentDetailData.rmhInfo == null ?"":this.contentDetailData.rmhInfo.rmhId)
})
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(!StringUtils.isEmpty(this.followStatus)){
if (this.followStatus == '0') {
Row() {
Blank().layoutWeight(1)
Image($r('app.media.icon_add_attention'))
.width($r('app.float.vp_12'))
.height($r('app.float.vp_12'))
.margin({right:2})
Text('关注')
.textAlign(TextAlign.Center)
.fontSize($r('app.float.font_size_12'))
.fontColor($r('app.color.color_fff'))
Blank().layoutWeight(1)
}
}
.width($r('app.float.margin_48'))
.height($r('app.float.margin_48'))
.alignContent(Alignment.Center)
.onClick(() => {
ProcessUtils.gotoPeopleShipHomePage(this.contentDetailData.rmhInfo == null ? "" :
this.contentDetailData.rmhInfo.rmhId)
})
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 (!StringUtils.isEmpty(this.followStatus)) {
if (this.followStatus == '0') {
Row() {
Blank().layoutWeight(1)
Image($r('app.media.icon_add_attention'))
.width($r('app.float.vp_12'))
.height($r('app.float.vp_12'))
.margin({ right: 2 })
Text('关注')
.textAlign(TextAlign.Center)
.fontSize($r('app.float.font_size_12'))
.fontColor($r('app.color.color_fff'))
Blank().layoutWeight(1)
}
.width($r('app.float.margin_54'))
.height($r('app.float.margin_24'))
.borderRadius($r('app.float.vp_3'))
.backgroundColor($r('app.color.color_ED2800'))
.onClick(() => {
this.handleAccention()
})
} 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'))
.backgroundColor($r('app.color.color_ED2800'))
.borderColor($r('app.color.color_CCCCCC_1A'))
.backgroundColor($r('app.color.color_CCCCCC_1A'))
.fontColor($r('app.color.color_CCCCCC'))
.onClick(() => {
this.handleAccention()
})
} 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_1A'))
.backgroundColor($r('app.color.color_CCCCCC_1A'))
.fontColor($r('app.color.color_CCCCCC'))
.onClick(() => {
this.handleAccention()
})
}
}
}
.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})
}
.width('100%')
.margin({ left: $r('app.float.margin_16') })
}
}
.onClick((event: ClickEvent) => {
ProcessUtils.gotoMultiPictureListPage(this.contentDetailData.photoList,index)
})
} 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;
})
}
.onClick((event: ClickEvent) => {
ProcessUtils.gotoMultiPictureListPage(this.contentDetailData.photoList,index)
})
}
} else if (this.contentDetailData.photoList.length === 4) {
//内容
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: { xs: 4 }
span: this.getPicType(item) === 1 ? 12 : 8
}) {
Image(item.picPath)
.aspectRatio(1)
.borderRadius(this.caclImageRadius(index))
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,index)
ProcessUtils.gotoMultiPictureListPage(this.contentDetailData.photoList, index)
})
} else {
GridCol({
span: { sm: 4, lg: 3 }
span: { xs: 8 }
}) {
Image(item.picPath)
.aspectRatio(1)
.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;
})
}
.onClick((event: ClickEvent) => {
ProcessUtils.gotoMultiPictureListPage(this.contentDetailData.photoList,index)
ProcessUtils.gotoMultiPictureListPage(this.contentDetailData.photoList, index)
})
}
})
}
.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) {
// 横屏
} else if (this.contentDetailData.photoList.length === 4) {
GridCol({
span: { xs: 12 }
span: { xs: 4 }
}) {
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(DisplayUtils.getDeviceWidth()- 32)
.height((DisplayUtils.getDeviceWidth()-32)* 9 / 16)
.borderRadius($r('app.float.image_border_radius'))
CardMediaInfo({ contentDTO: this.mJumpInfo })
}
.align(Alignment.BottomEnd)
Image(item.picPath)
.aspectRatio(1)
.borderRadius(this.caclImageRadius(index))
}
.onClick((event: ClickEvent) => {
ProcessUtils.gotoMultiPictureListPage(this.contentDetailData.photoList, index)
})
} else {
// 竖图显示，宽度占50%，高度自适应
GridCol({
span: { xs: 6 }
span: { sm: 4, lg: 3 }
}) {
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(DisplayUtils.getDeviceWidth()/2)
.height(DisplayUtils.getDeviceWidth()/2* 4 / 3)
.borderRadius($r('app.float.image_border_radius'))
CardMediaInfo({ contentDTO: this.mJumpInfo })
}
.align(Alignment.BottomEnd)
Image(item.picPath)
.aspectRatio(1)
.borderRadius(this.caclImageRadius(index))
}
.onClick((event: ClickEvent) => {
ProcessUtils.gotoMultiPictureListPage(this.contentDetailData.photoList, index)
})
}
}
.padding({ left: this.contentDetailData.videoInfo[0].videoLandScape === 1?0: 25,top: $r('app.float.margin_8')})
.onClick((event: ClickEvent) => {
ProcessUtils.processPage(this.mJumpInfo)
})
}
.margin({
left: $r('app.float.margin_16'),
right: $r('app.float.margin_16'),
top: $r('app.float.margin_8')
})
}
//特别声明
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.vp_12')
,right: $r('app.float.vp_12') })
//微信/朋友圈/微博
// 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(){
Blank().layoutWeight(1)
Image(this.newsStatusOfUser?.likeStatus == '1'?
$r('app.media.icon_like_selected_redheart')
:$r('app.media.icon_like_unselect_grey_redheart'))
.width($r('app.float.margin_36'))
.height($r('app.float.margin_36'))
.objectFit(ImageFit.Cover)
.margin({ left: $r('app.float.margin_6_negative'),right: $r('app.float.margin_6_negative')})
if(this.interactDataDTO?.likeNum != 0){
Text(NumberFormatterUtils.formatNumberWithWan(this.interactDataDTO?.likeNum))
.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')})
} 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(DisplayUtils.getDeviceWidth() - 32)
.height((DisplayUtils.getDeviceWidth() - 32) * 9 / 16)
.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(DisplayUtils.getDeviceWidth() / 2)
.height(DisplayUtils.getDeviceWidth() / 2 * 4 / 3)
.borderRadius($r('app.float.image_border_radius'))
CardMediaInfo({ contentDTO: this.mJumpInfo })
}
.align(Alignment.BottomEnd)
}
}
}
Blank().layoutWeight(1)
.padding({
left: this.contentDetailData.videoInfo[0].videoLandScape === 1 ? 0 : 25,
top: $r('app.float.margin_8')
})
.onClick((event: ClickEvent) => {
ProcessUtils.processPage(this.mJumpInfo)
})
}
.width($r('app.float.margin_154'))
.height($r('app.float.margin_40'))
.margin({top:$r('app.float.margin_16')})
.borderWidth($r('app.float.margin_1'))
.borderColor($r('app.color.color_EDEDED'))
.borderRadius($r('app.float.margin_20'))
.onClick((event: ClickEvent) => {
//点赞操作
this.toggleLikeStatus()
}
//特别声明
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.vp_12')
, right: $r('app.float.vp_12')
})
// 评论
if (this.contentDetailData?.openComment) {
Divider().strokeWidth(6).color('#f5f5f5').margin({top:$r('app.float.margin_24')})
CommentComponent({
publishCommentModel: {
targetId: String(this.contentDetailData?.newsId || ''),
targetRelId: this.contentDetailData?.reLInfo?.relId,
targetTitle: this.contentDetailData?.newsTitle,
targetRelType: this.contentDetailData?.reLInfo?.relType,
targetRelObjectId: String(this.contentDetailData?.reLInfo?.relObjectId),
keyArticle: String(this.contentDetailData?.keyArticle),
targetType: String(this.contentDetailData?.newsType),
} as publishCommentModel
})
//微信/朋友圈/微博
// 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() {
Blank().layoutWeight(1)
Image(this.newsStatusOfUser?.likeStatus == '1' ?
$r('app.media.icon_like_selected_redheart')
: $r('app.media.icon_like_unselect_grey_redheart'))
.width($r('app.float.margin_36'))
.height($r('app.float.margin_36'))
.objectFit(ImageFit.Cover)
.margin({ left: $r('app.float.margin_6_negative'), right: $r('app.float.margin_6_negative') })
if (this.interactDataDTO?.likeNum != 0) {
Text(NumberFormatterUtils.formatNumberWithWan(this.interactDataDTO?.likeNum))
.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') })
}
Blank().layoutWeight(1)
}
.width($r('app.float.margin_154'))
.height($r('app.float.margin_40'))
.margin({ top: $r('app.float.margin_16') })
.borderWidth($r('app.float.margin_1'))
.borderColor($r('app.color.color_EDEDED'))
.borderRadius($r('app.float.margin_20'))
.onClick((event: ClickEvent) => {
//点赞操作
this.toggleLikeStatus()
})
// 评论
if (this.contentDetailData?.openComment) {
Divider().strokeWidth(6).color('#f5f5f5').margin({ top: $r('app.float.margin_24') })
CommentComponent({
publishCommentModel: {
targetId: String(this.contentDetailData?.newsId || ''),
targetRelId: this.contentDetailData?.reLInfo?.relId,
targetTitle: this.contentDetailData?.newsTitle,
targetRelType: this.contentDetailData?.reLInfo?.relType,
targetRelObjectId: String(this.contentDetailData?.reLInfo?.relObjectId),
keyArticle: String(this.contentDetailData?.keyArticle),
targetType: String(this.contentDetailData?.newsType),
} as publishCommentModel
})
}
Blank().layoutWeight(1)
}
.width(CommonConstants.FULL_WIDTH)
.height(CommonConstants.FULL_HEIGHT)
.padding({ bottom: 76 })
.scrollBar(BarState.Off)
.alignSelf(ItemAlign.Start)
}
.width(CommonConstants.FULL_WIDTH)
.height(CommonConstants.FULL_HEIGHT)
.padding({ bottom: 76 })
.scrollBar(BarState.Off)
.alignSelf(ItemAlign.Start)
}
//底部交互区
OperRowListView({
contentDetailData: this.contentDetailData,
publishCommentModel: this.publishCommentModel,
operationButtonList: ['comment', 'collect', 'share'],
styleType: 1,
})
}
//底部交互区
OperRowListView({
contentDetailData: this.contentDetailData,
publishCommentModel: this.publishCommentModel,
operationButtonList: ['comment', 'collect', 'share'],
styleType: 1,
})
}
.alignSelf(ItemAlign.Start)
.backgroundColor('#FFFFFFFF')
.width('100%')
.height('100%')
}
.alignSelf(ItemAlign.Start)
.backgroundColor('#FFFFFFFF')
.width('100%')
.height('100%')
}
/**
* 请求（动态）详情页数据
* */
... ... @@ -460,9 +489,9 @@ export struct DynamicDetailComponent {
DateTimeUtils.parseDate(this.contentDetailData?.publishTime, DateTimeUtils.PATTERN_DATE_TIME_HYPHEN);
let _publishTime = DateTimeUtils.formatDate(dateTime, PATTERN_DATE_CN_RN)
this.publishTime = DateTimeUtils.removeTrailingZeros(_publishTime)
console.log('动态详情',JSON.stringify(this.contentDetailData))
console.log('动态详情', JSON.stringify(this.contentDetailData))
} catch (exception) {
console.log('请求失败',JSON.stringify(exception))
console.log('请求失败', JSON.stringify(exception))
this.isPageEnd = true;
}
this.getBatchAttentionStatus()
... ... @@ -471,10 +500,11 @@ export struct DynamicDetailComponent {
this.interactDataV2()
}
private async interactDataV2() {
this.interactDataDTO = await MultiPictureDetailViewModel.interactDataV2(
this.contentDetailData?.newsId+'',this.contentDetailData?.newsType+'',this.contentDetailData.reLInfo == null ?'':this.contentDetailData.reLInfo?.relId,this.contentDetailData.rmhPlatform)
this.contentDetailData?.newsId + '', this.contentDetailData?.newsType + '',
this.contentDetailData.reLInfo == null ? '' : this.contentDetailData.reLInfo?.relId,
this.contentDetailData.rmhPlatform)
}
// 已登录->查询用户对作品点赞、收藏状态
... ... @@ -514,30 +544,31 @@ export struct DynamicDetailComponent {
return
}
try {
const params: postBatchAttentionStatusParams = {
creatorIds: [{ creatorId: this.contentDetailData?.rmhInfo?.rmhId ?? '' }]
}
let data = await MultiPictureDetailViewModel.getBatchAttentionStatus(params)
this.followStatus = data[0]?.status;
Logger.info(TAG, `followStatus：${JSON.stringify(this.followStatus)}`)
} catch (exception) {
this.followStatus = '0';
const params: postBatchAttentionStatusParams = {
creatorIds: [{ creatorId: this.contentDetailData?.rmhInfo?.rmhId ?? '' }]
}
let data = await MultiPictureDetailViewModel.getBatchAttentionStatus(params)
this.followStatus = data[0]?.status;
Logger.info(TAG, `followStatus：${JSON.stringify(this.followStatus)}`)
} catch (exception) {
this.followStatus = '0';
}
}
//创建跳转信息
makeJumpInfo(){
makeJumpInfo() {
this.mJumpInfo.pageId = 'dynamicDetailPage'
this.mJumpInfo.objectId = this.contentDetailData.newsId+""
this.mJumpInfo.relType = this.contentDetailData.reLInfo?.relType+""
this.mJumpInfo.relId = this.contentDetailData.reLInfo?.relId+""
this.mJumpInfo.objectType = (this.contentDetailData.newsType+"") == ContentConstants.TYPE_FOURTEEN?this.contentDetailData.newsType+"":ContentConstants.TYPE_VOD
if(this.contentDetailData.videoInfo!= null && this.contentDetailData.videoInfo.length>0){
this.mJumpInfo.objectId = this.contentDetailData.newsId + ""
this.mJumpInfo.relType = this.contentDetailData.reLInfo?.relType + ""
this.mJumpInfo.relId = this.contentDetailData.reLInfo?.relId + ""
this.mJumpInfo.objectType =
(this.contentDetailData.newsType + "") == ContentConstants.TYPE_FOURTEEN ? this.contentDetailData.newsType + "" :
ContentConstants.TYPE_VOD
if (this.contentDetailData.videoInfo != null && this.contentDetailData.videoInfo.length > 0) {
this.mJumpInfo.videoInfo = this.contentDetailData.videoInfo[0]
}
}
caclImageRadius(index: number) {
let radius: radiusType = {
topLeft: index === 0 ? $r('app.float.image_border_radius') : 0,
... ... @@ -561,11 +592,11 @@ export struct DynamicDetailComponent {
return radius
}
getPicType(item: PhotoListBean){
getPicType(item: PhotoListBean) {
if (item.width && item.width) {
if (item.width / item.height > 343/172) {
if (item.width / item.height > 343 / 172) {
return 1; //横长图
} else if (item.height / item.width > 305/228) {
} else if (item.height / item.width > 305 / 228) {
return 2; //竖长图
} else {
return 3
... ... @@ -590,7 +621,7 @@ export struct DynamicDetailComponent {
attentionUserType: this.contentDetailData?.rmhInfo?.userType || '', //被关注用户类型（1 普通用户 2 视频号 3 矩阵号）
attentionUserId: this.contentDetailData?.rmhInfo?.userId || '', // 被关注用户号主id
attentionCreatorId: this.contentDetailData?.rmhInfo?.rmhId || '', // 被关注用户号主id
status: this.followStatus == '0'? 1:0,
status: this.followStatus == '0' ? 1 : 0,
}
ContentDetailRequest.postInteractAccentionOperate(params2).then(res => {
console.log('关注号主==', JSON.stringify(res.data))
... ...
... ... @@ -40,7 +40,7 @@ const TAG: string = 'ImageAndTextPageComponent'
export struct ImageAndTextPageComponent {
scroller: Scroller = new Scroller();
action: Action = {} as Action
@State contentDetailData: ContentDetailDTO [] = [] as ContentDetailDTO []
@Provide contentDetailData: ContentDetailDTO = {} as ContentDetailDTO
@State recommendList: ContentDTO[] = []
@State newsStatusOfUser: batchLikeAndCollectResult | undefined = undefined // 点赞、收藏状态
@State interactData: InteractDataDTO = {} as InteractDataDTO
... ... @@ -52,11 +52,12 @@ export struct ImageAndTextPageComponent {
@State isNetConnected: boolean = true
@State info: Area | null = null
@State likeNum: number = 0
build() {
Column() {
// 发布时间
Row() {
Image(this.contentDetailData[0]?.rmhInfo ? $r('app.media.logo_rmh') : $r('app.media.logo_rmrb'))
Image(this.contentDetailData?.rmhInfo ? $r('app.media.logo_rmh') : $r('app.media.logo_rmrb'))
.width(80)
.height(28)
Text(this.publishTime)
... ... @@ -83,26 +84,26 @@ export struct ImageAndTextPageComponent {
Scroll(this.scroller) {
Column() {
ImageAndTextWebComponent({
contentDetailData: this.contentDetailData,
contentDetailData: [this.contentDetailData],
action: this.action,
isPageEnd: $isPageEnd
})
.padding({bottom:10})
.padding({ bottom: 10 })
Column() {
// 点赞
if (this.contentDetailData[0]?.openLikes && this.contentDetailData[0]?.likesStyle !== 4) {
if (this.contentDetailData?.openLikes && this.contentDetailData?.likesStyle !== 4) {
Row() {
Row() {
if (this.newsStatusOfUser?.likeStatus === '1') {
Image(this.contentDetailData[0]?.likesStyle === 1 ? $r('app.media.ic_like_check') :
(this.contentDetailData[0]?.likesStyle === 2 ? $r('app.media.icon_prayer_active') :
Image(this.contentDetailData?.likesStyle === 1 ? $r('app.media.ic_like_check') :
(this.contentDetailData?.likesStyle === 2 ? $r('app.media.icon_prayer_active') :
$r('app.media.icon_candle_active')))
.width(24)
.height(24)
.margin({ right: 5 })
} else {
Image(this.contentDetailData[0]?.likesStyle === 1 ? $r('app.media.icon_like') :
(this.contentDetailData[0]?.likesStyle === 2 ? $r('app.media.icon_prayer') :
Image(this.contentDetailData?.likesStyle === 1 ? $r('app.media.icon_like') :
(this.contentDetailData?.likesStyle === 2 ? $r('app.media.icon_prayer') :
$r('app.media.icon_candle')))
.width(24)
.height(24)
... ... @@ -129,7 +130,7 @@ export struct ImageAndTextPageComponent {
})
}.width(CommonConstants.FULL_WIDTH)
.padding({top:14,bottom:24})
.padding({ top: 14, bottom: 24 })
.justifyContent(FlexAlign.Center)
}
if (this.recommendList.length > 0) {
... ... @@ -137,7 +138,7 @@ export struct ImageAndTextPageComponent {
RecommendList({ recommendList: this.recommendList })
}
// 评论
if (this.contentDetailData[0]?.openComment) {
if (this.contentDetailData?.openComment) {
Divider().strokeWidth(6).color('#f5f5f5')
CommentComponent({
publishCommentModel: this.publishCommentModel
... ... @@ -173,7 +174,7 @@ export struct ImageAndTextPageComponent {
//底部交互区
if (this.operationButtonList.length) {
OperRowListView({
contentDetailData: this.contentDetailData[0],
contentDetailData: this.contentDetailData,
publishCommentModel: this.publishCommentModel,
operationButtonList: this.operationButtonList,
styleType: 1,
... ... @@ -207,29 +208,29 @@ export struct ImageAndTextPageComponent {
}
let detailBeans = await DetailViewModel.getDetailPageData(relId, contentId, relType)
if (detailBeans && detailBeans.length > 0) {
this.contentDetailData = detailBeans;
this.contentDetailData = detailBeans[0];
let dateTime =
DateTimeUtils.parseDate(this.contentDetailData[0]?.publishTime, DateTimeUtils.PATTERN_DATE_TIME_HYPHEN);
DateTimeUtils.parseDate(this.contentDetailData?.publishTime, DateTimeUtils.PATTERN_DATE_TIME_HYPHEN);
let _publishTime = DateTimeUtils.formatDate(dateTime, PATTERN_DATE_CN_RN)
this.publishTime = DateTimeUtils.removeTrailingZeros(_publishTime)
if (this.contentDetailData[0]?.recommendShow === 1) {
if (this.contentDetailData?.recommendShow === 1) {
this.getRecommend()
}
if (this.contentDetailData[0]?.openLikes === 1) {
if (this.contentDetailData?.openLikes === 1) {
this.getInteractDataStatus()
this.queryContentInteractCount()
}
if (this.contentDetailData[0]?.openComment) {
this.publishCommentModel.targetId = String(this.contentDetailData[0]?.newsId || '')
this.publishCommentModel.targetRelId = String(this.contentDetailData[0]?.reLInfo?.relId)
this.publishCommentModel.targetTitle = this.contentDetailData[0]?.newsTitle
this.publishCommentModel.targetRelType = String(this.contentDetailData[0]?.reLInfo?.relType)
this.publishCommentModel.targetRelObjectId = String(this.contentDetailData[0]?.reLInfo?.relObjectId)
this.publishCommentModel.keyArticle = String(this.contentDetailData[0]?.keyArticle)
this.publishCommentModel.targetType = String(this.contentDetailData[0]?.newsType)
if (this.contentDetailData?.openComment) {
this.publishCommentModel.targetId = String(this.contentDetailData?.newsId || '')
this.publishCommentModel.targetRelId = String(this.contentDetailData?.reLInfo?.relId)
this.publishCommentModel.targetTitle = this.contentDetailData?.newsTitle
this.publishCommentModel.targetRelType = String(this.contentDetailData?.reLInfo?.relType)
this.publishCommentModel.targetRelObjectId = String(this.contentDetailData?.reLInfo?.relObjectId)
this.publishCommentModel.keyArticle = String(this.contentDetailData?.keyArticle)
this.publishCommentModel.targetType = String(this.contentDetailData?.newsType)
}
if (this.contentDetailData[0]?.openAudio && this.contentDetailData[0]?.audioList?.length &&
this.contentDetailData[0]?.audioList[0].audioUrl) {
if (this.contentDetailData?.openAudio && this.contentDetailData?.audioList?.length &&
this.contentDetailData?.audioList[0].audioUrl) {
this.operationButtonList = ['comment', 'collect', 'listen', 'share']
} else {
this.operationButtonList = ['comment', 'collect', 'share']
... ... @@ -242,11 +243,11 @@ export struct ImageAndTextPageComponent {
let params: postRecommendListParams = {
imei: HttpUtils.getImei(),
userId: HttpUtils.getUserId(),
contentId: String(this.contentDetailData[0]?.newsId),
recType: Number(this.contentDetailData[0]?.reLInfo?.relType),
contentType: this.contentDetailData[0]?.newsType,
relId: this.contentDetailData[0]?.reLInfo?.relId,
channelId: String(this.contentDetailData[0]?.reLInfo?.channelId)
contentId: String(this.contentDetailData?.newsId),
recType: Number(this.contentDetailData?.reLInfo?.relType),
contentType: this.contentDetailData?.newsType,
relId: this.contentDetailData?.reLInfo?.relId,
channelId: String(this.contentDetailData?.reLInfo?.channelId)
}
let recommendList = await DetailViewModel.postRecommendList(params)
this.recommendList = recommendList;
... ... @@ -258,8 +259,8 @@ export struct ImageAndTextPageComponent {
const params: batchLikeAndCollectParams = {
contentList: [
{
contentId: this.contentDetailData[0]?.newsId + '',
contentType: this.contentDetailData[0]?.newsType + '',
contentId: this.contentDetailData?.newsId + '',
contentType: this.contentDetailData?.newsType + '',
}
]
}
... ... @@ -284,8 +285,8 @@ export struct ImageAndTextPageComponent {
}
const params: postExecuteLikeParams = {
status: this.newsStatusOfUser?.likeStatus === '1' ? '0' : '1',
contentId: this.contentDetailData[0]?.newsId + '',
contentType: this.contentDetailData[0]?.newsType + '',
contentId: this.contentDetailData?.newsId + '',
contentType: this.contentDetailData?.newsType + '',
}
PageRepository.postExecuteLike(params).then(res => {
console.log(TAG, '点赞、取消点赞', 'toggleLikeStatus==',)
... ... @@ -304,8 +305,8 @@ export struct ImageAndTextPageComponent {
console.error(TAG, 'contentDetailData2222', JSON.stringify(this.contentDetailData))
const params: contentListParams = {
contentList: [{
contentId: this.contentDetailData[0]?.newsId + '',
contentType: this.contentDetailData[0]?.newsType,
contentId: this.contentDetailData?.newsId + '',
contentType: this.contentDetailData?.newsType,
}]
}
PageRepository.getContentInteract(params).then(res => {
... ...
import { NetworkUtil, Logger, NetworkType, SPHelper, WindowModel, StringUtils} from 'wdKit';
import { NetworkUtil, Logger, NetworkType, SPHelper, WindowModel, StringUtils } from 'wdKit';
import { ResponseDTO } from 'wdNetwork';
import {
ContentDetailDTO,
... ... @@ -35,7 +35,7 @@ export struct MultiPictureDetailPageComponent {
private picWidth: number = 0
@State picHeight: number = 0
@State titleHeight: number = 0
@State contentDetailData: ContentDetailDTO = {} as ContentDetailDTO
@Provide contentDetailData: ContentDetailDTO = {} as ContentDetailDTO
@Provide @Watch('onCurrentPageNumUpdated') currentPageNum: string = '01'
private swiperController: SwiperController = new SwiperController()
private swiperControllerItem: SwiperController = new SwiperController()
... ... @@ -49,8 +49,8 @@ export struct MultiPictureDetailPageComponent {
@State topSafeHeight: number = AppStorage.get<number>('topSafeHeight') as number;
@State bottomSafeHeight: number = AppStorage.get<number>('bottomSafeHeight') as number;
@State windowHeight: number = AppStorage.get<number>('windowHeight') as number;
@State currentOffset:number = 0
@State duration:number = 0
@State currentOffset: number = 0
@State duration: number = 0
//watch监听页码回调
onCurrentPageNumUpdated(): void {
... ... @@ -83,7 +83,6 @@ export struct MultiPictureDetailPageComponent {
}
}
aboutToDisappear() {
}
... ... @@ -101,10 +100,10 @@ export struct MultiPictureDetailPageComponent {
@Builder
init() {
if (this.contentDetailData.rmhPlatform == 1) {
if(!this.showDownload) {
if (!this.showDownload) {
Row() {
Row({ space: 8 }) {
if (this.getImgUrl()){
if (this.getImgUrl()) {
Row() {
Stack() {
Image(this.getImgUrl())
... ... @@ -115,7 +114,7 @@ export struct MultiPictureDetailPageComponent {
.height(36)
.objectFit(ImageFit.Fill)
.interpolation(ImageInterpolation.High)
if(!StringUtils.isEmpty(this.contentDetailData.rmhInfo?.authIcon)){
if (!StringUtils.isEmpty(this.contentDetailData.rmhInfo?.authIcon)) {
Stack() {
Image(this.contentDetailData.rmhInfo?.authIcon)
.width($r('app.float.vp_13'))
... ... @@ -219,7 +218,7 @@ export struct MultiPictureDetailPageComponent {
.width('100%')
.height(44)
.zIndex(10)
.margin({top:`${this.topSafeHeight + 12}px`})
.margin({ top: `${this.topSafeHeight + 12}px` })
.alignRules({
top: { anchor: "__container__", align: VerticalAlign.Top },
middle: { anchor: "__container__", align: HorizontalAlign.Center }
... ... @@ -249,15 +248,15 @@ export struct MultiPictureDetailPageComponent {
this.currentOffset = Math.abs(extraInfo.currentOffset)
})
.onTouch((event: TouchEvent) => {
if(this.duration === 0) {
this.duration = 500
}
if(event.type === 1) {
// if(this.currentOffset > px2vp((this.windowHeight - item.height)/2 - 100)) {
if(this.currentOffset > 160) {
router.back()
}
if (this.duration === 0) {
this.duration = 500
}
if (event.type === 1) {
// if(this.currentOffset > px2vp((this.windowHeight - item.height)/2 - 100)) {
if (this.currentOffset > 160) {
router.back()
}
}
})
})
}
... ... @@ -296,9 +295,9 @@ export struct MultiPictureDetailPageComponent {
middle: { anchor: "__container__", align: HorizontalAlign.Center }
})
}
Column(){
if(!this.showDownload) {
Column(){
Column() {
if (!this.showDownload) {
Column() {
Row() {
Scroll(this.scroller) {
Row() {
... ... @@ -306,7 +305,7 @@ export struct MultiPictureDetailPageComponent {
direction: FlexDirection.Column,
justifyContent: FlexAlign.Start
}) {
if(this.contentDetailData?.photoList?.length) {
if (this.contentDetailData?.photoList?.length) {
Text() {
Span(`${this.swiperIndex + 1}`)
.fontSize(24)
... ... @@ -322,7 +321,7 @@ export struct MultiPictureDetailPageComponent {
.fontColor(Color.White)
.margin(4)
}
if(this.contentDetailData.newsTitle) {
if (this.contentDetailData.newsTitle) {
Text(`${this.contentDetailData.newsTitle}`)
.fontColor(Color.White)
.fontSize(16)
... ... @@ -336,7 +335,7 @@ export struct MultiPictureDetailPageComponent {
right: 0
})
}
if(this.contentDetailData.photoList?.[this.swiperIndex].picDesc) {
if (this.contentDetailData.photoList?.[this.swiperIndex].picDesc) {
Text(`${this.contentDetailData.photoList?.[this.swiperIndex].picDesc}`)
.fontColor(Color.White)
.fontSize(14)
... ... @@ -361,6 +360,7 @@ export struct MultiPictureDetailPageComponent {
.height(px2vp(this.titleHeight))
.align(Alignment.Bottom)
}
OperRowListView({
contentDetailData: this.contentDetailData,
publishCommentModel: this.publishCommentModel,
... ... @@ -372,14 +372,14 @@ export struct MultiPictureDetailPageComponent {
TransitionEffect.translate({ x: 0, y: `-${this.bottomSafeHeight}px` })
))
}
if(this.showDownload) {
Column(){
if (this.showDownload) {
Column() {
Row() {
Flex({
direction: FlexDirection.Row,
justifyContent: FlexAlign.SpaceBetween
}) {
if(this.contentDetailData?.photoList?.length) {
if (this.contentDetailData?.photoList?.length) {
Text() {
Span(`${this.swiperIndex + 1}`)
.fontSize(24)
... ... @@ -396,7 +396,7 @@ export struct MultiPictureDetailPageComponent {
.margin(4)
}
if(this.contentDetailData.photoList?.[this.swiperIndex].picPath) {
if (this.contentDetailData.photoList?.[this.swiperIndex].picPath) {
ImageDownloadComponent({ url: this.contentDetailData.photoList?.[this.swiperIndex].picPath })
.margin({
top: 8,
... ...
... ... @@ -18,7 +18,7 @@ export struct SpacialTopicPageComponent {
action: Action = {} as Action
@State webUrl: string = '';
@State isPageEnd: boolean = false
@State contentDetailData: ContentDetailDTO [] = [] as ContentDetailDTO []
@Provide contentDetailData: ContentDetailDTO = {} as ContentDetailDTO
private h5ReceiveAppData: H5ReceiveDetailBean = { dataSource: '2' } as H5ReceiveDetailBean
private webPrepared = false;
private dataPrepared = false;
... ... @@ -63,15 +63,15 @@ export struct SpacialTopicPageComponent {
}
let detailBeans = await DetailViewModel.getDetailPageData(relId, contentId, relType)
if (detailBeans && detailBeans.length > 0) {
this.contentDetailData = detailBeans;
this.contentDetailData = detailBeans[0];
// if (this.contentDetailData[0]?.openComment) {
this.publishCommentModel.targetId = String(this.contentDetailData[0]?.newsId || '')
this.publishCommentModel.targetRelId = String(this.contentDetailData[0]?.reLInfo?.relId)
this.publishCommentModel.targetTitle = this.contentDetailData[0]?.newsTitle
this.publishCommentModel.targetRelType = String(this.contentDetailData[0]?.reLInfo?.relType)
this.publishCommentModel.targetRelObjectId = String(this.contentDetailData[0]?.reLInfo?.relObjectId)
this.publishCommentModel.keyArticle = String(this.contentDetailData[0]?.keyArticle)
this.publishCommentModel.targetType = String(this.contentDetailData[0]?.newsType)
this.publishCommentModel.targetId = String(this.contentDetailData?.newsId || '')
this.publishCommentModel.targetRelId = String(this.contentDetailData?.reLInfo?.relId)
this.publishCommentModel.targetTitle = this.contentDetailData?.newsTitle
this.publishCommentModel.targetRelType = String(this.contentDetailData?.reLInfo?.relType)
this.publishCommentModel.targetRelObjectId = String(this.contentDetailData?.reLInfo?.relObjectId)
this.publishCommentModel.keyArticle = String(this.contentDetailData?.keyArticle)
this.publishCommentModel.targetType = String(this.contentDetailData?.newsType)
// }
this.trySendData2H5()
}
... ... @@ -92,17 +92,17 @@ export struct SpacialTopicPageComponent {
}
.width(CommonConstants.FULL_WIDTH)
.height(CommonConstants.FULL_HEIGHT)
.padding({bottom:75})
.padding({ bottom: 75 })
if (!this.isPageEnd) {
detailedSkeleton()
}
//底部交互区
OperRowListView({
contentDetailData: this.contentDetailData[0],
publishCommentModel: this.publishCommentModel,
operationButtonList: this.operationButtonList,
})
OperRowListView({
contentDetailData: this.contentDetailData,
publishCommentModel: this.publishCommentModel,
operationButtonList: this.operationButtonList,
})
}
}.width(CommonConstants.FULL_WIDTH).height(CommonConstants.FULL_HEIGHT)
}
... ...
... ... @@ -3,18 +3,26 @@ import { LikeViewModel } from '../../viewmodel/LikeViewModel'
import { SPHelper } from 'wdKit';
import { WDRouterPage, WDRouterRule } from 'wdRouter/Index';
import { SpConstants } from 'wdConstant/Index';
import { ContentDetailDTO } from 'wdBean/Index';
const TAG = 'LikeComponent';
interface ILikeStyleResp {
url: Resource;
name: string;
}
@Component
export struct LikeComponent {
@Consume contentDetailData: ContentDetailDTO
@State likesStyle: number = this.contentDetailData.likesStyle // 赞样式 1红心(点赞) 2大拇指(祈福) 3蜡烛(默哀) 4置空
@State likeStatus: boolean = false
viewModel: LikeViewModel = new LikeViewModel()
@Prop data: Record<string, string>
enableBtn = true
componentType : number = 1 //1: 底部栏目样式 2: 新闻页中间位置样式 3:动态Tab内容下的互动入口
styleType : number = 1 //1: 白色背景（图文底部栏） 2: 黑色背景（图集底部栏）
componentType: number = 1 //1: 底部栏目样式 2: 新闻页中间位置样式 3:动态Tab内容下的互动入口
styleType: number = 1 //1: 白色背景（图文底部栏） 2: 黑色背景（图集底部栏）
@State likeCount: number = 0 //点赞数
//上层传值 样例
... ... @@ -37,106 +45,157 @@ export struct LikeComponent {
}
build() {
if (this.componentType == 2){
if (this.componentType == 2) {
//2: 新闻页中间位置样式
Column() {
Button(){
Row(){
Image(this.likeStatus ? $r('app.media.icon_like_select') : $r('app.media.icon_like_default'))
.width(20)
.height(20)
Text(this.likeCount.toString())
.height(20)
.margin({
right: 0,
left: 4
})
.fontColor(this.likeStatus ? '#ED2800' : '#222222')
.fontSize('16')
}
.justifyContent(FlexAlign.Center)
.width('100%')
.height('100%')
this.likeCompStyle2()
} else if (this.componentType == 3) {
this.likeCompStyle3()
} else {
//1: 底部栏目样式 默认样式
this.likeCompStyle1()
}
}
/**
* 将点赞样式转换为icon
*/
transLikeStyle(): ILikeStyleResp {
if (this.likesStyle === 1) {
return {
url: this.likeStatus ? $r(`app.media.ic_like_check`) : $r(`app.media.ic_like_uncheck`),
name: '赞'
}
} else if (this.likesStyle === 2) {
return {
url: this.likeStatus ? $r(`app.media.ic_thub_check`) : $r(`app.media.ic_thub_uncheck`),
name: '祈祷'
}
} else if (this.likesStyle === 3) {
return {
url: this.likeStatus ? $r(`app.media.ic_candle_check`) :
$r(`app.media.ic_candle_uncheck`),
name: '默哀'
}
}
return {
url: $r(`app.media.icon_like_ckeck`), name: '点赞'
}
}
@Builder
likeCompStyle2() {
//2: 新闻页中间位置样式
Column() {
Button() {
Row() {
Image(this.likeStatus ? $r('app.media.icon_like_select') : $r('app.media.icon_like_default'))
.width(20)
.height(20)
Text(this.likeCount.toString())
.height(20)
.margin({
right: 0,
left: 4
})
.fontColor(this.likeStatus ? '#ED2800' : '#222222')
.fontSize('16')
}
.justifyContent(FlexAlign.Center)
.width('100%')
.height('100%')
.backgroundColor(Color.White)
.type(ButtonType.Capsule)
.borderColor('#EDEDED')
.borderRadius(20)
.borderWidth(1)
.onClick(()=>{
this.clickButtonEvent()
})
}
.width(154)
.height(40)
}else if(this.componentType == 3){
Row(){
Image(this.likeStatus ? $r('app.media.icon_like_select') : this.styleType == 1 ? $r('app.media.CarderInteraction_like') :
$r('app.media.icon_like_default_white'))
.width(18)
.height(18)
// Text(this.likeCount >0?this.likeCount.toString(): '点赞')
Text(this.likeStatus ?'已赞': '点赞')
.margin({left:4})
.fontSize(14)
.fontColor(this.likeStatus ? '#ED2800' : '#666666')
}
.justifyContent(FlexAlign.Center)
.width('100%')
.height('100%')
.backgroundColor(Color.White)
.type(ButtonType.Capsule)
.borderColor('#EDEDED')
.borderRadius(20)
.borderWidth(1)
.onClick(() => {
this.clickButtonEvent()
})
}else{
//1: 底部栏目样式 默认样式
Column() {
// Image(this.likeStatus ? $r('app.media.icon_like_select') : $r('app.media.icon_like_default'))
Image(this.likeStatus ? $r('app.media.icon_like_select') : this.styleType == 1 ? $r('app.media.icon_like_default') :
}
.width(154)
.height(40)
}
@Builder
likeCompStyle3() {
Row() {
Image(this.likeStatus ? $r('app.media.icon_like_select') :
this.styleType == 1 ? $r('app.media.CarderInteraction_like') :
$r('app.media.icon_like_default_white'))
.width(24)
.height(24)
.onClick(() => {
this.clickButtonEvent()
})
}.width(24).height(24)
.width(18)
.height(18)
// Text(this.likeStatus ? '已赞' : '点赞')
Text(this.likeCount > 0 ? this.likeCount.toString() : '点赞')
.margin({ left: 4 })
.fontSize(14)
.fontColor(this.likeStatus ? '#ED2800' : '#666666')
}
.justifyContent(FlexAlign.Center)
.onClick(() => {
this.clickButtonEvent()
})
}
@Builder
likeCompStyle1() {
//1: 底部栏目样式 默认样式
Column() {
// Image(this.likeStatus ? $r('app.media.icon_like_select') : $r('app.media.icon_like_default'))
Image(this.likeStatus ? $r('app.media.icon_like_select') :
this.styleType == 1 ? $r('app.media.icon_like_default') :
$r('app.media.icon_like_default_white'))
.width(24)
.height(24)
.onClick(() => {
this.clickButtonEvent()
})
}.width(24).height(24)
}
async clickButtonEvent(){
async clickButtonEvent() {
console.log(TAG, '点赞点击')
// 未登录，跳转登录
const user_id = await SPHelper.default.get(SpConstants.USER_ID, '')
if (!user_id) {
console.log(TAG, '点赞点击,未登录')
WDRouterRule.jumpWithPage(WDRouterPage.loginPage)
return
}
if (!this.enableBtn) {
return
}
if (this.likeStatus) {
//1
this.executeLike('0')
} else {
//0
this.executeLike('1')
}
// if (!this.enableBtn) {
// return
// }
this.executeLike(this.likeStatus ? '0' : '1')
}
executeLike(status: string) {
console.log(TAG, '点赞接口调用', status)
this.data['status'] = status
this.data['contentId'] = this.contentDetailData?.newsId + ''
this.data['contentType'] = this.contentDetailData?.newsType + ''
this.viewModel.executeLike2(this.data).then(() => {
console.log(TAG, '点赞接口调用成功')
this.likeStatus = !this.likeStatus
//点赞和取消点赞成功后更新点赞数
if(this.likeStatus){
this.likeCount ++
}else {
this.likeCount --
if (this.likeStatus) {
this.likeCount++
} else {
this.likeCount--
}
if (this.likeCount <= 0) {
this.likeCount = 0
}
this.enableBtn = true
}).catch(() => {
this.enableBtn = true
... ... @@ -145,9 +204,9 @@ export struct LikeComponent {
getLikeStatus() {
this.viewModel.getLikeStatus(this.data).then((data) => {
if (data && data['data'].length && data['data'][0]['likeStatus']) {
if (data && data['data'].length && data['data'][0]['likeStatus']) {
this.likeStatus = data['data'][0]['likeStatus']
}else {
} else {
this.likeStatus = false
}
}).catch(() => {
... ... @@ -160,14 +219,11 @@ export struct LikeComponent {
this.viewModel.getLikeCount(this.data).then((data) => {
if (data && data['data']) {
this.likeCount = data['data']['likeNum']
}else {
} else {
this.likeCount = 0
}
}).catch(() => {
this.likeCount = 0
})
}
}
\ No newline at end of file
... ...
... ... @@ -33,7 +33,7 @@ const TAG = 'OperRowListView';
* 2、（非必传） operationButtonList---组件展示条件，
* ['comment', 'like', 'collect', 'share']，需要展示什么传什么
* comment--评论；like--点赞；collect--收藏；listen--音频；share--分享；
*
* 注意：外层需注册 @Provide contentDetailData:contentDetailData = {} as contentDetailData
* 传值示例：
OperRowListView({
contentDetailData: this.contentDetailData[0],
... ... @@ -48,17 +48,18 @@ export struct OperRowListView {
private onCommentFocus: () => void = () => {
}
@Prop @Watch('onDetailUpdated') contentDetailData: ContentDetailDTO // 稿件详情
@State likesStyle: number = this.contentDetailData.likesStyle // 赞样式 1红心(点赞) 2大拇指(祈福) 3蜡烛(默哀) 4置空
@State operationButtonList: string[] = ['comment', 'collect', 'share'] // 组件展示条件
@State needLike: boolean = true
@ObjectLink publishCommentModel: publishCommentModel
@State styleType: number = 1
@State showCommentIcon: boolean = true
@State bgColor: ResourceColor = Color.White
@State interactData: InteractDataDTO = {} as InteractDataDTO
@State newsStatusOfUser: batchLikeAndCollectResult | undefined = undefined // 点赞、收藏状态
@State likeBean: Record<string, string> = {}
@State audioUrl: string = ''
@State bgColor: ResourceColor = Color.White
@State showCommentIcon: boolean = true
@State bottomSafeHeight: number = AppStorage.get<number>('bottomSafeHeight') || 0
needLike: boolean = true
async aboutToAppear() {
console.info(TAG, '22222----', this.styleType)
... ... @@ -183,15 +184,17 @@ export struct OperRowListView {
*/
@Builder
builderLike() {
// 点赞根据字段判断是否显示待添加
Column() {
if (this.likeBean?.contentId) {
LikeComponent({
data: this.likeBean,
styleType: this.styleType
})
}
// if (this.likeBean?.contentId) {
LikeComponent({
data: this.likeBean,
styleType: this.styleType
})
// }
}
.width(42)
.visibility(this.likesStyle !== 4 ? Visibility.Visible : Visibility.None)
}
/**
... ... @@ -301,10 +304,11 @@ export struct OperRowListView {
* 收藏、取消收藏
*/
async toggleCollectStatus() {
// console.log(TAG, '收藏--')
console.log(TAG, '收藏点击')
// 未登录，跳转登录
const user_id = await SPHelper.default.get(SpConstants.USER_ID, '')
if (!user_id) {
console.log(TAG, '收藏点击，用户未登录')
WDRouterRule.jumpWithPage(WDRouterPage.loginPage)
return
}
... ... @@ -316,7 +320,9 @@ export struct OperRowListView {
}],
}
console.log(TAG, '收藏点击', JSON.stringify(params))
PageRepository.postExecuteCollectRecord(params).then(res => {
console.log(TAG, '收藏点击 res', JSON.stringify(res))
if (this.newsStatusOfUser) {
this.newsStatusOfUser.collectStatus = this.newsStatusOfUser?.collectStatus === 1 ? 0 : 1
if (this.newsStatusOfUser.collectStatus === 1) {
... ... @@ -339,7 +345,9 @@ export struct OperRowListView {
contentType: this.contentDetailData?.newsType,
}]
}
console.log(TAG, '点赞点击', JSON.stringify(params))
PageRepository.getContentInteract(params).then(res => {
console.log(TAG, '点赞点击 res', JSON.stringify(res))
if (res.data) {
this.interactData.likeNum = NumberFormatterUtils.formatNumberWithWan(res.data[0]?.likeNum)
this.interactData.collectNum = NumberFormatterUtils.formatNumberWithWan(res.data[0]?.collectNum)
... ...
... ... @@ -5,7 +5,7 @@ export class LikeModel {
executeLike(data: Record<string, string>) {
return new Promise<object>((success, fail) => {
HttpBizUtil.post<ResponseDTO<object>>(HttpUrlUtils.executeLike(), data).then((data: ResponseDTO<object>) => {
if (data.code != 0) {
if (data.code != 0) {
fail(data.message)
return
}
... ...
... ... @@ -9,7 +9,8 @@ export class LikeViewModel {
this.likeModel = new LikeModel();
}
executeLike(contentId: string, userName: string, contentType: string, title: string, userHeaderUrl: string, channelId: string, status: string) {
executeLike(contentId: string, userName: string, contentType: string, title: string, userHeaderUrl: string,
channelId: string, status: string) {
let bean: Record<string, string> = {}
bean['contentId'] = contentId
bean['userName'] = userName
... ... @@ -23,7 +24,6 @@ export class LikeViewModel {
//点赞
executeLike2(bean: Record<string, string>) {
return new Promise<object>((success, fail) => {
this.likeModel.executeLike(bean).then((data) => {
success(data)
... ... @@ -60,7 +60,4 @@ export class LikeViewModel {
})
}
}
\ No newline at end of file
... ...