harmonyOS NEXT 讨论区 blackhorse小项目学习

最新推荐文章于 2025-12-18 10:34:05 发布

原创最新推荐文章于 2025-12-18 10:34:05 发布 · 1.8k 阅读

27 ·

CC 4.0 BY-SA版权

文章标签：

#学习 #开发语言 #javascript #typescript

1.主体index部分

import Infotop from '../components/Infotop'
import InfoItem from  '../components/InfoItem'
import InfoBootom from  '../components/InfoBootom'
import font from '@ohos.font'
import { CommentDate, createListRange} from  '../model/CommentDate'
import json from '@ohos.util.json'

// let ListArr: CommentDate[] = createListRange()
// console.log('数组对现象'json.stringify(ListArr))

//时间戳是一种特殊的时间格式，是数字类型，利于比较运算'new Date().getTime()获取时间戳，是一串number类型的数字
//从一九七0年一月一号 0点开始计算的
//  let nowtime:number =new Date().getTime()
// let lasttime:number =new Date('2024-03-02').getTime()
// console.log('当前时间戳',nowtime,lasttime);
// console.log('当前时间戳',(nowtime-lasttime)/1000/3600/34);
//用于判断多久前除出来的刚好是天数
//讨论区适用于ge中评论讨论点赞
@Entry
@Component
struct getgold{
  @State commentList:CommentDate[] =createListRange()



  //一加载getgold页面就开始注册
  //会在组件加载时调用执行
  aboutToAppear(): void {
    //注册字体
    font.registerFont({
      familyName: 'myfont',
      familySrc: '/fonts/iconfont.ttf'
    })
    this.handleSort(0)
  }

handleLike(index:number){
//每个子都能调用，此时是数组操作，可以传递到下标
//根据数据进行加一减一操作
  let  itemDate =this.commentList[index]
  if(itemDate.isLike){
    itemDate.likeNum-=1
  }
  else {
    itemDate.likeNum+= 1
  }
  itemDate.isLike =!itemDate.isLike

  this.commentList.splice(index,1,itemDate)
}

handelSubmit(content:string){
      const newItem :CommentDate =new CommentDate(`https://img.3dmgame.com/uploads/images/news/20191112/1573551539_705984.jpg`, "我", new Date().getTime(), 5 , 0, content, false)
  this.commentList =[newItem,...this.commentList]

}
//处理排序
  handleSort(type:number){
    if (type ===0) {
      this.commentList.sort((a,b) =>{
        return b.time =a.time
      })
    }
    else {
        //点赞数。从大到小排序
      this.commentList.sort((a,b) =>{
        return b.likeNum -a.likeNum
      })
    }
  }


  build() {
    Column(){

      //使用字体
      // Text('\u')

      //头部
      Infotop({
        onSort: (type:number) =>{
          this.handleSort(type)
        }
      })

      //主体
      List(){
        ForEach(this.commentList, (item:CommentDate,index:number)=> {
          ListItem(){
            InfoItem({
              index: index,
              itemObj:item,
              onLikeClick: (index:number)=>{
                //访问的是外部环境的this，就是父组件
                this.handleLike(index)
              }

            })
          }
        })

      }
      .padding({bottom: 10})
      .layoutWeight(1)
      //尾部
     InfoBootom({
       onSubmitComment: (content:string)=>{

         this.handelSubmit(content)
       }
     })
    }
    .height('100%')
    .width('100%')
  }
}

头部，主体，尾部封装的组件

头部

@Extend(Button)
function fancyButton(isOn: boolean){
  .width(46)
  .height(32)
  .fontSize(12)
  .padding({top: 5,right: 5})
  .backgroundColor(isOn ? '#fff' : '#F7F8FA')
  .fontColor(isOn ? '#2f2e33' : '#8e9298')
  .border({width:1,color: isOn ? '#e4e5e6' : '#F7F8FA'})
}

@Component
struct Infotop{
  onSort =(type:number) => {}
  @State isOn :boolean = true
  build() {
    Row(){
      Text('全部评论')
        .fontWeight(FontWeight.Bold)
        .fontColor('#222')
        .fontSize(20)
      Row(){
        //点击的时候不会出现点击的背景效果tateEffect :false
        Button('最新',{stateEffect :false})
          .fancyButton(this.isOn)
          .onClick(() =>{
            this.isOn =  true
            this.onSort(0)
          })
        Button('最热')
          .fancyButton(!this.isOn)
          .onClick(() =>{
            this.isOn =  false
            this.onSort(1)
          })

      }
      .backgroundColor('#F7F8FA')
      .borderRadius(20)
    }
    .justifyContent(FlexAlign.SpaceBetween)
    .width('100%')
    .padding(16)
  }
}
export default Infotop

中部

import { CommentDate } from '../model/CommentDate'

