“This is the 17th day of my participation in the First Challenge 2022.

preface

Hello, everyone. In the last article, we realized the crowd-viewing function, but the result we made by ourselves was different from the official one. After searching for a long time, we did not find the reason. Page_no and page_size are not passed when requesting the official interface. When you plug in these two parameters, you get the same result. Today, we will first improve the paging function of the grand prize onlookers and the last function of the lucky draw page: winning announcement.

Grand Prize Spectator Page

Page_no, page_size, page_size, page_no, page_size

  • First, the NodeJS server project needs to receive two parameters when encapsulating the globalBig route: page_NO and page_size
  • By default, only 5 pages of winning content are displayed in the front end project
  • Define a paging method, setPage, in the setup method in luck.vue and receive 1 parameter, pageNo
  • Bind each page number to the setPage method in luck.vue for paging

After the transformation of the core code and renderings are as follows:

  • Nodejs server project
router.post('/global_big'.async (ctx, next) => {
    const {
        pageNo,
        pageSize
    } = ctx.request.body;
    const {
        data
    } = await axios({
        url: `${baseUrl}lottery_history/global_big? aid=${aid}&uuid=${uuid}`.method: 'post'.headers: {
            cookie: MY_COOKIE
        },
        data: {
            page_no: pageNo,
            page_size: pageSize
        }
    });
    ctx.body = data;
    next()
})

Copy the code
  • The front-end project
const setPage = function (pageNo) {
      const pages = document.querySelectorAll(".page-code");
      pages.forEach((el) = > {
        el.className = "page-code";
      });
      if (pages.length > 0) {
        pages[pageNo - 1].className = "page-code page-code-active";
      }

      api.globalBig(pageNo, 5).then((res) = > {
        state.globalBig = res.data.lotteries;
      });
    };
    setPage(1);
Copy the code
  • rendering

The winning broadcast

Here is the final feature of the lottery page: the lottery announcement. In order to save time, the UI in the lottery broadcast function is also directly copy from the official website. Let’s analyze the official winning broadcast, in the visual range of only two winning information, and then from the bottom to the top of the rolling broadcast, and after the broadcast will automatically paging. The global_small interface is rerequested every once in a while, and each time a cumulative page_no parameter is passed. This interface is used to request the winning broadcast data and return 20 pieces of data at a time. This interface is very similar to the global_big interface for the grand prize onlookers, and the format of the results returned is the same. So this feature is relatively easy to implement. The only thing that’s a bit tricky is the bottom-up broadcast function. From the official element analysis, it can be seen that the scrolling is realized in the form of translateY, and the calculation starts from -1 again after scrolling a screen (every page turned). We can also use a timer to simulate the implementation.

  • Referring to the Global_BIG interface, a Global_small interface is encapsulated on the NodeJS server to request official lottery data
  • Define a responsive attribute globalSmall in the front end project Luck. vue to receive data returned by the interface
  • Also encapsulate a lotteryDate method to format the winning date (because the official interface returns data in timestamp format)
  • The winning data is circulated through the V-for instruction
  • Define a setInterval timer to control translageY to implement the circular broadcast function

Core code and renderings

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

    const lotteryDate = function (date) {
      let ldate = new Date(utils.getLocalTime(date));
      ldate = new Date(ldate);
      return `${ldate.getFullYear()}-${
        ldate.getMonth() + 1
      }-${ldate.getDate()}`;
    };

    let tran = 0;
    setInterval(() = > {
      tran--;
      state.translate = `translateY(${tran}px)`;
      if (tran <= -500) {
        tran = -1; }},30);
Copy the code

conclusion

Up to this point, our winning page function has been basically realized, the only deficiency is that the winning broadcast has not yet realized the automatic page turning function, so far only realized the first page of the content of the loop rolling, we will temporarily stop the lottery page, there is time to continue to improve. This time to share here, like small partners welcome shop praise attention oh!