SearchHotsComponent.ets
4.61 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
126
127
import SearcherAboutDataModel from '../../model/SearcherAboutDataModel'
import { SearchHotContentItem } from '../../viewmodel/SearchHotContentItem'
const TAG = "SearchHotsComponent"
/**
* 热门搜索
*/
@Component
export struct SearchHotsComponent{
@State searchHotsData:SearchHotContentItem[] = []
onGetSearchRes?: (item:string) => void;
@Prop percent:number = 1
aboutToAppear(){
//获取搜索热词
this.getSearchHotsData()
}
getSearchHotsData(){
SearcherAboutDataModel.getSearchHotsData(getContext(this)).then((value)=>{
if(value!=null){
this.searchHotsData = value
}
}).catch((err:Error)=>{
console.log(TAG,JSON.stringify(err))
if(this.searchHotsData.length === 0){
this.searchHotsData.push(new SearchHotContentItem("二十大",0,1))
}
})
}
build(){
Column(){
if(this.searchHotsData.length>0){
Row() {
Image($r('app.media.search_hot_icon'))
.width(`${this.calcHeight(46)}lpx`)
.height(`${this.calcHeight(46)}lpx`)
.objectFit(ImageFit.Auto)
.margin({right:`${this.calcHeight(8)}lpx`})
.interpolation(ImageInterpolation.Medium)
Text("热门搜索")
.textAlign(TextAlign.Center)
.fontWeight(FontWeight.Bold)
.fontSize(`${this.calcHeight(33)}lpx`)
.lineHeight(`${this.calcHeight(46)}lpx`)
.fontColor($r('app.color.color_222222'))
.height(`${this.calcHeight(46)}lpx`)
}
.width('100%')
.margin({bottom:`${this.calcHeight(15)}lpx`})
}
List(){
ForEach(this.searchHotsData,(item:SearchHotContentItem,index:number)=>{
ListItem(){
Column(){
Row(){
Row(){
if(item.sequence <=3){
Image(item.sequence===1?$r('app.media.search_hot_num1'):item.sequence===2?$r('app.media.search_hot_num2'):$r('app.media.search_hot_num3'))
.width(`${this.calcHeight(27)}lpx`)
.height(`${this.calcHeight(35)}lpx`)
.objectFit(ImageFit.Auto)
.margin({right:`${this.calcHeight(12)}lpx`})
.interpolation(ImageInterpolation.High)
}else {
Text(`${item.sequence}`)
.height(`${this.calcHeight(31)}lpx`)
.fontColor($r('app.color.color_666666'))
.fontSize(`${this.calcHeight(27)}lpx`)
.fontWeight(FontWeight.Regular)
.lineHeight(`${this.calcHeight(31)}lpx`)
.margin({right:`${this.calcHeight(12)}lpx`})
}
Text(`${item.hotEntry}`)
.textOverflow({ overflow: TextOverflow.Ellipsis })
.fontColor($r('app.color.color_222222'))
.fontSize(`${this.calcHeight(31)}lpx`)
.maxLines(1)
.fontWeight(FontWeight.Regular)
.lineHeight(`${this.calcHeight(42)}lpx`)
}.layoutWeight(1)
if(item.mark===1 || item.mark===2){
Image(item.mark===1?$r('app.media.search_hots_mark1'):$r('app.media.search_hots_mark2'))
.width(`${this.calcHeight(42)}lpx`)
.height(`${this.calcHeight(31)}lpx`)
.objectFit(ImageFit.Auto)
.interpolation(ImageInterpolation.High)
}
}.alignItems(VerticalAlign.Center)
.height(`${this.calcHeight(84)}lpx`)
.width('100%')
.justifyContent(FlexAlign.SpaceBetween)
if(index != this.searchHotsData.length-1 ){
Divider()
.width('100%')
.height(`${this.calcHeight(1)}lpx`)
.color($r('app.color.color_F5F5F5'))
.strokeWidth(`${this.calcHeight(1)}lpx`)
}
}.height(`${this.calcHeight(85)}lpx`)
.width('100%')
.alignItems(HorizontalAlign.Start)
}
.onClick(()=>{
if (this.onGetSearchRes !== undefined) {
this.onGetSearchRes(item.hotEntry)
}
})
})
}.onScrollFrameBegin((offset, state) => {
return { offsetRemain: 0 }
}).layoutWeight(1)
}.width('100%')
.height('100%')
.margin({top:`${this.calcHeight(46)}lpx`})
}
calcHeight(value:number): number{
return value * this.percent
}
}