I. Project Background

Internal company data and security redlines only discuss technical details and do not disclose related interactions and designsCopy the code

Interaction and vision

Overall vision:

Raffle module: it is probably based on the petals of a flower as the background of the raffle, and different petals light up when rotating

   

Analyze the problems to be solved

When it is something that has not been done before, at this time it is necessary to analyze the problems that need to be considered to complete the effect, and then decompose the analysis, and then gradually implement it, analyze and summarize the problems encountered, and whether there are any that have not been taken into account.

In fact, this kind of lottery module is very common in the active page now, especially in the active page.

First, we sorted out the TODO List

  1. It needs to be written in the form of a component for easy reuse, and it needs to consider the parameters that the component needs to pass, etc.
  2. The back end is in the form of an interface, that is, when the user clicks on the lottery, they have already received the winning information
  3. The front end needs to execute the animation of the lottery rotation. The animation’s time, rotation rate, prohibition of repeated clicking during rotation and initial pointer position all need to be controlled by the front end.
  4. State management, according to different lottery times, distinguish whether login, whether in the APP and other corresponding states for processing, popup or jump to the corresponding URL
  5. Front-end burying point is related to data reporting.
  6. The problem of style, the idea of design interaction is actually a nine-grid lottery, but the visual style is inclined to pointer class roulette lottery, the logical level is tentatively in accordance with the idea of nine-grid to achieve, but the style needs to be adjusted
  7. The result of the lottery also needs to be written as a popover component and the parameters passed in need to be defined
  8. Exception display, when the interface call fails, the backend database is out of stock, and so on need the corresponding Warning popup component

Iv. Specific Design

4.1 Encapsulate as a public component, mainly to define the parameters passed by the component. First, the lottery component needs to be called on the home page, and three parameters must be passedCopy the code

ShowLuckDraw // Whether to display the lucky draw module. If the user has already drawn the prize, the module is not displayed by default and the result of the lucky draw is displayed directly

UserStatus // userStatus: this information is returned by the home interface and needs to be passed into the component

DrawStatus // drawStatus:

You also need to pass parameters to the raffle results component, a child of the raffle component

            showSpecial&&type

props: {
  // Whether to display the lottery module. If the user has already drawn the lottery, the module will not be displayed by default, and the lottery results will be displayed directly
  showLuckDraw: {
   	type: Boolean
  },
  // User status
  userStatus: {
    type: Number.required: true
  },
  // Lucky draw status 0: jump to the activity page 1: need to increase the number of lucky draw through the activity 3: no lucky draw
  drawStatus: {
    type: Number.required: true
  },
  // Whether logged in or not hoisted the logon component
  hasLogin: {
    type: Boolean.required: true
  },
  // A special popup displays the results of the lucky draw
  showSpecial: {
    type: Boolean.default: false
  },
  // The values passed to the lucky draw popover display the corresponding lucky draw results
  type: {
    type: Number.required: true,}},Copy the code
4.2 Lucky Draw Animation (core logic)Copy the code

The core idea is that when the lottery is clicked, the backend interface is called and the initial parameters required by the turntable are set, including the following

Diff speed accumulation variable, control gradually speed up/gradually slow down star start button click state, if the user is unable to draw, directly disable speed lottery initial speed isDisable Whether to disable the start lottery button to prevent repeated lottery, ensure that the lottery can be drawn again after the end of the animation, DrawStatus sets the initial value of the lottery status. StartTime records the startTime of rotation to control the animation durationCopy the code

At the same time, set a timer, roulette background picture switch in turn to achieve animation effects, use of milliseconds of regular intervals for speed control, when reached the preset rotation time, start slow movement, and if the backend back front set the id and the prizes are id can correspond, timer, At the same time return abort function, and reset the state value of the turntable, complete the lottery animation.

The simple JADE used in THE HTML part was not suitable for me at the beginning, but after I got used to it, I felt very simple and clean, and there was no need to look for class in a large section of HTML code

