功能完善

wwf

3 天以前 23fa268f56dcd99c8dcd46f50f3ffcaa4cdcbc49

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

@@ -1,131 +1,151 @@
import { CommonConstantWX } from '../../common/CommonConstantWX'
import { WxMessageBase } from '../../data/WxMessageBase'
import { WxUserInfoBase } from '../../data/WxUserInfoBase'
import { TitleUtils } from '../../utils/TitleUtils'
import { router } from '@kit.ArkUI'

/**
  * @ProjectName : HealthNS
   * @FileName : MessageDetailsPage
   * @UserName : 修梦
  * @Time : 2025/9/14 16:35
  * @Description : 文件描述 
 */
class Message {
  avatar: string | Resource = ''
  content: string = ''
  isMe: boolean = false
}

@Entry
@Component
struct MessageDetailsPage {
  @State msgData: Array<WxMessageBase> = CommonConstantWX.mUserMessage
  @State mContent:string = ''
  private mScroller: Scroller = new Scroller()
  @State mUserInfo: WxUserInfoBase = new WxMessageBase()
  aboutToAppear(): void {
    let params = this.getUIContext().getRouter().getParams() as Record<string,WxUserInfoBase>
    this.mUserInfo = params.userInfo
  }
  build() {
    RelativeContainer(){
      TitleUtils({titleName:this.mUserInfo.name})
        .id('heard')
      List({space: 15,scroller:this.mScroller}){
        ForEach(this.msgData,(item: WxMessageBase) => {
         ListItem(){
           MessageDetailsItem({item: item,icon: this.mUserInfo.img})
         }
        })
      }
      .id('list')
      .alignRules({
        top:{anchor: 'heard',align: VerticalAlign.Bottom},
        bottom: {anchor: 'rowBottom',align: VerticalAlign.Top}
      })
      .padding(10)
      Row({space: 5}){
        Image($r('app.media.wx_voice_icon')).MessageImageSty()
        TextArea({text: this.mContent})
          .backgroundColor(Color.White)
          .borderRadius(5)
          .width('70%')
          .offset({y: 5})
          .onChange((value: string) => {
            this.mContent = value
          })
        Image($r('app.media.wx_smile_icon')).MessageImageSty()
        if (this.mContent.trim().length === 0 || !this.mContent){
          Image($r('app.media.wx_more_icon')).MessageImageSty()
        } else {
          Button(){
            Text('发送')
              .fontSize(15)
              .fontColor(Color.White)
          }
          .padding(5)
          //发送数据，添加到了聊天列表
          .onClick(() =>{
            this.msgData.push({
              id: 99,
              content: this.mContent,
              img: $r('app.media.avatar_icon1'),
              category: 1
            })
            this.mContent = ''
            //滚动到底部
            this.mScroller.scrollToIndex(this.msgData.length - 1)
          })
        }
  @State messageList: Message[] = [
    { avatar: '', content: '请发一下你的简历给我。', isMe: false },
    { avatar: '', content: '这个岗位我十分感兴趣，请看一下我的简历，我觉得我可以胜任这个岗位', isMe: true },
  ]
  @State avatar: string | Resource = ''
  @State name: string = ''
  @State company: string = ''
  @State pageHeight: number = 0
  @State chatHeight: number = 0
  @State inputText: string = ''

  aboutToAppear(): void {
    interface Params {
      avatar: string | Resource
      name: string
      company: string
    }
    const params: Params = router.getParams() as Params
    this.name = params.name
    this.company = params.company
    this.avatar = params.avatar
  }

  build() {
    Flex({ direction: FlexDirection.Column }) {
      Row() {
        Image($r('app.media.left_icon'))
          .width(20)
          .height(20)
          .onClick(() => {
            router.back()
          })
        Column() {
          Text(this.name)
            .fontSize(16)
            .fontWeight(700)
          Text(this.company)
            .fontSize(12)
            .fontColor('#666666')
            .margin({ top: 4 })
        }
        Row()
      }
      .width('100%')
      .alignItems(VerticalAlign.Bottom)
      .padding(10)
      .backgroundColor("#ffe9e6e6")
      .id('rowBottom')
      .alignRules({
        bottom: {anchor: '__container__',align: VerticalAlign.Bottom}
      })
      .justifyContent(FlexAlign.SpaceBetween)
      .backgroundColor('#fff')
      .expandSafeArea()

      Column() {
        List({ space: 20, initialIndex: 0 }){
          ForEach(this.messageList, (item: Message) => {
            ListItem() {
              if (item.isMe) {
                Row({ space: 10 }) {
                  Text(item.content)
                    .fontSize(14)
                    .fontColor(Color.White)
                    .fontWeight(500)
                    .backgroundColor('#1761f4')
                    .padding(10)
                    .borderRadius({ topLeft: 12, topRight: 12, bottomLeft: 12 })
                    .constraintSize({ maxWidth: 250 })
                  Image($r('app.media.me_icon'))
                    .width(32)
                    .height(32)
                }
                .width('100%')
                .justifyContent(FlexAlign.End)
                .alignItems(VerticalAlign.Bottom)
              } else {
                Row({ space: 10 }) {
                  Image(this.avatar)
                    .width(32)
                    .height(32)
                  Text(item.content)
                    .fontSize(14)
                    .fontColor(Color.Black)
                    .fontWeight(500)
                    .backgroundColor('#FFF')
                    .padding(10)
                    .borderRadius({ topLeft: 12, topRight: 12, bottomRight: 12 })
                    .constraintSize({ maxWidth: 250 })
                }
                .width('100%')
                .alignItems(VerticalAlign.Bottom)
                .justifyContent(FlexAlign.Start)
              }
            }
          })
        }
        .listDirection(Axis.Vertical) // 排列方向
        .scrollBar(BarState.Off)
        .friction(0.6)
        .edgeEffect(EdgeEffect.Spring)
        .width('100%')
      }
      .layoutWeight(1)
      .padding(16)
      .width('100%')
      .expandSafeArea()

      Row({ space: 8 }) {
        Image($r('app.media.audio_icon'))
          .width(24)
          .height(24)
        TextInput({ text: $$this.inputText })
          .layoutWeight(1)
          .placeholderColor('#999999')
          .backgroundColor('#f3f7fe')
        Image($r('app.media.expression_icon'))
          .width(24)
          .height(24)
        if (this.inputText) {
          Button('发送')
            .type(ButtonType.Normal)
            .borderRadius(6)
            .onClick(() => {
              this.messageList.push({
                avatar: '', content: this.inputText, isMe: true
              })
              this.inputText = ''
            })
        } else {
          Image($r('app.media.add_icon'))
            .width(24)
            .height(24)
        }
      }
      .backgroundColor('#FFF')
      .width('100%')
      .height(60)
      .padding(10)
      .alignItems(VerticalAlign.Center)
    }
    .width('100%')
    .height('100%')
    .backgroundColor('#ccc')
    .backgroundColor('#f5f5f7')
  }
}

@Component
struct MessageDetailsItem {
  @Prop item: WxMessageBase
  @Prop icon: ResourceStr
  build() {
    if (this.item.category === 0){
      Row({space:5}){
        Image(this.icon)
          .width(40)
          .height(40)
        Text(this.item.content)
          .backgroundColor(Color.White)
          .padding(5)
      }
      .width('78%')
    } else {
      Row({space:5}){
       Row(){
         Text(this.item.content)
           .backgroundColor("#ff3cc12e")
           .padding(5)
       }
       .justifyContent(FlexAlign.End)
       .width('78%')
        Image($r('app.media.avatar_icon1'))
          .width(40)
          .height(40)
      }
      .width('100%')
      .justifyContent(FlexAlign.End)
    }

  }
}

@Extend(Image)
function MessageImageSty() {
  .width(25)
  .height(25)
  .objectFit(ImageFit.Fill)
}
}