Deer/features/feature/src/main/ets/pages/BookList/BookSearchResultPage.ets

import { BookItem, YTHeader } from 'basic'
import { BookItemComp } from '../../components/BookItemComp';
import { bookListItemComp } from '../../components/BuilderIndex';
import { ytEmptyComp } from '../../components/ytComp/ytEmptyComp';
import { BookListItem } from '../../model/BookModelIndex';
import { CustomTextStyle } from '../../style/CustomTextStyle';
import { BookSearchResultViewModel } from '../viewModel/BookSearchResultViewModel';

@ComponentV2
struct BookSearchResultPage {
  @Param @Require vm: BookSearchResultViewModel;

  build() {
    NavDestination() {
      Column() {
        YTHeader({ defaultStyle: {title: '搜索'}, bgc: Color.White })

        Row({space: 130}){
          ForEach(['图书', '书单'], (item: string, index) => {
            Column(){
              Text(item + `(${index == 0 ? this.vm.book.length : this.vm.bookList.length})`)
                .zIndex(99)
                .onClick(() => { this.vm.changeCategory(index) })
                .attributeModifier(new CustomTextStyle({size: 16, weight: 600, color: this.vm.categoryIndex == index ? '#FF111111' : '#FF777777'}))

              if(this.vm.categoryIndex == index){
                Image($r('[basic].media.icon_SelectBg'))
                  .width(45)
                  .height(16)
                  .margin({top:-10})
                  .transition(TransitionEffect.translate({ y: -10 })
                    .animation({ duration: 100, curve: Curve.Friction}))
              }
            }
            .height(30)
            .width(120)
            .alignItems(HorizontalAlign.Center)
          })
        }
        .height(80)
        .width('100%')
        .backgroundColor(Color.White)
        .padding({top: 10})
        .justifyContent(FlexAlign.Center)
        .borderRadius({bottomLeft: 8, bottomRight: 8})

        Tabs({controller: this.vm.tabControl}){
          TabContent(){
            this.BookItemList()
          }

          TabContent(){
            this.BookList()
          }
        }.width('100%')
        .layoutWeight(1)
        .barHeight(0)
      }
      .width('100%').height('100%')
      .backgroundColor('#F7F9FA')
    }
    .hideTitleBar(true)
  }

  // 书籍列表
  @Builder
  BookItemList() {
    ytEmptyComp({ dataSource: this.vm.book, keyStr: '书籍' }){
      List({space: 16}){
        ListItem()

        Repeat(this.vm.book)
          .each((item: RepeatItem<BookItem>) => {
            ListItem(){
              BookItemComp({item: item.item, addCar: () => {
                item.item.schoolbagFlag = '1'
              }})
            }
          })

        ListItem()
      }.width('100%').height('100%')
      .padding({left: 17, right: 17})
    }
  }

  // 书单列表
  @Builder
  BookList() {
    ytEmptyComp({ dataSource: this.vm.bookList, keyStr: '书单' }){
      List({space: 16}){
        ListItem()

        Repeat(this.vm.bookList)
          .each((item: RepeatItem<BookListItem>) => {
            ListItem(){
              bookListItemComp(item)
            }
          })

        ListItem()
      }.width('100%').height('100%')
      .padding({left: 17, right: 17})
    }
  }
}

@Builder
function BookSearchResultBuilder(_: string, key: string) {
  BookSearchResultPage({ vm: new BookSearchResultViewModel(key) })
}