zhenghy
... ... @@ -5,6 +5,7 @@
* 人民号-动态tab下列表数据
*/
import { appStyleImagesDTO } from '../content/appStyleImagesDTO'
import {contentVideosDTO} from '../content/contentVideosDTO'
export interface ArticleListDTO {
listTitle: string;
mainPicCount: string;
... ... @@ -64,7 +65,7 @@ export interface ArticleListDTO {
contentShare: [];
contentLinkData: string;
contentExt: [];
contentVideos: string;
contentVideos: contentVideosDTO[];
contentPictures: [];
contentPayments: string;
contentPaymentStaffs: string;
... ...
export interface contentVideosDTO {
id: number;
contentId: number;
ossVideoId: string;
url: string;
fullUrl: string;
bucket: string;
duration: number;
clarity: number;
resolutionWidth: number;
resolutionHeight: number;
type: number;
original: number;
originalVideoId: string;
landscape: number;
size: number;
templateId: string;
deleted: number;
coverPictureId: string;
framePictureId: string;
createUser: string;
createTime: string;
updateUser: string;
updateTime: string;
bak1: string;
bak2: string;
bak3: string;
bak4: string;
videoType: number;
objectPosId: string;
}
\ No newline at end of file
... ...
... ... @@ -3,11 +3,11 @@ export interface RmhInfoDTO {
authTitle: string;
authTitle2: string;
banControl: number;
cnAttention: number;
cnIsAttention: number;
cnMainControl: number;
cnShareControl: number;
cnlsComment: number;
cnlsLike: number;
cnIsComment: number;
cnIsLike: number;
posterShareControl: number;
rmhDesc: string;
rmhHeadUrl: string;
... ...
... ... @@ -10,6 +10,8 @@ import { Card10Component } from './cardview/Card10Component';
import { Card11Component } from './cardview/Card11Component';
import { Card17Component } from './cardview/Card17Component';
import { Card15Component } from './cardview/Card15Component';
import { Card19Component } from './cardview/Card19Component';
import { Card20Component } from './cardview/Card20Component';
/**
* card适配器,卡片样式汇总,依据ContentDTO#appStyle
... ... @@ -46,6 +48,8 @@ export struct CardParser {
Card11Component({ contentDTO })
} else if (contentDTO.appStyle === CompStyle.Card_17) {
Card17Component({ contentDTO })
} else if (contentDTO.appStyle === CompStyle.Card_20) {
Card20Component({ contentDTO })
}
else {
// todo:组件未实现 / Component Not Implemented
... ...
import { DateTimeUtils } from 'wdKit/Index'
/**
* 这里是样式卡中,右下角显示的音视频信息
* 目前已知:
* 音频: 音频图标+时长
* 视频:点播图标+时长;直播图标+'直播中'
*/
@Preview
@Component
export struct CardMediaInfo {
@State duration: number = 0 // 如果有duraion,代表点播,显示时长;如果不传或者传0,显示直播中
@State mediaType: string = 'video' // audio: 音频;video: 视频
build() {
Row() {
if (this.mediaType === 'audio') {
Image($r('app.media.broadcast_listen'))
.height(14)
.borderRadius($r('app.float.button_border_radius'))
} else {
Image(this.duration ? $r('app.media.videoTypeIcon') : $r('app.media.icon_live'))
.width(22)
.height(18)
.borderRadius($r('app.float.button_border_radius'))
}
Text(this.duration ? DateTimeUtils.getFormattedDuration(this.duration * 1000) : '直播中')
.fontColor($r('app.color.color_fff'))
.fontSize($r('app.float.font_size_12'))
.width(40)
.height(18)
.textAlign(TextAlign.Center)
.margin({ left: -3 })
}
.backgroundColor(this.mediaType === 'audio' ? '': '#4d000000')
.borderRadius($r('app.float.button_border_radius'))
.margin(6)
}
}
\ No newline at end of file
... ...
... ... @@ -3,36 +3,16 @@
*/
import { RmhInfoDTO } from 'wdBean'
import { CommonConstants } from 'wdConstant/Index';
import { DateTimeUtils } from 'wdKit/Index';
interface RmhInfo extends RmhInfoDTO {
isSelected: boolean;
headPhotoUrl: string;
introduction: string;
userName: string;
publishTime: string;
}
@Entry
@Component
export struct rmhTitle {
// TODO 这里需要传入rmh信息及是否显示关注,是否已关注
@State isAttentionShow: Boolean = true
@State rmhInfo: RmhInfo = {
authIcon: "https://cdnjdphoto.aikan.pdnews.cn/creator-category/icon/auth/blue.png",
authTitle: "四川农业大学",
headPhotoUrl: "https://cdnjdphoto.aikan.pdnews.cn//upload/ueditor/image/20221208/a_785146000057561088.png?x-oss-process=image/resize,l_100/auto-orient,1/quality,q_90/format,jpg",
introduction: "四川农业大学",
userId: "554708665557894",
userName: "四川农业大学",
userType: "2",
publishTime: '1712912775606'
} as RmhInfo
export struct RmhTitle {
@Prop rmhInfo: RmhInfoDTO
build() {
Row() {
Flex() {
Stack() {
Image(this.rmhInfo.headPhotoUrl)
Image(this.rmhInfo.rmhHeadUrl)
.width(36)
.height(36).borderRadius(50)
Image(this.rmhInfo.authIcon)
... ... @@ -42,31 +22,25 @@ export struct rmhTitle {
}
.margin({ right: 8 })
.alignContent(Alignment.BottomEnd)
.flexShrink(0)
Column() {
Text(this.rmhInfo.userName)
Text(this.rmhInfo.rmhName)
.fontSize($r('app.float.font_size_13'))
.fontColor($r('app.color.color_222222'))
.fontWeight(600)
.alignSelf(ItemAlign.Start)
Row() {
Text(DateTimeUtils.formatDate(Number.parseFloat(this.rmhInfo.publishTime)))
.fontSize($r("app.float.font_size_12"))
.fontColor($r("app.color.color_B0B0B0"))
Image($r("app.media.point"))
.width(16)
.height(16)
Text(this.rmhInfo.introduction)
.fontSize($r("app.float.font_size_12"))
.fontColor($r("app.color.color_B0B0B0"))
.margin({ left: 6 })
.maxLines(1)
.textOverflow({overflow: TextOverflow.Ellipsis})
}
Text(this.rmhInfo.rmhDesc)
.fontSize($r("app.float.font_size_12"))
.fontColor($r("app.color.color_B0B0B0"))
.maxLines(1)
.alignSelf(ItemAlign.Start)
.textOverflow({ overflow: TextOverflow.Ellipsis })
}
.align(Alignment.Start)
Blank()
if(this.isAttentionShow) {
Row(){
if (this.rmhInfo.cnIsAttention) {
Row() {
Image($r('app.media.rmh_follow'))
.width(16)
.height(16)
... ... @@ -74,9 +48,14 @@ export struct rmhTitle {
.fontSize($r('app.float.font_size_13'))
.fontColor($r('app.color.color_ED2800'))
}
.flexShrink(0)
.alignSelf(ItemAlign.Center)
.onClick(() => {
// TODO 调用关注接口
})
}
}
.width(CommonConstants.FULL_WIDTH)
.margin({bottom: 10})
.margin({ bottom: 10 })
}
}
\ No newline at end of file
... ...
import { ArticleListDTO, appStyleImagesDTO } from 'wdBean';
import { rmhTitle } from './rmhTitle'
import { RmhTitle } from '../cardCommon/RmhTitle'
const TAG = 'Card19Component';
... ... @@ -17,7 +17,7 @@ export struct Card19Component {
build() {
Column() {
// rmh信息
rmhTitle()
// RmhTitle()
// 标题
if (this.articleListItem.title) {
Text(this.articleListItem.title)
... ...
import { ContentDTO } from 'wdBean';
import { RmhTitle } from '../cardCommon/RmhTitle'
import { CardMediaInfo } from '../cardCommon/CardMediaInfo'
import { CommonConstants } from 'wdConstant/Index';
const TAG = 'Card20Component';
/**
* 人民号-动态---20:动态视频卡人民号 分横屏和竖屏;
*/
@Entry
@Component
export struct Card20Component {
@State contentDTO: ContentDTO = {
// appStyle: '20',
// coverType: 1,
// coverUrl: 'https://rmrbcmsonline.peopleapp.com/upload/user_app/gov_dynamic/video/default_image/202105/rmrb_default_image_4GdWrgSw1622451312.jpg?x-oss-process=image/resize,m_fill,h_480,w_360/quality,q_90',
// fullColumnImgUrls: [
// {
// landscape: 1,
// size: 1,
// url: 'https://rmrbcmsonline.peopleapp.com/upload/user_app/gov_dynamic/video/default_image/202105/rmrb_default_image_4GdWrgSw1622451312.jpg?x-oss-process=image/resize,m_fill,h_480,w_360/quality,q_90',
// weight: 1600
// }
// ],
// newsTitle: '好玩!》',
// rmhInfo: {
// authIcon:
// 'https://cdnjdphoto.aikan.pdnews.cn/creator-category/icon/auth/yellow.png',
// authTitle: '10后音乐人王烁然个人人民号',
// authTitle2: '10后音乐人王烁然个人人民号',
// banControl: 0,
// cnIsAttention: 1,
// rmhDesc: '10后少年音乐人10后少年音乐人10后少年音乐人10后少年音乐人10后少年音乐人',
// rmhHeadUrl: 'https://cdnjdphoto.aikan.pdnews.cn/image/creator/rmh/20221031/3d3419e86a.jpeg?x-oss-process=image/resize,l_100/auto-orient,1/quality,q_90/format,jpg',
// rmhName: '王烁然',
// userId: '522435359667845',
// userType: '2'
// },
// videoInfo: {
// firstFrameImageUri: '',
// videoDuration: 37,
// videoUrl: 'https://rmrbcmsonline.peopleapp.com/upload/user_app/gov_dynamic/video/mp4/202105/rmrb_GSNARt6P1622451310.mp4'
// }
} as ContentDTO;
aboutToAppear(): void {}
build() {
Column() {
// rmh信息
RmhTitle({rmhInfo: this.contentDTO.rmhInfo})
// 标题
if (this.contentDTO.newsTitle) {
Text(this.contentDTO.newsTitle)
.fontSize($r('app.float.font_size_17'))
.fontColor($r('app.color.color_222222'))
.width(CommonConstants.FULL_WIDTH)
.textOverflowStyle(2)
.margin({ bottom: 8 })
}
if(this.contentDTO.fullColumnImgUrls[0]) {
createImg({ contentDTO: this.contentDTO })
}
//TODO 底部的:分享、评论、点赞 功能;需要引用一个公共组件
}
.padding({
left: $r('app.float.card_comp_pagePadding_lf'),
right: $r('app.float.card_comp_pagePadding_lf'),
top: $r('app.float.card_comp_pagePadding_tb'),
bottom: $r('app.float.card_comp_pagePadding_tb')
})
}
}
interface radiusType {
topLeft: number | Resource;
topRight: number | Resource;
bottomLeft: number | Resource;
bottomRight: number | Resource;
}
@Component
struct createImg {
@Prop contentDTO: ContentDTO
build() {
GridRow() {
if (this.contentDTO.fullColumnImgUrls[0].landscape === 1) {
// 横屏
GridCol({
span: { xs: 12 }
}) {
Stack() {
Image(this.contentDTO.coverUrl)
.width(CommonConstants.FULL_WIDTH)
.aspectRatio(16/9)
.borderRadius($r('app.float.image_border_radius'))
CardMediaInfo({
duration: this.contentDTO.videoInfo.videoDuration, mediaType: 'video'
})
}
.align(Alignment.BottomEnd)
}
} else {
// 竖图显示,宽度占50%,高度自适应
GridCol({
span: { xs: 6 }
}) {
Stack() {
Image(this.contentDTO.coverUrl)
.width(CommonConstants.FULL_WIDTH)
.borderRadius($r('app.float.image_border_radius'))
CardMediaInfo({
duration: this.contentDTO.videoInfo.videoDuration, mediaType: 'video'
})
}
.align(Alignment.BottomEnd)
}
}
}
}
}
@Extend(Text)
function textOverflowStyle(maxLine: number) {
.maxLines(maxLine)
.textOverflow({ overflow: TextOverflow.Ellipsis })
}
\ No newline at end of file
... ...