鸿蒙开发(八)：公司详情页面的实现 原创

import { httpRequestGet } from '../Utils/HttpUtils';
import prompt from '@ohos.promptAction';
import { router } from '@kit.ArkUI';
import { CopanyDetailModel, CopanyDetailModelData } from '../model/CopanyDetailModel';
1.
2.
3.
4.

@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: "公司概况" },
    { text: "热招职位" }
  ];

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

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

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

  async aboutToAppear() {
    const params = router.getParams() as ParamsObj;
    console.log("params id " + params.id);
    let networlurl = this.detailsurl + "id=" + params.id;
    httpRequestGet(networlurl).then((data) => {
      let companydetailsmodel: CopanyDetailModel = JSON.parse(data.toString());
      this.companyDetailModelData = companydetailsmodel.data;
    });
  }
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.
17.
18.
19.
20.
21.
22.
23.
24.
25.
26.
27.
28.
29.
30.

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("公司详情")
        .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.hotjobvacanies();
            }.tabBar(item.text).align(Alignment.Top);
          }
        });
      };
    }.width("100%")
    .height("100%");
  }.width("100%")
  .height("100%");
}
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.
17.
18.
19.
20.
21.
22.
23.
24.
25.
26.
27.
28.
29.
30.
31.
32.
33.
34.
35.
36.
37.
38.
39.
40.
41.
42.
43.
44.
45.
46.
47.
48.
49.
50.
51.
52.
53.
54.
55.
56.
57.
58.
59.
60.
61.
62.
63.
64.
65.
66.
67.
68.
69.
70.
71.
72.
73.
74.
75.
76.
77.
78.
79.
80.
81.
82.
83.
84.
85.
86.
87.
88.
89.

@Builder
private companyOverview() {
  RelativeContainer() {
    Row() {
      Text("公司介绍:").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 });
}
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.

@Builder
private hotjobvacanies() {
  RelativeContainer() {
    Text("敬请期待")
      .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);
}
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.

export class CopanyDetailModel {
  msg?: string = "";
  code?: number = 0;
  data?: CopanyDetailModelData = new CopanyDetailModelData();
}
export class CopanyDetailModelData {
  id?: number = 0;
  logo?: string = "";
  name?: string = "";
  location?: string = "";
  type?: string = "";
  size?: string = "";
  employee?: string = "";
  hot?: string = "";
  count?: string = "";
  inc?: string = "";
}
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.
17.