This is the ninth day of my participation in the First Challenge 2022. For details: First Challenge 2022.

preface

Everybody is good, we have achieved in the last to share the daily attendance status of dynamic binding, continuous sign in the number of days and cumulative ore dynamic binding, and the number of access to the ore show every day, in the main functions of the calendar has a basic implementation, today, we continue to improve our sign in page, calendar to repair some of the calendar of the fringes. This sharing mainly realizes the following functions:

  • Show the number of replacement cards and check-in rules
  • Go to the lottery and go to the cash button display
  • Today’s horoscope
  • Underwater Nuggets Challenge presentation
  • My task (the specific function of this module is left blank because there is no specific implementation officially, so we will not implement it for the time being)

The official picture is as follows:

Upgrade the check-in days module

First of all, it is necessary to transform the check-in days module. The whole check-in days module is divided into upper, middle and lower layers. The upper layer shows the make-up card and the check-in rules, the middle layer shows the continuous check-in days and the cumulative number of ores, and two buttons “go lottery” and “go exchange” are added at the bottom layer. The interface used by this module is as follows: get_cur_supp GET Request is used to obtain the current number of replacement cards. In addition, the “check-in rules” here are simply shown, and the specific rules will not be displayed in the popup window.

  • Add a div layer to the original checkin-count div
  • Add two more divs before and after the checkin-count div in the newly added div to show the number of make-up cards and the go raffle button
  • Get_cur_supp is asked in the setup function to get the number of complementary cards and bind them to the template
  • Click the “Go to draw” and “Go to cash” buttons to jump to the “draw” and “cash” pages respectively

The source code is as follows:

<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">Supplementary cards: {{reSignCardCount}} cards</div>
          </div>
        </div>
        <div
          style=" float: right; color: #bbb; font-size: 14px; margin-right: 8px; margin-top: 5px; "
        >Sign-in rules</div>
      </div>
      <div class="checkin-count">.</div>
      <div style="text-align: center; padding-bottom: 20px">
        <div class="luck-button">To draw > ></div>
        <div class="luck-button" style="margin-left: 8px">To change > ></div>
      </div>
    </div>
Copy the code
 api.getSignCard().then((res) = > {
      state.reSignCardCount = res.data;
    });
Copy the code

There’s too much style code to post here, but if you’re interested you can tune it yourself.

Total number of check-in days and display of seabed Mining challenge

The total number of check-in days and the Ads for The Underwater Challenge were revamped in conjunction with the official website. The accumulated check-in days and the Underwater Challenge are relatively simple. The total number of check-in days is to add a div style below the calendar component and adjust it slightly. The data of the total number of check-in days has been obtained in the previous sharing, which can be used directly here. Undersea challenge advertising is also very simple, directly to the official website below directly copy the source of the advertising over the transformation of the line, the following directly posted the source code, the same as the style code is too long, here is omitted not posted, interested in their own tune or directly to the following message

   <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; "
    >Cumulative check-in days: {{totalDays}} days</div>
    <div class="sea">
      <a
        target="_self"
        href="https://juejin.cn/game/haidijuejin/?utm_campaign=hdjjgame&amp;utm_medium=user_center"
      ></a>
    </div>
Copy the code

Today’s horoscope

Today’s horoscope module is mainly divided into three layers, the upper layer is a big background and shows today’s date, the middle layer is today’s specific horoscope is divided into abbreviations and descriptions, and the bottom layer is an advertisement for rare earth nuggets.

  • In the upper layer, we first pull a large background image and set it to be the same as the official one, and then display today’s date in the middle of the div. The style can be different from the official one, depending on personal preference
  • The middle layer shows today’s fortune and description, which is also relatively simple. You just need to get the data from the background interface and display it. The interface involved here is get_coder_calendar, and the GET request is used to request fortune data
  • The bottom layer is the official advertising, or as usual directly open source copy can be used

Source:

<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="">Scan the qr code on the right and share it with your friends</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>
Copy the code
 api.getLuck().then((res) = > {
      state.luckShort = res.data.should_or_not;
      state.luckDesc = res.data.aphorism;
    });
Copy the code

conclusion

After days of sharing, we sign in status page functions has been basically perfect, the feature is all about, subsequent xu need to implement rules is click sign-in rules button pop-up sign in information, click go sweepstakes and page button to jump to draw and exchange, improve the function of this on the sign-in page has a basic implementation, style is also a little too ugly, You can adjust it yourself if you’re interested. This is the end of today’s sharing. Here are the complete renderings of the sharing.