前沿

最近公司有一個(gè)活動(dòng)祠饺，讓做一個(gè)老虎機(jī)抽獎(jiǎng)活動(dòng)粘咖，對(duì)于之前沒有做過的我來說還是有些吃力的邪锌，于是就開始各種網(wǎng)上找插件勉躺，發(fā)現(xiàn)大部分都是jquery的，要不就是好多一部分的觅丰，一個(gè)完整的流程都走不下來饵溅，更有甚者讓花錢買他的代碼，我就想說大家都是分享妇萄，互相交流蜕企，你們?cè)趺淳湍敲醋运剑越裉彀盐艺垓v的老虎機(jī)分享出來冠句，以來方便自己以后開發(fā)轻掩，而來大家也可以發(fā)現(xiàn)不足，指出來共同進(jìn)步懦底。

該項(xiàng)目需要雪碧圖哦

來先看看效果圖

WechatIMG10.png

代碼里邊都有注釋唇牧，比較容易上手。我用的是曲線救國(guó)的方法基茵，就是說并不完美奋构，不太靈活，雪碧圖的位置一旦確定拱层，就盡量不要?jiǎng)恿嗣志剩蝗幌麓芜€需要在重新調(diào)雪碧圖的y軸的位置，這個(gè)很煩根灯，希望看見的小伙伴給個(gè)建議径缅。

作者最近一段時(shí)間比較忙，還未將該效果抽出公共組件烙肺，后期有機(jī)會(huì)抽成公共組件纳猪，就好了。會(huì)省好多事桃笙。

好了不說廢話了氏堤，上思路，代碼搏明。

思路邏輯：老虎機(jī)抽獎(jiǎng)結(jié)果以后臺(tái)告知為準(zhǔn)鼠锈，所以前臺(tái)需要根據(jù)后臺(tái)返回的是否抽中標(biāo)示來展示相應(yīng)的效果

其實(shí)我剛開始認(rèn)為抽獎(jiǎng)結(jié)果是前端做的，然后越陷越深星著，發(fā)現(xiàn)不好做出來购笆，而且安全性不高，然后跟小伙伴交流才知道一般抽獎(jiǎng)?lì)惖幕顒?dòng)抽獎(jiǎng)結(jié)果都是由后臺(tái)告知虚循，這下就輕松多了同欠，因?yàn)槟阒恍枰鶕?jù)結(jié)果展示相應(yīng)的效果就好了样傍。

主要運(yùn)用的技術(shù)

老虎機(jī)抽獎(jiǎng)活動(dòng)運(yùn)用到了css3的transition和css3的過渡來實(shí)現(xiàn)平滑滾動(dòng)的效果，通過改變背景雪碧圖的y軸位置backgroundPositionY來展示不同的獎(jiǎng)品铺遂，以達(dá)到抽獎(jiǎng)效果衫哥。js通過定時(shí)器可以達(dá)到轉(zhuǎn)動(dòng)效果

第一步，布局

<template>
    <div id="slotMachine">
        <div class="PosRela priceCenter HomeBGColor Width100">
            <img class="Width100 Height100" src="../img/2@2x.png">
            <!-- 老虎機(jī)抽獎(jiǎng)框 -->
            <div class="PosAbso trigerCenter">
                <transition name="down-up-translate-fade">
                    <div class="SpriteChart" :style="{backgroundPositionY: priceOne + 'rem'}"></div>
                </transition>
                <transition name="down-up-translate-fade">
                    <div class="SpriteChart" :style="{backgroundPositionY: priceTwo + 'rem'}"></div>
                </transition>
                <transition name="down-up-translate-fade">
                    <div class="SpriteChart" :style="{backgroundPositionY: priceThr + 'rem'}"></div>
                </transition>
            </div>
        </div>
        <!-- 前往抽獎(jiǎng)區(qū)參與活動(dòng)贏好禮襟锐！ -->
        <!-- DrawToast 是封裝的公共彈窗組件 -->
        <DrawToast v-show='isGoToPrice' @fromChild="GoToPrice">
            <div class="PosRela GoToPrice" slot="luckyDrawCenter">
                <img class="Width100 Height100" src="../img/彈窗@2x (1).png">
                <div class="PosAbso Width100 Font17 FontWeight GoToPriceText">前往抽獎(jiǎng)區(qū)參與活動(dòng)贏好禮炕檩！</div>
            </div>
        </DrawToast>
        <!-- 獲得福利券彈窗 -->
        <DrawToast v-show='isGetWelfare' @fromChild="GetWelfare">
            <div class="PosRela GetWelfare" slot="luckyDrawCenter">
                <img class="Width100 Height100" src="../img/彈窗-點(diǎn)擊抽獎(jiǎng)@2x.png">
                <div class="PosAbso Width100 Font20 FontWeight constrGet">恭喜您獲得</div>
                <div class="PosAbso Width100  getVoucher">
                    <div class="getVoucherName Font24 FontWeight Ellipsis">0.8%福利券</div>
                </div>
                <div class="PosAbso Width100 Font14 PrizesIssued">獎(jiǎng)品已發(fā)放，您可在個(gè)人中心查看捌斧！</div>
                <div class="PosAbso Width100  FontWeight  commonButton CheckNow">
                    <img class="Height100" src="../img/按鈕-立即抽獎(jiǎng)@2x (1).png">
                    <div class="PosAbso Width100 Height100 Font18 ColorWhite FontWeight">立即查看</div>
                </div>
            </div>
        </DrawToast>
    </div>
