优化

wwf

2 天以前 791a96ae03cf92478244127b294c1fe520d31e89

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

@@ -1,82 +1,204 @@
import { AxiosResponse } from "@ohos/axios"
import { NewsBase, NewsBaseData } from "../../data/NewsBase"
import { TextBase } from "../../data/TextBase"
import { NewsApi, TextApi } from "../../http/AxiosAPI"
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 {
  ability: string = ''
  addr: string = ''
  companyName: string = ''
  degree: string = ''
  exp: string = ''
  jobName: string = ''
  salary: string = ''
}

@Entry
@Component
export struct SearchPage {
  //变量承载新闻数据
  @State newsBase: NewsBase = new NewsBase()
  @State TextData: TextBase = new TextBase()
  async aboutToAppear() {
    let newsData:NewsBase = await NewsApi()
    this.newsBase =  newsData
    let textData:TextBase = await TextApi()
    this.TextData = textData
    console.info('textData ' + JSON.stringify(textData))
  }
  build() {
    Column() {
      Column(){
          Text(JSON.stringify(this.TextData.text))
            .fontWeight(700)
            .fontSize(20)
  @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 })
          }
        }
      }
      .width('95%')
      .height(50)
      .borderRadius(20)
      .backgroundColor(Color.White)
      .justifyContent(FlexAlign.Center)
      .onClick(() => {
        console.info('TextData: ' + JSON.stringify(this.TextData.text))
    )
  }

  filterJobList() {
    if (this.searchKeyword) {
      let list = this.origJobList.filter((ele: JobItem) => {
        return ele.companyName.includes(this.searchKeyword) || ele.jobName.includes(this.searchKeyword)
      })
      List({space:15}){
        ForEach(this.newsBase.data,(item:NewsBaseData) =>{
          ListItem(){
           newsItem({newsData: item})
      this.jobList = list
      console.log(JSON.stringify(list))
    } else {
      this.jobList = this.origJobList
    }
  }

  build() {
    Column({ space: 10 }) {
      Text('岗位推荐')
        .width('100%')
        .textAlign(TextAlign.Start)
        .fontWeight(800)
        .fontSize(18)
        .margin({ left: 16 })

      Row() {
        Image($r('app.media.search_icon'))
          .width(14)
          .height(14)
        TextInput({ placeholder: '搜索想要查找的岗位', text: $$this.searchKeyword })
          .placeholderFont({ size: 14})
          .placeholderColor('#999999')
          .backgroundColor('#f3f7fe')
      }
      .borderRadius(30)
      .padding({ left: 20, right: 20 })
      .backgroundColor('#f3f7fe')
      .width('100%')
      .margin({ top: 10 })

      List({ space: 10, initialIndex: 0 }) {
        ForEach(this.jobList, (item: JobItem, index: number) => {
          ListItem() {
            Column() {
              Row({ space: 10 }) {
                Column() {
                  Text(item.jobName)
                    .fontSize(18)
                    .fontWeight(700)
                  Row({ space: 10 }) {
                    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)

                  Row({ space: 8 }) {
                    Image($r('app.media.company_icon'))
                      .width(16)
                      .height(16)

                    Text(item.companyName)
                      .fontSize(12)

                  }
                }
                .layoutWeight(0)
                .width(200)
                .height('100%')
                .justifyContent(FlexAlign.SpaceBetween)
                .alignItems(HorizontalAlign.Start)

                Column() {
                  Text(item.salary)
                    .fontColor('#1756f4')
                    .fontSize(16)
                    .fontWeight(700)
                  Text(item.addr)
                    .fontColor('#a6a6a6')
                    .fontSize(12)
                }
                .height('100%')
                .justifyContent(FlexAlign.SpaceBetween)
                .alignItems(HorizontalAlign.End)
              }
              .width('100%')
              .height(100)
              .justifyContent(FlexAlign.SpaceBetween)


              Row() {
                Text() {
                  Span(this.expandIndex == index ? '收起' : '查看')
                  Span('岗位要求')
                }
                .fontSize(12)
                .fontColor('#666666')
                Image(this.expandIndex == index ? $r('app.media.up_icon') : $r('app.media.down_icon'))
                  .width(14)
                  .height(14)
                  .margin({ left: 4 })
              }
              .height(20)
              .margin({ top: 10 })
              .alignItems(VerticalAlign.Center)
              .onClick(() => {
                if (this.expandIndex == index) {
                  this.expandIndex = null
                } else {
                  this.expandIndex = index
                }
              })

              if (this.expandIndex == index) {
                Divider()
                  .color('#f0f0f0')
                  .margin({ top: 5, bottom: 5 })

                Text('岗位要求:')
                  .fontSize(13)
                  .fontWeight(500)
                  .margin({ top: 10 })
                  .width('100%')
                  .textAlign(TextAlign.Start)
                LvMarkdownIn({ text: item.ability })
                  .width('100%')
                  .padding({ left: 10, right: 10 })
              }
            }
            .padding(10)
            .border({ width: 1, style: BorderStyle.Solid, color: this.expandIndex == index ? '#1756f4' : '#f2f2f2' })
            .borderRadius(10)
          }
        })
      }
      .alignListItem(ListItemAlign.Center)
      .listDirection(Axis.Vertical) // 排列方向
      .scrollBar(BarState.Off)
      .friction(0.6)
      .edgeEffect(EdgeEffect.Spring)
      .width('100%')
      .height(600)
    }
    .padding({ left: 10, right: 10 })
    .height('100%')
    .width('100%')
    .backgroundColor("#ffececec")
  }
}
//条目样式，自定义组件
@Component
struct newsItem {
  @Prop newsData: NewsBaseData
  build() {
    Row({space: 10}){
      Image(this.newsData.pic)
        //占位图
        .alt($r('app.media.app_logo_image'))
        .width(100)
        .height(70)
        .objectFit(ImageFit.Fill)
      Column({space: 10}){
        Text(this.newsData.title).SearchTextSty(18,700)
        Text(this.newsData.desc).SearchTextSty(15,400,Color.Black,2)
        Text(`热度： ${this.newsData.hot}`).SearchTextSty(10,400,Color.Red)
          .textAlign(TextAlign.End)
      }
      .width('65%')
    }
    .width('95%')
    .padding(10)
    .borderRadius(10)
    .backgroundColor(Color.White)
  }
}
@Extend(Text) function SearchTextSty(mSize:number,mWeight?:FontWeight,mColor?: ResourceColor,mLines?: number){
  .fontSize(mSize)
  .fontWeight(mWeight? mWeight : 400)
  .fontColor(mColor? mColor : Color.Black)
  .maxLines(mLines? mLines : 1)
  .textOverflow({overflow: TextOverflow.Ellipsis})
  .width('100%')
}