PeopleShipHomeNavComponent.ets 4.05 KB
import router from '@ohos.router'
import { PeopleShipUserDetailData } from 'wdBean'
import { PeopleShipHomePageHeadComponent } from './PeopleShipHomePageHeadComponent'

@Component
export struct PeopleShipHomePageNavComponent {
  @Prop topOpacity: number
  @Consume isAttention: string
  @Consume isLoadingAttention: boolean
  @Prop attentionOpacity: boolean

  // 页面详情数据
  @Prop detailModel: PeopleShipUserDetailData = {} as PeopleShipUserDetailData

  build() {
    Row() {
      Stack({ alignContent: Alignment.TopStart }) {
        Row()
          .width('100%')
          .height('100%')
          .backgroundColor($r('app.color.white'))
          .opacity(this.topOpacity)
        Row() {

          Row() {
            // 返回
            Image((this.topOpacity > 0.5 ? $r('app.media.icon_arrow_left') : $r('app.media.icon_arrow_left_white')))
              .width('24vp')
              .height('24vp')
              .objectFit(ImageFit.Auto)
              .margin({ left: '10vp' })
              .onClick(() => {
                router.back()
              })
            // 头像
            PeopleShipHomePageHeadComponent({
              diameter: 30,
              iconDiameter: 10,
              headPhotoUrl: (this.detailModel.headPhotoUrl && this.detailModel.headPhotoUrl.length > 0 ) ? this.detailModel.headPhotoUrl : $r('app.media.WDAccountOwnerHedaerDefaultIcon'),
              authIcon: this.detailModel.authIcon
            })
              .margin({
                left: '10vp',
              })
              .visibility((this.topOpacity > 0.5 ? Visibility.Visible : Visibility.Hidden))

            // 文字
            Text(this.detailModel.userName)
              .height('46vp')
              .fontSize($r('app.float.vp_14'))
              .fontColor($r('app.color.color_222222'))
              .margin({
                left: '6vp'
              })
              .visibility((this.topOpacity > 0.5 ? Visibility.Visible : Visibility.Hidden))

            if (this.isAttention == '0') {
              // 关注
              Button('+关注', { type: ButtonType.Normal, stateEffect: true })
                .borderRadius(4)
                .backgroundColor($r('app.color.color_ED2800'))
                .width('54vp')
                .height('24vp')
                .onClick(() => {
                    if (this.isLoadingAttention){
                      return
                    }
                    this.isLoadingAttention = true
                })
                .margin({
                  left: '12vp',
                })
                .padding(0)
                .fontSize($r('app.float.vp_12'))
                .fontColor(Color.White)
                .visibility((this.attentionOpacity ? Visibility.Visible : Visibility.Hidden))
            } else {
              Button('已关注', { type: ButtonType.Normal, stateEffect: true })
                .borderRadius(4)
                .backgroundColor($r('app.color.color_F5F5F5'))
                .width('54vp')
                .height('24vp')
                .onClick(() => {
                  if (this.isLoadingAttention){
                    return
                  }
                  this.isLoadingAttention = true
                })
                .margin({
                  left: '12vp',
                })
                .padding(0)
                .fontSize($r('app.float.vp_12'))
                .fontColor($r('app.color.color_999999'))
                .visibility((this.attentionOpacity ? Visibility.Visible : Visibility.Hidden))
            }
          }
          .height('100%')
          Blank()
          // 分享
          Image((this.topOpacity > 0.5 ? $r('app.media.icon_forward') : $r('app.media.icon_share')))
            .width('24vp')
            .height('24vp')
            .objectFit(ImageFit.Auto)
            .margin({ right: '10vp' })
            .onClick(() => {

            })
        }
        .width('100%')
        .height('100%')
        .alignItems(VerticalAlign.Center)
        .justifyContent(FlexAlign.SpaceBetween)
      }
      .zIndex(1000)
      .width('100%')
      .height('100%')
    }
  }
}