SearchComponent.ets
4.44 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
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
import router from '@ohos.router'
import SearcherAboutDataModel from '../../model/SearcherAboutDataModel'
import { SearchHistoryItem } from '../../viewmodel/SearchHistoryItem'
import { SearchHistoryComponent } from './SearchHistoryComponent'
import { SearchHotsComponent } from './SearchHotsComponent'
const TAG = "SearchComponent"
@Component
export struct SearchComponent {
@State searchTextData: string[] = []
@State hasInputContent: boolean = false
@State hasChooseSearch: boolean = false
private swiperController: SwiperController = new SwiperController()
@State searchText: string = ''
controller: TextInputController = new TextInputController()
@State searchHistoryData: SearchHistoryItem[] = []
scroller: Scroller = new Scroller()
aboutToAppear() {
//获取提示滚动
this.getSearchHint()
//获取搜索历史
this.getSearchHistoryData()
}
getSearchHint() {
SearcherAboutDataModel.getSearchHintData(getContext(this)).then((value) => {
if (value != null) {
this.searchTextData = value
}
}).catch((err: Error) => {
console.log(TAG, JSON.stringify(err))
})
}
getSearchHistoryData() {
this.searchHistoryData = SearcherAboutDataModel.getSearchHistoryData()
}
build() {
Column() {
this.searchInputComponent()
if (!this.hasInputContent) {
Scroll(this.scroller) {
Column() {
SearchHistoryComponent({ searchHistoryData: $searchHistoryData })
//分隔符
Divider()
.width('100%')
.height('1lpx')
.color($r('app.color.color_EDEDED'))
.strokeWidth('1lpx')
SearchHotsComponent()
}
}
.scrollable(ScrollDirection.Vertical)
.scrollBar(BarState.Off)
.width('100%')
.height('100%')
.padding({ left: '31lpx', right: '31lpx' })
} else {
if (this.hasChooseSearch) {
//搜索结果
//搜索结果为null（空布局 + 为你推荐）
} else {
//联想搜索
}
}
}.height('100%')
.width('100%')
}
//搜索框
@Builder searchInputComponent() {
Row() {
//左
Stack({ alignContent: Alignment.Start }) {
if (this.searchTextData != null && this.searchTextData.length > 0 && !this.hasInputContent) {
Swiper(this.swiperController) {
ForEach(this.searchTextData, (item: string, index: number) => {
Text(item)
.fontWeight('400lpx')
.fontSize('25lpx')
.fontColor($r('app.color.color_666666'))
.lineHeight('35lpx')
.textAlign(TextAlign.Start)
.maxLines(1)
.textOverflow({ overflow: TextOverflow.Clip })
.margin({ left: '40lpx' })
})
}
.loop(true)
.autoPlay(true)
.interval(3000)
.indicator(false)
.vertical(true)
.enabled(false)
.focusable(false)
}
TextInput({ text: this.searchText, placeholder: '', controller: this.controller })
.caretColor(Color.Pink)
.fontSize('27lpx')
.fontColor(Color.Black)
.onChange((value: string) => {
this.searchText = value
if (this.searchText.length > 0) {
this.hasInputContent = true
} else {
this.hasInputContent = false
}
})
.backgroundColor($r('app.color.color_transparent'))
}
.backgroundImage($r('app.media.search_page_input_bg'))
.backgroundImageSize(ImageSize.Cover)
.layoutWeight(1)
.height('69lpx')
//右
Text("取消")
.textAlign(TextAlign.Center)
.fontWeight('400lpx')
.fontSize('31lpx')
.lineHeight('58lpx')
.fontColor($r('app.color.color_222222'))
.width('125lpx')
.height('58lpx')
.onClick(() => {
router.back()
// SearcherAboutDataModel.putSearchHistoryData(this.searchText)
// if(StringUtils.isNotEmpty(this.searchText)){
// if(this.searchHistoryData.length===10){
// this.searchHistoryData.pop()
// }
// this.searchHistoryData.push(new SearchHistoryItem(this.searchText))
// }
})
}
.height('85lpx')
.padding({ left: '31lpx' })
.alignItems(VerticalAlign.Center)
.margin({ bottom: '36lpx' })
}
}