看老师代码整齐,课程也不多了,重写一遍练手

重写模块代码

interface pl_dx{
  head : ResourceStr
  name : string
  lv : number
  pl : string
  time : number
  dz : number
  like : boolean
}
function fzs (min: number, max: number){  //随机取整
  const num = Math.floor(Math.random() * (max - min + 1) + min)
  return num
}
function fsjsj (){  //随机时间
  const str1 = `2024-12-`+fzs(1,24).toString()+` 23:54:42`
  const d1 = new Date(str1)
  return d1.getTime()
}
function fsj (time:number){ //时间计算
  const now = Date.now()
  const cha1 = Math.floor((now - time)/1000/60)
  if (cha1 < 3){return '刚刚'}
  if (cha1 < 59){return `${cha1} 分钟`}
  const cha2 = Math.floor(cha1/60)
  if (cha2 < 23){return `${cha2} 小时`}
  const cha3 = Math.floor(cha2/24)
  if (cha3 < 29){return `${cha3} 天`}
  const cha4 = Math.floor(cha3/30)
  if (cha4 < 11){return `${cha3} 月`}
  const cha5 = Math.floor(cha4/12)
  return `${cha5} 年`
}
let user1 : pl_dx = {
  head:$r('app.media.ic_public_comments'),
  name:'王先生',
  lv:fzs(1,8),
  pl:'这是第一条评论,后面还要建立好几条',
  time:fsjsj(),
  dz:fzs(1,999),
  like:false
}
let user2 : pl_dx = { head:$r('app.media.ic_public_comments'), name:'水电费是的哈', lv:fzs(1,8), pl:'这是第二条评论,又优化了一下算法', time:fsjsj(), dz:fzs(1,999), like:false }
let user3 : pl_dx = { head:$r('app.media.ic_public_comments'), name:'rtyhrt', lv:fzs(1,8), pl:'这是第三条评论,又优化了一下算法', time:fsjsj(), dz:fzs(1,999), like:false }
let user4 : pl_dx = { head:$r('app.media.ic_public_comments'), name:'fhetyeu', lv:fzs(1,8), pl:'这是第四条评论,还增加了两个方法,以便调用', time:fsjsj(), dz:fzs(1,999), like:false }
let user5 : pl_dx = { head:$r('app.media.ic_public_comments'), name:'cvbcvnvcn', lv:fzs(1,8), pl:'这是第二条评论,又优化了一下算法', time:fsjsj(), dz:fzs(1,999), like:false }
let user6 : pl_dx = { head:$r('app.media.ic_public_comments'), name:'adfsdg', lv:fzs(1,8), pl:'这是第二条评论,又优化了一下算法', time:fsjsj(), dz:fzs(1,999), like:false }
let user7 : pl_dx = { head:$r('app.media.ic_public_comments'), name:'iuyou', lv:fzs(1,8), pl:'这是第二条评论,又优化了一下算法', time:fsjsj(), dz:fzs(1,999), like:false }
let user8 : pl_dx = { head:$r('app.media.ic_public_comments'), name:'vbmm', lv:fzs(1,8), pl:'这是第二条评论,又优化了一下算法', time:fsjsj(), dz:fzs(1,999), like:false }
let user9 : pl_dx = { head:$r('app.media.ic_public_comments'), name:'qfgix', lv:fzs(1,8), pl:'共计九条评论,学习老师的写法,看上去确实很整齐', time:fsjsj(), dz:fzs(1,999), like:false }

let u_sz : pl_dx[] = [user1,user2,user3,user4,user5,user6,user7,user8,user9]

@Component struct ui_top{
  @State onpaixu : number = 0
  upsj = ()=>{}
  upsl = ()=>{}

