功能完善

wwf

3 天以前 23fa268f56dcd99c8dcd46f50f3ffcaa4cdcbc49

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

@@ -10,23 +10,28 @@
@Entry
@Component
export struct MessagePage {
  @State messageList: Message[] = [
    { avatar: '', name: '李女士', company: '摩米移动科技|移动端开发工程师', desc: '这个岗位我十分感兴趣，请看一下我的简历，我...', price: '20-35K·14薪' },
    { avatar: '', name: '林先生', company: '摩米移动科技|移动端开发工程师', desc: '这个岗位我十分感兴趣，请看一下我的简历，我...', price: '20-35K·14薪' },
    { avatar: '', name: '吴女士', company: '摩米移动科技|移动端开发工程师', desc: '这个岗位我十分感兴趣，请看一下我的简历，我...', price: '20-35K' },
    { avatar: '', name: '李女士', company: '摩米移动科技|移动端开发工程师', desc: '这个岗位我十分感兴趣，请看一下我的简历，我...', price: '20-35K·14薪' },
    { avatar: '', name: '林先生', company: '摩米移动科技|移动端开发工程师', desc: '这个岗位我十分感兴趣，请看一下我的简历，我...', price: '20-35K·14薪' },
    { avatar: '', name: '吴女士', company: '摩米移动科技|移动端开发工程师', desc: '这个岗位我十分感兴趣，请看一下我的简历，我...', price: '20-35K' },
    { avatar: '', name: '李女士', company: '摩米移动科技|移动端开发工程师', desc: '这个岗位我十分感兴趣，请看一下我的简历，我...', price: '20-35K·14薪' },
    { avatar: '', name: '林先生', company: '摩米移动科技|移动端开发工程师', desc: '这个岗位我十分感兴趣，请看一下我的简历，我...', price: '20-35K·14薪' },
    { avatar: '', name: '吴女士', company: '摩米移动科技|移动端开发工程师', desc: '这个岗位我十分感兴趣，请看一下我的简历，我...', price: '20-35K' },
    { avatar: '', name: '李女士', company: '摩米移动科技|移动端开发工程师', desc: '这个岗位我十分感兴趣，请看一下我的简历，我...', price: '20-35K·14薪' },
    { avatar: '', name: '林先生', company: '摩米移动科技|移动端开发工程师', desc: '这个岗位我十分感兴趣，请看一下我的简历，我...', price: '20-35K·14薪' },
    { avatar: '', name: '吴女士', company: '摩米移动科技|移动端开发工程师', desc: '这个岗位我十分感兴趣，请看一下我的简历，我...', price: '20-35K' },
    { avatar: '', name: '李女士', company: '摩米移动科技|移动端开发工程师', desc: '这个岗位我十分感兴趣，请看一下我的简历，我...', price: '20-35K·14薪' },
    { avatar: '', name: '林先生', company: '摩米移动科技|移动端开发工程师', desc: '这个岗位我十分感兴趣，请看一下我的简历，我...', price: '20-35K·14薪' },
    { avatar: '', name: '吴女士', company: '摩米移动科技|移动端开发工程师', desc: '这个岗位我十分感兴趣，请看一下我的简历，我...', price: '20-35K' },
  @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}) {
@@ -40,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')
@@ -55,7 +60,7 @@
        ForEach(this.messageList, (item: Message) => {
          ListItem() {
            Row() {
              Image($r('app.media.avatar'))
              Image(item.avatar)
                .width(40)
                .height(40)
                .margin({ right: 10 })
@@ -93,7 +98,12 @@
            .margin({ top: 10, bottom: 10 })
            .onClick(() => {
              router.pushUrl({
                url: 'pages/message/MessageDetailsPage'
                url: 'pages/message/MessageDetailsPage',
                params: {
                  avatar: item.avatar,
                  name: item.name,
                  company: item.company
                }
              })
            })
          }
@@ -104,7 +114,7 @@
      .friction(0.6)
      .edgeEffect(EdgeEffect.Spring)
      .width('100%')
      .height(560)
      .height(610)
      .divider({strokeWidth: 1,color: '#f0f0f0'})
    }
    .height('100%')