一起养成写作习惯！这是我参与「掘金日新计划 · 4 月更文挑战」的第13天，点击查看活动详情。
前言
大家好，截止目前关于沸点列表及沸点评论相关的功能分享就基本告一段落了，虽然功能上都基本实现了但代码写的很糙，有时间再回过头来优化吧。接下来的分享中我们将进入下一个主题 - 圈子。
如上图所示，是我们前面在分享沸点列表时遗留下来的一个圈子模块，默认展示的是系统推荐的圈子
- 当点击具体的某个圈子后会进入到一个新的页面，并且加载该圈子下面的相关沸点内容
- 当点击发现更多时同样也会进入到一个新的页面，但加载的内容是全部的分类圈子
- 当点击我加入的圈子时会进入到跟发现更多同样的新页面（不同的tab页展示已经加入的圈子 今天的分享我们就来实现一下我加入的圈子功能。
我加入的圈子
关于点击我加入的圈子进入到新页面功能，在前面的分享中我们已经实现了，在我们views目录下有一个Topic.vue的组件，在该页面中包含两个tab页 - 我的圈子和圈子广场，目前具体的内容还是空的，接下来的分享我们把“我加入的圈子”页面内容补充完整。
上图是官方的“我加入的圈子”页面，这里所展示的都是已经关注的圈子，内容看上去也很简单，仅展示了圈子的图片，圈子名称，关注的掘友数和该圈子下的沸点数，以及取消关注圈子的操作，下面我们也来照葫芦画瓢。
大概实现思路及效果图如下：
- 在topic.vue中的“我的圈子”tab页中定义一个topic-box盒子，用于作为圈子列表的主容器
- 在该盒子下再定义一个topic子盒子，用于承载具体的圈子内容，设置该盒子display为flex
- 在topic盒子中添加一个vant的van-image组件，设置宽高为80px，用于展示圈子的图片
- 在van-image下面添加一个topic-content盒子，设置flex为1，占满剩余空间，用于展示圈子标题和其它信息
- 在topic-opt下添加topic-opt盒子，设置宽度20px，内容为...，点击后弹出一个弹出层用于取消加入该圈子
- 最后在添加一个van-popup用于承载“取消加入”的弹出层
- 通过chrome浏览器分析出获取我加入的圈子的请求接口：/interact_api/v1/follow/topic_list_by_page
- 在setup方法中定义响应式属性topicList，并请求上面的接口获取到圈子数据
- 通过vue中的v-for指令将topicList数据循环输出展示 核心代码及效果图如下：
<div class="topic-box">
<div class="topic" v-for="item in topicList" :key="item.topic_id">
<van-image :src="item.topic.icon" />
<div class="topic-content">
<div class="topic-title">{{ item.topic.title }}</div>
<span class="topic-info"
>{{ item.topic.follower_count }}掘友·{{
item.topic.msg_count
}}沸点</span
>
</div>
<div class="topic-opt" @click="showPopup">
<van-icon name="ellipsis" size="20px" />
</div>
<van-popup v-model:show="show" position="bottom">
<div
class="cancel-follow"
@click="cancelFollow(item.topic.topic_id)"
>
取消加入
</div>
<div class="close" @click="closePop">取消</div>
</van-popup>
</div>
</div>
const state = reactive({
active: 0,
topicList: [],
show: false,
});
const route = useRoute();
state.active = Number(route.params.active) || 0;
const showPopup = () => {
state.show = true;
};
const loadMyTopics = () => {
api.myTopics().then((res) => {
state.topicList = res.data;
console.log(res.data);
});
};
const closePop = () => {
state.show = false;
};
const cancelFollow = (topic_id) => {
console.log(topic_id);
api.cancelFollow(topic_id, 11).then((res) => {
state.show = false;
loadMyTopics();
});
};
loadMyTopics();
总结
今天我们开启了一个新的主题分享 - 实现了“我加入的圈子”页面圈子信息展示功能，整体来说比较简单，主要的功能点就是集中在页面的布局上面（html+css），下一次分享将实现圈子广场中的圈子展示功能。今天的分享就到这里了，希望看到此分享的朋友帮忙给个赞，谢谢！
