import { router } from '@kit.ArkUI'
|
|
class Message {
|
avatar: string | Resource = ''
|
content: string = ''
|
isMe: boolean = false
|
}
|
|
@Entry
|
@Component
|
struct MessageDetailsPage {
|
@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%')
|
.padding(10)
|
.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('#f5f5f7')
|
}
|
}
|
