【项目实战】基于Vue3+Vant3造一个网页版的类掘金app项目 - 徽章墙

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

前言

大家好,在上一篇文章我渲染分享中我们实现了个人中心首页的数据动态加载。关于个人中心首页的布局和数据渲染已经完成，那么还涉及到一些相关联的页面（点击链接后具体跳转的页面）还没实现，比如点击徽章进入到的徽章墙页，点击个人主页进入到个人主页页面，点击创作者中心进入到创作者中心页面等，而其他一些菜单链接基本都已经有相关的页面实现了，所以直接链过去即可。在剩下的3个篇幅分享中我们将分别实现一下：徽章墙、个人主页和创作者中心页面。今天我们先来分享徽章墙实现。

布局分析

如上图是关于徽章墙页面的布局设计图，主要分为两大块：上半部分个人信息块和下半部分的徽章墙列表。其中个人信息包括：头像、昵称、当前佩戴的徽章以及所获得的总徽章数。而徽章墙列表会把本年度所有徽章全部展示出来，已获得的徽章会亮起并展示获得时间，如果还未获得的徽章就是灰色的并配文“暂未获得”。

顶部的个人信息主要涉及的技术点就是水平垂直居中，只要这个布局设计好，其他的就是拿到数据直接渲染上去即可。而下面的徽章列表，2021年度系列一共有三行三列共9枚徽章，这个我们可以采用grid布局（display：grid）

数据渲染

在web版的徽章墙页面有这样一个接口“user_api/v1/badge/list”，其返回的数据包含两部分badge_info和user_info，也就是徽章信息数据和个人信息数据。如下图所示

个人基本信息的数据渲染，我们可以直接从user_info对应中获取绑定，这里有一点需要注意的是，在本次分享的个人信息中多了一个佩戴徽章的功能，也就是在昵称后面会的那个小图标，在接口获取到的数据中有个badges.wear_badges对象，这个就是当前所佩戴的徽章数据。

<div class="badge-header">
  <div class="user-info">
    <div class="avatar-box">
      <img :src="badgeInfo.user_info.avatar_large" class="avatar" />
    </div>
    <div class="user-name">
      <span class="badge-username">
        {{ badgeInfo.user_info.user_name }}
      </span>
      <img
        :src="badgeInfo.user_info.badges.wear_badges[0].image_url"
        class="badge-icon"
      />
    </div>
    <div class="obtain-count">
      已获得 {{ badgeInfo.user_info.badges.obtain_count }} 枚徽章
    </div>
  </div>
</div>

徽章列表数据同样也包含了两部分，分别是徽章的列表数据和系列数据（如2021年度系列），也就是说页面上的那个“2021年度系列”标题也是从后台获取得到的。而徽章数据又可拆分为两部分，一部分是徽章的基本信息i（如徽章名称，徽章图片地址等），而另一部分则是跟用户相关的（比如是否获得到该徽章，及获得的时间等信息）。

<div class="badge-list">
      <div class="badge-list-wrap">
        <ul>
          <li class="serie">
            <div class="serie-title">
              ...
              <div class="title">
                {{ badgeInfo.badge_info[0].series.series_name }}
              </div>
             ...
            </div>
            <ul class="badge-icon-list">
              <li
                class="badge-icon-item"
                v-for="item in badgeInfo.badge_info[0].badges"
                :key="item.badge.badge_id"
              >
                <div class="badge-item-icon">
                  <!-- :class="{ 'not-obtain': item.user_badge.status === 0 }" -->
                  <img :src="item.badge.image_url" />
                </div>
                <div class="badge-desc">{{ item.badge.badge_name }}</div>
                <div class="obtain-date">
                  {{ dateConvert(item.user_badge.obtain_time) }}
                </div>
              </li>
            </ul>
          </li>
        </ul>
      </div>
    </div>

setup() {
    const state = reactive({
      badgeInfo: {},
    });

    api.badgeList().then((res) => {
      state.badgeInfo = res.data;
      console.log(res.data);
    });

    const dateConvert = (date) => {
      return utils.getLocalDate(date);
    };

    return {
      ...toRefs(state),
      dateConvert,
    };
  },

总结

本次分享我们实现了徽章墙页面功能，用到的知识点盒子的水平垂直居中和grid布局。关于徽章墙的分享就到这里了！