一起养成写作习惯！这是我参与「掘金日新计划 · 4 月更文挑战」的第11天，点击查看活动详情。
前言
大家好，上一次分享我们实现了沸点详情页中的沸点内容展示功能。昨天我们分析到沸点详情页除了沸点内容外，下面还有个评论区块，评论区块则又分为发布评论区，热评区和全部评论区，接下来今天的分享中我们将把发布评论区和热评区的功能实现，如下图。
发布评论
这个发布评论功能我们已经接触过几次了，就是在前面沸点列表页中有个发布评论功能，在每天评论下的回复也是用的类似的功能，并且我们还把发布功能专门封装成了独立的通用组件，因此对于本次分享中的发布功能来说实现起来也就简单了，之需把之前封装好的发布组件导入进来直接使用即可，这里就不再详细展开了。直接看代码和效果图吧：
<div class="detail-comment-box">
<div class="title">评论</div>
<div class="reply-pub">
<van-image
round
width="30px"
height="30px"
src="https://p9-passport.byteacctimg.com/img/user-avatar/4eb96a510ba31abc55e029bd74da2be0~300x300.image"
/>
<reply :itemId="pin.msg_id" :isShow="true" :msg_id="pin.msg_id" />
</div>
复制代码热评
关于热评区块，我们先来看下官方图中，热门评论最多只展示2条，其它的就全都放在全部评论中了，而热门评论的回复最多也是只展示2条，如果超过2条就在后面显示一个查看更多回复按钮，点击后加载更多数据，相当于是分页加载。这个实现起来稍有些复杂。关于内容展示这一块不管是沸点内容还是评论内容或者是回复内容，其基本格式和布局都是类似的，都是由作者基本信息，沸点内容／评论内容，和操作按钮等几大块组成，而之前我们也已经封装好了现成的组件，唯一需要额外做的就是在评论下面还有个嵌套的回复内容，因此嵌套相关的布局需要我们手动调整下。大概实现思路如下：
- 首先还是借助前面封装好的comment组件展示评论或回复内容
- 不管是评论还是回复我们都以平级结构放在同一个div盒子中
- 通过设置margin属性让回复内容向右偏移一定的距离
- 然后再给回复内容加上一个灰色的背景色，从而从视觉上形成一个嵌套的效果
- 通过浏览器分析出请求热评的后台接口并封装到我们自己的后台中
- 在setup中请求数据并绑定到comment组件上
核心代码及效果图如下：
<div class="title">热门评论<van-icon name="fire-o" color="#ee0a24" /></div>
<div class="comment-hot" v-for="hot in hots" :key="hot.comment_id">
<comment
:avatar_large="hot.user_info.avatar_large"
:user_name="hot.user_info.user_name"
:job_title="hot.user_info.job_title"
:company="hot.user_info.company"
:ctime="hot.comment_info.ctime"
:origin_content="hot.comment_info.comment_content"
:sub_content="hot.comment_info.sub_content"
:comment_id="hot.comment_info.item_id"
:pic_list="hot.comment_info.comment_pics"
:is_followed="false"
/>
<div class="operation">
<div class="comment">
<van-icon name="chat-o" />
{{ hot.comment_info.reply_count }}
</div>
<div
class="digg"
:class="{ active: hot.user_interact.is_digg }"
@click="digg(hot.msg_id, hot.user_interact.is_digg)"
>
<van-icon name="good-job-o" />{{ hot.comment_info.digg_count }}
</div>
</div>
<div
class="comment-reply"
v-for="rep in hot.reply_infos"
:key="rep.reply_id"
>
<comment
:avatar_large="rep.user_info.avatar_large"
:user_name="rep.user_info.user_name"
:job_title="rep.user_info.job_title"
:company="rep.user_info.company"
:ctime="rep.reply_info.ctime.toString()"
:origin_content="rep.reply_info.reply_content"
:sub_content="rep.reply_info.reply_content"
:comment_id="rep.reply_info.item_id"
:pic_list="rep.reply_info.reply_pics"
:is_followed="false"
/>
<div class="operation">
<div class="comment">
<van-icon name="chat-o" />
{{ rep.reply_info.burry_count }}
</div>
<div
class="digg"
:class="{ active: rep.user_interact.is_digg }"
@click="digg(hot.msg_id, rep.user_interact.is_digg)"
>
<van-icon name="good-job-o" />{{ rep.reply_info.digg_count }}
</div>
<div></div>
</div>
</div>
</div>
复制代码api.hotComment(msg_id).then((res) => {
state.hots = [];
state.hots.push(res.data.shift());
state.hots.push(res.data.shift());
console.log(state.hots);
state.hots.forEach((item) => {
item.comment_info.sub_content =
item.comment_info.comment_content.substring(0, 80);
item.comment_info.comment_content.length >= 80
? (item.comment_info.sub_content += "...")
: null;
item.comment_info.show_content = item.comment_info.sub_content;
});
});
复制代码总结
今天的分享实现了在沸点详情页中发布评论以及沸点内容热门评论的数据展示功能，但是效果跟官方比起来还差很多，有时间再优化了，另外关于查看更多回复分页加载功能也尚未实现，这个我们留着下一次分享中实现了，今天的分享就先到这里了，喜欢的朋友欢迎给个小红心儿，感谢！