developOne / harmonyPool

Go to a project
Toggle navigation Toggle navigation pinning
陈剑华
1959b3ef 1 parent 9c4e35c5

小视频横划卡

Inline Side-by-side
Showing 1 changed file with 214 additions and 0 deletions
import { CompDTO, ContentDTO, Params } from 'wdBean';
import { WDRouterPage, WDRouterRule } from 'wdRouter/Index';
import { HttpUrlUtils } from 'wdNetwork/Index';
import { postInteractAccentionOperateParams } from 'wdBean';
import { PageRepository } from '../../repository/PageRepository';
import { CommonConstants } from 'wdConstant/Index';
/**
* 小视频横划卡
* Zh_Single_Row-02
*/
const TAG = 'Zh_Single_Row-02'
@Entry
@Component
export struct ZhSingleRow02 {
@State compDTO: CompDTO = {
objectTitle: '大标题',
operDataList: [
{
rmhInfo: {
rmhId: '2489729',
rmhName: '陕西青年职业学院',
rmhDesc: '陕西青年职业学院陕西青年职业学院是经陕西省人民政陕西青年职业学院是经陕西省人民政是经陕西省人民政',
rmhHeadUrl: 'https://cdnjdphoto.aikan.pdnews.cn//upload/ueditor/image/20210113/a_533807397399949312' +
'.png?x-oss-process=image/resize,l_100/auto-orient,1/quality,q_90/format,jpg'
}
},
{
rmhInfo: {
rmhId: '2489729',
rmhName: '陕西青年职业学院',
rmhDesc: '陕西青年职业学院陕西青年职业学院是经陕西省人民政陕西青年职业学院是经陕西省人民政是经陕西省人民政',
rmhHeadUrl: 'https://cdnjdphoto.aikan.pdnews.cn//upload/ueditor/image/20210113/a_533807397399949312' +
'.png?x-oss-process=image/resize,l_100/auto-orient,1/quality,q_90/format,jpg'
}
},
{
rmhInfo: {
rmhId: '2489729',
rmhName: '陕西青年职业学院',
rmhDesc: '陕西青年职业学院陕西青年职业学院是经陕西省人民政陕西青年职业学院是经陕西省人民政是经陕西省人民政',
rmhHeadUrl: 'https://cdnjdphoto.aikan.pdnews.cn//upload/ueditor/image/20210113/a_533807397399949312' +
'.png?x-oss-process=image/resize,l_100/auto-orient,1/quality,q_90/format,jpg'
}
},
{
rmhInfo: {
rmhId: '2489729',
rmhName: '陕西青年职业学院',
rmhDesc: '陕西青年职业学院陕西青年职业学院是经陕西省人民政陕西青年职业学院是经陕西省人民政是经陕西省人民政',
rmhHeadUrl: 'https://cdnjdphoto.aikan.pdnews.cn//upload/ueditor/image/20210113/a_533807397399949312' +
'.png?x-oss-process=image/resize,l_100/auto-orient,1/quality,q_90/format,jpg'
}
},
{
rmhInfo: {
rmhId: '2489729',
rmhName: '陕西青年职业学院',
rmhDesc: '陕西青年职业学院陕西青年职业学院是经陕西省人民政陕西青年职业学院是经陕西省人民政是经陕西省人民政',
rmhHeadUrl: 'https://cdnjdphoto.aikan.pdnews.cn//upload/ueditor/image/20210113/a_533807397399949312' +
'.png?x-oss-process=image/resize,l_100/auto-orient,1/quality,q_90/format,jpg'
}
},
]
} as CompDTO
build() {
Column() {
//顶部
this.CompHeader(this.compDTO)
Row(){
// 列表内容
List() {
ForEach(this.compDTO.operDataList, (item: ContentDTO, index: number) => {
CreatorItem({
item
})
.margin({right: index === this.compDTO.operDataList.length - 1 ? $r('app.float.card_comp_pagePadding_lf') : 0})
})
}
.listDirection(Axis.Horizontal)
}
.width(CommonConstants.FULL_WIDTH)
.height(208)
}
.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')
})
.backgroundColor($r('app.color.white'))
.margin({ bottom: 8 })
}
@Builder
CompHeader(item: CompDTO) {
Row() {
Row() {
Image($r("app.media.redLine"))
.width(3)
.height(16)
.margin({ right: 4 })
Text(item.objectTitle)
.fontSize($r("app.float.font_size_17"))
.fontColor($r("app.color.color_222222"))
.fontWeight(600)
}
Row() {
Text("更多")
.fontSize($r("app.float.font_size_14"))
.fontColor($r("app.color.color_999999"))
.margin({ right: 1 })
Image($r("app.media.more"))
.width(14)
.height(14)
.onClick(() => {
// TODO 跳转的页面，定义的入参可能不合理。推荐id: 41
let params: Params = {
pageID: "1"
}
WDRouterRule.jumpWithPage(WDRouterPage.followListPage, params)
})
}
.padding({
right: $r('app.float.card_comp_pagePadding_lf'),
})
}
.justifyContent(FlexAlign.SpaceBetween)
.margin({ top: 8, bottom: 8 })
.width('100%')
}
}
@Extend(Text)
function textOverflowStyle(maxLine: number) {
.maxLines(maxLine)
.textOverflow({ overflow: TextOverflow.Ellipsis })
}
@Component
struct CreatorItem {
@Prop item: ContentDTO
@State rmhIsAttention: number = 0
build() {
ListItem() {
Column() {
Stack({ alignContent: Alignment.Bottom }) {
Image('')
.width(156)
.height(208)
Row()
.width(156)
.height(80)
.linearGradient({
direction: GradientDirection.Bottom,
colors: [[0xffffff, 0.0], [0x000000, 1.0]]
})
.opacity(0.3)
Text('这里显示卡片标题这里显示卡片标题这里显示卡片标题这里显示卡片标题这里显示卡片标题')
.fontColor(0xffffff)
.fontSize(14)
.maxLines(2)
.textOverflow({overflow: TextOverflow.Ellipsis})
.width(140)
.height(40)
.margin({bottom: 8})
}
}
.width(156)
.height(208)
.margin({ right: 11 })
.borderWidth(1)
.borderColor($r('app.color.color_EDEDED'))
.borderRadius($r('app.float.image_border_radius'))
}
.onClick(() => {
console.log('跳转到rmh');
})
}
/**
* 关注号主 TODO 这里后面需要抽离
*/
handleAccention(item: ContentDTO, status: number) {
this.rmhIsAttention = this.rmhIsAttention ? 0 : 1
return
// 未登录，跳转登录
if (!HttpUrlUtils.getUserId()) {
WDRouterRule.jumpWithPage(WDRouterPage.loginPage)
return
}
const params: postInteractAccentionOperateParams = {
attentionUserType: item.rmhInfo?.userType || '', //被关注用户类型（1 普通用户 2 视频号 3 矩阵号）
attentionUserId: item.rmhInfo?.userId || '', // 被关注用户号主id
attentionCreatorId: item.rmhInfo?.rmhId || '', // 被关注用户号主id
// userType: 1,
// userId: '1', // TODO 用户id需要从本地获取
status: status,
}
PageRepository.postInteractAccentionOperate(params).then(res => {
console.log(TAG, '关注号主==', JSON.stringify(res.data))
if (status === 1) {
this.rmhIsAttention = 0
} else {
this.rmhIsAttention = 1
}
})
}
}
... ...