vue-版的老虎机抽奖活动效果折腾小记

前沿

最近公司有一个活动，让做一个老虎机抽奖活动，对于之前没有做过的我来说还是有些吃力的，于是就开始各种网上找插件，发现大部分都是jquery的，要不就是好多一部分的，一个完整的流程都走不下来，更有甚者让花钱买他的代码，我就想说大家都是分享，互相交流，你们怎么就那么自私，所以今天把我折腾的老虎机分享出来，以来方便自己以后开发，而来大家也可以发现不足，指出来共同进步。

该项目需要雪碧图哦

来先看看效果图

代码里边都有注释，比较容易上手。我用的是曲线救国的方法，就是说并不完美，不太灵活，雪碧图的位置一旦确定，就尽量不要动了，不然下次还需要在重新调雪碧图的y轴的位置，这个很烦，希望看见的小伙伴给个建议。

作者最近一段时间比较忙，还未将该效果抽出公共组件，后期有机会抽成公共组件，就好了。会省好多事。

好了不说废话了，上思路，代码。

思路逻辑：老虎机抽奖结果以后台告知为准，所以前台需要根据后台返回的是否抽中标示来展示相应的效果

其实我刚开始认为抽奖结果是前端做的，然后越陷越深，发现不好做出来，而且安全性不高，然后跟小伙伴交流才知道一般抽奖类的活动抽奖结果都是由后台告知，这下就轻松多了，因为你只需要根据结果展示相应的效果就好了。

主要运用的技术

老虎机抽奖活动运用到了css3的transition和css3的过渡来实现平滑滚动的效果，通过改变背景雪碧图的y轴位置backgroundPositionY来展示不同的奖品，以达到抽奖效果。js通过定时器可以达到转动效果

第一步，布局

<template><div id="slotMachine"><div class="PosRela priceCenter HomeBGColor Width100"><img class="Width100 Height100" src="../img/2@2x.png"><!-- 老虎机抽奖框 --><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><!-- 前往抽奖区参与活动赢好礼！ --><!-- 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">前往抽奖区参与活动赢好礼！</div></div></DrawToast><!-- 获得福利券弹窗 --><DrawToast v-show='isGetWelfare' @fromChild="GetWelfare"><div class="PosRela GetWelfare" slot="luckyDrawCenter"><img class="Width100 Height100" src="../img/弹窗-点击抽奖@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">奖品已发放，您可在个人中心查看！</div><div class="PosAbso Width100 FontWeight commonButton CheckNow"><img class="Height100" src="../img/按钮-立即抽奖@2x (1).png"><div class="PosAbso Width100 Height100 Font18 ColorWhite FontWeight">立即查看</div></div></div></DrawToast></div>
</template>
<style lang="less" scoped>
//这是项目公共的css，在本项目中用到的rem是2倍算法，所以要从你的设计图尺寸乘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);}}
}//弹窗内公共弹窗样式
.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, //前往抽奖区参与活动赢好礼！isGetWelfare: false, //获得福利券弹窗priceOne: 8.1, //控制滚动图的位置，显示那个奖品在中间的位置（需要雪碧图)priceTwo: 35.44,   //也就是背景雪碧图的y轴的位置priceThr: 53.02,textone: 0, //抽中某个奖品第一列的展示的图片，下边俩以此类推texttwo: 0,textthe: 0,}},mounted() {},watch: {//通过监听第三列的图的y轴的位置判断中的什么奖，展示该奖的名字priceThr(newValue, olderValue) {const that = this;switch (newValue) {case 1181.2:   //这个模拟的中奖的情况，所以弹出中奖弹层setTimeout(() => {//控制中奖弹层是否弹出that.isGetWelfare = true;}, 500);break;case 1276.88:   //这个位置未中奖 所以弹出很抱歉setTimeout(() => {that.isGoToPrice = true;}, 500);break;}}},methods: {//开始抽奖beganDraw() {console.log(this.LuckyDraw);if (this.LuckyDraw > 0) {//此处需要调接口，从接口里获取是否中奖，然后改变number的值，这样就可以在this.showPrize(number);方法中设置雪碧图的详细位置let number = 7;this.showPrize(number);//该方法是通过定时器来控制雪碧图的位置，以达到转动的效果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);},// 根据抽奖信息判断抽中的奖品showPrize(num) {console.log(num);const that = this;switch (num) {case 1: // 抽中每个奖项的展示图（也就是雪碧图的y轴的位置），需要单独设置that.textone = 1091;that.texttwo = 1091;that.textthe = 1091;break;case 2: that.textone = 1112;   //这里的数值都可以设置成变量，方便控制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:  //若有未中奖情况单独设置一个或多个未中奖的展示图（也就是雪碧图的y轴的位置）that.textone = 1210.5;that.texttwo = 1253.43;that.textthe = 1276.88;break;}},}
};
</script>