一起养成写作习惯！这是我参与「掘金日新计划 · 4 月更文挑战」的第16天，点击查看活动详情。
前言
大家好，在上一篇文章圈子搜索中我们首先边把我加入的圈子和圈子广场中冗余代码圈子列表进行了抽取和封装，实现了代码的重用。最后还利用封装好的圈子列表实现了圈子广场中的圈子搜索功能。今天我们将继续下一步分享：实现圈子详情功能
圈子详情
关于圈子列表的一些基本功能已经完成了分享，那么无论是在我加入的圈子、圈子广场还是搜索的圈子中，当点击具体某个圈子时，会进入到一个新的页面 - 圈子详情页。
如下图所示，进入到圈子详情页后首先页面顶部会显示当前圈子的详细信息，主要包括圈子标题，当前沸点数，已加入的掘友数以及圈子描述等信息。而页面的下半部分呢则是当前圈子下的沸点列表，可按热门或最新进行排序。
下面我们就来实现一些这个圈子详情页面：
虽然圈子详情是一个全新的页面，但是如果我们仔细分析一下会发现：不管是圈子详情还是圈子下面的沸点内容都是我们之前做过，甚至有些内容我们还做了封装，因此这个详情页面实现起来也并不难。
- 首先新建一个TopicDetails.vue，并为该页面配置相应路由，由于这个页面是从其它页面跳转过来，并且需要根据圈子id查询圈子信息，及圈子下的沸点信息，因此这个路由应该配置为参数路由
- 在页面的顶部添加一个van-icon 左箭头图标用于返回上一页
- topic详情我们可以直接将我们前面封装好的topiclist组件导入，直接使用即可
- 在topic-list组件下添加div盒子用于展示圈子描述信息
- 下面的沸点列表可以直接使用前面封装好的comment组件
- 然后通过chrome分析获取到相关的后台接口，直接拿到数据渲染到页面上即可
- 另外还需修改topic-list组件，给该组件添加点击事件用于跳转到圈子详情页 核心代码及效果图：
<template>
<div class="topic-details-box">
<div class="topic-info-box">
<div class="back" @click="toBack">
<van-icon name="arrow-left" size="20px" />
</div>
<topic-list :data="[topic]" :isJoin="false" />
<div class="topic-desc">
{{ topic.topic.description }}
</div>
<div class="more">更多详细信息></div>
</div>
<div class="topic-list-box">
<div class="comment" v-for="msg in pinList" :key="msg.msg_id">
<comment
:avatar_large="msg.author_user_info.avatar_large"
:user_name="msg.author_user_info.user_name"
:job_title="msg.author_user_info.job_title"
:company="msg.author_user_info.company"
:ctime="msg.msg_Info.ctime"
:origin_content="msg.msg_Info.content"
:sub_content="msg.msg_Info.content"
:comment_id="msg.msg_Info.msg_id"
:pic_list="msg.msg_Info.pic_list"
/>
<div class="hot-comment" v-show="msg.hot_comment.comment_info">
<div class="hot-title">
...
</div>
</div>
<div style="display: flex">
<div class="belong-topic" v-show="msg.topic.title">
{{ msg.topic.title }}
</div>
<div style="flex: 1 1 auto"></div>
<div
class="digg-container digg-box is-link"
v-show="msg.digg_user.length > 0"
>
...
</div>
</div>
<div class="operation">
...
</div>
</div>
</div>
</div>
</div>
setup() {
const route = useRoute();
const router = useRouter();
const state = reactive({
topic: {},
pinList: [],
});
const topic_id = route.params.topic_id;
api.queryTopicDetail(topic_id).then((res) => {
state.topic = res.data;
});
const toBack = () => {
router.back();
};
api.topic("0", 500, topic_id).then((res) => {
state.pinList = res.data;
});
return {
...toRefs(state),
toBack,
};
}
总结
本次分享我们实现了圈子详情功能，其中还用到了之前封装好的topic-list组件用于显示圈子信息，和comment组件用于展示圈子下面的沸点信息。整体功能是基本实现了剩下的还有一些细节信息和查看更多详细信息暂未实现，我们将在下一次分享中继续，本次分享就到这里了，喜欢的小伙伴欢迎点赞关注加评论哦！ 感谢！
