PeopleShipHomePage.ets 9.74 KB
import router from '@ohos.router'
import { PeopleShipHomePageNavComponent } from '../peopleShipHomePage/PeopleShipHomeNavComponent'
import { PeopleShipHomePageTopComponent } from '../peopleShipHomePage/PeopleShipHomePageTopComponent'
import { Logger, NetworkUtil, WindowModel } from 'wdKit'
import { PeopleShipHomePageDataModel } from '../../viewmodel/PeopleShipHomePageDataModel'
import { PeopleShipHomeListComponent } from '../peopleShipHomePage/PeopleShipHomeListComponent'
import { QueryListIsFollowedItem } from '../../viewmodel/QueryListIsFollowedItem'
import { HttpUtils } from 'wdNetwork/Index'
import { WDRouterPage, WDRouterRule } from 'wdRouter/Index'
import { PageRepository } from '../../repository/PageRepository'
import {
  postInteractAccentionOperateParams,
  PeopleShipUserDetailData,
  ArticleCountData
} from 'wdBean'
import { EmptyComponent,WDViewDefaultType } from '../view/EmptyComponent'
import { CustomTitleUI } from '../reusable/CustomTitleUI'

@Entry
@Component
struct PeopleShipHomePage {

  //RmhTitle组件刷新需要设置 该界面为用户主页,所以不需要刷新操作
  @Provide pageShow: number = -1
  @Provide pageHide: number = -1

  // Todo 传入数据  后续在修改
  creatorId: string = (router.getParams() as Record<string, string>)['creatorId'];
  // 页面详情数据
  @Provide detailModel: PeopleShipUserDetailData = {} as PeopleShipUserDetailData
  // 每个分类数量
  @State articleModel: ArticleCountData = {} as ArticleCountData
  // 总滑动空间
  scroller: Scroller = new Scroller()
  // 顶部透明度
 @Watch('topOpacityChange') @State topOpacity: number = 0
  //发布数量
  @State publishCount: number = 0
  // 是否关注
  @Provide isAttention: string = '0'
  // 是否开始更新关注
  @Provide @Watch('handleChangeAttentionStata') isLoadingAttention: boolean = false
  //关注显示
  @State attentionOpacity: boolean = false
  @Provide topHeight: number = 195
  @State isLoading: boolean = true
  @State topSafeHeight: number = AppStorage.get<number>('topSafeHeight') || 0
  @State isConnectNetwork : boolean = NetworkUtil.isNetConnected()
  @State isHasHomePage: boolean = true
  firstPositionY:number = 0;

  onPageShow(): void {
    WindowModel.shared.setWindowSystemBarProperties({ statusBarContentColor: '#ffffff'})
    this.loadFollowData()
  }

  onPageHide(): void {
    WindowModel.shared.setWindowSystemBarProperties({ statusBarContentColor: '#000000'})
  }

  topOpacityChange(){
    if(this.topOpacity > 0.8){
      WindowModel.shared.setWindowSystemBarProperties({ statusBarContentColor: '#000000', })
    }else{
      WindowModel.shared.setWindowSystemBarProperties({ statusBarContentColor: '#ffffff'})
    }
  }


  build() {
    Column(){
      if(this.isConnectNetwork){
        if (this.isHasHomePage){
          Stack({ alignContent: Alignment.Top }) {
            Stack({ alignContent: Alignment.Top }){
              // 顶部图片
              Image($r('app.media.home_page_bg'))
                .width('100%')
                  ///1-this.topOpacity 联动上滑
                .height(this.topOpacity>1?0:120*(1-this.topOpacity))
                .objectFit(ImageFit.Cover)
            }

            Stack({ alignContent: Alignment.Top }){
              Row()
                .height(px2vp(this.topSafeHeight))
                .width("100%")
                .backgroundColor($r('app.color.white'))
                .visibility(this.topOpacity > 0 ? Visibility.Visible : Visibility.None)
                .opacity(this.topOpacity )
            }
            Column(){
              Stack({ alignContent: Alignment.Top }){
                this.peopleHomeTitleTransparent()
                // 头部返回
                PeopleShipHomePageNavComponent({
                  attentionOpacity: this.attentionOpacity,
                  topOpacity: this.topOpacity,
                  detailModel: this.detailModel
                })
              }
              if (this.detailModel && this.detailModel.userName) {
                Scroll(this.scroller) {
                  Column() {
                    // 顶部相关
                    PeopleShipHomePageTopComponent({
                      creatorId: this.creatorId,
                      detailModel: this.detailModel,
                      publishCount: this.publishCount,
                      topHeight: this.topHeight
                    })
                      .width("100%")
                      // .height(this.topHeight)
                    // 列表

                    Column(){
                      PeopleShipHomeListComponent({
                        publishCount: this.publishCount,
                        creatorId: this.creatorId
                      })
                    }.height('100%')
                  }
                  .width("100%")
                  .justifyContent(FlexAlign.Start)
                  .alignItems(HorizontalAlign.Start)
                }
                .edgeEffect(EdgeEffect.None)
                .scrollBar(BarState.Off)
                .width('100%')
                .layoutWeight(1)
                // .scrollable(ScrollDirection.Vertical)
                // .edgeEffect(EdgeEffect.None)
                // .friction(0.7)
                // .backgroundColor(Color.White)
                // .scrollBar(BarState.Off)
                // .width('100%')
                // .height('calc(100% - 44vp)')
                .onDidScroll(() => {
                  this.topOpacity = this.scroller.currentOffset().yOffset / 120
                  if (this.scroller.currentOffset().yOffset >= this.topHeight) {
                    this.attentionOpacity = true
                  } else {
                    this.attentionOpacity = false
                  }
                  Logger.debug('PeopleShipHomePage',`透明度:${this.topOpacity}`)

                })
              }
            }
            .margin({top:px2vp(this.topSafeHeight)})
          }
          .width('100%')
        }else {
          Column(){
            CustomTitleUI({ titleName: "" })
            EmptyComponent({emptyType:WDViewDefaultType.WDViewDefaultType_NoUserHomepage}).height('70%')
          }.width("100%")
          .height("100%")
          .padding({top:px2vp(this.topSafeHeight)})
        }
      }else{
        Column(){
          CustomTitleUI({ titleName: "" })
          EmptyComponent({ emptyType: 1,emptyHeight:"100%" ,retry: () => {
            this.isConnectNetwork = NetworkUtil.isNetConnected()
            if(this.isConnectNetwork){
              this.detailModel = {} as PeopleShipUserDetailData
              this.getData()
            }
          }})
            .height('calc(100% - 84lpx)')
            .width('100%')
        }.width("100%")
        .height("100%")
      }
    }.width("100%")
    .height("100%")
    .backgroundColor(Color.White)

  }

