功能完善

wwf

3 天以前 23fa268f56dcd99c8dcd46f50f3ffcaa4cdcbc49

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

@@ -1,94 +1,124 @@
import { CommonConstantWX } from "../../common/CommonConstantWX"
import { WxUserInfoBase } from "../../data/WxUserInfoBase"
import { router } from "@kit.ArkUI"

/*
 * Search({placeholder: '请输入您要搜索的内容',value: 'DeepSeek'})
        .width('90%')
        .backgroundColor(Color.White)
        .searchButton('搜索')
        .onChange((value: string) => {
          console.info(`输入的内容为：${value}`)
        })
        //提交方法
        .onSubmit((value:string) => {
          console.info(`提交的内容为：${value}`)
        })
 * */
class Message {
  avatar: string | Resource = ''
  name: string = ''
  company: string = ''
  desc: string = ''
  price: string = ''
}
@Entry
@Component
export struct MessagePage {
  @State userList:Array<WxUserInfoBase> = CommonConstantWX.mUser
  @State searchUser:Array<WxUserInfoBase> = []
  @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}) {
      Search({placeholder: '搜索'})
        .backgroundColor(Color.White)
        .width('90%')
        .borderRadius(5)
        .onChange((value: string) =>{
          //每次输入都要清空searchUser数组
          this.searchUser = []
          let searchCount = 0
          //进行遍历，在数组源头查找和value相关的数据
          for (let index = 0; index < this.userList.length; index++) {
            const element = this.userList[index];
            //判断每一条数据是否有和Value相关的内容
            if (element.name?.indexOf(value) != -1) {
              //找到相关的数据，添加到search数组当中，并且数据加一
              searchCount ++
              this.searchUser.push(element)
            }
          }
          //判断SearchCount是否为0
          if (searchCount === 0) {
            //表示查无此人
            this.searchUser.push({
              id: 999,
              name: '无此用户',
              img:$r('app.media.avatar_icon')
            })
          }
      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: 20}){
        ForEach(this.searchUser.length === 0 ? this.userList: this.searchUser,(item: WxUserInfoBase) => {
          ListItem(){
            userInfoItem({item: item})
      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('90%')
      .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%')
    .backgroundColor('#ccc')
  }
}

@Component
struct userInfoItem {
  @Prop item: WxUserInfoBase
  build() {
    Row({space: 15}){
      Image(this.item.img)
        .width(40)
        .height(40)
        .objectFit(ImageFit.Cover)
      Text(this.item.name)
        .fontSize(20)
    }
    .onClick(() => {
      this.getUIContext().getRouter().pushUrl({
        url: 'pages/message/MessageDetailsPage',
        params:{
          userInfo: this.item
        }
      })
    })
    .padding(10)
    .padding({ left: 10, right: 10 })
  }
}