vue写转盘抽奖功能及可根据概率去计算

最近在做一个大转盘抽奖获取金币及激励视频，刚开始要求前端自己根据后台返的每块概率去写逻辑，后来被驳回了，不过本次记录一下写的。

1. html部分

`<div class="lucky-bg relative">

        <img src="../assets/images/point.png" class="abs point-img" />
        <div class="lucky-wheel auto">
            <img src="../assets/images/p2.png" class="abs point-bg" />
            <img src="../assets/images/p1.png" class="abs point-bg1" />
            <div class="wheel-main com-bg relative">
                <img
                    src="../assets/images/p3.png"
                    class="abs com-img point-bg2"
                    style="top: 0.35rem;width: 15rem;left: 0.5rem;"
                />
                <div class="wheel-pointer-box" @click="hasTimes ? rotateFun():''">
                    <div class="wheel-pointer"></div>
                    <img src="../assets/images/word.png" class="word abs" />
                </div>
                <div
                    class="wheel-bg"
                    :style="{transform:rotateAngle,transition:rotateTransition == ''?'transform 4s ease-in-out':rotateTransition }"
                >
                    <img src="../assets/images/wheel.png" class="com-img" />
                    <!-- <div class="prize-list">
                    <div class="prize-item" v-for="(item,index) in prize_list" :key="index">
                        <div class="prize-type">{{item.name}}</div>
                    </div>
                    </div>--> //这里写是自己手写奖品，现做成了一个图片
                </div>
            </div>
        </div>
    </div>
    <div class="wheel-line">
        <img src="../assets/images/line1.png" class="line" />
        <div class="power">
            今日剩余次数
            <span>{{100-detail.turntable_number}}次</span>
        </div>
    </div>`

1. js部分、

` data () {

    return {
  detail:{
    "turntable_number": 10, //己玩转盘次数,
    probability:['10%','20%','30%','5%','5%','10%','5%','15%'],//扇区指标
    "treasure_chest1": "0", //第一个宝箱 0无权开启 1有权开启 3己开启
    "treasure_chest2": "1",
    "treasure_chest3": "0",
    "treasure_chest4": "1",
    "treasure_chest5": "1",
  },
      hasTimes: true,
        rotateAngle: 0, //将要旋转的角度
        startRotatingDegree: 0, //初始旋转角度
        rotateTransition: '',//控制过渡效果
        totalNum: 100,
        nowTimes: 0,
        restaraunts: ['神秘宝箱', '50', '神秘宝箱', '60', '神秘宝箱', '70', '神秘宝箱', '90'],
        prize: '',
        nowIndex: 0
 }`

1. 方法部分

`random (rate) {

        let random = Math.floor(Math.random() * 100); //随机数
        console.log(random, '随机数')
        let myRandom = [];
        let randomList = [];
        let randomParent = [];
        for (let i = 0; i < 100; i++) {
            myRandom.push(parseInt([i]) + 1);
        }
        for (let i = 0; i < rate.length; i++) {
            let temp = [];
            let start = 0;
            let end = 0;
            randomList.push(parseInt(rate[i].split('%')[0]));
            for (let j = 0; j < randomList.length; j++) {
                start += randomList[j - 1] || 0
                end += randomList[j]
            }
            temp = myRandom.slice(start, end);
            randomParent.push(temp)
        }
        console.log(randomParent)
        for (let i = 0; i < randomParent.length; i++) {
            if (randomParent[i].includes(random)) {
                this.nowIndex = i + 1;
                return (i + 1)
            }
        }
    },
    // 转动
    rotateFun () {
        if (!this.hasTimes) return;
        let during_time = 5; // 默认为1s
        let resultNum = this.random(this.detail.probability) //当前值
        console.log(resultNum, 'resultNum')
        // let random = Math.floor(Math.random() * 8);
        let result_angle = 45; //最终会旋转到下标的位置所需要的度数
        let rand_circle = 6; // 附加多转几圈，2-3
        this.hasTimes = false; // 旋转结束前，不允许再次触发
        // 转动盘子
        this.prize = this.restaraunts[this.nowIndex];
        console.log(this.prize, 'this.prize')
        let rotate_angle = this.startRotatingDegree + (rand_circle * 360-result_angle * resultNum)
        +(360-this.startRotatingDegree % 360);
        this.startRotatingDegree = rotate_angle;
        this.rotateAngle = "rotate(" + rotate_angle + "deg)";
        console.log(rotate_angle, 'this.rotateAngle')
        var that = this;
        // 旋转结束后，允许再次触发
        setTimeout(function () {
            that.gameOver();
        }, during_time * 1000); // 延时，保证转盘转完
    },
    gameOver () {
        // if (this.nowTimes < 5) {
        this.hasTimes = true;
        this.detail.turntable_number = this.detail.turntable_number + 1;
        this.totalNum = 100 - this.detail.turntable_number;
        times.$emit("clickTime", this.detail.turntable_number)
        if (this.detail.turntable_number == 100) {
            this.hasTimes = false;
        }
        console.log(this.nowTimes, this.totalNum)
        
    }`