@Component
struct InfoItem{
 @Prop itemObj:CommentDate
  @Prop index: number
  onLikeClick = (index:number) =>{}


  build() {
    Column(){
      //touxiang头像，昵称，等级
      Row(){
        Image(this.itemObj.avatar)
          .width(30).aspectRatio(1)
          .margin({top:10})
          .borderRadius(15)
          .fillColor(Color.Green)
        Text(this.itemObj.name)
          .fontSize(13)
          .fontColor(Color.Gray)
          .margin({top:10,left: 8})
        Image(this.itemObj.levelIcon)
          .width(20).aspectRatio(1)
          .margin({top:10,left:8})
          .borderRadius(15)
      }
      Text(this.itemObj.commentTxt)
        .fontSize(13)
        .fontColor(Color.Black)
        .margin({left:40,top:0,bottom:8})
      //评论日期和点赞互动
      Row(){
           Text(this.itemObj.timeString)
             .fontSize(11)
             .fontColor(Color.Gray)
        Row(){
             Image( this.itemObj.isLike ? $r('app.media.ic_public_deselect_filled') : $r('app.media.ic_like'))
               .width(15).aspectRatio(1)
          Text(this.itemObj.likeNum.toString())
            .fontSize(11)
            .fontColor(this.itemObj.isLike ?Color.Blue : Color.Gray)
        }
        .onClick(() =>{
          //让当前项的likeNum要变化，需要调用父组件的方法才能改
          this.onLikeClick(this.index)
        })
      }
      .padding({left:40,top:5})
      .width('100%')
      .justifyContent(FlexAlign.SpaceBetween)

    }
    .alignItems(HorizontalAlign.Start)
    .padding({left:15, right:15})
  }
}
export  default InfoItem

尾部

@Component
struct InfoBootom{
  @State txt:string =''
  onSubmitComment = (content: string) =>{}
  build() {
   Row(){
    Row(){
  Text('\ue603')
    .fontFamily('myfont')
    .fontSize(18)
    .margin({left :20})
  TextInput({ placeholder :'写评论。。。',
    text: $$this.txt

  })
    //去掉底色Color.Transparent
    .backgroundColor(Color.Transparent)
    .fontSize(18)
    .onSubmit(() =>{
//不能直接添加
      this.onSubmitComment(this.txt)
    })
}
.height(40)
     .backgroundColor('#f5f6f5')
    .borderRadius(20)
     .margin({left: 15, right:20,bottom:10,top:10})
     .layoutWeight(1)

     Text('\ue609')
       .fontFamily('myfont')
       .fontSize(26)
       .margin({left:6,right:6})
     Text('\ue681')
       .fontFamily('myfont')
       .fontSize(26)

   }
   .height(60)
    .width('100%')


  }
}
export default InfoBootom

数据准备model


export class CommentDate{
  // avatar:string;//touxiang
  // name:string;// 昵称
  // level:number;//用户等级
  // likeNum: number;//点赞数量
  // commentText:string; //评论内容
  // isLike: boolean;//是否喜欢
  // levelIcon: Resource//leve等级
  // timeString:string//发布时间-基于时间戳处理后，展示给用户的属性
  // time:number//时间戳
  avatar: string; // 头像
  name: string; // 昵称
  level: number; //用户等级
  likeNum: number; //点赞数量
  commentTxt: string; //评论内容
  isLike: boolean; //是否喜欢
  levelIcon: Resource // level等级
  timeString: string // 发布时间-基于时间戳处理后,展示给用户看的属性(2天前)
  time: number // 时间戳-数字格式的日期

  constructor(avatar: string, name: string, time: number, level: number, lickNum: number, commentTxt: string, isLike: boolean, ) {
    this.avatar = avatar
    this.name = name
    this.timeString = this.convertTime(time) // 拿到的时间格式, 通常是时间戳的格式  1645820201123
    this.time = time
    this.level = level
    this.likeNum = lickNum
    this.commentTxt = commentTxt
    this.isLike = isLike
    this.levelIcon = this.convertLevel(this.level) // 基于等级数字, 转换成图片路径
  }
  convertLevel(level: number){
    const  iconList =[
      $r('app.media.zfb_nav9'),
      $r('app.media.zfb_nav9'),
      $r('app.media.zfb_nav9'),
      $r('app.media.zfb_nav9'),
      $r('app.media.zfb_nav9'),
      $r('app.media.zfb_nav9'),

    ]
    return iconList[level]
  }

