feat: 完成搜索页面的UI和部分交互

commons/basic/src/main/ets/utils/arkts/utils/YTRouter.ets

@@ -80,6 +80,11 @@ class YTRouter extends NavPathStack {
   router2BookListPage(){
     this.pushPathByName('BookListPage', null)
   }
+
+  // 跳转至书籍搜索页面
+  router2BookSearchPage(){
+    this.pushPathByName('BookSearchPage', null)
+  }
 }
 
 export const yTRouter = YTRouter.getInstance()

features/feature/src/main/ets/components/DeerSearch.ets

@@ -1,4 +1,5 @@
-import { YTButton } from "basic"
+import { YTButton, yTRouter } from "basic"
+import testsuite from "../../../ohosTest/ets/test/List.test"
 import { CustomTextStyle } from "../style/CustomTextStyle"
 
 @ComponentV2
@@ -6,9 +7,19 @@ export struct DeerSearch {
   @Param enable: boolean = true
 
   @Event onSearch: (text: string) => void
-  @Event Touch: () => void
+  @Event onChange: (text: string) => void
 
-  @Local text: string = ''
+
+  @Local searchKey: string = ''
+
+  Touch(){
+    yTRouter.router2BookSearchPage()
+  }
+
+  onSubmit(){
+    this.onSearch(this.searchKey)
+    this.searchKey = ''
+  }
 
   build() {
     Row({space: 7}) {
@@ -18,7 +29,7 @@ export struct DeerSearch {
           .aspectRatio(1)
           .fillColor('#FECF2F')
 
-        TextInput({text: this.text, placeholder: '搜索图书/书单'})
+        TextInput({text: $$this.searchKey, placeholder: '搜索图书/书单'})
           .padding(0)
           .fontSize(12)
           // .maxLength(20)
@@ -27,9 +38,10 @@ export struct DeerSearch {
           .borderRadius(0)
           .border({ width: 0 })
           .enabled(this.enable)
-          .placeholderColor(this.enable ? '#B5B8BC' : Color.Black)
+          .onSubmit(this.onSubmit)
           .backgroundColor(Color.Transparent)
           .placeholderFont({size: 12, weight: 400})
+          .placeholderColor(this.enable ? '#B5B8BC' : Color.Black)
       }
       .borderRadius(31)
       .layoutWeight(1)
@@ -43,13 +55,14 @@ export struct DeerSearch {
         .border({ width: 2, color: '#000000' })
         .padding({left: 18, right: 18, top: 9, bottom: 9})
         .attributeModifier(new CustomTextStyle({size: 12, weight: 600}))
-        .onClick(() => { if(!this.enable) this.onSearch(this.text) })
+        .onClick(() => {
+          if(this.enable) this.onSubmit()
+          else this.Touch()
+        })
     }
     .width("100%")
     .onClick(() => {
-      if(this.enable) {
-        this.Touch()
-      }
+      if(!this.enable) this.Touch()
     })
   }
 }

features/feature/src/main/ets/model/Storage.ets

@@ -0,0 +1,4 @@
+@ObservedV2
+export class HistoryStorage{
+  @Trace history: string[] = new Array(8).fill('好的好的好的额')
+}

features/feature/src/main/ets/pages/BookSearchPage.ets

@@ -1,18 +1,143 @@
-import { RouterPage, YTHeader } from 'basic'
+import { YTAvoid, YTHeader } from 'basic'
+import { DeerSearch } from '../components/DeerSearch'
+import { CustomTextStyle } from '../style/CustomTextStyle'
+import { LengthMetrics, PersistenceV2 } from '@kit.ArkUI'
+import { HistoryStorage } from '../model/Storage'
 
+// 书籍搜索页面
 @ComponentV2
-@RouterPage
 struct BookSearchPage {
-  // @Local vm: BookSearchViewModel = new SearchPageViewModel();
+  @Local safeBottom: number = AppStorage.get(YTAvoid.SAFE_BOTTOM_KEY) as number
+
+  searHistory: HistoryStorage = PersistenceV2.connect(HistoryStorage, () => new HistoryStorage())!
+
+  // 清空历史记录
+  clearHistory() {
+    this.searHistory.history = []
+  }
+
+  // 开始搜索
+  onSearch(text: string) {
+    let key = text
+
+    console.log('开始搜索searchKey: ' + key)
+  }
 
   build() {
     NavDestination() {
       Column() {
-        YTHeader()
+        YTHeader({ defaultStyle: { title: '搜索' } })
+
+        Column(){
+          List(){
+            ListItem(){
+              DeerSearch({
+                onSearch: this.onSearch,
+              })
+            }
+            .margin({top: 14})
+
+            ListItem(){
+              Row(){
+                Text('搜索历史')
+                  .attributeModifier(new CustomTextStyle({ size: 12, weight: 600 }))
+
+                Image($r('[basic].media.icon_trashCan'))
+                  .width(24)
+                  .aspectRatio(1)
+                  .onClick(() => { this.clearHistory() })
+              }
+              .width("100%")
+              .alignItems(VerticalAlign.Center)
+              .justifyContent(FlexAlign.SpaceBetween)
+            }
+            .margin({top: 16})
+
+            ListItem(){
+              Flex({wrap: FlexWrap.Wrap, space: { cross: new LengthMetrics(9), main: new LengthMetrics(6)}}) {
+                ForEach(this.searHistory.history, (item: string, index) => {
+                  Text(item)
+                    .borderRadius(13)
+                    .backgroundColor('rgba(0, 0, 0, 0.04)')
+                    .padding({left: 11, top: 6, right: 11, bottom: 6})
+                    .attributeModifier(new CustomTextStyle({ size: 12, weight: 400, color: 'rgba(0, 0, 0, 0.5)' }))
+                    .onClick(() => { this.onSearch(item) })
+                })
+              }
+              .width("100%")
+            }
+            .margin({top: 4})
+
+            ListItem(){
+              Scroll(){
+                Row({space: 15}){
+                  ForEach(['热门搜索', '主体分类'], (item: string, index) => {
+                    Column(){
+                      Row({space: 8}){
+                        Row()
+                          .width(24)
+                          .aspectRatio(1)
+                          .backgroundColor(Color.Red)
+
+                        Text(item)
+                      }
+
+                      Divider()
+                        .height(2)
+                        .backgroundColor('#f1f1f1')
+                        .width('90%')
+                        .margin({left: 15, top: 13, bottom: 13})
+
+                      ForEach(new Array(20).fill(''), (item: string, index) => {
+                       Row({space: 5}){
+                         Text(`${index<9?' ':''}${index+1}`)
+                           .attributeModifier(new CustomTextStyle({ size: 14, weight: 400, color: index < 3 ? '#FFFC3636' : '#FF000000'}))
+
+                         Text('西游记')
+                           .attributeModifier(new CustomTextStyle({ size: 14, weight: 400, color: index < 3 ? '#FF000000' : '#80000000'}))
+                       }
+                       .width('100%')
+                       .margin({top: 12})
+                       .justifyContent(FlexAlign.Start)
+                        .onClick(() => { this.onSearch('西游记') })
+                      })
+                    }
+                    .width(230)
+                    .borderRadius(8)
+                    .alignItems(HorizontalAlign.Start)
+                    .border({width: 2, color: '#000000'})
+                    .padding({left: 10, right: 10, top: 13, bottom: 13})
+                  })
+                }
+              }
+              .scrollBar(BarState.Off)
+              .scrollable(ScrollDirection.Horizontal)
+            }
+            .margin({top: 20})
+
+            ListItem()
+              .height(this.safeBottom)
+          }
+          .width('100%')
+          .height('100%')
+          .scrollBar(BarState.Off)
+        }
+        .width('100%')
+        .layoutWeight(1)
+        .padding({ left: 16, right: 16 })
       }
+      .width('100%')
+      .height('100%')
+      .backgroundColor('#F7F8FA')
+      .justifyContent(FlexAlign.Start)
+      .alignItems(HorizontalAlign.Start)
     }
     .hideTitleBar(true)
   }
 
+}
 
+@Builder
+function BookSearchBuilder() {
+  BookSearchPage()
 }

features/feature/src/main/resources/base/profile/router_map.json

@@ -4,6 +4,11 @@
       "name": "BookListPage",
       "pageSourceFile": "src/main/ets/pages/BookListPage.ets",
       "buildFunction": "BookListBuilder"
+    },
+    {
+      "name": "BookSearchPage",
+      "pageSourceFile": "src/main/ets/pages/BookSearchPage.ets",
+      "buildFunction": "BookSearchBuilder"
     }
   ]
 }