</template>
<style lang="less" scoped>
//這是項(xiàng)目公共的css笛质，在本項(xiàng)目中用到的rem是2倍算法，所以要從你的設(shè)計(jì)圖尺寸乘2除以100得到捞蚂。
@import url('../../../components/tigerBaseCss/index');
.priceCenter {
    height: 4.22rem;
    border: 1px solid blue;
    .trigerCenter {
        border: 1px solid blue;
        width: 5.5rem;
        height: 3rem;
        overflow: hidden;
        left: 1rem;
        top: 0.6rem;
        border-radius: 0.1rem;
        .SpriteChart {
            width: 1.75rem;
            border: 1px solid red;
            height: 9.8rem;
            background: url("../img/choujiangzuhe.png") center center repeat-y;
            background-size: 100% 100%;
            float: left;
            margin-right: 0.1rem;
            background-attachment: scroll;
            &:nth-child(2) {}
            &:nth-child(3) {
                float: right;
                margin: 0;
            }
        }
        .down-up-translate-fade-enter-active,
        .down-up-translate-fade-leave-active {
            transition: all 0.1s;
            -webkit-transition: all 0.1s;
            -moz-transition: all 0.1s;
            -o-transition: all 0.1s;
        }
        .down-up-translate-fade-enter,
        .down-up-translate-fade-leave-active {
            opacity: 1;
        }
        .down-up-translate-fade-enter {
            transform: translateY(0px);
            -webkit-transform: translateY(0px);
            -moz-transform: translateY(0px);
            -o-transform: translateY(0px);
        }
        .down-up-translate-fade-leave-active {
            transform: translateY(0px);
            -webkit-transform: translateY(0px);
            -moz-transform: translateY(0px);
            -o-transform: translateY(0px);
        }
    }
}




//彈窗內(nèi)公共彈窗樣式
.commonButton {
    height: 0.9rem;
    div {
        top: 0;
        left: 0;
        line-height: 0.8rem;
    }
}


.GoToPrice {
    width: 5.48rem;
    height: 5.58rem;
    .GoToPriceText {
        top: 4.2rem;
        color: #DF2531;
    }
}


.GetWelfare {
    width: 5.6rem;
    height: 5.5rem;
    .constrGet {
        color: #B46C38;
        top: 1.02rem;
    }
    .getVoucher {
        top: 2.22rem;
        .getVoucherName {
            width: 3rem;
            margin: auto;
            color: #E04D4B;
        }
    }
    .PrizesIssued {
        color: #B46C38;
        top: 3rem;
    }
    .CheckNow {
        top: 3.9rem;
    }
}
</style>

第二步：邏輯

