黑马前端评论区 - 分享你的想法，与大家互动 - 常规

"use strict";var React=require('react');var useState=React.useState;var avatar=require('./images/coc.png');require('./index.scss');var defaultList=[{rpid:3,user:{uid:'13258165',avatar:'https://yjy-teach-oss.oss-cn-beijing.aliyuncs.com/reactbase/comment/zhoujielun.jpeg',uname:'周杰伦'},content:'哎哟，不错哦',ctime:'2022-10-18 08:15',like:98,action:0},{rpid:2,user:{uid:'36080105',avatar:'https://yjy-teach-oss.oss-cn-beijing.aliyuncs.com/reactbase/comment/xusong.jpeg',uname:'许嵩'},content:'我寻你千百度日出到迟暮',ctime:'2022-11-13 11:29',like:88,action:2},{rpid:1,user:{uid:'30009257',avatar:avatar,uname:'黑马前端'},content:'学前端就来黑马',ctime:'2022-10-19 09:00',like:66,action:1}}];var profile={uid:'30009257',avatar:avatar,uname:'黑马前端'};var tabs=[{type:'hot',text:'最热'},{type:'time',text:'最新'}];var MyCommentary=function(){function filternumber(originVal){var dt=new Date(originVal);var y=dt.getFullYear();var m=(dt.getMonth()+1+'').padStart(2,'0');var d=(dt.getDate()+'').padStart(2,'0');var hh=(dt.getHours()+'').padStart(2,'0');var mm=(dt.getMinutes()+'').padStart(2,'0');return ${y}-${m}-${d} ${hh}:${mm}};var comment=useState(defaultList)[0];var count=useState('hot')[0];var handlick=function(type){setCount(type);if(type==='hot'){comment.sort(function(a,b){return b.like-a.like})}else{comment.sort(function(a,b){return new Date(b.ctime)-new Date(a.ctime)})};};var del=function(uid){setComment(comment.filter(function(item){return item.rpid!==uid}))};var handleinput=function(){var value=document.querySelector('.reply-box-textarea').value;if(!value){return};var myname={user:{uid:'30009257',avatar:avatar,uname:'黑马前端'},rpid:comment.length+1,content:value,ctime:filternumber(new Date())+'',like:0,action:0};setComment([;...comment,myname]);document.querySelector('.reply-box-textarea').value=''};var handleLike=function(item,num){setComment(comment.map(function(arr){if(arr.rpid===item.rpid){item.action=num===1?1:2;item.like+=num};return arr}))};return React.createElement('div',{className:'app'},React.createElement('div',{className:'reply-navigation'},React.createElement('ul',{className:'nav-bar'},React.createElement('li',{className:'nav-title'},React.createElement('span',{className:'nav-title-text'},'评论'),React.createElement('span',{className:'total-reply'},comment.length)),React.createElement('li',{className:'nav-sort'},tabs.map(function(item,index){return React.createElement('div',{key:index,className:count===item.type?'nav-item active':'nav-item',onClick:function(){return handlick(item.type)}},item.text)}))))),React.createElement('div',{className:'reply-wrap'},React.createElement('div',{className:'box-normal'},React.createElement('div',{className:'reply-box-avatar'},React.createElement('div',{className:'bili-avatar'},React.createElement('img',{className:'bili-avatar-img',src:avatar,alt:'用户头像'}))),React.createElement('div',{className:'reply-box-wrap'},React.createElement('textarea',{className:'reply-box-textarea',placeholder:'发一条友善的评论'}),React.createElement('div',{className:'reply-box-send',onClick:function(){return handleinput()}},React.createElement('div',{className:'send-text'},'发布')))),React.createElement('div',{className:'reply-list'},comment.map(function(item,index){return React.createElement('div',{key:index,className:'reply-item'},React.createElement('div',{className:'root-reply-avatar'},React.createElement('div',{className:'bili-avatar'},React.createElement('img',{className:'bili-avatar-img',src:item.user.avatar,alt:'头像'}))),React.createElement('div',{className:'content-wrap'},React.createElement('div',{className:'user-info'},React.createElement('div',{className:'user-name'},item.user.uname)),React.createElement('div',{className:'root-reply'},React.createElement('span',{className:'reply-content'},item.content),React.createElement('div',{className:'reply-info'},React.createElement('span',{className:'reply-time'},item.ctime.slice(5)),React.createElement('span',{className:'reply-like'},React.createElement('i',{onClick:function(){return handleLike(item,1)},className:item.action===1?'icon like-icon liked':'icon like-icon'}),React.createElement('span',null,item.like)),React.createElement('span',{className:'reply-dislike'},React.createElement('i',{className:item.action===2?'icon dislike-icon disliked':'icon dislike-icon'})),item.user.uid===profile.uid&&React.createElement('span',{className:'delete-btn',onClick:function(){return del(item.rpid)}},'删除'))))))}))),React.createElement('div',{className:'reply-none'},'暂无评论')))};module.exports=MyCommentary