|
|
@@ -0,0 +1,187 @@
|
|
|
+import { yTRouter } from 'basic'
|
|
|
+import { LengthMetrics } from '@kit.ArkUI'
|
|
|
+import { RecipeSearchViewModel } from '../viewModel/RecipeSearchViewModel'
|
|
|
+import { Cuisine } from '../model/Index'
|
|
|
+
|
|
|
+
|
|
|
+@ComponentV2
|
|
|
+struct RecipeSearchPage{
|
|
|
+ @Local vm: RecipeSearchViewModel = new RecipeSearchViewModel()
|
|
|
+
|
|
|
+ aboutToAppear(): void {
|
|
|
+ }
|
|
|
+
|
|
|
+ build(){
|
|
|
+ NavDestination(){
|
|
|
+ Column(){
|
|
|
+ // Title
|
|
|
+ Row(){
|
|
|
+ Image($r("app.media.back"))
|
|
|
+ .width(20)
|
|
|
+ .aspectRatio(1)
|
|
|
+ .onClick(() => {
|
|
|
+ yTRouter.pop()
|
|
|
+ })
|
|
|
+ }
|
|
|
+ .width('100%')
|
|
|
+ .alignItems(VerticalAlign.Top)
|
|
|
+ .justifyContent(FlexAlign.Start)
|
|
|
+ .padding({top: 10, bottom: 10})
|
|
|
+
|
|
|
+ // 搜索框
|
|
|
+ Row({space: 15}){
|
|
|
+ Image($r("app.media.Search"))
|
|
|
+ .width(18)
|
|
|
+ .aspectRatio(1)
|
|
|
+
|
|
|
+ TextInput({ placeholder: "输入日记标题", text: $$this.vm.keyWord })
|
|
|
+ .padding(0)
|
|
|
+ .fontSize(16)
|
|
|
+ .layoutWeight(1)
|
|
|
+ .borderRadius(0)
|
|
|
+ .placeholderColor('#ff777272')
|
|
|
+ .placeholderFont({ size: 16 })
|
|
|
+ .backgroundColor(Color.Transparent)
|
|
|
+ .caretColor('app.color.main_ac_color_dark')
|
|
|
+ .onSubmit(()=>{ this.vm.onSearch() })
|
|
|
+
|
|
|
+
|
|
|
+ if(this.vm.keyWord.length > 0) {
|
|
|
+ Image($r('app.media.Diary_close'))
|
|
|
+ .width(25)
|
|
|
+ // .padding(5)
|
|
|
+ .aspectRatio(1)
|
|
|
+ .borderRadius(15)
|
|
|
+ .onClick(() => { this.vm.clearKeyWord() })
|
|
|
+ }
|
|
|
+
|
|
|
+ Text("确认")
|
|
|
+ .borderRadius(32)
|
|
|
+ .linearGradient(this.vm.linearInfo)
|
|
|
+ .padding({ left: 17, top: 5.5, right: 17, bottom: 5.5 })
|
|
|
+ .onClick(() => { this.vm.onSearch() })
|
|
|
+
|
|
|
+ }
|
|
|
+ .width("100%")
|
|
|
+ .alignItems(VerticalAlign.Center)
|
|
|
+ .border({ width: { bottom: 1 } })
|
|
|
+ .padding({ bottom: 21, top: 13 })
|
|
|
+
|
|
|
+ // 历史记录
|
|
|
+ Column({space: 15}){
|
|
|
+ if(this.vm.searchList.length !== 0) {
|
|
|
+ Column(){
|
|
|
+ List(){
|
|
|
+ ForEach(this.vm.searchList, (item: Cuisine, i: number) => {
|
|
|
+ ListItem() {
|
|
|
+ // DiaryTitleItem({
|
|
|
+ // title: item.title,
|
|
|
+ // onClickBack: () => {
|
|
|
+ // this.routerDiaryPage(item.id)
|
|
|
+ // }
|
|
|
+ // })
|
|
|
+ }
|
|
|
+ }, (item: Cuisine) => item.id?.toString())
|
|
|
+ }
|
|
|
+ .width("100%")
|
|
|
+ .height("100%")
|
|
|
+ .scrollBar(BarState.Off)
|
|
|
+ }
|
|
|
+ .width("100%")
|
|
|
+ .layoutWeight(1)
|
|
|
+ .padding({bottom: 20})
|
|
|
+
|
|
|
+ } else if(this.vm.historicalSearchRecords.searchList.length > 0){
|
|
|
+ this.searchTitleBar()
|
|
|
+
|
|
|
+ Flex({wrap: FlexWrap.Wrap, space: { main: new LengthMetrics(8), cross: new LengthMetrics(8)}}){
|
|
|
+ ForEach(this.vm.historicalSearchRecords.searchList, (item: string, index: number) => {
|
|
|
+ this.keyWordItem(item, index)
|
|
|
+ })
|
|
|
+ }
|
|
|
+ } else {
|
|
|
+ // 搜索历史
|
|
|
+ this.searchTitleBar()
|
|
|
+
|
|
|
+ Column({ space: 5 }){
|
|
|
+ Image($r('app.media.Search'))
|
|
|
+ .width(80)
|
|
|
+ .aspectRatio(1)
|
|
|
+
|
|
|
+ Text("暂无搜索历史")
|
|
|
+ }
|
|
|
+ .width("100%")
|
|
|
+ .padding({ top: 100 })
|
|
|
+ .alignItems(HorizontalAlign.Center)
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .width("100%")
|
|
|
+ .layoutWeight(1)
|
|
|
+ .padding({ top: 35 })
|
|
|
+ }
|
|
|
+ .padding({ top: this.vm.safeTop, left: 24, right: 24 })
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ // 搜索记录关键字
|
|
|
+ @Builder
|
|
|
+ keyWordItem(keyWord: string, index: number){
|
|
|
+ Row({space: 8}){
|
|
|
+ Text(keyWord)
|
|
|
+ .fontSize(16)
|
|
|
+
|
|
|
+ if(this.vm.delModel){
|
|
|
+ Image($r('app.media.close'))
|
|
|
+ .width(16)
|
|
|
+ .aspectRatio(1)
|
|
|
+ .padding(2)
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .borderRadius(8)
|
|
|
+ .backgroundColor("#F7F7F7")
|
|
|
+ .padding({top: 8, bottom: 8, left: 25, right: this.vm.delModel ? 5 : 25})
|
|
|
+ .onClick(() => {
|
|
|
+ if(this.vm.delModel) {
|
|
|
+ this.vm.onDelSearch(index)
|
|
|
+ return;
|
|
|
+ }
|
|
|
+ this.vm.keyWord = keyWord
|
|
|
+ this.vm.onSearch()
|
|
|
+ })
|
|
|
+ }
|
|
|
+
|
|
|
+ // 搜索记录标题栏
|
|
|
+ @Builder
|
|
|
+ searchTitleBar(){
|
|
|
+ // 搜索历史
|
|
|
+ Row(){
|
|
|
+ Text("搜索历史")
|
|
|
+ .fontSize(16)
|
|
|
+ .fontColor(Color.Black)
|
|
|
+
|
|
|
+ Row(){
|
|
|
+ if(this.vm.delModel) {
|
|
|
+ Text("取消")
|
|
|
+ .fontSize(14)
|
|
|
+ .fontColor('#ff625a5a')
|
|
|
+ } else {
|
|
|
+ Image($r('app.media.del'))
|
|
|
+ .width(20)
|
|
|
+ .height(30)
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .onClick(() => {
|
|
|
+ this.vm.delModel = !this.vm.delModel
|
|
|
+ })
|
|
|
+ }
|
|
|
+ .height(30)
|
|
|
+ .width("100%")
|
|
|
+ .justifyContent(FlexAlign.SpaceBetween)
|
|
|
+
|
|
|
+ }
|
|
|
+}
|
|
|
+
|
|
|
+@Builder
|
|
|
+function RecipeSearchBuilder() {
|
|
|
+ RecipeSearchPage()
|
|
|
+}
|