  // constructor(avatar:string,name:string,level:number, likeNum: number,commentText:string,isLike: boolean,levelIcon: Resource,timeString:string,time:number) {
  //   this.avatar=avatar
  //   this.name = name
  //   this.level=level
  //   this.likeNum = likeNum
  //   this.commentText = commentText
  //   this.isLike =isLike
  //   this.levelIcon =this.convertleve(this.level)//基于等级数字转换成图片路径
  //   this.timeString = this.converTime(time)//拿到时间格式，通常是时间戳的格式number
  //   this.time =time
  convertTime(timestamp: number) {
    // 获取当前的时间戳
    const currentTimestamp = new Date().getTime();
    const timeDifference = (currentTimestamp - timestamp) / 1000; // 转换为秒

    if (timeDifference < 5 || timeDifference == 0) {
      return "刚刚";
    } else if (timeDifference < 60) {
      return `${Math.floor(timeDifference)}秒前`;
    } else if (timeDifference < 3600) {
      return `${Math.floor(timeDifference / 60)}分钟前`;
    } else if (timeDifference < 86400) {
      return `${Math.floor(timeDifference / 3600)}小时前`;
    } else if (timeDifference < 604800) {
      return `${Math.floor(timeDifference / 86400)}天前`;
    } else if (timeDifference < 2592000) {
      return `${Math.floor(timeDifference / 604800)}周前`;
    } else if (timeDifference < 31536000) {
      return `${Math.floor(timeDifference / 2592000)}个月前`;
    } else {
      return `${Math.floor(timeDifference / 31536000)}年前`;
    }
  }
  }



// 封装一个方法, 创建假数据
 export const createListRange = (): CommentDate[] => {
  let result: CommentDate[] = new Array()
  result = [
    new CommentDate(`https://img.3dmgame.com/uploads/images/news/20191112/1573551539_705984.jpg`, "雪山飞狐", 1645820201123, Math.floor(Math.random()*6) , Math.floor(Math.random()*100), '特朗普遇袭后发声的最新相关信息', false),
    new CommentDate(`https://c-ssl.duitang.com/uploads/blog/202201/13/20220113204553_33211.jpg`, "千纸鹤", 1677356201123, Math.floor(Math.random()*6) , Math.floor(Math.random()*100), '爱情不是花荫下的甜言，不是桃花源中的密语……爱情 是建立在共同的基础上的', false),
    new CommentDate(`https://wallpaperm.cmcm.com/314caa70ab5c5a340d7d64b614f611d1.jpg`, "烟雨江南", 1688772201123, Math.floor(Math.random()*6) , Math.floor(Math.random()*100), 'Love ambition causes person time the pain. the boundary by likes making, likes by the boundary moving. ', false),
    new CommentDate(`https://fastly.picsum.photos/id/654/600/600.jpg?hmac=ewnK6Bx_MKQLJa9waZOV1xNO7--K5oSwCShtz1JDYw8`, "魔法小精灵", 1697484201123, Math.floor(Math.random()*6) , Math.floor(Math.random()*100), 'Love ambition causes person time the pain. the boundary by likes making, likes by the boundary moving. ', false),
    new CommentDate(`https://fastly.picsum.photos/id/345/600/600.jpg?hmac=EQflzbIadAglm0RzotyKXM2itPfC49fR3QE7eW_UaPo`, "独行侠", 1704067200000, Math.floor(Math.random()*6) , Math.floor(Math.random()*100), '您已成功登录HUAWEI DevEco Studio客户端，请返回DevEco Studio进行下一步操作', false),
    new CommentDate(`https://fastly.picsum.photos/id/905/600/600.jpg?hmac=DvIKicBZ45DEZoZFwdZ62VbmaCwkK4Sv7rwYzUvwweU`, "枫叶飘零", 1706745600000, Math.floor(Math.random()*6) , Math.floor(Math.random()*100), '$ hdc shell bm install -p data/local/tmp/c3bb65f0e4a742ca8940038ba636beca  in 1 s 565 ms', false),
    new CommentDate(`https://fastly.picsum.photos/id/255/600/600.jpg?hmac=-lfdnAl71_eAIy1OPAupFFPh7EOJPmQRJFg-y7lRB3s`, "星空漫步", 1707523200000, Math.floor(Math.random()*6) , Math.floor(Math.random()*100), 'Launch com.example.myapplication success in 2 s 428 ms', false),
    new CommentDate(`https://fastly.picsum.photos/id/22/600/600.jpg?hmac=QEZq7KUHwBZCt3kGSEHMwJlZfnzCxCeBgHjYj7iQ-UY`, "剑指苍穹", 1708300800000, Math.floor(Math.random()*6) , Math.floor(Math.random()*100), 'https://cn.devecostudio.huawei.com/console/DevEcoIDE/loginSuccess', false),
    new CommentDate(`https://fastly.picsum.photos/id/439/600/600.jpg?hmac=LC9k_bzrN0NhKRyV62fou3ix3cRFZKNfAyXgxGs6zh8`, "黑暗王国", 1708646400000, Math.floor(Math.random()*6) , Math.floor(Math.random()*100), '我想留下我喜欢的人', false),
  ]
  return result
}