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

import { BasicType } from "basic"
import { tagItemComp } from "../components/BuilderIndex"
import { DeerSearch } from "../components/DeerSearch"
import { ytBuildComp } from "../components/ytBuildComp"
import { CustomTextStyle } from "../style/CustomTextStyle"
import { MainViModel } from "./viewModel/MainViewModel"

@ComponentV2
export struct MainView {
  vm: MainViModel = new MainViModel()

  build() {
    ytBuildComp(){
      Column() {
        Stack({alignContent: Alignment.Top}){
          List(){
            // logo
            ListItem(){
              Text('京东快递合作伙伴')
                .attributeModifier(new CustomTextStyle({size: 12, weight: 600}))
                .padding({top: this.vm.safeTop})
            }
            .padding({bottom: 13})

            // 搜索框
            ListItem(){
              this.customSearch()
            }


            ListItem(){
              Column(){
                // 轮播
                Swiper(){
                  Row()
                    .height(150)
                    .width('100%')
                    .backgroundColor(Color.Orange)
                }
                .height(150)
                .width("100%")
                .enabled(false)
                .indicator(false)
                .borderRadius(30)


                // 功能
                Row(){
                  ForEach(this.vm.function1, (item: BasicType, index) => {
                    Column({space: 5}){
                      Image(item.src)
                        .width(60)
                        .aspectRatio(1)

                      Text(item.text)
                        .attributeModifier(new CustomTextStyle({size: 14, weight: 600}))
                    }
                    .onClick(item.click)
                  })
                }
                .width("100%")
                .margin({top: 22})
                .justifyContent(FlexAlign.SpaceAround)


                // 榜单
                Row({space: 7}){
                  ForEach(['畅销版单TOP', '月度推荐'], (item: string, index) => {
                    Column({space: 5}){
                      Text(item)
                        .attributeModifier(new CustomTextStyle({size: 16, weight: 600, color: '#663815'}))

                      Text('查看更多>>')
                        .attributeModifier(new CustomTextStyle({size: 12, weight: 600, color: index == 0 ?'#B27500' : '#E45C0B'}))
                    }
                    .layoutWeight(1)
                    .aspectRatio(1)
                    .justifyContent(FlexAlign.Start)
                    .alignItems(HorizontalAlign.Start)
                    .padding({left: 15, top: 17, right: 15, bottom: 17})
                    .backgroundImage( index == 0 ?
                    $r('[basic].media.png_TopRecommend') :
                    $r('[basic].media.png_MonthRecommend') )
                    .backgroundImageSize({ width: '100%', height: '100%'})
                    .onClick(() => {
                      // todo 完成榜单的跳转
                    })
                  })
                }
                .width("100%")
                .margin({top: 18})


                // 新书上架
                Column({space: 18}){
                  Row({space: 8}){
                    Text('新书上架')
                      .attributeModifier(new CustomTextStyle({size: 16, weight: 600}))

                    Text('查看更多>>')
                      .attributeModifier(new CustomTextStyle({size: 12, weight: 600, color: '#807A66'}))
                  }
                  .width("100%")
                  .justifyContent(FlexAlign.Start)
                  .alignItems(VerticalAlign.Bottom)

                  Grid(){
                    ForEach(new Array(4).fill(''), (item: string, index) => {
                      GridItem(){
                        Column(){
                          Image('https://th.bing.com/th/id/R.8bbf769b39bb26eefb9b6de51c23851d?rik=crTnc5i8A%2b8p7A&riu=http%3a%2f%2fpicview.iituku.com%2fcontentm%2fzhuanji%2fimg%2f202207%2f09%2fe7196ac159f7cf2b.jpg%2fnu&ehk=DYPLVpoNAXLj5qzwgR5vHf9DladFh%2b34s4UcuP3Kn6E%3d&risl=&pid=ImgRaw&r=0')
                            .width('100%')
                            .aspectRatio(148/100)

                          Column({space: 5}){
                            Text('红楼梦幼儿美绘本 第四卷红楼梦幼儿美绘本 第四卷')
                              .maxLines(2)
                              .textOverflow({overflow: TextOverflow.Ellipsis})
                              .attributeModifier(new CustomTextStyle({size: 14, weight: 400}))

                            Row({space: 8}){
                              tagItemComp('情绪价值', '#4EB1EF', '#EDF7FD')
                              tagItemComp('3-8岁', '#FC9911', '#FFF5E7')
                            }
                            .width("100%")
                            .justifyContent(FlexAlign.Start)
                          }
                          .width("100%")
                          .padding({left: 8, right: 8, top: 8, bottom: 8})
                        }
                        .width('100%')
                        .borderRadius(8)
                        .aspectRatio(152/180)
                        .backgroundColor(Color.White)
                        .border({width: 2, color: '#000000'})
                      }
                    })
                  }
                  .rowsGap(16)
                  .maxCount(2)
                  .width("100%")
                  .columnsGap(10)
                  .layoutWeight(1)
                  .columnsTemplate('repeat(2, 1fr)')
                }
                .height(500)
                .height(470)
                .width("100%")
                .margin({top: 25})
                .padding({left: 18, right: 18, top: 20})
                .backgroundImage($r('[basic].media.png_newBook'))
                .backgroundImageSize({width: '100%', height: '100%'})
              }
              .width("100%")
            }
            .margin({top: 13})



            ListItem(){}
            .padding({ bottom: 16 })
          }
          .width('100%')
          .height('100%')
          .scrollBar(BarState.Off)
          .padding({ left: 16, right: 16 })
          .onScrollIndex((index: number) => {
            this.vm.scrollIndex = index
            console.log(`index = ${JSON.stringify(index)}`)
          })

          if(this.vm.scrollIndex > 0){
            Row(){
              this.deerTitleComp()
            }
            .transition(TransitionEffect.asymmetric(TransitionEffect.move(TransitionEdge.TOP), TransitionEffect.move(TransitionEdge.TOP)).animation({ duration: 100 }))
          }
        }
      }
      .width('100%')
      .linearGradient({ colors: [['#F9EDAE', 0], ['#FFFFFF', 0.4]] })
    }
  }

  @Builder
  deerTitleComp(){
    Column({space: 10}){
      Row()
        .width(55)
        .height(30)

      this.customSearch()
    }
    .width('100%')
    .backgroundColor(Color.White)
    .alignItems(HorizontalAlign.Center)
    .shadow({ offsetY: 13, radius: 16, color: '#0A000000' })
    .padding({top: this.vm.safeTop, bottom: 10, left: 16, right: 16})
  }

  @Builder
  customSearch(){
    DeerSearch({ enable: false })
  }

}