完善功能

wwf

6 天以前 e794ed885a75be8ab5c789c2ea8db902ce338b0b

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

@@ -1,82 +1,175 @@
import { AxiosResponse } from "@ohos/axios"
import { NewsBase, NewsBaseData } from "../../data/NewsBase"
import { TextBase } from "../../data/TextBase"
import { NewsApi, TextApi } from "../../http/AxiosAPI"
import { IconType } from "@kit.ArkUI"

class JobItem {
  title: string = ''
  payment: string = ''
  tagList: string[] = []
  company: string = ''
  address: string = ''
  detail: 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[] = [
    { 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

      }
      .width('95%')
      .height(50)
      .borderRadius(20)
      .backgroundColor(Color.White)
      .justifyContent(FlexAlign.Center)
      .onClick(() => {
        console.info('TextData: ' + JSON.stringify(this.TextData.text))
      })
      List({space:15}){
        ForEach(this.newsBase.data,(item:NewsBaseData) =>{
          ListItem(){
           newsItem({newsData: item})
          }
        })
      }
      .alignListItem(ListItemAlign.Center)
    }
    .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)
    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: '搜索想要查找的岗位' })
          .placeholderFont({ size: 14})
          .placeholderColor('#999999')
          .backgroundColor('#f3f7fe')
      }
      .width('65%')
      .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.title)
                    .fontSize(14)
                    .fontWeight(800)
                  Row({ space: 10 }) {
                    ForEach(item.tagList, (tag: string) => {
                      Text(tag)
                        .padding(4)
                        .borderRadius(4)
                        .fontSize(10)
                        .fontColor('#999999')
                        .backgroundColor('#f5f5f5')
                    })
                  }
                  .width('100%')
                  .justifyContent(FlexAlign.Start)

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

                    Text(item.company)
                      .fontSize(10)

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

                Column() {
                  Text(item.payment)
                    .fontColor('#1756f4')
                    .fontSize(14)
                    .fontWeight(800)
                  Text(item.address)
                    .fontColor('#a6a6a6')
                    .fontSize(10)
                }
                .height('100%')
                .justifyContent(FlexAlign.SpaceBetween)
                .alignItems(HorizontalAlign.End)
              }
              .width('100%')
              .height(100)
              .justifyContent(FlexAlign.SpaceBetween)


              Row() {
                Text() {
                  Span(this.expandIndex == index ? '收起' : '展开')
                  Span('岗位要求')
                }
                .fontSize(10)
                .fontColor('#666666')
                Image(this.expandIndex == index ? $r('app.media.down_icon') : $r('app.media.up_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)
                Text('1.学历要求：本科及以上学历，计算机科学与技术、软件工程等相关专业优先，优秀大专学历者' +
                  '1.学历要求：本科及以上学历，计算机科学与技术、软件工程等相关专业优先，优秀大专学历者')
                  .fontSize(10)
                  .margin({ top: 6 })
                  .fontColor('#666666')
                  .lineHeight(15)
                  .width('100%')
                  .textAlign(TextAlign.Start)
              }


            }
            .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)

    }
    .width('95%')
    .padding(10)
    .borderRadius(10)
    .backgroundColor(Color.White)
    .padding({ left: 10, right: 10 })
    .height('100%')
  }
}
@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%')
}