Showing
4 changed files
with
96 additions
and
42 deletions
| @@ -146,7 +146,7 @@ export struct HomePageBottomComponent{ | @@ -146,7 +146,7 @@ export struct HomePageBottomComponent{ | ||
| 146 | 146 | ||
| 147 | LazyForEach(this.data_follow, (item: FollowListDetailItem, index: number = 0) => { | 147 | LazyForEach(this.data_follow, (item: FollowListDetailItem, index: number = 0) => { |
| 148 | ListItem() { | 148 | ListItem() { |
| 149 | - FollowChildComponent({data: item,type:1}) | 149 | + FollowChildComponent({data: item,type:2}) |
| 150 | } | 150 | } |
| 151 | .onClick(() => { | 151 | .onClick(() => { |
| 152 | }) | 152 | }) |
| @@ -29,11 +29,19 @@ export struct FirstTabTopSearchComponent { | @@ -29,11 +29,19 @@ export struct FirstTabTopSearchComponent { | ||
| 29 | if (value != null) { | 29 | if (value != null) { |
| 30 | this.searchTextData = value | 30 | this.searchTextData = value |
| 31 | } | 31 | } |
| 32 | + this.setDefaultHitData() | ||
| 32 | }).catch((err: Error) => { | 33 | }).catch((err: Error) => { |
| 33 | console.log(TAG, JSON.stringify(err)) | 34 | console.log(TAG, JSON.stringify(err)) |
| 35 | + this.setDefaultHitData() | ||
| 34 | }) | 36 | }) |
| 35 | } | 37 | } |
| 36 | 38 | ||
| 39 | + setDefaultHitData(){ | ||
| 40 | + if(this.searchTextData.length === 0){ | ||
| 41 | + this.searchTextData.push("搜索") | ||
| 42 | + } | ||
| 43 | + } | ||
| 44 | + | ||
| 37 | build() { | 45 | build() { |
| 38 | Row() { | 46 | Row() { |
| 39 | Image($r('app.media.icon_search')) | 47 | Image($r('app.media.icon_search')) |
| @@ -13,14 +13,18 @@ const TAG = "SearchComponent" | @@ -13,14 +13,18 @@ const TAG = "SearchComponent" | ||
| 13 | @Component | 13 | @Component |
| 14 | export struct SearchComponent { | 14 | export struct SearchComponent { |
| 15 | @State searchTextData: string[] = [] | 15 | @State searchTextData: string[] = [] |
| 16 | + @State hasNoSearchTextData: boolean = false | ||
| 17 | + @State curHintSearchData: string = "" | ||
| 16 | @State hasInputContent: boolean = false | 18 | @State hasInputContent: boolean = false |
| 17 | @State hasChooseSearch: boolean = false | 19 | @State hasChooseSearch: boolean = false |
| 18 | - @State isClickedHistory: boolean = false | ||
| 19 | - @State isClickedHot: boolean = false | ||
| 20 | - @State isClickedRelated: boolean = false | 20 | + @State isClickedHistorySearch: boolean = false |
| 21 | + @State isClickedHotSearch: boolean = false | ||
| 22 | + @State isClickedRelatedSearch: boolean = false | ||
| 23 | + @State isClickedInputSearch: boolean = false | ||
| 24 | + @State isClickedHintSearch: boolean = false | ||
| 21 | private swiperController: SwiperController = new SwiperController() | 25 | private swiperController: SwiperController = new SwiperController() |
| 22 | @State searchText: string = '' | 26 | @State searchText: string = '' |
| 23 | - controller: TextInputController = new TextInputController() | 27 | + controller: SearchController = new SearchController() |
| 24 | @State searchHistoryData: SearchHistoryItem[] = [] | 28 | @State searchHistoryData: SearchHistoryItem[] = [] |
| 25 | @State relatedSearchContentsData: SearchRelatedItem[] = [] | 29 | @State relatedSearchContentsData: SearchRelatedItem[] = [] |
| 26 | scroller: Scroller = new Scroller() | 30 | scroller: Scroller = new Scroller() |
| @@ -75,10 +79,18 @@ export struct SearchComponent { | @@ -75,10 +79,18 @@ export struct SearchComponent { | ||
| 75 | if (value != null) { | 79 | if (value != null) { |
| 76 | this.searchTextData = value | 80 | this.searchTextData = value |
| 77 | } | 81 | } |
| 82 | + this.setDefaultHitData() | ||
| 78 | }).catch((err: Error) => { | 83 | }).catch((err: Error) => { |
| 79 | console.log(TAG, JSON.stringify(err)) | 84 | console.log(TAG, JSON.stringify(err)) |
| 85 | + this.setDefaultHitData() | ||
| 80 | }) | 86 | }) |
| 81 | } | 87 | } |
| 88 | + setDefaultHitData(){ | ||
| 89 | + if(this.searchTextData.length === 0){ | ||
| 90 | + this.hasNoSearchTextData = true | ||
| 91 | + this.searchTextData.push("搜索感兴趣的内容") | ||
| 92 | + } | ||
| 93 | + } | ||
| 82 | 94 | ||
| 83 | getSearchHistoryData() { | 95 | getSearchHistoryData() { |
| 84 | this.searchHistoryData = SearcherAboutDataModel.getSearchHistoryData() | 96 | this.searchHistoryData = SearcherAboutDataModel.getSearchHistoryData() |
| @@ -131,7 +143,7 @@ export struct SearchComponent { | @@ -131,7 +143,7 @@ export struct SearchComponent { | ||
| 131 | getSearchHistoryResData(content:string,index:number){ | 143 | getSearchHistoryResData(content:string,index:number){ |
| 132 | //删除单条记录 | 144 | //删除单条记录 |
| 133 | SearcherAboutDataModel.delSearchSingleHistoryData(index) | 145 | SearcherAboutDataModel.delSearchSingleHistoryData(index) |
| 134 | - this.isClickedHistory = true | 146 | + this.isClickedHistorySearch = true |
| 135 | this.searchResData(content) | 147 | this.searchResData(content) |
| 136 | } | 148 | } |
| 137 | 149 | ||
| @@ -148,6 +160,16 @@ export struct SearchComponent { | @@ -148,6 +160,16 @@ export struct SearchComponent { | ||
| 148 | //查询 操作 TODO | 160 | //查询 操作 TODO |
| 149 | this.hasChooseSearch = true | 161 | this.hasChooseSearch = true |
| 150 | this.getSearchResultCountData() | 162 | this.getSearchResultCountData() |
| 163 | + this.controller.stopEditing() | ||
| 164 | + } | ||
| 165 | + | ||
| 166 | + /** | ||
| 167 | + * 点击hint搜索列表回调 | ||
| 168 | + * @param content | ||
| 169 | + */ | ||
| 170 | + getSearchHintResData(content:string){ | ||
| 171 | + this.isClickedHintSearch = true | ||
| 172 | + this.searchResData(content) | ||
| 151 | } | 173 | } |
| 152 | 174 | ||
| 153 | /** | 175 | /** |
| @@ -155,7 +177,7 @@ export struct SearchComponent { | @@ -155,7 +177,7 @@ export struct SearchComponent { | ||
| 155 | * @param content | 177 | * @param content |
| 156 | */ | 178 | */ |
| 157 | getSearchRelatedResData(content:string){ | 179 | getSearchRelatedResData(content:string){ |
| 158 | - this.isClickedRelated = true | 180 | + this.isClickedRelatedSearch = true |
| 159 | this.searchResData(content) | 181 | this.searchResData(content) |
| 160 | } | 182 | } |
| 161 | 183 | ||
| @@ -164,10 +186,18 @@ export struct SearchComponent { | @@ -164,10 +186,18 @@ export struct SearchComponent { | ||
| 164 | * @param content | 186 | * @param content |
| 165 | */ | 187 | */ |
| 166 | getSearchHotResData(content:string){ | 188 | getSearchHotResData(content:string){ |
| 167 | - this.isClickedHot = true | 189 | + this.isClickedHotSearch = true |
| 168 | this.searchResData(content) | 190 | this.searchResData(content) |
| 169 | } | 191 | } |
| 170 | 192 | ||
| 193 | + /** | ||
| 194 | + * 点击输入法搜索搜索列表回调 | ||
| 195 | + * @param content | ||
| 196 | + */ | ||
| 197 | + getSearchInputResData(content:string){ | ||
| 198 | + this.isClickedInputSearch = true | ||
| 199 | + this.searchResData(content) | ||
| 200 | + } | ||
| 171 | 201 | ||
| 172 | //搜索框 | 202 | //搜索框 |
| 173 | @Builder searchInputComponent() { | 203 | @Builder searchInputComponent() { |
| @@ -185,7 +215,7 @@ export struct SearchComponent { | @@ -185,7 +215,7 @@ export struct SearchComponent { | ||
| 185 | .textAlign(TextAlign.Start) | 215 | .textAlign(TextAlign.Start) |
| 186 | .maxLines(1) | 216 | .maxLines(1) |
| 187 | .textOverflow({ overflow: TextOverflow.Clip }) | 217 | .textOverflow({ overflow: TextOverflow.Clip }) |
| 188 | - .margin({ left: '40lpx' }) | 218 | + .margin({ left: '70lpx' }) |
| 189 | }) | 219 | }) |
| 190 | } | 220 | } |
| 191 | .loop(true) | 221 | .loop(true) |
| @@ -195,42 +225,57 @@ export struct SearchComponent { | @@ -195,42 +225,57 @@ export struct SearchComponent { | ||
| 195 | .vertical(true) | 225 | .vertical(true) |
| 196 | .enabled(false) | 226 | .enabled(false) |
| 197 | .focusable(false) | 227 | .focusable(false) |
| 228 | + .onChange((index: number) => { | ||
| 229 | + this.curHintSearchData = this.searchTextData[index] | ||
| 230 | + }) | ||
| 198 | } | 231 | } |
| 199 | Row(){ | 232 | Row(){ |
| 200 | - TextInput({ text: this.searchText, placeholder: '', controller: this.controller }) | ||
| 201 | - .caretColor(Color.Pink) | ||
| 202 | - .fontSize('27lpx') | 233 | + Search({ value: this.searchText, placeholder: '', controller: this.controller}) |
| 203 | .layoutWeight(1) | 234 | .layoutWeight(1) |
| 204 | - .fontColor(Color.Black) | 235 | + .height('69lpx') |
| 236 | + .backgroundColor($r('app.color.color_transparent')) | ||
| 237 | + .textFont({ size: "27lpx", weight: "400lpx" }) | ||
| 238 | + .defaultFocus(true) | ||
| 239 | + .caretStyle({color:Color.Pink}) | ||
| 240 | + .onSubmit((value: string) => { | ||
| 241 | + if(StringUtils.isNotEmpty(this.searchText)){ | ||
| 242 | + SearcherAboutDataModel.putSearchHistoryData(this.searchText) | ||
| 243 | + this.getSearchHistoryData() | ||
| 244 | + this.getSearchInputResData(this.searchText) | ||
| 245 | + }else{ | ||
| 246 | + if(!this.hasNoSearchTextData){ | ||
| 247 | + if(StringUtils.isEmpty(this.curHintSearchData)){ | ||
| 248 | + this.curHintSearchData = this.searchTextData[0] | ||
| 249 | + } | ||
| 250 | + this.getSearchHintResData(this.curHintSearchData) | ||
| 251 | + }else{ | ||
| 252 | + ToastUtils.shortToast("请输入搜索关键词") | ||
| 253 | + } | ||
| 254 | + } | ||
| 255 | + }) | ||
| 205 | .onChange((value: string) => { | 256 | .onChange((value: string) => { |
| 206 | this.searchText = value | 257 | this.searchText = value |
| 258 | + if(this.isClickedHistorySearch || this.isClickedHotSearch || this.isClickedRelatedSearch || this.isClickedInputSearch|| this.isClickedHintSearch){ | ||
| 259 | + this.hasChooseSearch = true | ||
| 260 | + }else{ | ||
| 261 | + this.hasChooseSearch = false | ||
| 262 | + } | ||
| 263 | + | ||
| 207 | if (this.searchText.length > 0) { | 264 | if (this.searchText.length > 0) { |
| 208 | this.hasInputContent = true | 265 | this.hasInputContent = true |
| 209 | } else { | 266 | } else { |
| 210 | this.hasInputContent = false | 267 | this.hasInputContent = false |
| 211 | } | 268 | } |
| 212 | - if(this.isClickedHistory || this.isClickedHot || this.isClickedRelated){ | ||
| 213 | - this.isClickedHistory = false | ||
| 214 | - this.isClickedHot = false | ||
| 215 | - this.isClickedRelated = false | 269 | + |
| 270 | + if(this.isClickedHistorySearch || this.isClickedHotSearch || this.isClickedRelatedSearch || this.isClickedInputSearch|| this.isClickedHintSearch){ | ||
| 271 | + this.resetSearch() | ||
| 216 | }else{ | 272 | }else{ |
| 273 | + if(this.hasInputContent){ | ||
| 217 | this.getRelatedSearchContent() | 274 | this.getRelatedSearchContent() |
| 218 | } | 275 | } |
| 219 | - }) | ||
| 220 | - .backgroundColor($r('app.color.color_transparent')) | ||
| 221 | - .defaultFocus(true) | ||
| 222 | - if(this.hasInputContent){ | ||
| 223 | - Image($r('app.media.search_input_del_icon')) | ||
| 224 | - .width('31lpx') | ||
| 225 | - .height('31lpx') | ||
| 226 | - .objectFit(ImageFit.Cover) | ||
| 227 | - .interpolation(ImageInterpolation.High) | ||
| 228 | - .onClick(()=>{ | ||
| 229 | - this.searchText = "" | ||
| 230 | - this.hasInputContent = false | ||
| 231 | - this.hasChooseSearch = false | ||
| 232 | - }) | ||
| 233 | } | 276 | } |
| 277 | + }) | ||
| 278 | + | ||
| 234 | }.padding({right:'30lpx'}) | 279 | }.padding({right:'30lpx'}) |
| 235 | .layoutWeight(1) | 280 | .layoutWeight(1) |
| 236 | } | 281 | } |
| @@ -241,7 +286,7 @@ export struct SearchComponent { | @@ -241,7 +286,7 @@ export struct SearchComponent { | ||
| 241 | 286 | ||
| 242 | //TODO 需要修改输入法 换行 | 287 | //TODO 需要修改输入法 换行 |
| 243 | //右 | 288 | //右 |
| 244 | - Text(this.hasInputContent?"搜索":"取消") | 289 | + Text("取消") |
| 245 | .textAlign(TextAlign.Center) | 290 | .textAlign(TextAlign.Center) |
| 246 | .fontWeight('400lpx') | 291 | .fontWeight('400lpx') |
| 247 | .fontSize('31lpx') | 292 | .fontSize('31lpx') |
| @@ -250,16 +295,7 @@ export struct SearchComponent { | @@ -250,16 +295,7 @@ export struct SearchComponent { | ||
| 250 | .width('125lpx') | 295 | .width('125lpx') |
| 251 | .height('58lpx') | 296 | .height('58lpx') |
| 252 | .onClick(() => { | 297 | .onClick(() => { |
| 253 | - if(this.hasInputContent){ | ||
| 254 | - if(StringUtils.isNotEmpty(this.searchText)){ | ||
| 255 | - SearcherAboutDataModel.putSearchHistoryData(this.searchText) | ||
| 256 | - this.getSearchHistoryData() | ||
| 257 | - | ||
| 258 | - this.getSearchHotResData(this.searchText) | ||
| 259 | - } | ||
| 260 | - }else{ | ||
| 261 | router.back() | 298 | router.back() |
| 262 | - } | ||
| 263 | }) | 299 | }) |
| 264 | } | 300 | } |
| 265 | .height('85lpx') | 301 | .height('85lpx') |
| @@ -289,9 +325,19 @@ export struct SearchComponent { | @@ -289,9 +325,19 @@ export struct SearchComponent { | ||
| 289 | } | 325 | } |
| 290 | } | 326 | } |
| 291 | this.isGetRequest = true | 327 | this.isGetRequest = true |
| 328 | + this.resetSearch() | ||
| 292 | }).catch((err: Error) => { | 329 | }).catch((err: Error) => { |
| 293 | console.log(TAG, JSON.stringify(err)) | 330 | console.log(TAG, JSON.stringify(err)) |
| 294 | this.isGetRequest = true | 331 | this.isGetRequest = true |
| 332 | + this.resetSearch() | ||
| 295 | }) | 333 | }) |
| 296 | } | 334 | } |
| 335 | + | ||
| 336 | + resetSearch(){ | ||
| 337 | + this.isClickedHistorySearch = false | ||
| 338 | + this.isClickedHotSearch = false | ||
| 339 | + this.isClickedRelatedSearch = false | ||
| 340 | + this.isClickedInputSearch = false | ||
| 341 | + this.isClickedHintSearch = false | ||
| 342 | + } | ||
| 297 | } | 343 | } |
| @@ -135,6 +135,6 @@ export struct SearchHistoryComponent{ | @@ -135,6 +135,6 @@ export struct SearchHistoryComponent{ | ||
| 135 | } | 135 | } |
| 136 | 136 | ||
| 137 | getCategoryViewHeight() { | 137 | getCategoryViewHeight() { |
| 138 | - return `${46 * this.getCategoryRowCount()}lpx`; | 138 | + return `${50 * this.getCategoryRowCount()}lpx`; |
| 139 | } | 139 | } |
| 140 | } | 140 | } |
-
Please register or login to post a comment