Harmonyos Development (8) : Implementation of the Company Detail Page

Developing a Company Details Page with ArkTS

Here's a complete implementation of a company details page using ArkTS for HarmonyOS apps. This page displays detailed company information, a carousel, tab switching, and navigation functionality.

Code Explanation

1. Import Modules

import { httpRequestGet } from '../Utils/HttpUtils';
import prompt from '@ohos.promptAction';
import { router } from '@kit.ArkUI';
import { CompanyDetailModel, CompanyDetailModelData } from '../model/CompanyDetailModel';

We've imported several modules for HTTP requests, prompt actions, routing, and company detail models.

2. Define Company Details Component

@Entry
@Component
struct CompanyDetails {
  @State images: ImageCount[] = [
    { url: "https://www.itying.com/images/flutter/1.png", count: 1 },
    { url: "https://www.itying.com/images/flutter/2.png", count: 2 },
    { url: "https://www.itying.com/images/flutter/3.png", count: 3 },
  ];

  @State tabs: Tabtext[] = [
    { text: "Company Overview" },
    { text: "Hot Job Positions" }
  ];

  private controller: TabsController = new TabsController();
  private swipercontroller: SwiperController = new SwiperController();

  private detailsurl: string = "****";

  @State companyDetailModelData: CompanyDetailModelData | null | undefined = new CompanyDetailModelData();

  async aboutToAppear() {
    const params = router.getParams() as ParamsObj;
    console.log("params id " + params.id);
    let networkUrl = this.detailsurl + "id=" + params.id;
    httpRequestGet(networkUrl).then((data) => {
      let companyDetailModel: CompanyDetailModel = JSON.parse(data.toString());
      this.companyDetailModelData = companyDetailModel.data;
    });
  }
}

• Created a CompanyDetails component
• Used @State to define images and tabs for carousel and tab information
• Defined controller and swipercontroller for tab switching and carousel
• Defined detailsurl for the API endpoint
• In the aboutToAppear lifecycle method, fetch company details using httpRequestGet and update companyDetailModelData

3. Page Layout

build() {
  Column() {
    RelativeContainer() {
      Image($r('app.media.bossback'))
        .width(20).height(20)
        .alignRules({
          center: { 'anchor': '__container__', 'align': VerticalAlign.Center },
          left: { 'anchor': '__container__', 'align': HorizontalAlign.Start }
        }).margin({ left: 5 })
        .onClick(() => {
          router.back();
        });

      Text("Company Details")
        .fontSize(25)
        .fontColor(Color.White)
        .fontWeight(800)
        .alignRules({
          center: { 'anchor': '__container__', 'align': VerticalAlign.Center },
          middle: { 'anchor': '__container__', 'align': HorizontalAlign.Center }
        });
    }.height(50)
    .width("100%")
    .backgroundColor(Color.Green);

    Swiper(this.swipercontroller) {
      ForEach(this.images, (item: ImageCount) => {
        Column() {
          Image(item?.url)
            .objectFit(ImageFit.Fill)
            .height("100%")
            .width("100%")
            .borderRadius(5);
        }.height("100%")
        .width("100%");
      });
    }.height("25%")
    .width("100%")
    .autoPlay(true)
    .interval(1000)
    .loop(true)
    .duration(1)
    .indicator(true);

    Column() {
      Row() {
        Image(this.companyDetailModelData?.logo).width(70).height(70)
          .objectFit(ImageFit.Contain).borderRadius(10).margin({ left: 10 });
        Column() {
          Text(this.companyDetailModelData?.name).fontSize(18).fontColor(Color.Black)
            .margin({ top: 5 })
            .fontWeight(FontWeight.Medium);
          Text(this.companyDetailModelData?.location)
            .fontSize(15).fontColor(Color.Black)
            .margin({ top: 10 });
          Text(`${this.companyDetailModelData?.type}·${this.companyDetailModelData?.size}·${this.companyDetailModelData?.employee}`)
            .fontSize(15).fontColor(Color.Black)
            .fontWeight(FontWeight.Medium)
            .margin({ top: 10 });
        }.justifyContent(FlexAlign.Start)
        .alignItems(HorizontalAlign.Start)
        .margin({ left: 10 });
      }.justifyContent(FlexAlign.Start)
      .height("90%")
      .width("100%");

      Line().width("100%").height(1).backgroundColor(Color.Black);
    }.height(120)
    .width("100%");

    Column() {
      Tabs({ barPosition: BarPosition.Start, controller: this.controller }) {
        ForEach(this.tabs, (item: Tabtext, index: number) => {
          if (index == 0) {
            TabContent() {
              this.companyOverview();
            }.tabBar(item.text).align(Alignment.Top);
          } else if (index == 1) {
            TabContent() {
              this.hotJobVacancies();
            }.tabBar(item.text).align(Alignment.Top);
          }
        });
      };
    }.width("100%")
    .height("100%");
  }.width("100%")
  .height("100%");
}

• Used Column and RelativeContainer to build the UI
• Created a header with "Company Details" and a back button
• Implemented a Swiper component for the carousel
• Used Column and Row to display company basic information
• Implemented Tabs and ForEach for tab switching functionality

4. Company Overview Builder Method

@Builder
private companyOverview() {
  RelativeContainer() {
    Row() {
      Text("Company Introduction:").fontSize(20).fontWeight(800).fontColor(Color.Black);
      Text(this.companyDetailModelData?.inc).fontSize(15)
        .margin({ left: 10, right: 10 })
        .maxLines(2);
    }.height("100%")
    .width("100%")
    .justifyContent(FlexAlign.Start);
  }.margin({ left: 10, top: 7, right: 19 })
  .height(60)
  .width("100%")
  .margin({ left: 5, right: 5 });
}

• Defined a companyOverview method to build the company overview UI
• Included company introduction title and content

5. Hot Job Vacancies Builder Method

@Builder
private hotJobVacancies() {
  RelativeContainer() {
    Text("Coming Soon")
      .fontSize(25)
      .fontWeight(FontWeight.Medium)
      .fontColor(Color.Black)
      .alignRules({
        center: { anchor: '__container__', align: VerticalAlign.Center },
        middle: { anchor: '__container__', align: HorizontalAlign.Center }
      });
  }.width("100%")
  .height(60);
}

• Defined a hotJobVacancies method to build the hot job vacancies UI
• Currently displays "Coming Soon"

6. CompanyDetailModel: Provides Type Safety and Structured Data Handling

export class CompanyDetailModel {
  msg?: string = "";
  code?: number = 0;
  data?: CompanyDetailModelData = new CompanyDetailModelData();
}

export class CompanyDetailModelData {
  id?: number = 0;
  logo?: string = "";
  name?: string = "";
  location?: string = "";
  type?: string = "";
  size?: string = "";
  employee?: string = "";
  hot?: string = "";
  count?: string = "";
  inc?: string = "";
}

1. Picture display