@Entry
@Component
struct ZhihuComment {
@State message: string = 'Hello World'
@State replyList: ReplyItem[] = [
{
id: 0,
icon: 'https://img1.baidu.com/it/u=2198066039,3336806063&fm=253&fmt=auto&app=120&f=JPEG?w=500&h=500',
name: '张三' + 0,
content: '评论内容评论内容评论内容评论内容评论内容评论内容评论内容评论内容评论内容评论内容' + 0,
publicTime: '10-01',
area: '北京',
likeNum: 100 + 0
},
{
id: 1,
icon: 'https://img1.baidu.com/it/u=2198066039,3336806063&fm=253&fmt=auto&app=120&f=JPEG?w=500&h=500',
name: '张三' + 1,
content: '评论内容评论内容评论内容评论内容评论内容评论内容评论内容评论内容评论内容评论内容' + 1,
publicTime: '10-01',
area: '北京',
likeNum: 100 + 1
},
{
id: 2,
icon: 'https://img1.baidu.com/it/u=2198066039,3336806063&fm=253&fmt=auto&app=120&f=JPEG?w=500&h=500',
name: '张三' + 2,
content: '评论内容评论内容评论内容评论内容评论内容评论内容评论内容评论内容评论内容评论内容' + 2,
publicTime: '10-01',
area: '北京',
likeNum: 100 + 2
}
,
{
id: 2,
icon: 'https://img1.baidu.com/it/u=2198066039,3336806063&fm=253&fmt=auto&app=120&f=JPEG?w=500&h=500',
name: '张三' + 2,
content: '评论内容评论内容评论内容评论内容评论内容评论内容评论内容评论内容评论内容评论内容' + 2,
publicTime: '10-01',
area: '北京',
likeNum: 100 + 2
}
,
{
id: 2,
icon: 'https://img1.baidu.com/it/u=2198066039,3336806063&fm=253&fmt=auto&app=120&f=JPEG?w=500&h=500',
name: '张三' + 2,
content: '评论内容评论内容评论内容评论内容评论内容评论内容评论内容评论内容评论内容评论内容' + 2,
publicTime: '10-01',
area: '北京',
likeNum: 100 + 2
}
,
{
id: 2,
icon: 'https://img1.baidu.com/it/u=2198066039,3336806063&fm=253&fmt=auto&app=120&f=JPEG?w=500&h=500',
name: '张三' + 2,
content: '评论内容评论内容评论内容评论内容评论内容评论内容评论内容评论内容评论内容评论内容' + 2,
publicTime: '10-01',
area: '北京',
likeNum: 100 + 2
}
,
{
id: 2,
icon: 'https://img1.baidu.com/it/u=2198066039,3336806063&fm=253&fmt=auto&app=120&f=JPEG?w=500&h=500',
name: '张三' + 2,
content: '评论内容评论内容评论内容评论内容评论内容评论内容评论内容评论内容评论内容评论内容' + 2,
publicTime: '10-01',
area: '北京',
likeNum: 100 + 2
}
,
{
id: 2,
icon: 'https://img1.baidu.com/it/u=2198066039,3336806063&fm=253&fmt=auto&app=120&f=JPEG?w=500&h=500',
name: '张三' + 2,
content: '评论内容评论内容评论内容评论内容评论内容评论内容评论内容评论内容评论内容评论内容' + 2,
publicTime: '10-01',
area: '北京',
likeNum: 100 + 2
}
]
changeLike(item: ReplyItem) {
if (item.likeFlag) {
item.likeFlag = false
item.likeNum = item.likeNum - 1
} else {
item.likeFlag = true
item.likeNum = item.likeNum + 1
}
const index = this.replyList.findIndex((obj) => obj.id == item.id)
AlertDialog.show({message: 'test' + index + " " + item.likeNum})
this.replyList[index] = {...item}
}
aboutToAppear() {
// for (let i = 0; i < 10; i++) {
// this.replyList.push({
// id: i,
// icon: 'https://img1.baidu.com/it/u=2198066039,3336806063&fm=253&fmt=auto&app=120&f=JPEG?w=500&h=500',
// name: '张三' + i,
// content: '评论内容评论内容评论内容评论内容评论内容评论内容评论内容评论内容评论内容评论内容' + i,
// publicTime: '10-01',
// area: '北京',
// likeNum: 100 + i
// })
// }
}
build() {
Stack({alignContent: Alignment.Bottom}) {
Scroll() {
Column() {
ZhiHuHeader()
// ZhihuItem({item: {
// id: 1,
// icon: 'https://img1.baidu.com/it/u=2198066039,3336806063&fm=253&fmt=auto&app=120&f=JPEG?w=500&h=500',
// name: '张三',
// content: '内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容',
// publicTime: '10-10',
// area: '上海',
// likeNum: 100
// }})
Divider()
.width('100%')
.color('#f4f4f4')
.strokeWidth(8)
.margin({
top: 10
})
Row(){
Text('回复')
.textAlign(TextAlign.Start)
.fontWeight(400)
.fontSize(16)
.fontColor('#333333')
}
.width('100%')
.margin({
left: 15,
top: 15
})
ForEach(this.replyList, (item: ReplyItem, index: number) => {
ZhihuItem({item: item, changeLike: (obj: ReplyItem) => {
this.changeLike(obj)
}})
})
}
}.padding({
bottom: 60
})
.align(Alignment.Top)
.alignSelf(ItemAlign.Start)
ReplyAdd({addReply: (item: ReplyItem) => {
this.replyList.unshift(item)
}})
}
.height('100%')
}
}
@Component
struct ReplyAdd {
@State content: string = ""
addReply: (item: ReplyItem) => void = () => {}
build() {
Row() {
TextInput({
placeholder: '回复~',
text: this.content
}).layoutWeight(1)
.onChange((value) => {
this.content = value
})
Text('发布')
.margin({
left: 10
}).fontColor(Color.Blue)
.onClick(() => {
const replyItem: ReplyItem = {
id: Date.now(),
icon: 'https://img1.baidu.com/it/u=2198066039,3336806063&fm=253&fmt=auto&app=120&f=JPEG?w=500&h=500',
name: '李四',
area: '北京',
content: this.content,
publicTime: `${new Date().getMonth() + 1}-${new Date().getDate()}`,
likeNum: 0,
likeFlag: false
}
this.addReply(replyItem);
})
}
.padding({
left: 10,
right: 10
})
.width('100%')
.height(60)
.backgroundColor(Color.White)
.border({
color: '#f4f5f6',
width: {
top: 1
}
})
}
}
@Component
struct ZhiHuHeader {
build() {
Row(){
Row() {
Image($r('app.media.back'))
.width(12)
.height(12)
.fillColor('#848484')
}
.width(24)
.aspectRatio(1)
.backgroundColor('#f4f4f4')
.borderRadius(20)
.justifyContent(FlexAlign.Center)
.alignItems(VerticalAlign.Center)
.margin({
left:15
})
Text('评论回复')
.layoutWeight(1)
.textAlign(TextAlign.Center)
.fontSize(18)
.padding({
right: 39
})
.fontWeight(400)
}
.width('100%')
.alignItems(VerticalAlign.Center)
.border({
color: '#f4f4f4',
width: {
bottom:1
}
})
.height(50)
}
}
@Component
struct ZhihuItem {
item: Partial<ReplyItem> = {}
changeLike: (item: ReplyItem) => void = () => {}
build() {
Row() {
Image(this.item.icon)
.width(50)
.height(50)
.borderRadius(25)
Column() {
Text(this.item.name)
.fontSize(20)
.fontColor('#333333')
.fontWeight(400)
Text(this.item.content)
.fontSize(14)
.fontColor('#666666')
.margin({
top: 10
})
.lineHeight(18)
.maxLines(2)
.textOverflow({
overflow: TextOverflow.Ellipsis
})
Row() {
Row() {
Text(this.item.publicTime)
.fontSize(12)
.fontColor('#999999')
Text(`IP属地${this.item.area}`)
.fontSize(12)
.fontColor('#999999')
.margin({
left: 5
})
}
.layoutWeight(1)
Row() {
Image($r('app.media.like'))
.width(20)
.height(20)
Text(this.item.likeNum.toString())
.fontColor('#999999')
.fontSize(12)
.margin({
left: 5
})
}.onClick(() => {
this.changeLike(this.item as ReplyItem);
})
}
.width('100%')
.margin({
top: 20
})
}
.alignItems(HorizontalAlign.Start)
.layoutWeight(1)
.margin({
left: 15
})
}
.alignItems(VerticalAlign.Top)
.width('100%')
.padding({
left: 15,
right: 15,
top: 15
})
}
}
class ReplyItem {
id: number
icon: string
name: string
content: string
publicTime: string
area: string
likeNum: number
likeFlag?:boolean = false
}
image.png