  build() {
    Row(){
      Text('全部评论')
        .fontSize(20)
        .fontWeight(700)
        .onClick(()=>{console.log('',Date.now())})
      Blank()
      Text('最新')
        .margin({right:'2%'})
        .padding(3)
        .borderRadius(6)
        .onClick(()=>{this.onpaixu = 0;this.upsj()})
        .fontWeight(this.onpaixu == 0 ? 600 : 300)
        .borderWidth(this.onpaixu == 0 ? 2 : 1)
        .backgroundColor(this.onpaixu == 0 ? '#fff' : 'eee')
      Text('最热')
        .padding(3)
        .borderRadius(6)
        .onClick(()=>{this.onpaixu = 1;this.upsl()})
        .fontWeight(this.onpaixu == 1 ? 600 : 300)
        .borderWidth(this.onpaixu == 1 ? 2 : 1)
        .backgroundColor(this.onpaixu == 1 ? '#fff' : 'eee')
    }.width('90%')
    .margin({top:'2%',bottom:'2%'})
  }
}

@Component struct ui_pl{
  @Prop user : pl_dx = user1
  ondz = ()=>{}

  build() {
    Column({space:5}){
      //第一行
      Row({space:10}){
        Image(this.user.head)
          .width('10%')
          .borderWidth(1)
          .borderRadius(99)
        Text(this.user.name)
        Text(){
          Span('LV ')
            .fontSize(12)
          Span(`${this.user.lv}`)
        }
      }.width('90%')
      .margin({left:'5%'})
      //第二行
      Text(this.user.pl)
        .width('80%')
        .margin({left:'15%'})
      //第三行
      Row({space:5}){
        Text(fsj(this.user.time))
        Blank()
        Image($r('app.media.a_good'))
          .width('5%')
          .fillColor(this.user.like ? '#f00' : '#666')
          .onClick(()=>{this.ondz()})
        Text(`${this.user.dz}`)
      }.width('80%')
      .margin({left:'15%'})
    }
  }
}
@Component struct ui_bottom{
  @Prop str1 : string = ''
  zonuppl = (str:string)=>{}

  build() {
    Row({space:10}){
      Image($r('app.media.ic_public_scan'))
        .width('10%')
      TextInput({placeholder:'写评论',text:this.str1}) //  想要置空输入 要把组件内容与临时存储绑定
        .layoutWeight(1)
        .onSubmit(()=>{ //  回车触发
          this.zonuppl(this.str1);  //  把临时存储以传参的方式传递到上层
          this.str1 = ''  //  上传评论后置空输入
        })
        .onChange((str2:string)=>{ //  内容变更触发
          this.str1 = str2  //  变更输入保存到临时存储
        })
      Image($r('app.media.a_good'))
        .width('10%')
      Image($r('app.media.a_shoucang'))
        .width('10%')
    }.margin({top:'2%',bottom:'2%'})
  }
}

export {
  pl_dx,u_sz,
  fzs,fsj,fsjsj,
  ui_top,ui_pl,ui_bottom
}

重写页面代码

import * as Mode from '../tests/test1'

@Entry
@Component struct Index {
  @State usz : Mode.pl_dx[] = Mode.u_sz
  me : Mode.pl_dx = {
  head:$r('app.media.ic_public_comments'),
  name:'伊特容易',
  lv:2,
  pl:'',
  time:Date.now(),
  dz:0,
  like:false
  }

  build() {
    Column(){
      Mode.ui_top({
        upsj:()=>{  //时间排序
          this.usz.sort((a,b)=>b.time-a.time)
        },
        upsl:()=>{  //点赞数量排序
          this.usz.sort((a,b)=>b.dz-a.dz)
        }
      })
      List(){
        ForEach(this.usz,(itme:Mode.pl_dx,i:number)=>{
          ListItem(){
            Mode.ui_pl({
              user : this.usz[i],
              ondz : ()=>{  //  点赞触发
                this.usz[i].like ? this.usz[i].dz-- : this.usz[i].dz++
                this.usz[i].like = !this.usz[i].like
                this.usz.splice(i,1,this.usz[i])
              }
            }).margin({bottom:'1%'})
          }
        })
      }
      .layoutWeight(1)
      Mode.ui_bottom({
        zonuppl:(str:string)=>{
          console.log('zonuppl',str)
          this.me.pl = str
          this.usz.splice(0,0,this.me)
        }
      })
    }.width('100%').height('100%').backgroundColor('#eee')
  }
}

外观