<template lang="jade">
  .award-box(v-if="showLuckDraw")
  	.award-bg
  		.award(:class="'active' + (current)")
    button.start-btn(
      @click="start",
      :disabled="isDisable"To:class="star ? 'star': '' ").award-num Current number of lucky draw i. ward-n {{currentNum = +this.drawStatus === 2 ? 1 : 0}} I times special - dialog (: show - special ="showSpecial", :type="id")
</template>



 move() {
    if (timeout) clearTimeout(timeout);
    const timeout = setTimeout( () = > {
        this.current++; // Toggle the background image, the initial value can be set arbitrarily
        if ( this.current > 4) { // Since there are only 5 prizes, reload the first image when current starts from 0 and is greater than 4
            this.current = 0;
        }
        // If the prize ID exists and the rotation time is longer than 2 seconds, the rotation will start to slow down
        if ( this.award.id && ( Date.now() - this.startTime ) / 1000 > 2 ) {
            this.speed += this.diff; // Rotate and decelerate
            // If the rotation exceeds 4 seconds and the prize ID is equal to the prize ID of the grid, stop
            // this. Awards is the result of winning the prize from the back end, if it corresponds to the corresponding prize ID of the front end, it is the winner
            if((Date.now() - this.startTime ) / 1000 > 4 && this.award.id == this.awards[this.current].id ) {
                clearTimeout( timeout );
                this.star        = false;
                this.isDisable   = false;
                this.showSpecial = true;    // Call the raffle results component
                this.type        = this.id; // Assign the winning result to type to display the corresponding raffle result component
                setTimeout( () = > {
                    console.log(this.award.id);
                },0);
                return; // Stop the timer after winning the lottery
            }
        // If the prize does not exist, speed up the rotation
        } else { 
            // todo: If the back end interface 200 returns a wrong winner, an exception can be handled here
            this.speed -= this.diff;
        }
        this.move();
    }, this.speed );
  },
Copy the code
4.3 State management, before calling move() lottery animation, the corresponding user state is processed, such as unlogged suspended login, no number of times to obtain the number of times, no lottery call popover, etc. 4.4 Buried point here in the tool function package a common function, directly call pass parameter record buried point information, There are some problems with the 4.5 style when it comes to embedding pointsCopy the code
  • The initial idea was to only change the background picture of petals, but in the end, it was found that the picture was irregular and angular, so it was difficult to locate accurately. And the calculation of the positioning position is different in different models, so the replacement of the overall picture is adopted
  • The whole image replacement encountered another flicker problem:
    • Cause: When the picture petals rotate, the change of each petal is visually only, but actually the change of the whole picture. The background picture is replaced by dynamic switching calSS. Because of this, new problems arise, when the code build deployment package online, send less than static resource will generally have a single server, that is to say the picture resource requests will have certain delay, which leads to load click on the draw for the first time, page rotation will be flashing petals, and the second image will go cache, so this problem only once, But it is deadly
    • Solutions: Changing the URL to base64 Data URL is actually the use of Base64 encoding to translate the image Data into standard ASCII characters. Data URL is directly drawn locally, not loaded from the server, so it saves HTTP connection and plays the role of accelerating web pages. The downside is that Internet Explorer 8 and below doesn’t support this method (it’s certainly supported in apps, and most phones). This method will increase the client’s CPU and memory burden, in short, pros and cons, and not suitable for large pictures, for this picture to find a UI to replace the smaller picture, in order to reduce the client’s memory burden.

4.6 For the popover of winning results, encapsulate another component, and only need to pass the parameter of type to display different winning results. Similarly, there are popover components hanging in the global popover, which will throw error popups in time when exceptions occurCopy the code

Summary and reflection

Although there are many active pages and the interaction is complex, it can encapsulate some common components as much as possible, provide the basic skeleton, and only need to modify some CSS can quickly complete a function.

In addition, for things that have not been done, we should analyze them in detail, break them down into steps and complete them step by step. At the same time, we should reserve a certain buffer time. Most importantly, we should often summarize and reflect to find our own shortcomings and improve ourselves in busy work.