鸿蒙开发(十一)：发布职位信息页面的实现原创

小_铁

发布于 2025-2-23 11:32

浏览

0收藏

🚀使用ArkTS开发鸿蒙应用：发布职位信息页面的实现

发布职位信息页面是企业用户发布新职位的重要功能模块。以下是一个完整的发布职位信息页面的实现，包括用户输入职位信息、提交职位信息和提示用户等功能。

代码解析

1. 导入模块

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

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

2. 定义样式扩展

@Extend(TextInput) function inputStyle() {
  .placeholderColor("#99182431")
  .height(45)
  .fontSize(18)
  .backgroundColor("#F1F3F5")
  .width('100%')
  .padding({ left: 0 })
  .margin({ top: 12 })
}

@Extend(Line) function lineStyle() {
  .width('100%')
  .height(1)
  .backgroundColor("#FF131416")
}

@Extend(Text) function textStyle() {
  .fontColor("#FF0C0C0C")
  .fontSize(18)
  .fontWeight(FontWeight.Medium)
}

定义了三个样式扩展函数inputStyle、lineStyle 和textStyle，分别用于设置TextInput、Line 和Text 组件的样式。

3. 定义发布职位信息组件

@Entry
@Component
struct PostaPosition {
  @State name: string = "";
  @State cname: string = "";
  @State positionsize: string = "";
  @State salary: string = "";
  @State username: string = "";
  @State title: string = "";

  private addPosition: string = "********";

  async addposition() {
    if (this.name === '' || this.cname === '' || this.positionsize === '' || this.salary === '' || this.username === '' || this.title === '') {
      prompt.showToast({
        message: "输入不能为空"
      });
    } else {
      const neturl = new uri.URI(this.addPosition)
        .addQueryValue("name", this.name)
        .addQueryValue("cname", this.cname)
        .addQueryValue("size", this.positionsize)
        .addQueryValue("salary", this.salary)
        .addQueryValue("username", this.username)
        .addQueryValue("title", this.title)
        .toString();

      Logger.error("请求neturl - > " + neturl);

      await httpRequestGet(neturl).then((data) => {
        console.log("data ---> " + data);
        let addpositionModel: AddpositionModel = JSON.parse(data.toString());
        let msg = addpositionModel.msg;
        if (addpositionModel.code == 200) {
          prompt.showToast({
            message: msg
          });
          // router.pushUrl({
          //   url: "pages/Home"
          // });
        } else {
          prompt.showToast({
            message: msg
          });
        }
      });
    }
  }

定义了一个名为PostaPosition 的发布职位信息组件。
使用@State 装饰器定义了多个状态变量，用于存储用户输入的职位信息。
定义了addPosition，用于存储添加职位信息的接口URL。
在addposition 方法中，检查用户输入是否为空，如果为空，显示提示信息；否则，拼接接口URL，调用httpRequestGet 方法提交职位信息，并根据返回结果提示用户。

4. 页面布局

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

      Text("添加职位信息")
        .fontSize(25)
        .fontWeight(FontWeight.Medium)
        .fontColor(Color.White)
        .alignRules({
          center: { anchor: '__container__', align: VerticalAlign.Center },
          middle: { anchor: '__container__', align: HorizontalAlign.Center }
        });
    }.height(40)
    .width("100%")
    .backgroundColor(Color.Green);

    Row() {
      Row() {
        Text("职位信息").textStyle();
      }.width(100).height("100%")
      .justifyContent(FlexAlign.Center);

      TextInput({ placeholder: "请输入职位信息" })
        .maxLength(20)
        .type(InputType.Normal)
        .inputStyle()
        .onChange((value: string) => {
          this.name = value;
        }).margin({ left: 20 });
    }.width("100%").height(50)
    .justifyContent(FlexAlign.Start)
    Line().lineStyle();

    // 其他输入框和线条样式类似，省略...

    Button("提交")
      .width("90%")
      .height(40)
      .fontSize(16)
      .fontWeight(FontWeight.Medium)
      .backgroundColor("#007DFF")
      .margin({ top: 47, bottom: 12 })
      .onClick(() => {
        this.addposition();
      });
  }.backgroundColor("#F1F3F5")
  .height('100%')
  .width('100%');
}

使用Column 和RelativeContainer 布局组件，构建发布职位信息页面的UI。
包含一个标题栏，显示“添加职位信息”字样，并包含一个返回按钮。
使用Row 和TextInput 组件，为每个职位信息字段（如职位信息、公司名、公司规模、薪资范围、联系人、联系人职务）提供输入框。
使用Button 组件，提供提交按钮，点击时调用addposition 方法提交职位信息。

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

export class PositionListModel {
  msg?: string = "";
  code?: number = 0;
  data: Array<PositionListModelData> = [];
}
export class PositionListModelData {
  id?: number = 0;
  name?: string = "";
  cname?: string = "";
  size?: string = "";
  salary?: string = "";
  username?: string = "";
  title?: string = "";
}