优化

wwf

2 天以前 791a96ae03cf92478244127b294c1fe520d31e89

 entry/src/main/ets/pages/search/SearchPage.ets

@@ -1,33 +1,66 @@
import { IconType } from "@kit.ArkUI"
import { IconType, promptAction } from "@kit.ArkUI"
import { http } from "@kit.NetworkKit"
import { LvMarkdownIn } from "@luvi/lv-markdown-in"
import { HttpResponseResult } from "../../data/HttpResponse"
import { DOMAIN } from "../../utils/config"

class JobItem {
  title: string = ''
  payment: string = ''
  tagList: string[] = []
  company: string = ''
  address: string = ''
  detail: string = ''
  ability: string = ''
  addr: string = ''
  companyName: string = ''
  degree: string = ''
  exp: string = ''
  jobName: string = ''
  salary: string = ''
}

@Entry
@Component
export struct SearchPage {
  @State jobList: JobItem[] = [
    { title: '高级前端开发工程师（Vue3+TS方向）', payment: '25k-40k · 14薪', tagList: ['1-3年', '本科及以上'], company: '云舒技术有限公司', address: '深圳市 南山区 蛇口', detail: '' },
    { title: '高级前端开发工程师（Vue3+TS方向）', payment: '25k-40k · 14薪', tagList: ['1-3年', '本科及以上'], company: '云舒技术有限公司', address: '深圳市 南山区 蛇口', detail: '' },
    { title: '高级前端开发工程师（Vue3+TS方向）', payment: '25k · 14薪', tagList: ['1-3年', '本科及以上'], company: '云舒技术有限公司', address: '深圳市 南山区 蛇口', detail: '' },
    { title: '高级前端开发工程师（Vue3+TS方向）', payment: '25k · 14薪', tagList: ['1-3年', '本科及以上'], company: '云舒技术有限公司', address: '深圳市 南山区 蛇口', detail: '' },
    { title: '高级前端开发工程师（Vue3+TS方向）', payment: '25k · 14薪', tagList: ['1-3年', '本科及以上'], company: '云舒技术有限公司', address: '深圳市 南山区 蛇口', detail: '' },
    { title: '高级前端开发工程师（Vue3+TS方向）', payment: '25k · 14薪', tagList: ['1-3年', '本科及以上'], company: '云舒技术有限公司', address: '深圳市 南山区 蛇口', detail: '' },
    { title: '高级前端开发工程师（Vue3+TS方向）', payment: '25k · 14薪', tagList: ['1-3年', '本科及以上'], company: '云舒技术有限公司', address: '深圳市 南山区 蛇口', detail: '' },
    { title: '高级前端开发工程师（Vue3+TS方向）', payment: '25k · 14薪', tagList: ['1-3年', '本科及以上'], company: '云舒技术有限公司', address: '深圳市 南山区 蛇口', detail: '' },
    { title: '高级前端开发工程师（Vue3+TS方向）', payment: '25k · 14薪', tagList: ['1-3年', '本科及以上'], company: '云舒技术有限公司', address: '深圳市 南山区 蛇口', detail: '' },
    { title: '高级前端开发工程师（Vue3+TS方向）', payment: '25k · 14薪', tagList: ['1-3年', '本科及以上'], company: '云舒技术有限公司', address: '深圳市 南山区 蛇口', detail: '' },
    { title: '高级前端开发工程师（Vue3+TS方向）', payment: '25k · 14薪', tagList: ['1-3年', '本科及以上'], company: '云舒技术有限公司', address: '深圳市 南山区 蛇口', detail: '' },
    { title: '高级前端开发工程师（Vue3+TS方向）', payment: '25k · 14薪', tagList: ['1-3年', '本科及以上'], company: '云舒技术有限公司', address: '深圳市 南山区 蛇口', detail: '' },
    { title: '高级前端开发工程师（Vue3+TS方向）', payment: '25k · 14薪', tagList: ['1-3年', '本科及以上'], company: '云舒技术有限公司', address: '深圳市 南山区 蛇口', detail: '' },
  ]
  @State expandIndex: number | null = 0
  @State jobList: JobItem[] = []
  @State expandIndex: number | null = null
  @State @Watch('filterJobList') searchKeyword: string = ''
  @State origJobList: JobItem[] = []

  aboutToAppear(): void {
    this.getJobList()
  }

  getJobList() {
    let httpRequest = http.createHttp();
    httpRequest.request(
      `${DOMAIN}/quiz-community/public/v1.0/home/seek/job`,
      {
        method: http.RequestMethod.GET,
        header: { 'Content-Type': 'application/json', 'x-jwt-token': `Bearer ${AppStorage.get('x-jwt-token')}` },
      },
      (err, data) => {
        console.log('response', '/home/seek/job')
        console.log(JSON.stringify(data.result))
        if (data.responseCode == 200) {
          const resData = (typeof data.result == 'string' ? JSON.parse(data.result) : data.result) as HttpResponseResult<JobItem[]>
          if (resData.code == 200) {
            this.origJobList = resData.data as JobItem[]
            this.filterJobList()
          } else {
            promptAction.showToast({ message: resData.msg })
          }
        }
      }
    )
  }

