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

🚀使用ArkTS开发鸿蒙应用：公司详情页面的实现

公司详情页面是用户查看公司详细信息的重要功能模块。以下是一个完整的公司详情页面实现，包括公司信息的展示、轮播图、标签切换和点击跳转等功能。

代码解析

1. 导入模块

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

导入了多个模块，用于实现HTTP请求、提示框、路由跳转和公司详情模型等功能。

2. 定义公司详情组件

@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; }); }

定义了一个名为​​Companydetails​​ 的公司详情组件。 使用​​@State​​ 装饰器定义了​​images​​ 和​​tabs​​，用于存储轮播图的图片信息和标签信息。 定义了​​controller​​ 和​​swipercontroller​​，用于控制标签切换和轮播图。 定义了​​detailsurl​​，用于存储获取公司详情的接口URL。 在​​aboutToAppear​​ 生命周期函数中，获取路由传过来的公司ID，拼接接口URL，调用​​httpRequestGet​​ 方法获取公司详情数据，并更新​​companyDetailModelData​​。

3. 页面布局

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%"); }

使用​​Column​​ 和​​RelativeContainer​​ 布局组件，构建公司详情页面的UI。 包含一个标题栏，显示“公司详情”字样，并包含一个返回按钮。 使用​​Swiper​​ 组件实现轮播图，展示公司图片。 使用​​Column​​ 和​​Row​​ 布局组件，展示公司基本信息，包括公司logo、名称、位置、类型、规模和员工数量。 使用​​Tabs​​ 和​​ForEach​​ 组件，实现标签切换功能，展示公司概况和热招职位。

4. 公司概况构建方法

@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 }); }

定义了一个​​companyOverview​​ 方法，用于构建公司概况的UI。 包含公司介绍的标题和内容。

5. 热招职位构建方法

@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); }

定义了一个​​hotjobvacanies​​ 方法，用于构建热招职位的UI。 当前显示“敬请期待”字样。

6. CopanyDetailModel：提供类型安全和结构化的数据处理方式

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 = ""; }

总结

通过上述代码，我们实现了一个完整的公司详情页面，包括公司信息的展示、轮播图、标签切换和点击跳转等功能。用户可以通过公司详情页面查看公司的详细信息，并通过标签切换查看公司概况和热招职位。