import { router } from '@kit.ArkUI'
|
|
class MessageItem {
|
icon: string | Resource = ''
|
title: string = ''
|
desc: string = ''
|
time: string = ''
|
isRead: boolean = false
|
}
|
|
@Entry
|
@Component
|
struct MessagePushPage {
|
@State messagePushFlag: boolean = false
|
@State autoUpdateFlag: boolean = false
|
@State messageList: MessageItem[] = [
|
{ icon: $r('app.media.message_note'), title: '课程提醒', desc: '您报名的《全栈开发：前后端打通实战》', time: '09-01 12:55', isRead: false },
|
{ icon: $r('app.media.message_gift'), title: '福袋派送官', desc: '您获得了一张价值100元的课程抵扣券，您可以从', time: '09-01 10:55', isRead: true },
|
{ icon: $r('app.media.message_pencil'), title: '官方通知', desc: '本平台将于09-01 00 对平台进行维护，请各位用户', time: '08-31 10:55', isRead: true }
|
]
|
build() {
|
Column() {
|
Row() {
|
Image($r('app.media.left_icon'))
|
.width(20)
|
.height(20)
|
.onClick(() => {
|
router.back()
|
})
|
Text('消息通知')
|
.fontSize(18)
|
.fontWeight(700)
|
Row()
|
}
|
.width('100%')
|
.padding(10)
|
.justifyContent(FlexAlign.SpaceBetween)
|
|
Divider()
|
|
Column() {
|
List({ space: 10, initialIndex: 0 }){
|
ForEach(this.messageList, (item: MessageItem) => {
|
ListItem() {
|
Row() {
|
Image(item.icon)
|
.width(40)
|
.height(40)
|
Column({ space: 10 }) {
|
Row() {
|
Text(item.title)
|
.fontSize(14)
|
.fontWeight(500)
|
.fontColor(Color.Black)
|
Text(item.time)
|
.fontSize(12)
|
.fontWeight(500)
|
.margin({ left: 10 })
|
.fontColor('#666666')
|
}
|
.width('100%')
|
|
Text(item.desc)
|
.width('100%')
|
.fontSize(12)
|
.maxLines(1)
|
.fontColor('#666666')
|
.textOverflow({ overflow: TextOverflow.Ellipsis })
|
}
|
.width(260)
|
.margin({ left: 10 })
|
|
if (!item.isRead) {
|
Image($r('app.media.message_circle'))
|
.width(10)
|
.height(10)
|
}
|
}
|
.width('100%')
|
.height(80)
|
.padding({ left: 16,right: 16, top: 4, bottom: 4 })
|
.borderRadius(10)
|
.backgroundColor(Color.White)
|
.onClick(() => {
|
})
|
}
|
})
|
}
|
.listDirection(Axis.Vertical) // 排列方向
|
.scrollBar(BarState.Off)
|
.friction(0.6)
|
.edgeEffect(EdgeEffect.Spring)
|
.width('100%')
|
.divider({strokeWidth: 1,color: '#f0f0f0'})
|
}
|
.padding({ top: 10 })
|
.backgroundColor('#f5f5f7')
|
.width('100%')
|
.height('100%')
|
}
|
}
|
}
|