  filterJobList() {
    if (this.searchKeyword) {
      let list = this.origJobList.filter((ele: JobItem) => {
        return ele.companyName.includes(this.searchKeyword) || ele.jobName.includes(this.searchKeyword)
      })
      this.jobList = list
      console.log(JSON.stringify(list))
    } else {
      this.jobList = this.origJobList
    }
  }

  build() {
    Column({ space: 10 }) {
@@ -42,7 +75,7 @@
        Image($r('app.media.search_icon'))
          .width(14)
          .height(14)
        TextInput({ placeholder: '搜索想要查找的岗位' })
        TextInput({ placeholder: '搜索想要查找的岗位', text: $$this.searchKeyword })
          .placeholderFont({ size: 14})
          .placeholderColor('#999999')
          .backgroundColor('#f3f7fe')
@@ -59,18 +92,22 @@
            Column() {
              Row({ space: 10 }) {
                Column() {
                  Text(item.title)
                    .fontSize(14)
                    .fontWeight(800)
                  Text(item.jobName)
                    .fontSize(18)
                    .fontWeight(700)
                  Row({ space: 10 }) {
                    ForEach(item.tagList, (tag: string) => {
                      Text(tag)
                        .padding(4)
                        .borderRadius(4)
                        .fontSize(10)
                        .fontColor('#999999')
                        .backgroundColor('#f5f5f5')
                    })
                    Text(item.exp)
                      .padding(4)
                      .borderRadius(4)
                      .fontSize(12)
                      .fontColor('#999999')
                      .backgroundColor('#f5f5f5')
                    Text(item.degree)
                      .padding(4)
                      .borderRadius(4)
                      .fontSize(12)
                      .fontColor('#999999')
                      .backgroundColor('#f5f5f5')
                  }
                  .width('100%')
                  .justifyContent(FlexAlign.Start)
@@ -80,8 +117,8 @@
                      .width(16)
                      .height(16)

                    Text(item.company)
                      .fontSize(10)
                    Text(item.companyName)
                      .fontSize(12)

                  }
                }
@@ -92,13 +129,13 @@
                .alignItems(HorizontalAlign.Start)

                Column() {
                  Text(item.payment)
                  Text(item.salary)
                    .fontColor('#1756f4')
                    .fontSize(14)
                    .fontWeight(800)
                  Text(item.address)
                    .fontSize(16)
                    .fontWeight(700)
                  Text(item.addr)
                    .fontColor('#a6a6a6')
                    .fontSize(10)
                    .fontSize(12)
                }
                .height('100%')
                .justifyContent(FlexAlign.SpaceBetween)
@@ -111,12 +148,12 @@

              Row() {
                Text() {
                  Span(this.expandIndex == index ? '收起' : '展开')
                  Span(this.expandIndex == index ? '收起' : '查看')
                  Span('岗位要求')
                }
                .fontSize(10)
                .fontSize(12)
                .fontColor('#666666')
                Image(this.expandIndex == index ? $r('app.media.down_icon') : $r('app.media.up_icon'))
                Image(this.expandIndex == index ? $r('app.media.up_icon') : $r('app.media.down_icon'))
                  .width(14)
                  .height(14)
                  .margin({ left: 4 })
@@ -143,31 +180,23 @@
                  .margin({ top: 10 })
                  .width('100%')
                  .textAlign(TextAlign.Start)
                Text('1.学历要求：本科及以上学历，计算机科学与技术、软件工程等相关专业优先，优秀大专学历者' +
                  '1.学历要求：本科及以上学历，计算机科学与技术、软件工程等相关专业优先，优秀大专学历者')
                  .fontSize(10)
                  .margin({ top: 6 })
                  .fontColor('#666666')
                  .lineHeight(15)
                LvMarkdownIn({ text: item.ability })
                  .width('100%')
                  .textAlign(TextAlign.Start)
                  .padding({ left: 10, right: 10 })
              }


            }
            .padding(10)
            .border({ width: 1, style: BorderStyle.Solid, color: this.expandIndex == index ? '#1756f4' : '#f2f2f2' })
            .borderRadius(10)
          }
        }, (index: number) => index.toString())
        })
      }
      .listDirection(Axis.Vertical) // 排列方向
      .scrollBar(BarState.Off)
      .friction(0.6)
      .edgeEffect(EdgeEffect.Spring)
      .width('100%')
      .height(560)

      .height(600)
    }
    .padding({ left: 10, right: 10 })
    .height('100%')