一起养成写作习惯！这是我参与「掘金日新计划 · 4 月更文挑战」的第10天，点击查看活动详情。
前言
大家好，昨天我们对沸点列表进行了封装，同时实现了「发现」「热门」及「关注」三个列表页的内容展示，到此关于列表页的分享就基本结束了。在前面关于沸点评论的分享中我们提到「每条沸点最多只显示5条评论，剩下的评论将放在沸点详情页面展示」并且我们页已经添加了沸点详情页面组件，只是内容暂时还空着。在接下来的几次分享中我们将致力于沸点详情的分享。
沸点详情布局分析
在开始分享之前我们先来分析下官方的沸点详情页的组成，如下图：
首先详情页主要分为两大块：沸点内容区和评论区；
沸点内容区由作者信息，沸点内容以及操作按钮等部分组成。而评论区则包括：评论文本框，热门评论和全部评论三块内容组成。另外还有个细节就是，在热门评论中还有可能会包涵很多评论信息，但是这些评论不是全部展示的，而是只展示几条评论，然后再通过点击“查看更多”来加载更多的评论信息，有点类似于分页加载，所以整个页面的内容还是稍微有点复杂的，我们将分为三到四次进行分享，今天我们先来分享沸点内容区的实现。
沸点内容展示
通过上面的布局分析我们知道沸点内容页主要包括：作者头像、昵称、发布时间、关注状态、沸点内容、所属主题、评论数和点赞等，而在看下我们之前分享过的评论列表页，每条沸点内容好像也是由这些信息组成，唯一不同的是沸点详情页少了个关注状态，并且把热门评论放在了下面的区块中，这样一来沸点详情页中的内容实现起来也就简单了，我们只需把之前列表页中的内容拷贝过来改造一下就可以了。大概实现思路如下：
- 首先在打开之前新建AllReply.vue文件，给该文件添加一个标题组件：van-nav-bar用于返回上一页
- 将沸点列表页中关于沸点内容的代码拷贝过来，去除掉热评相关代码并添加展示关注状态的代码（之前已经封装好了的comment.vue）
- 在setup方法中接收列表页传过来的参数，也就是沸点的唯一id
- 根据上述获取到的id去请求detail接口从而获取到沸点的内容信息（包括作者信息及评论信息等） 核心代码及效果图如下：
<template>
<van-nav-bar
title="标题"
left-text="返回"
left-arrow
@click-left="onClickLeft"
/>
<div class="detail-box">
<comment
:avatar_large="pin.author_user_info.avatar_large"
:user_name="pin.author_user_info.user_name"
:job_title="pin.author_user_info.job_title"
:company="pin.author_user_info.company"
:ctime="pin.msg_Info.ctime"
:origin_content="pin.msg_Info.content"
:sub_content="pin.msg_Info.sub_content"
:comment_id="pin.msg_Info.msg_id"
:pic_list="pin.msg_Info.pic_list"
:is_followed="true"
/>
<div style="display: flex">
<div class="belong-topic" v-show="pin.topic.title">
{{ pin.topic.title }}
</div>
<div style="flex: 1 1 auto"></div>
<div
class="digg-container digg-box is-link"
v-show="pin.digg_user.length > 0"
>
<div data-v-4e60c69e="" class="list">
<img
v-for="digg in pin.digg_user"
:key="digg.user_id"
:src="digg.avatar_large"
alt=""
class="lazy avatar item"
/>
</div>
<span data-v-4e60c69e="" class="label">等人赞过</span>
</div>
</div>
<div class="operation">
<div class="share"><van-icon name="share-o" />分享</div>
<div class="comment">
<van-icon name="chat-o" />
{{ pin.msg_Info.comment_count }}
</div>
<div
class="digg"
:class="{ active: pin.user_interact.is_digg }"
@click="digg(pin.msg_id, pin.user_interact.is_digg)"
>
<van-icon name="good-job-o" />{{ pin.msg_Info.digg_count }}
</div>
</div>
</div>
</template>
setup() {
const route = useRoute();
const state = reactive({ pin: {} });
const onClickLeft = () => {
history.back();
};
const msg_id = route.params.msg_id;
api.detail(msg_id).then((res) => {
console.log(res.data);
res.data.msg_Info.sub_content = res.data.msg_Info.content.substring(
0,
80
);
res.data.msg_Info.content.length >= 80
? (res.data.msg_Info.sub_content += "...")
: null;
res.data.msg_Info.show_content = res.data.msg_Info.sub_content;
state.pin = res.data;
});
const digg = (itemid, is_digg) => {
};
return {
...toRefs(state),
onClickLeft,
digg,
};
},
总结
今天的分享中我们分析了沸点详情页的组成，沸点内容区块的思路分析以及最终实现了沸点详情页中的沸点内容展示功能，明天我们将实现沸点详情页中的热评模块功能。今天的分享就到这里了，喜欢的话欢迎给个赞哦！