<script>
export default {
    data() {
        return {
            isGoToPrice: false, //前往抽獎(jiǎng)區(qū)參與活動(dòng)贏好禮妇押！
            isGetWelfare: false, //獲得福利券彈窗
            priceOne: 8.1, //控制滾動(dòng)圖的位置，顯示那個(gè)獎(jiǎng)品在中間的位置（需要雪碧圖)
            priceTwo: 35.44,   //也就是背景雪碧圖的y軸的位置
            priceThr: 53.02,
            textone: 0, //抽中某個(gè)獎(jiǎng)品第一列的展示的圖片姓迅，下邊倆以此類推
            texttwo: 0,
            textthe: 0,
        }
    },
    mounted() {
    },
    watch: {
        //通過監(jiān)聽第三列的圖的y軸的位置判斷中的什么獎(jiǎng)敲霍，展示該獎(jiǎng)的名字
        priceThr(newValue, olderValue) {
            const that = this;
            switch (newValue) {
                case 1181.2:   //這個(gè)模擬的中獎(jiǎng)的情況，所以彈出中獎(jiǎng)彈層
                    setTimeout(() => {
                        //控制中獎(jiǎng)彈層是否彈出
                        that.isGetWelfare = true;
                    }, 500);
                    break;
                case 1276.88:   //這個(gè)位置未中獎(jiǎng)  所以彈出很抱歉
                    setTimeout(() => {
                        that.isGoToPrice = true;
                    }, 500);
                    break;
            }
        }
    },
    methods: {
        //開始抽獎(jiǎng)
        beganDraw() {
            console.log(this.LuckyDraw);
            if (this.LuckyDraw > 0) {
                //此處需要調(diào)接口丁存，從接口里獲取是否中獎(jiǎng)肩杈，然后改變number的值，這樣就可以在this.showPrize(number);方法中設(shè)置雪碧圖的詳細(xì)位置
                let number = 7;
                this.showPrize(number);
                //該方法是通過定時(shí)器來控制雪碧圖的位置解寝，以達(dá)到轉(zhuǎn)動(dòng)的效果
                this.startDraw();
            }
        },
        startDraw() {
            this.timeone(10);
            setTimeout(() => {
                this.timetwo(0);
            }, 500);
            setTimeout(() => {
                this.timethe(0);
            }, 1000);
        },
        timeone(num) {
            var t = setInterval(() => {
                if (num <= this.textone) {
                    num += 10;
                    this.priceOne = num;
                } else {
                    clearInterval(t);
                    this.priceOne = this.textone;
                }
            }, 30);
        },
        timetwo(num) {
            var t = setInterval(() => {
                if (num <= this.texttwo) {
                    num += 10;
                    this.priceTwo = num;
                } else {
                    clearInterval(t);
                    this.priceTwo = this.texttwo;
                }
            }, 30);
        },
        timethe(num) {
            var t = setInterval(() => {
                if (num <= this.textthe) {
                    num += 10;
                    this.priceThr = num;
                } else {
                    clearInterval(t);
                    this.priceThr = this.textthe;
                }
            }, 30);
        },
        // 根據(jù)抽獎(jiǎng)信息判斷抽中的獎(jiǎng)品
        showPrize(num) {
            console.log(num);
            const that = this;
            switch (num) {
                case 1: // 抽中每個(gè)獎(jiǎng)項(xiàng)的展示圖（也就是雪碧圖的y軸的位置）扩然，需要單獨(dú)設(shè)置
                    that.textone = 1091;
                    that.texttwo = 1091;
                    that.textthe = 1091;
                    break;
                case 2: 
                    that.textone = 1112;   //這里的數(shù)值都可以設(shè)置成變量，方便控制
                    that.texttwo = 1112;
                    that.textthe = 1112;
                    break;
                case 3: 
                    that.textone = 1135;
                    that.texttwo = 1135;
                    that.textthe = 1135;
                    break;
                case 4: 
                    that.textone = 1158;
                    that.texttwo = 1158;
                    that.textthe = 1158;
                    break;
                case 5: 
                    that.textone = 1181.2;
                    that.texttwo = 1181.2;
                    that.textthe = 1181.2;
                    break;
                case 6: 
                    that.textone = 1203;
                    that.texttwo = 1203;
                    that.textthe = 1203;
                    break;
                case 7:  //若有未中獎(jiǎng)情況單獨(dú)設(shè)置一個(gè)或多個(gè)未中獎(jiǎng)的展示圖（也就是雪碧圖的y軸的位置）
                    that.textone = 1210.5;
                    that.texttwo = 1253.43;
                    that.textthe = 1276.88;
                    break;
            }
        },

    }
};
</script>