功能完善

wwf

3 天以前 23fa268f56dcd99c8dcd46f50f3ffcaa4cdcbc49

 entry/src/main/ets/pages/message/MessagePage.ets

@@ -1,19 +1,37 @@
import { router } from "@kit.ArkUI"

class Message {
  avatar: string | Resource = ''
  name: string = ''
  company: string = ''
  desc: string = ''
  price: string = ''
}

@Entry
@Component
export struct MessagePage {
  @State messageList: Message[] = [
    { avatar: '', name: '李女士', company: '摩米移动科技|移动端开发工程师', desc: '这个岗位我十分感兴趣，请看一下我的简历，我...' },
    { avatar: '', name: '林先生', company: '摩米移动科技|移动端开发工程师', desc: '这个岗位我十分感兴趣，请看一下我的简历，我...' },
    { avatar: '', name: '吴女士', company: '摩米移动科技|移动端开发工程师', desc: '这个岗位我十分感兴趣，请看一下我的简历，我...' }
  @State origMessageList: Message[] = [
    { avatar: $r('app.media.avatar1'), name: '李女士', company: '摩米移动科技|移动端开发工程师', desc: '这个岗位我十分感兴趣，请看一下我的简历，我觉得我可以胜任这个岗位', price: '20-35K·14薪' },
    { avatar: $r('app.media.avatar2'), name: '林先生', company: '云枢前端技术有限公司|高级开发工程师', desc: '这个岗位我十分感兴趣，请看一下我的简历，我觉得我可以胜任这个岗位', price: '20-40K·14薪' },
    { avatar: $r('app.media.avatar3'), name: '吴女士', company: '擎岳后端科技|后端开发工程师', desc: '这个岗位我十分感兴趣，请看一下我的简历，我觉得我可以胜任这个岗位', price: '20-35K·13薪' },
  ]
  @State @Watch('filterMessageList') searchKeyword: string = ''
  @State messageList: Message[] = []

  filterMessageList() {
    if (this.searchKeyword) {
      let list = this.origMessageList.filter((ele: Message) => {
        return ele.name.includes(this.searchKeyword) || ele.company.includes(this.searchKeyword)
      })
      this.messageList = list
    } else {
      this.messageList = this.origMessageList
    }
  }

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

  build() {
    Column({space: 10}) {
@@ -27,7 +45,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')
@@ -40,14 +58,64 @@

      List({ space: 10, initialIndex: 0 }){
        ForEach(this.messageList, (item: Message) => {

          ListItem() {
            Row() {
              Image(item.avatar)
                .width(40)
                .height(40)
                .margin({ right: 10 })
              Column() {
                Row({ space: 6 }) {
                  Text(item.name)
                    .fontSize(14)
                  Text(item.company)
                    .maxLines(1)
                    .textOverflow({ overflow: TextOverflow.Ellipsis })
                    .fontColor('#999999')
                    .width(150)
                    .fontSize(12)
                  Text(item.price)
                    .width(80)
                    .fontColor('#999999')
                    .fontSize(12)
                    .textAlign(TextAlign.End)
                }
                .width('100%')
                .justifyContent(FlexAlign.Start)
                Text(item.desc)
                  .fontColor('#999999')
                  .fontSize(13)
                  .maxLines(1)
                  .textOverflow({ overflow: TextOverflow.Ellipsis })
                  .width('100%')
              }
              .height('100%')
              .justifyContent(FlexAlign.SpaceBetween)
              .width(290)
            }
            .width('100%')
            .height(40)
            .margin({ top: 10, bottom: 10 })
            .onClick(() => {
              router.pushUrl({
                url: 'pages/message/MessageDetailsPage',
                params: {
                  avatar: item.avatar,
                  name: item.name,
                  company: item.company
                }
              })
            })
          }
        })
      }
      .height('100%')
      .padding({top:10})
      .margin({bottom: 30})
      .backgroundColor(Color.White)
      .divider({strokeWidth: 2,color: '#ccc'})
      .listDirection(Axis.Vertical) // 排列方向
      .scrollBar(BarState.Off)
      .friction(0.6)
      .edgeEffect(EdgeEffect.Spring)
      .width('100%')
      .height(610)
      .divider({strokeWidth: 1,color: '#f0f0f0'})
    }
    .height('100%')
    .width('100%')