【项目实战】基于Vue3+Vant3造一个网页版的类掘金app项目 - 签到页面完善大家好，在上一次分享中我们已经实现了

「这是我参与2022首次更文挑战的第10天，活动详情查看：2022首次更文挑战」。

前言

大家好，在上一次分享中我们已经实现了每日签到状态的动态绑定、连续签到天数和累计矿石数的动态绑定以及每天获取到的矿石数的展示，签到日历的主要功能已经基本实现，今天我们继续来完善我们的签到日历页面，来修缮一些日历的边边角角。本次分享主要实现如下功能：

补签卡数及签到规则的展示
去抽奖和去兑换按钮的展示
今日运势展示
海底掘金挑战赛展示
我的任务（这个模块具体功能由于官方也没有具体实现，只是留空在了那里，所以我们也就暂不实现了）官方图如下：

微信图片_20220201214646.jpg

签到天数模块改造

首先需要对签到天数模块进行改造，将整个签到天数模块分为上中下三层，上层显示补签卡和签到规则，中间层显示连续签到天数和累计矿石数，最底层添加“去抽奖”和“去兑换”两个按钮。该模块需要用到的接口：get_cur_supp get请求用于获取当前补签卡数。另外这里的“签到规则”仅简单展示一下即可，具体的规则就不做弹窗展示了。

将原来的签到天数模块（class为checkin-count）的div外面在套一层div
在新添加的div中的checkin-count div前和后分别再添加两个div，分别用于展示补签卡数和去抽奖按钮
在setup函数中请求get_cur_supp 获取补签卡数并绑定给模板
点击去抽奖和去兑换按钮分别跳转到抽奖页面和兑换页面源码如下：

<div class="checkin-module">
      <div>
        <div style="float: left; margin-left: 8px; margin-top: 5px">
          <div style="height: 24px; line-height: 24px">
            <van-image :src="reSignCard" style="width: 21px; height: 24px" />
            <div style="display: inline-block; color: #fff; font-size: 14px">
              补签卡：{{ reSignCardCount }}张
            </div>
          </div>
        </div>
        <div
          style="
            float: right;
            color: #bbb;
            font-size: 14px;
            margin-right: 8px;
            margin-top: 5px;
          "
        >
          签到规则
        </div>
      </div>
      <div class="checkin-count">
        ......
      </div>
      <div style="text-align: center; padding-bottom: 20px">
        <div class="luck-button">去抽奖 >></div>
        <div class="luck-button" style="margin-left: 8px">去兑换 >></div>
      </div>
    </div>

 api.getSignCard().then((res) => {
      state.reSignCardCount = res.data;
    });

关于样式代码太多了这里就不再贴出了，大家有兴趣可以自己调一下。

累计签到天数及海底掘金挑战赛展示

累计签到天数和海底挑战赛的广告是结合着官方网页来改造的。累计签到天数和海底挑战赛都比较简单。累计签到天数就是紧接着日历组件在下面添加一个div样式稍微调整一下即可，累计签到天数的数据已经在前面的分享总拿到了，这里直接使用即可。海底挑战赛的广告也很简单，直接到官网下面直接将广告的源码复制过来改造一下就行了，下面就直接贴出源码，同样应为样式代码太长了，这里就省略不贴出了，有兴趣的自己调一下或者直接下面留言获取

   <div
      style="
        height: 72px;
        line-height: 72px;
        background: #e8f3ff;
        border-radius: 10px;
        margin-left: 5px;
        margin-right: 5px;
        margin-top: 8px;
        text-align: center;
        font-size: 16px;
        color: #1e80ff;
      "
    >
      累计签到天数：{{ totalDays }} 天
    </div>
    <div class="sea">
      <a
        target="_self"
        href="https://juejin.cn/game/haidijuejin/?utm_campaign=hdjjgame&amp;utm_medium=user_center"
      ></a>
    </div>

今日运势展示

今日运势模块主要也分为上中下三层，上层是一个大背景图并显示今天的日期，中间层则是今天具体的运势主要分为缩写和描述，而最下面则是稀土掘金的一个广告。

上层我们先拉一个大的并设置上与官方一样的背景图，然后再在该div的中间将今天的日期展示出来，样式可以与官方不同，看个人喜好
中层则显示今天的运势及描述，这个也比较简单只需要从后台接口中拿到数据展示出来即可。这里涉及到的接口为：get_coder_calendar，get请求用于请求运势数据
最底层是官方的广告，还是老样子直接打开源码复制过来使用即可源码：

<div class="luck-today">
      <div class="luck-today-top">
        {{ new Date().toString("yyyy.MM.dd") }}
      </div>
      <div class="luck-today-middle">
        <div style="font-size: 24px; color: #1e80ff; margin-left: 20px">
          {{ luckShort }}
        </div>
        <div style="margin-left: 20px">
          {{ luckDesc }}
        </div>
      </div>
      <div class="luck-today-bottom">
        <div class="logo-text" data-v-357c54b7="">
          <img
            src="https://lf3-cdn-tos.bytescm.com/obj/static/xitu_juejin_web/e08da34488b114bd4c665ba2fa520a31.svg"
            alt="juejin-logo"
            class="logo"
            data-v-357c54b7=""
          />
          <div class="text" data-v-357c54b7="">扫描右侧二维码分享给好友</div>
        </div>
        <img
          src="https://lf3-cdn-tos.bytescm.com/obj/static/xitu_juejin_web/img/web-qrcode.90661f6.png"
          style="width: 48px; height: 48px"
        />
      </div>
    </div>

 api.getLuck().then((res) => {
      state.luckShort = res.data.should_or_not;
      state.luckDesc = res.data.aphorism;
    });

总结

经过几天的分享，我们签到状态页面功能已经基本完善了，该有的功能也都差不多有了，后续徐需要实现的是点击签到规按钮弹出签到规则信息，点击去抽奖和去兑换按钮实现跳转到抽奖和兑换页面，本次关于签到页面的完善功能都已基本实现，就是样式还稍微丑了点，如果有兴趣的可以自行调整下。今天的分享就到这里的，下面附上这几次分享的完整效果图。