preface

“Three treasures of operation” (nine grid, big turntable, slot machine, of course, the three treasures of course is the most basic marketing operation means), the article about the big turntable, turntable implementation logic should be a relatively simple marketing plan;

At present, I have written about slot machines and big turntables. In the future, I will complete the marketing plan of nine squares, just for the record.

Other options

Js-vue-slot Machine Raffle >>>

Js-vue-nine Grid Lucky draw >>>

UI

  • As always, let’s look at the static UI, just to get a sense of what an image is

Project analysis

Initial reference value reference diagram

Solution Analysis – Parameter Configuration

  • Core ideas:

The pointer and winning area divided two parts, the effect of conventional rotary control the area, and then stops at the pointer, control the pointer can also, of course, a set of ideas, dom structure is simple, the only is winning area is complex, but if you’re lazy, like me, you can pass a figure can also, depend entirely on the remote data;

  • About rotation position

Each moving position should be evenly divided, 360/ number === the position occupied by each prize, take this article as an example of 8 prize positions, each area should be 45deg, each pointer center position should be ±22.5deg (± means depending on whether you are clockwise or counterclockwise) see the specific value of the following logical area

  • Parameter configuration

    • Data gives the component some configuration about the number of turns to rotate the system parameters, effects, and so on
    • Calculate the rotateStyle rotation Angle and adjust in real time
    • Props provides the parameters of the internal interface of the component and some core data, such as the image of the rotary table
Data () {return {isrun: false, rotateAngle: 0, config: {duration: 4000, // total rotation time ms class circle: 8, // mode: 'ease-in-out' // the inertia effect is saved}, cricleAdd: 1, // the drawIndex: 0 // Winning index table image sort pointer right hand 0-... }} // Computed properties computed: {rotateStyle () {const _c = this.config return '-webkit-transition: transform ${_c.duration}ms ${_c.mode}; transition: transform ${_c.duration}ms ${_c.mode}; -webkit-transform: rotate(${this.rotateAngle}deg); transform: rotate(${this.rotateAngle}deg); StateData: {type: Object, default: () => {return {coin: 0, // Number of supercoins prize_img: "// picture of the turntable}}}}Copy the code

Implementation logic

  • What we need to do is very simple, calculate the position of the winning prize, output

  • The position corresponds to the number of turns, and the drawIndex corresponds to the prize position, as we said in this parameter

    RotateAngle = this.config.circle * 360 * this.cricleadd - (22.5 + this.drawindex * 45) // This.config. circle * 360 * this.cricleadd clockwise total number of laps // 22.5 + this.drawindex * 45 === => (prize position === this.drawindex * 45) (Middle position of pointer === 22.5)Copy the code

  • DrawIndex, directly from the server, if not out of position, you can calculate it yourself

  • To facilitate expansion, two states are thrown corresponding to the start of the lottery at completion, start and FIN

    this.$emit('draw_fin', 'start')
this.$emit('draw_fin', 'fin')
Copy the code

  • Complete code, CSS is not water words, the source code address attached below

    methods: {async run () {if (this.statedata.coin < 10) {console.log(' not enough ') return} if (this.isrun) return // const data = $emit('draw_fin', 'start') this.$set(this.statedata, 'coin', 0) Isrun = true this.rotateAngle = this.config.circle * 360 * this.cricleadd - (22.5 + this.drawindex * 45) // this.config.circle * 360 * this.cricleadd clockwise total number of laps // cumulative total number of laps // 22.5 + This. DrawIndex * 45 ===> (bonus position === this. DrawIndex * 45) (pointer middle position === = 22.5) this.cricleAdd++ setTimeout(() => { this.$emit('draw_fin', 'fin') this.isrun = false }, this.config.duration) }, GoDraw () {// request interface to get the winner goods // add your own project style loading user experience return new Promise(async (resolve, Reject) => {// await; resolve({MSG: 'lottery details'})})}Copy the code

    }

Components use

  • use
import dialWrap from '.. /.. /components/dial/dial.vue' <dialWrap ref="dialWrap" :stateData="stateData"></dialWrap>Copy the code

Effect of lucky draw

conclusion

The above is about the realization of the idea, relatively simple effect; Some of the details and expansion, we can play by ourselves ha ~

Attached to this article – source address, welcome to discuss ha ~