【项目实战】基于Vue3+Vant3造一个网页版的类掘金app项目 - 更多详情

一起养成写作习惯！这是我参与「掘金日新计划 · 4 月更文挑战」的第18天，点击查看活动详情。

前言

大家好，在上一篇文章圈子优化的分享中，我们对以下三点内容进行了简单优化：展示圈子中的未读沸点数、圈子下沸点列表按最新/最热排序，点击查看更多详情跳转到圈子的更多详情页。而关于圈子的更多详情页我们仅仅是实现了页面的跳转，页面中的内容还是空的，今天的分享我们就来实现一个这个更多详情页中的内容。

更多详情

如上图所示是官方app的更多详情页布局，我们可以看到整个页面被分为四大块：圈子基本信息、圈子公告、圈子管理员和圈中掘友。其中圈子的基本信息跟前面分享的圈子详情中的基本信息是一样的，可以直接拿来主义直接使用。圈子公告也很简单，仅仅是做一下文本展示即可。剩下的就是圈子管理员和圈中掘友两个列表模块，但不管是管理员还是掘友其实都是属于用户信息，无非就是一个展示的内容稍微多一点，一个少一点，本质上还是一样的，因此本次的实战分享依然没有什么技术难点。下面我们来分析一下具体实现思路：

• 基于昨天新建的TopicDetailsMore.vue进行开发
• 将TopicDetails.vue中“topic-box”盒子下的代码及相关样式直接拷贝过来，并做适当调整
• 在topic-box盒子下添加三个topic-notice盒子，因为圈子公告，圈子管理员和圈中掘友三个模块的布局都是一样的，都是由标题和内容组成，因此这里直接添加3个放置对应的三个模块
• 然后再在topic-notice下分别添加notice-title和notice-content两个子盒子，用于展示模块标题和内容
• 在官方接口“tag_api/v1/query_topic_detail”返回给我们的数据中包括圈子公告和圈子管理员信息，直接获取绑定即可
• 在官方另一个接口“interact_api/v1/follow/follower_list”返回给我们的数据中则包含了加入该圈子的掘友信息

核心代码及效果图如下：

<div class="topic-box">
    <div class="topic">
      <van-image :src="topic.topic.icon" />
      <div class="topic-content">
        <div class="topic-title">{{ topic.topic.title }}</div>
        <span class="topic-info"
          >{{ topic.topic.follower_count }}掘友·
          {{ topic.topic.msg_count }}沸点</span
        >
      </div>
    </div>
    <div class="desc">{{ topic.topic.description }}</div>
  </div>
  <div class="topic-notice">
    <div class="notice-title">圈子公告</div>
    <div class="notice-content">
      {{ topic.topic.notice }}
    </div>
  </div>
  <div class="topic-notice">
    <div class="notice-title">圈子管理员</div>
    <div class="notice-content">
      <div class="author" v-for="aut in topic.admin_users" :key="aut.user_id">
        <van-image class="photo" round :src="aut.avatar_large" />
        <div style="display: flex; flex-direction: column; flex: 1">
          <div class="author-title">{{ aut.user_name }}</div>
          <div class="pub-time">{{ aut.job_title }} @ {{ aut.company }}</div>
        </div>
        <div class="follow">
          {{ topic.user_interact.is_follow ? "已关注" : "关注" }}
        </div>
      </div>
    </div>
  </div>
  <div class="topic-notice">
    <div class="notice-title">圈中掘友</div>
    <div class="notice-content">
      <div class="author" v-for="item in followerList" :key="item.user_id">
        <van-image class="photo" round :src="item.avatar_large" />
        <div class="author-title">{{ item.user_name }}</div>
        <div class="follow">{{ item.isfollowed ? "已关注" : "关注" }}</div>
      </div>
    </div>
  </div>
复制代码

setup() {
    const state = reactive({
      topic: {},
      followerList: [],
    });
    const route = useRoute();
    const { topic_id } = route.params;

    api.queryTopicDetail(topic_id).then((res) => {
      state.topic = res.data;
      console.log(res.data);
    });

    api.followerList("0", topic_id).then((res) => {
      state.followerList = res.data;
    });
    return {
      ...toRefs(state),
    };
  }
复制代码

总结

本次分享我们实现了圈子的更多详情功能，主要包括圈子基本信息，圈子公告，圈子管理员和加入该圈子的掘友列表4大模块。到此关于圈子和沸点相关的功能点就全部分享完了，下一篇文章开始我们将进入到下一个章节（发现）的功能分享。今天的分享就先到这里了，喜欢的小伙伴欢迎给给小赞哦！感谢支持！