developOne / harmonyPool

Go to a project
Toggle navigation Toggle navigation pinning
zhenghy
3ab3f6ba 1 parent be81fb38

点赞增加默哀、祈福、不展示判断

Inline Side-by-side
Showing 7 changed files with 185 additions and 168 deletions
... ... @@ -23,12 +23,12 @@ export struct DetailPlayShortVideoPage {
@Prop index: number = 0
@Prop @Watch('currentIndexChange') currentIndex: number = 0
@State playerController: WDPlayerController = new WDPlayerController();
@Provide contentDetailData: ContentDetailDTO | undefined = undefined
@Provide interactData: InteractDataDTO | undefined = undefined
@Provide contentDetailData: ContentDetailDTO = {} as ContentDetailDTO
@Provide interactData: InteractDataDTO = {} as InteractDataDTO
@Provide isFullScreen: boolean = false;
@Provide progressVal: number = 0;
@Provide videoLandScape?: number = 1; // 视频朝向， 横屏视频：1;竖屏视频：2
@Provide newsStatusOfUser: batchLikeAndCollectResult | undefined = undefined // 点赞、收藏状态
@Provide newsStatusOfUser: batchLikeAndCollectResult = {} as batchLikeAndCollectResult // 点赞、收藏状态
@Provide followStatus: string = '0' // 关注状态
@Provide isOpenDetail: boolean = false // 查看详情按钮点击
@Provide isDragging: boolean = false // 拖动时间进度条
... ...
... ... @@ -43,7 +43,7 @@ export struct DetailVideoListPage {
}
await this.queryVideoList()
this.getContentInteract()
await this.getContentInteract()
console.log(TAG, 'aboutToAppear', JSON.stringify(action.params))
}
... ... @@ -119,7 +119,7 @@ export struct DetailVideoListPage {
/**
* 批量查询内容当前用户点赞、收藏状态
*/
getContentInteract() {
async getContentInteract() {
if (this.data.length > 0) {
const params: contentListParams = {
contentList: []
... ... @@ -131,7 +131,7 @@ export struct DetailVideoListPage {
})
})
// 批量查询内容当前用户点赞、收藏状态
ContentDetailRequest.getContentInteract(params).then(res => {
await ContentDetailRequest.getContentInteract(params).then(res => {
if (res.data) {
this.interactDataList = res.data || []
}
... ...
import { ContentDetailDTO, InteractDataDTO, Params, RmhInfoDTO, UserInfoDTO } from 'wdBean/Index';
import { ContentDetailDTO, InteractDataDTO, Params, } from 'wdBean/Index';
import {
batchLikeAndCollectParams,
batchLikeAndCollectResult,
ContentDetailRequest,
contentListParams,
... ... @@ -8,20 +7,11 @@ import {
postExecuteLikeParams,
postInteractAccentionOperateParams
} from 'wdDetailPlayApi/src/main/ets/request/ContentDetailRequest';
import { SPHelper, ToastUtils } from 'wdKit';
import { HttpUrlUtils } from 'wdNetwork/Index';
import { SPHelper, ToastUtils, NumberFormatterUtils } from 'wdKit';
import { WDPlayerController } from 'wdPlayer/Index';
import { WDRouterPage, WDRouterRule } from 'wdRouter/Index';
import { SpConstants } from 'wdConstant/Index'
export interface OperationItem {
icon: Resource;
icon_check?: Resource;
// icon_selected: Resource;
text: string | Resource;
num?: number; // 个数
}
const TAG = 'PlayerRightView';
... ... @@ -34,31 +24,10 @@ export struct PlayerRightView {
@Consume followStatus: string
@Consume isOpenDetail: boolean
@Consume isDragging: boolean
@State operationList: OperationItem[] = [
{
icon: $r('app.media.ic_like_uncheck'),
icon_check: $r('app.media.ic_like_check'),
text: "赞",
// num: 6622
},
{
icon: $r('app.media.ic_collect_uncheck'),
icon_check: $r('app.media.ic_collect_check'),
text: "收藏",
// num: 662,
},
{
icon: $r('app.media.ic_comment'),
text: "抢首评",
// num: 500,
},
{
icon: $r('app.media.ic_share'),
text: "分享"
}
]
@State likesStyle: number = this.contentDetailData.likesStyle // 赞样式 1红心(点赞) 2大拇指(祈福) 3蜡烛(默哀) 4置空
aboutToAppear() {
}
/**
... ... @@ -82,11 +51,11 @@ export struct PlayerRightView {
if (this.newsStatusOfUser) {
this.newsStatusOfUser.likeStatus = this.newsStatusOfUser?.likeStatus === '1' ? '0' : '1'
if (this.newsStatusOfUser.likeStatus === '1') {
this.interactData.likeNum = Number(this.interactData.likeNum) + 1
this.interactData.likeNum = Number(this.interactData.likeNum || 0) + 1
} else {
this.interactData.likeNum = Number(this.interactData.likeNum) - 1
this.interactData.likeNum = Number(this.interactData.likeNum || 0) - 1
}
console.log('点赞、取消点赞==', this.newsStatusOfUser?.likeStatus, this.interactData?.likeNum)
console.log(TAG, '点赞、取消点赞==', this.newsStatusOfUser?.likeStatus, this.interactData?.likeNum)
// this.queryContentInteractCount()
}
... ... @@ -116,11 +85,11 @@ export struct PlayerRightView {
this.newsStatusOfUser.collectStatus = this.newsStatusOfUser?.collectStatus === 1 ? 0 : 1
// this.queryContentInteractCount()
if (this.newsStatusOfUser.collectStatus === 1) {
this.interactData.collectNum = Number(this.interactData.collectNum) + 1
this.interactData.collectNum = Number(this.interactData.collectNum || 0) + 1
} else {
this.interactData.collectNum = Number(this.interactData.collectNum) - 1
this.interactData.collectNum = Number(this.interactData.collectNum || 0) - 1
}
console.log('收藏、取消收藏==', this.newsStatusOfUser?.collectStatus, this.interactData?.collectNum)
console.log(TAG, '收藏、取消收藏==', this.newsStatusOfUser?.collectStatus, this.interactData?.collectNum)
}
})
... ... @@ -138,15 +107,15 @@ export struct PlayerRightView {
}
ContentDetailRequest.getContentInteract(params).then(res => {
if (res.data && this.interactData) {
this.interactData.likeNum = res.data[0]?.likeNum
this.interactData.collectNum = res.data[0]?.collectNum
this.interactData.commentNum = res.data[0]?.commentNum
this.interactData.likeNum = res.data[0]?.likeNum || 0
this.interactData.collectNum = res.data[0]?.collectNum || 0
this.interactData.commentNum = res.data[0]?.commentNum || 0
}
console.log('获取互动点赞等数据===', JSON.stringify(res))
})
}
getImgUrl() {
getHeadUrl() {
return this.contentDetailData?.rmhInfo?.rmhHeadUrl || this.contentDetailData?.userInfo?.userHeadUrl
}
... ... @@ -170,7 +139,7 @@ export struct PlayerRightView {
status: 1,
}
ContentDetailRequest.postInteractAccentionOperate(params2).then(res => {
console.log('关注号主==', JSON.stringify(res.data))
console.log(TAG, '关注号主==', JSON.stringify(res.data))
if (this.followStatus == '1') {
this.followStatus = '0'
} else {
... ... @@ -179,137 +148,185 @@ export struct PlayerRightView {
})
}
@Builder
buildUserComp() {
build() {
Column() {
if (this.getImgUrl()) {
RelativeContainer() {
Image(this.getImgUrl())
.width('100%')
.borderRadius(24)
.aspectRatio(1)
.border({ width: 1, color: Color.White, style: BorderStyle.Solid })
.alignRules({
top: { anchor: "__container__", align: VerticalAlign.Top },
left: { anchor: "__container__", align: HorizontalAlign.Start }
})
.id("row1")
.onClick(() => {
if (this.contentDetailData.rmhInfo?.cnMainControl === 1) {
// 号主页
const params: Params = {
creatorId: this.contentDetailData.rmhInfo.rmhId,
pageID: ''
}
WDRouterRule.jumpWithPage(WDRouterPage.peopleShipHomePage, params)
}
if (this.interactData.contentId) {
this.userBuilderView()
this.likeBuilderView()
this.collectBuilderView()
this.commentBuilderView()
this.shareBuilderView()
}
}
// .backgroundColor(Color.Blue)
// .height('100%')
.width(48)
.position({ x: '100%', y: '100%' })
.markAnchor({ x: '100%', y: '100%' })
.padding({ bottom: 72, right: 10 })
.visibility(this.isOpenDetail || this.isDragging ? Visibility.None : Visibility.Visible)
}
})
if (this.followStatus == '0') {
Image($r('app.media.ic_add'))
.width(24)
.borderRadius(12)
.alignRules({
left: { anchor: "__container__", align: HorizontalAlign.Center },
bottom: { anchor: "__container__", align: VerticalAlign.Bottom },
})
.margin({ left: -12 })
.id("row2")
.onClick(() => {
// 关注
this.handleAccention()
})
/**
* 用户关注、号主页
*/
@Builder
userBuilderView() {
Stack() {
Image(this.getHeadUrl())
.width('100%')
.borderRadius(24)
.aspectRatio(1)
.border({ width: 1, color: Color.White, style: BorderStyle.Solid })
.onClick(() => {
// 跳转到号主页
if (this.contentDetailData.rmhInfo?.cnMainControl === 1) {
const params: Params = {
creatorId: this.contentDetailData.rmhInfo.rmhId,
pageID: ''
}
WDRouterRule.jumpWithPage(WDRouterPage.peopleShipHomePage, params)
}
})
}.height(60)
}
}.margin({ bottom: 18 })
Image($r('app.media.ic_add'))
.width(24)
.borderRadius(12)
.position({ x: '50%', y: '100%' })
.markAnchor({ x: '50%', y: '50%' })
.onClick(() => {
// TODO:关注动画
this.handleAccention()
})
}
.height(48)
.width('100%')
.margin({ bottom: 30 })
.visibility(this.getHeadUrl() ? Visibility.Visible : Visibility.None)
}
/**
* 将点赞样式转换为icon
*/
transLikeStyle2Icon(): Resource {
if (this.likesStyle === 1) {
return this.newsStatusOfUser.likeStatus === '1' ? $r(`app.media.ic_like_check`) : $r(`app.media.ic_like_uncheck`)
} else if (this.likesStyle === 2) {
return this.newsStatusOfUser.likeStatus === '1' ? $r(`app.media.ic_thub_check`) : $r(`app.media.ic_thub_uncheck`)
} else if (this.likesStyle === 3) {
return this.newsStatusOfUser.likeStatus === '1' ? $r(`app.media.ic_candle_check`) : $r(`app.media.ic_candle_uncheck`)
}
return $r(`app.media.icon_like_ckeck`)
}
transNum2String(name: 'likeNum' | 'collectNum' | 'commentNum') {
console.log(TAG, 'transNum2String', this.interactData.likeNum, this.interactData.collectNum, this.interactData.commentNum)
if (name === 'likeNum') {
return this.interactData.likeNum != 0 ? NumberFormatterUtils.formatNumberWithWan(this.interactData.likeNum || '') : ''
} else if (name === 'collectNum') {
return this.interactData.collectNum != 0 ? NumberFormatterUtils.formatNumberWithWan(this.interactData.collectNum || '') : ''
} else {
return this.interactData.commentNum != 0 ? NumberFormatterUtils.formatNumberWithWan(this.interactData.commentNum || '') : ''
}
}
/**
* 点赞、默哀、祈福
*/
@Builder
buildOperationItem(item: OperationItem, index: number) {
likeBuilderView() {
Column() {
if (item.text === '赞') {
Image(this.newsStatusOfUser?.likeStatus == '1' ? item.icon_check : item.icon)
.width(32)
.aspectRatio(1)
.onClick(() => {
this.toggleLikeStatus()
})
Text(this.interactData?.likeNum ? (this.interactData.likeNum + '') : item.text)
.width('100%')// .margin({ top: 4, left: 6, right: 6 })// .backgroundColor(Color.Brown)
.fontWeight(500)
.textAlign(TextAlign.Center)
.fontSize(13)
.fontColor('#FFFFFF')
.maxLines(1)
.textOverflow({ overflow: TextOverflow.Ellipsis })
} else if (item.text === '收藏') {
Image(this.newsStatusOfUser?.collectStatus == 1 ? item.icon_check : item.icon)
.width(32)
.aspectRatio(1)
.onClick(() => {
this.toggleCollectStatus()
})
Text(this.interactData?.collectNum ? (this.interactData.collectNum + '') : item.text)
.width('100%')// .margin({ top: 4, left: 6, right: 6 })// .backgroundColor(Color.Brown)
.fontWeight(500)
.textAlign(TextAlign.Center)
.fontSize(13)
.fontColor('#FFFFFF')
.maxLines(1)
.textOverflow({ overflow: TextOverflow.Ellipsis })
} else if (item.text === '抢首评') {
Image(item.icon)
.width(32)
.aspectRatio(1)
.onClick((event: ClickEvent) => {
ToastUtils.showToast('评论为公共方法，待开发', 1000);
})
Text(this.interactData?.commentNum ? (this.interactData.commentNum + '') : item.text)
.width('100%')// .margin({ top: 4, left: 6, right: 6 })// .backgroundColor(Color.Brown)
.fontWeight(500)
.textAlign(TextAlign.Center)
.fontSize(13)
.fontColor('#FFFFFF')
.maxLines(1)
.textOverflow({ overflow: TextOverflow.Ellipsis })
} else {
Image(item.icon)
.width(32)
.aspectRatio(1)
.onClick((event: ClickEvent) => {
ToastUtils.showToast('分享为公共方法，待开发', 1000);
})
Text(item.text)
.width('100%')// .margin({ top: 4, left: 6, right: 6 })// .backgroundColor(Color.Brown)
.fontWeight(500)
.textAlign(TextAlign.Center)
.fontSize(13)
.fontColor('#FFFFFF')
.maxLines(1)
.textOverflow({ overflow: TextOverflow.Ellipsis })
}
Image(this.transLikeStyle2Icon())
.width(32)
.aspectRatio(1)
.onClick(() => {
// TODO:点赞动画
this.toggleLikeStatus()
})
Text(this.transNum2String('likeNum') || '赞')
.width('100%')
.fontWeight(500)
.textAlign(TextAlign.Center)
.fontSize(13)
.fontColor('#FFFFFF')
.maxLines(1)
.textOverflow({ overflow: TextOverflow.Ellipsis })
}
.margin({ bottom: 20 })
.visibility(this.likesStyle !== 4 ? Visibility.Visible : Visibility.None)
}
/**
* 收藏、取消收藏、收藏文件夹
*/
@Builder
collectBuilderView() {
Column() {
Image(this.newsStatusOfUser.collectStatus == 1 ? $r(`app.media.ic_collect_check`) : $r(`app.media.ic_collect_uncheck`))
.width(32)
.aspectRatio(1)
.onClick(() => {
this.toggleCollectStatus()
})
Text(this.transNum2String('collectNum') || '收藏')
.width('100%')
.fontWeight(500)
.textAlign(TextAlign.Center)
.fontSize(13)
.fontColor('#FFFFFF')
.maxLines(1)
.textOverflow({ overflow: TextOverflow.Ellipsis })
}
// .width(48)
.margin({ bottom: 20 })
.alignItems(HorizontalAlign.Center)
.hoverEffect(HoverEffect.Scale)
}
/**
* 评论
*/
@Builder
commentBuilderView() {
Column() {
Image($r(`app.media.ic_comment`))
.width(32)
.aspectRatio(1)
.onClick((event: ClickEvent) => {
ToastUtils.showToast('评论为公共方法，待开发', 1000);
})
Text(this.transNum2String('commentNum') || '抢首评')
.width('100%')
.fontWeight(500)
.textAlign(TextAlign.Center)
.fontSize(13)
.fontColor('#FFFFFF')
.maxLines(1)
.textOverflow({ overflow: TextOverflow.Ellipsis })
}
.margin({ bottom: 20 })
}
build() {
/**
* 分享
*/
@Builder
shareBuilderView() {
Column() {
this.buildUserComp()
ForEach(this.operationList, (item: OperationItem, index: number) => {
this.buildOperationItem(item, index)
}, (item: OperationItem, index: number) => JSON.stringify(item))
Image($r(`app.media.ic_share`))
.width(32)
.aspectRatio(1)
.onClick((event: ClickEvent) => {
ToastUtils.showToast('分享为公共方法，待开发', 1000);
})
Text('分享')
.width('100%')
.fontWeight(500)
.textAlign(TextAlign.Center)
.fontSize(13)
.fontColor('#FFFFFF')
.maxLines(1)
.textOverflow({ overflow: TextOverflow.Ellipsis })
}
.width(48)
.position({ x: '100%', y: '100%' })
.markAnchor({ x: '100%', y: '100%' })
.padding({ bottom: 72 })
.visibility(this.isOpenDetail || this.isDragging ? Visibility.None : Visibility.Visible)
.margin({ bottom: 20 })
}
}
\ No newline at end of file
... ...