The business scenario

This algorithm is derived from the project to realize a single pass business, according to the accumulative order amount of the user, judge the user is in the current level, unlock the corresponding benefits

The steps of the game and the amount are configured in the front end, each level corresponds to a cumulative amount, a total of 4 levels (how many levels do not matter, the main idea haha)

Train of thought

Use the array data structure to store the user’s cumulative amount of each level, and judge the user’s level according to the total amount of the current cumulative amount of the user

let step=[1000, 2500, 5000, 7000, 10000, 12500, 15000, 20000]

Such as:

When the user’s total amount is 100 yuan, 100<1000, the level is not unlocked, remind the user of the amount difference at the first level;

When the total amount is 1000 yuan, 1000==1000, the first level has been unlocked, it is necessary to remind the user to unlock the amount of the second level;

When the total amount is 2600, 2600>2500, the second level has been unlocked, need to remind the user at the third level, unlock the amount of the third level difference;

And so on……

rendering

As you can see, there is also a missing flag to record whether the user has passed the pass. Set an isOver property, if the amount is greater than or equal to the amount of the level, then the level is passed, isOver=true

Continue to organize your thoughts

A began to feel to the user before and after the cumulative amount of each element in the array as a judge, was later found a filtering can, as long as do filter out less than or equal to the total amount of array elements, find the length of the array is the user’s level, and then according to whether the user has passed by levels, set the next level.

The implementation code

// Calculate the level based on the cumulative amount
	_onStep(num) {
        let stepData = [1000.2500.5000.7000.10000.12500.15000.20000]
        let step = stepData.filter(item= > item <= num).length
        return step || 1 // When the amount is less than 1000 yuan in the first level, the qualified element is empty and its length is 0. Manually set the element in the first level
    },


	// Process the data and use it to render the results of the page
	_initStep(){
      let { payMoney=0} =this.$route.query  // Total amount of users
	  // Use an object data structure to read and set values for each level. Object storage is more memory efficient than array storage, although there is not much data
      let stepData= stepData: {
        1: {/ / the first level
          step:'one'.// To set a different position for each level icon class
          num:1000.// The amount of money for each level
          tip:' '.// Level hints
          isOver:false // Whether the current pass has been passed
        },
        2: {/ / the second level
          step:'two'.num:2500.tip:' '.isOver:false
        },
       3: {/ / the third level
          step:'three'.num:5000.tip:' '.isOver:false
        },
        4: {/ / the fourth level
          step:'four'.num:7000.tip:' '.isOver:false
        }]
      payMoney=parseFloat(payMoney)
      let step=this._onStep(payMoney)
      step=Number(step)
      
      for(let key in stepData){
        if(key<=step){
          let flag=payMoney>=stepData[key].num
          stepData[key].isOver=flag
          stepData[key].tip=flag?' ':Distance bonus still short: ¥The ${this._handleFloat(stepData[key].num-payMoney)}Yuan `}}// Set a prompt for the next level when the user passes the current level
      if(step<8&&stepData[step].isOver){
        let next=Number(step)+1
        stepData[next].tip= Distance bonus still short: ¥The ${this._handleFloat(stepData[next].num-payMoney) }Yuan `}},_handleFloat(number){
      if(! number)return 
      return parseFloat(number).toFixed(2)},Copy the code

conclusion

Front end can be in the aggregate amount of the stored user order (interface is called the background after stored on local storage), next time when you enter a page for the background of the latest local comparison front end, aggregate amount of background > local, remind the user of the checkpoint several good play a business type, with the help of an array algorithm, a numerical known, Determine the position in the array

	_onStep(num) {
            let stepData = [1000.2500.5000.7000.10000.12500.15000.20000]
            let step = stepData.filter(item= > item <= num).length
            return step || 1 
        },
Copy the code

Recently, the company is busy, taking advantage of a little leisure, accumulated under the work, learn, gain, progress every day ~~~ come on!