“This is the 16th day of my participation in the First Challenge 2022. For details: First Challenge 2022”

preface

Hello, everyone, the previous few articles have been shared in the realization of the core functions of the lottery page (no drawing, single drawing and ten consecutive drawing), to this point we have basically realized more than half of the lottery page functions, the whole lottery page is still left lucky value, grand prize watching and winning broadcast display functions. In this sharing, we will realize the function of lucky value and grand prize viewing. The diagram below:

Lucky value

In order to meet the long draw not small winning desire, I do not know when the official nuggets provided a lucky value function, each lucky draw can increase 10 lucky value, every day can also be happy with 10 lucky value, when the lucky value reached 6000 can be in a gift, also finally give a person a kind of hope. Let’s also implement the lucky value function. The lucky value is divided into two parts: Current lucky value Indicates the progress of the current lucky value. My_luck, a get request, returns an object containing the luck value: my_luck

  • Start by wrapping the API – my_luck in the NodeJS backend
  • Go to the official website and copy the relevant elements and styles directly
  • Define a reactive attribute luckValue to receive the lucky value data that comes back from the request
  • Define another calculation attribute, process, to calculate the percentage width of the luckValue progress bar by dividing the luckValue data by the total value of 6000

The core code and renderings are as follows:

 <div id="progress-guide-box" class="lucky-wrap lucky-progress-wrap">
      <div id="progress-wrap" class="progress-wrap">
        <span class="title">Lucky value</span>
        <div class="progress-box">
    </div>
Copy the code
api.myLuck().then((res) = >{your mother mumu mumu mumu mumu,return (state.luckValue / 6000) * 100 + "%";
    });
Copy the code

Awards onlookers

Next is the big prize onlooker function, every time to see others win the big prize can not help but also to draw a few times, but no matter how to draw the end is a lonely. Well, without further ado, let’s continue to watch the awards. The grand prize spectator function is not difficult from a technical point of view, but it is cumbersome when debugging the style. Award onlookers in the elements and style is directly from the official website copy, although the style is directly copy over, but in the page style is also no less spent time, wasted a lot of effort. After some analysis, the background interface involved in the spectator award module is global_big for POST request, and the returned data format is as follows:

  • Encapsulate the globalBig interface in the NodeJS backend service to mine official request data
  • Define a reactive property globalBig to receive data returned by the interface
  • V-for loop is used to output the data results in the interface

However, we encountered a problem in the implementation process. We also called the official global_big backend interface, and the result returned by us is not the same as the official result. We haven’t found out the reason, so we render it like this for now. In addition to the grand prize onlookers in addition to the CCTV is more complicated, there is no other difficult point. The following is directly posted js core source code and renderings:

api.globalBig().then((res) = > {
      state.globalBig = res.data.lotteries;
    });

    const luckUsers = computed((users) = > {
      let userNames = [];
      users.forEach((item) = > {
        userNames.push(item.user_name);
      });
      return userNames.join("、");
    });
Copy the code

conclusion

Today’s sharing actually took a day to realize, the main time was spent on the UI style debugging, and the final award viewing effect is not the same as the official, the specific reason has not been identified, tomorrow will continue debugging, today’s sharing is here first. Like small partners welcome to like and pay attention to!