PeopleShipRecommendComponent.ets
3.55 KB
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
import { PeopleShipRecommendHeadComponent } from './PeopleShipRecommendHeadComponent'
import { RmhRecommendDTO } from 'wdBean';
import { Logger } from 'wdKit/Index';
import NoMoreLayout from '../page/NoMoreLayout';
@Component
export struct PeopleShipRecommendComponent {
@Prop rmhList: RmhRecommendDTO[] = []
@Consume rmhSelectedList: string[]
// 一键关注处理
@Link oneKeyFollow: boolean
// 换一换
@Link changeButton: boolean
build() {
Column({ space: 0 }) {
Row() {
Image($r('app.media.redLine'))
.width('3vp')
.height('16vp')
.objectFit(ImageFit.Cover)
.margin({
left: '16vp',
right: '4vp'
})
Text('为你推荐优质号主')
.height('30vp')
.fontColor($r('app.color.color_222222'))
.fontWeight(600)
.fontSize($r('app.float.vp_18'))
Blank()
Button({ type: ButtonType.Normal, stateEffect: true }) {
Row() {
Text('换一换')
.height('30vp')
.fontColor($r('app.color.color_999999'))
.fontWeight(400)
.fontSize($r('app.float.vp_14'))
Image($r('app.media.ic_refresh'))
.width('14vp')
.height('14vp')
.objectFit(ImageFit.Cover)
}
}
.margin({
right: '16vp'
})
.backgroundColor(Color.Transparent)
.onClick(() => {
// 点击换一换
if (!this.changeButton) {
this.changeButton = true
}
})
}
.width('100%')
.alignSelf(ItemAlign.Start)
.margin({
top: '10vp',
bottom: '10vp'
})
Grid() {
ForEach(this.rmhList, (item: RmhRecommendDTO) => {
GridItem() {
PeopleShipRecommendHeadComponent({
rmhInfo: item
})
.onClick(() => {
this.clickRecommendHeadSelected(item)
})
}
}, (item: RmhRecommendDTO) => item.creatorId)
}
.columnsTemplate('1fr 1fr 1fr')
.columnsGap(20)
.rowsGap(20)
.height(Math.ceil(this.rmhList.length / 3.0) * 136)
.backgroundColor(Color.Transparent)
.margin({
right: '20vp',
left: '20pv'
})
// 为你推荐
Button(this.rmhSelectedList.length == 0 ? '一键关注' : `一键关注 (${this.rmhSelectedList.length})`, { type: ButtonType.Normal, stateEffect: this.rmhSelectedList.length != 0 })
.margin({
top: '24vp'
})
.width('120vp')
.height('36vp')
.backgroundColor(this.rmhSelectedList.length != 0 ? $r('app.color.color_ED2800') : $r('app.color.color_B0B0B0'))
.borderRadius('3vp')
.fontColor($r('app.color.color_999999'))
.fontWeight(500)
.fontSize($r('app.float.vp_14'))
.fontColor(Color.White)
.onClick(() => {
// 点击一键关注
if (!this.oneKeyFollow && this.rmhSelectedList.length > 0 ){
this.oneKeyFollow = true
}
})
// 没有更多
NoMoreLayout()
}
.width('100%')
}
// 选中
private clickRecommendHeadSelected(rmhInfo: RmhRecommendDTO) {
if (this.rmhSelectedList.length > 0 && rmhInfo ) {
const num = this.rmhSelectedList.indexOf(rmhInfo.creatorId)
if ( num != -1) {
this.rmhSelectedList.splice(num, 1)
}else {
this.rmhSelectedList.push(rmhInfo.creatorId)
}
}else {
this.rmhSelectedList.push(rmhInfo.creatorId)
}
}
}