  @Builder peopleHomeTitleTransparent() {
    RelativeContainer() {
      //标题栏目
      Image($r('app.media.icon_arrow_left_white') )
        .width(24)
        .height(24)
        .objectFit(ImageFit.Auto)
        .id("back_icon")
        .alignRules({
          center: { anchor: "__container__", align: VerticalAlign.Center },
          left: { anchor: "__container__", align: HorizontalAlign.Start }
        })
        .margin({ left: 18 })
        .onClick(() => {
          router.back()
        })
    }
    .visibility(this.topOpacity > 0 ? 1 : 0)
    .height(44)
    .width('100%')
    .backgroundColor($r('app.color.color_transparent'))
  }

   aboutToAppear() {
     this.getData()
  }

  private async getData() {
    try {
      this.isLoading = true
      // 获取页面信息
      this.detailModel = await PeopleShipHomePageDataModel.getPeopleShipHomePageDetailInfo(this.creatorId, '', '')
      Logger.debug('PeopleShipHomePage', '获取页面信息' + `${JSON.stringify(this.detailModel)}`)
      this.isLoading = false

    } catch (exception) {
      this.isLoading = false
      this.isHasHomePage = false
    }

    // this.loadFollowData()
  }

  async loadFollowData(){
    try {
      // 获取关注
      // 登录后获取,是否关注
      if (HttpUtils.getUserId()) {
        let followList: QueryListIsFollowedItem[] = await PeopleShipHomePageDataModel.getHomePageFollowListStatusData(this.creatorId)
        Logger.debug('PeopleShipHomePage', '获取关注信息' + `${JSON.stringify(followList)}`)
        this.findFollowStata(followList)
      }

    } catch (exception) {
      this.isLoading = false
    }

  }

  findFollowStata(followList: QueryListIsFollowedItem[]) {
    if (followList.length > 0) {
      let item: QueryListIsFollowedItem = followList[0]
      Logger.debug('PeopleShipHomePage', '关注' + `${JSON.stringify(item.status)}`)
      this.isAttention = item.status
    }
  }

  handleChangeAttentionStata() {

    if (!this.isLoadingAttention) {
      return
    }
    // 未登录,跳转登录
    if (!HttpUtils.getUserId()) {
      this.isLoadingAttention = false
      WDRouterRule.jumpWithPage(WDRouterPage.loginPage)
      return
    }

    let status = 0
    if (this.isAttention == '0') {
      status = 1
    }
    const params: postInteractAccentionOperateParams = {
      attentionUserType: this.detailModel.userType || '', //被关注用户类型(1 普通用户 2 视频号 3 矩阵号)
      attentionUserId: this.detailModel.userId || '', // 被关注用户号主id
      attentionCreatorId: this.creatorId || '', // 被关注用户号主id
      // userType: 1,
      // userId: HttpUrlUtils.getUserId(),
      status: status,
    }
    PageRepository.postInteractAccentionOperate(params).then(() => {
      if (this.isAttention == '1') {
        this.isAttention = '0'
        this.detailModel.fansNum -= 1
      } else {
        this.isAttention = '1'
        this.detailModel.fansNum += 1
      }
      this.isLoadingAttention = false
    })
      .catch(() => {
        this.isLoadingAttention = false
      })
  }
}