Deer/features/feature/src/main/ets/view/SecondView.ets

import { DeerSearch } from '../components/DeerSearch'
import { SecondViewModel } from './viewModel/SecondViewModel'
import { CustomTextStyle } from '../style/CustomTextStyle'
import { bookItemComp, bookItemCompCover } from '../components/BuilderIndex'
import { BookListTypeList } from '../model/BookModelIndex'
import { cert } from '@kit.DeviceCertificateKit'
import { BookItem } from 'basic'

@ComponentV2
export struct SecondView {
  vm: SecondViewModel = new SecondViewModel()

  build() {
    Column(){
      Row({space: 12}){
        Row({space: 6}){
          Text(this.vm.ageRange || '年龄选择')
            .attributeModifier(new CustomTextStyle({size: 14, weight: 600}))

          Image($r('[basic].media.icon_expension'))
            .width(10)
            .height(8)
            .rotate({ angle: this.vm.openAgeDialog ? 180 : 0 })
            .animation({duration: 200, curve: Curve.Smooth})
        }
        .width(120)
        .borderRadius(18)
        .padding({top: 8, bottom: 8})
        .backgroundColor('#FFFECF2F')
        .justifyContent(FlexAlign.Center)
        .border({width: 2, color: '#FF000000'})
        .bindMenu(this.ageSelect())
        .onClick(() => { if(!this.vm.openAgeDialog) this.vm.openAgeDialog = true })

        DeerSearch({showSearchButton: false, enable: false})
          .layoutWeight(1)
      }
      .width("100%")
      .padding({left: 16, right: 16, top: this.vm.safeTop, bottom: 20})
      .linearGradient( this.vm.openTypeDialog ? {colors: [['#FFF2C0', 0], ['#FFF3C6', 1]]} : undefined)

      Column(){
        RelativeContainer(){
          Column(){
            // 页面的 Title
            Column(){
              Row(){
                Row(){
                  List({space: 22, scroller: this.vm.categoryControl}){
                    ForEach(this.vm.categoryList.list, (item: BookListTypeList, index) => {
                      ListItem(){
                        Column(){
                          Text(item.bookListTypeName)
                            .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.asymmetric(TransitionEffect.move(TransitionEdge.TOP), TransitionEffect.move(TransitionEdge.TOP)).animation({ duration: 100, curve: Curve.Smooth }))
                          }
                        }
                        .alignItems(HorizontalAlign.Center)
                      }
                    })
                  }
                  .height(40)
                  .width("100%")
                  .scrollBar(BarState.Off)
                  .listDirection(Axis.Horizontal)
                }.layoutWeight(1)

                Row(){
                  Image($r('[basic].media.icon_expension'))
                    .width(10)
                    .height(8)
                    .rotate({ angle: this.vm.openTypeDialog ? 180 : 0 })
                    .animation({duration: 200, curve: Curve.Smooth})
                }
                .padding({left: 16, top: 2})
                .onClick(() => { this.vm.openCategoryDialog() })

              }.alignItems(VerticalAlign.Top)

              Row(){
                Row(){
                  ForEach(['最新', '最热'], (item: string, index: number) => {
                    Text(item)
                      .borderRadius(15)
                      .padding({left: 12, top: 5, right: 12, bottom: 5})
                      .attributeModifier(new CustomTextStyle({size: 14, weight: 600}))
                      .border({width: 2, color: this.vm.query?.sort == index ? '#FF000000' : Color.Transparent})
                      .backgroundColor(this.vm.query?.sort == index ? '#FFFECF2F' : Color.Transparent)
                      .onClick(() => { this.vm.changeSortType(index) })
                  })
                }

                Row({space: 16}){
                  Row({space: 6}){
                    Blank()
                      .width(14)
                      .aspectRatio(1)
                      .borderRadius(2)
                      .border({width: 2, color: '#FF000000'})
                      .backgroundColor(this.vm.isRead ? '#FFFECF2F' : Color.White)
                    Text('未读')
                      .attributeModifier(new CustomTextStyle({size: 14, weight: 400}))
                  }.onClick(() => { this.vm.changeIsRead() })

                  Text(this.vm.showMode ? '封面模式' : '列表模式')
                    .onClick(() => { this.vm.changeShowMode() })
                    .attributeModifier(new CustomTextStyle({size: 14, weight: 400}))
                }
              }
              .width("100%")
              .margin({top: 10})
              .justifyContent(FlexAlign.SpaceBetween)
            }
            .width("100%")
            .backgroundColor(Color.White)
            .borderRadius({bottomLeft: 20, bottomRight: 20})
            .padding({left: 16, right: 16, bottom: 18})

            // 书籍列表项
            Column(){
              List({space: 12}){
                ListItem()

                Repeat(this.vm.bookList)
                  .each((item: RepeatItem<BookItem>) => {
                    if(this.vm.showMode) {
                      // 列表模式
                      bookItemComp(
                        item,
                        () => { this.vm.goBookDetail(item.item) },
                        () => { this.vm.addToBook(item.item) })
                    } else {
                      // 封面模式
                      bookItemCompCover(item, () => {})
                    }
                  })
              }
              .width("100%")
              .height("100%")
              .scrollBar(BarState.Off)
            }
            .id('list')
            .width("100%")
            .layoutWeight(1)
            .padding({left: 16, right: 16})
            .backgroundColor(Color.Transparent)
          }.width("100%").height("100%")
          .alignRules({
            left: { anchor: '__container__', align: HorizontalAlign.Start },
            top: { anchor: '__container__', align: VerticalAlign.Top }
          })

          // 分类弹窗
          if(this.vm.openTypeDialog){
            Column(){
              Column(){
                Row(){
                  Column(){
                    Text('选择分类')
                      .zIndex(99)
                      .attributeModifier(new CustomTextStyle({size: 16, weight: 600}))

                    Image($r('[basic].media.icon_SelectBg'))
                      .width(45)
                      .height(16)
                      .margin({top:-10})
                  }

                  Column(){
                    Image($r('[basic].media.icon_expension'))
                      .width(10)
                      .height(8)
                      .rotate({ angle: this.vm.openTypeDialog ? 180 : 0 })
                      .animation({duration: 200, curve: Curve.Smooth})
                  }
                  .width(50)
                  .height(24)
                  .alignItems(HorizontalAlign.End)
                  .justifyContent(FlexAlign.Center)
                  .onClick(() => { this.vm.openCategoryDialog() })
                }
                .width("100%")
                .justifyContent(FlexAlign.SpaceBetween)

                Grid(){
                  ForEach(this.vm.categoryList.list, (item: BookListTypeList, index: number) => {
                    GridItem(){
                      Text(item.bookListTypeName)
                        .width('100%')
                        .borderRadius(18)
                        .textAlign(TextAlign.Center)
                        .padding({top: 6, bottom: 6})
                        .backgroundColor(this.vm.categoryIndex == index ? '#FFFECF2F' : '#FFFFFF')
                        .border({width: 2, color: this.vm.categoryIndex == index ? '#FF000000' : '#FFFFFF'})
                        .attributeModifier(new CustomTextStyle({size: 16, weight: 400}))
                        .onClick(() => {
                          this.vm.changeCategory(index, true)
                          this.vm.openCategoryDialog()
                        })
                    }
                  })
                }
                .rowsGap(14)
                .columnsGap(23)
                .margin({top: 13})
                .maxCount(Math.abs(this.vm.categoryList?.list?.length/3))
                .columnsTemplate('repeat(3, 1fr)')
              }
              .width("100%")
              .onClick(() => {})
              .padding({left: 17, right: 17, bottom: 13})
              .borderRadius({bottomLeft: 16, bottomRight: 16})
              .linearGradient({colors: [['#FFF3C6', 0], ['#FFF9E4', 1]]})
              .transition(TransitionEffect.translate({ y: -20 })
                .animation({ duration: 200, curve: Curve.Friction}))
            }
            .width("100%")
            .height("100%")
            .backgroundColor('rgba(0, 0, 0, 0.5)')
            .onClick(() => { this.vm.openCategoryDialog() })
            .alignRules({
              left: { anchor: '__container__', align: HorizontalAlign.Start },
              top: { anchor: '__container__', align: VerticalAlign.Top }
            })
          }
        }
        .width('100%')
        .height('100%')
        .backgroundColor('#F7F9FA')
      }
      .width('100%')
      .layoutWeight(1)
    }
    .width('100%')
    .height('100%')
  }

  @Builder
  ageSelect(){
    Column({space: 17}){
      ForEach(this.vm.ageList, (item: string, index: number) => {
        Text(item)
          .attributeModifier(new CustomTextStyle({size: 14, weight: 600}))
          .onClick(() => {
            this.vm.changeAgeRange(index)
          })
      })
    }
    .margin(-4)
    .borderRadius(20)
    .border({width: 2, color: '#FF000000'})
    .padding({left: 32, right: 32, top: 19, bottom: 19})
    .onDisAppear(() => { this.vm.openAgeDialog = false })
  }
}