vue3.0 抽奖小功能

我给写进组件了

<template><div id="toll"><div class="lottery-box"><div class="lottery"><div class="lottery-item"><div class="lottery-start"><div class="box gray" v-if="isStart===0"><p>活动未开始</p></div><div class="box" @click="startLottery" v-if="isStart===1"><p><b>点击</b></p><p><b>抽奖</b></p></div><div class="box gray" v-if="isStart===2"><p>活动已过期</p></div></div><ul><li v-for="(item,i) in arra" :class="i==index?'on':''"><div class="box"><p><img src="../assets/奖品.png" v-show="item.status==1&&item.img==null"></p><p><img src="../assets/谢谢参与.png" v-show="item.status==0&&item.img==null"></p><p><img :src="item.img" v-show="item.img!=null"></p><p>{{item.name}}</p></div></li></ul></div></div><!-- 中奖弹窗 --><div class="mask" v-if="showToast"></div><div class="lottery-alert" v-if="showToast"><h1 v-if="arra[index].name!=='谢谢参与'">恭喜您</h1><p><img v-if="arra[index].name!=='谢谢参与'" src="../assets/奖品.png" alt=""><img v-if="arra[index].name==='谢谢参与'" src="../assets/谢谢参与.png" alt=""></p><h2 v-if="arra[index].name!=='谢谢参与'">获得{{arra[index].name}}</h2><h2 v-if="arra[index].name=='谢谢参与'">{{arra[index].name}}</h2><div class="btnsave" @click="showToast=false">确定</div></div></div></div>
</template><script>import {ref,watch,} from 'vue'export default {props: {arra: Array,remen: Number,},setup(props) {var pond = []; //奖池watch(props, (o) => {console.log(o.arra, o.remen, 'dfgfgf');for (let i = 0; i < props.arra.length; i++) {console.log(i, props.arra[i].chance, '奖池啊');if (props.arra[i].chance === "0.00") {console.log(i, props.arra[i].chance,'中奖率0');} else {for (let ind = 0; ind < props.arra[i].chance; ind++) {pond.push(i)}}}})console.log(pond,'45137.1435');var revlist = ref([]);revlist.value = props.arra;var remen_id = props.remen;console.log(revlist.value, '奖品');// 活动奖品// var pri = ref([]);console.log(888);var isStart = ref(1);var index = ref(-1); //当前转动到哪个位置,起点位置var count = ref(8);//总共有多少个位置var timer = 0;//每次转动定时器var speed = ref(200);//初始转动速度var times = ref(0);//转动次数var cycle = ref(50);//转动基本次数:即至少需要转动多少次再进入抽奖环节var prize = ref(-1);//中奖位置var click = ref(true);//防置重复点击var showToast = ref(false);//显示中奖弹窗// //防止过度点击var startLottery = function() {if (!click.value) {return}startRoll()}//开始转动var startRoll = function() {times.value += 1; //转动次数oneRoll() //转动过程调用的每一次转动方法,这里是第一次调用初始化console.log(times.value, cycle.value + 10, prize.value, index.value); //如果当前转动次数达到要求&&目前转到的位置时中奖位置if (times.value > cycle.value + 10 && prize.value == index.value) {clearTimeout(timer);//清除转动定时器,停止转动prize.value = -1;times.value = 0;speed.value = 200;click.value = true;setTimeout(function(res) {showToast.value = true;}, 500)} else {if (times.value < cycle.value) {speed.value -= 10; //加快转动速度} else if (times.value == cycle.value) {const index=Math.floor((Math.random()*pond.length));prize.value = index;if (prize.value > 7) {prize.value = 7;}} else if (times.value > cycle.value + 10 && ((prize.value == 0 && index.value == 7) || prize.value === index + 1)) {speed.value += 110;} else {speed.value += 20;}if (speed < 40) {speed.value = 40;}timer = setTimeout(startRoll, speed.value)return}}// 每一次转动var oneRoll = function() {let inde = index.value;const coun = count.value;inde += 1;if (inde > coun - 1) {inde = 0}index.value = inde;}return {index,count,revlist,speed,times,cycle,prize,click,showToast,isStart,startLottery}}}
</script><style>#toll {width: 100%;display: flex;}.lottery-box img {border: 0px;}ul,li {list-style-type: none;}.lottery-box {width: 100%;overflow: hidden;box-sizing: border-box;/* background: radial-gradient(49% 160%, #22b5ff 0, #3a72fa 100%); */font-size: 14px;}.lottery-box .title {text-align: center;padding: 50px 0;font-size: 18px;/* color: #fff; */}.lottery {animation: changeBg .5s ease infinite;overflow: hidden;padding: 20px;width: 300px;margin: 0 auto;background-repeat: no-repeat;background-size: 100% 100%;}@keyframes changeBg {0% {background-image: url(../img/k1.png);}100% {background-image: url(../img/k2.png);}}.lottery .lottery-item {height: 330px;position: relative;margin-top: 10px;margin-left: 10px;}.lottery .lottery-item ul li {width: 30.33333333%;position: absolute;padding-right: 10px;}.lottery .lottery-item ul li:nth-child(2) {left: 33.33333333%;}.lottery .lottery-item ul li:nth-child(3) {left: 66.66666666%;}.lottery .lottery-item ul li:nth-child(4) {left: 66.66666666%;top: 110px;}.lottery .lottery-item ul li:nth-child(5) {left: 66.66666666%;top: 220px;}.lottery .lottery-item ul li:nth-child(6) {left: 33.33333333%;top: 220px;}.lottery .lottery-item ul li:nth-child(7) {left: 0;top: 220px;}.lottery .lottery-item ul li:nth-child(8) {left: 0;top: 110px;}.lottery .lottery-item ul li .box {height: 90px;position: relative;text-align: center;overflow: hidden;background: url(../img/bg2.png) no-repeat center;background-size: 100% 100%;}.lottery .lottery-item ul li .box img {display: block;height: 50px;margin: 0 auto;margin-top: 10px;margin-bottom: 5px;}.lottery .lottery-item ul li .box p {color: #708ABF;white-space: nowrap;overflow: hidden;text-overflow: ellipsis;font-size: 14px;}.lottery .lottery-item ul li.on .box {background: url(../img/bg1.png) no-repeat center;background-size: 100% 100%;}.lottery .lottery-item ul li.on .box p {color: #fff;}.lottery .lottery-item .lottery-start {position: absolute;left: 33.33333333%;width: 33.33333333%;top: 110px;padding-right: 10px;}.lottery .lottery-item .lottery-start .box {height: 90px;width: 90.3333%;font-size: 14px;color: #fff;cursor: pointer;text-align: center;overflow: hidden;background: url(../img/bg1.png) no-repeat center;background-size: 100% 100%;}.lottery .lottery-item .lottery-start .box p b {font-size: 28px;margin-top: 10px;margin-bottom: 10px;line-height: 28px;display: block;}.lottery .lottery-item .lottery-start .box:active {opacity: 0.7;}.lottery .lottery-item .lottery-start .box.gray {background: url(../img/bg3.png) no-repeat center;background-size: 100% 100%;}.lottery .lottery-item .lottery-start .box.gray p {color: #708ABF;font-weight: bold;}.mask {width: 100%;height: 100%;background: rgba(0, 0, 0, 0.7);position: fixed;overflow: hidden;z-index: 222;top: 0;left: 0;}.lottery-alert {max-width: 400px;text-align: center;z-index: 10000;border-radius: 10px;background: #fff;padding: 20px;position: fixed;left: 0;right: 0;margin: auto;top: 50%;transform: translateY(-50%);}.lottery-alert h1 {font-size: 18px;font-weight: bold;color: #D92B2F;}.lottery-alert img {display: block;height: 120px;margin: 0 auto;}.lottery-alert h2 {font-weight: normal;color: #D92B2F;font-size: 15px;padding-top: 15px;}.lottery-alert p {color: #666;font-size: 16px;padding-top: 5px;}.lottery-alert .btnsave {border-radius: 3px;box-shadow: none;height: 40px;cursor: pointer;line-height: 40px;color: #fff;margin-top: 12px;background: linear-gradient(180deg, rgba(213, 60, 63, 1) 0%, rgba(201, 20, 24, 1) 100%);font-size: 16px;}
</style>

vue3.0 抽奖小功能相关推荐

[vue] 你期待vue3.0有什么功能或者改进的地方？
[vue] 你期待vue3.0有什么功能或者改进的地方? 用尤大的话说就是各种速度提升n倍.我希望在依赖node_modules能够做出调整,文件数目太多,开启项目每次都要下载个人简介我是歌谣,欢 ...
vue3.0 execle 导出功能实现
vue3.0 execle 导出功能实现安装引入给table加ref属性获取需要导出的execle表格元素并导出安装 npm install --save xlsx npm install ...
前端学习（2671）： vue3.0脚手架获取功能页面布局
Vue3.0快速入门
一.安装 1. cdn <script src="https://unpkg.com/vue@next"></script> 2. npm $npm ins ...
vue3.0网易云音乐及入门小案例
前言之前学习vue3.0时做了几个小案例,近段时间又找了几个案例想着把之前做的那些和现在做的放在一起于是休息的时候就搭建了一个vue3的项目.这个项目所用的数据都是页面上写死的,音乐播放器数据是调用 ...
【Vue3.0实战逐步深入系列】扩展投票功能基于elementui进行组件封装实现一个简单的问卷调查功能
[千字长文,熬夜更新,原创不易,多多支持,感谢大家] 前言小伙伴们大家好.在前面一偏文章中我们把投票功能进行了简单的改造:引入了axios第三方库并进行了二次封装用于模拟请求服务器数据.同时添加了一 ...
vue3.0 + typescript openlayers实现地图标点、移动、画线、显示范围、测量长度、测量面积、画三角形、画正方形、画圆、线选、画笔、清除测量、清除、地图上展示弹窗等功能
vue3.0 + typescript openlayers实现地图标点.移动.画线.显示范围.测量长度.测量面积.画三角形.画正方形.画圆.线选.画笔.清除测量.清除地图所有等功能由于最近项目中用 ...
vb计算机怎么制作,vb6.0怎么制作一个抽奖小程序? vb6.0抽奖器的法
商场搞活动想要制作一个抽奖程序,今天我们就来看看使用vb6.0制作抽奖小程序的教程. 选择"用户自定义规则"并点击"新建"按钮,弹出选择新规则类型对话框(如图 ...
小兔鲜儿Vue3.0前端电商项目实战
小兔鲜儿Vue3.0实现了电商平台主线业务功能,电商首页.一级分类.二级分类.商品详情.购物车.结算.支付.个人中心.订单管理.订单详情. 项目采用前后端分离模式,前台使用了VUE3.0技术栈构建,自 ...

vue3.0 抽奖小功能

vue3.0 抽奖小功能

vue3.0 抽奖小功能相关推荐

最新文章

热门文章

vue3.0 抽奖 小功能

vue3.0 抽奖 小功能

vue3.0 抽奖 小功能相关推荐

最新文章

热门文章

vue3.0 抽奖小功能

vue3.0 抽奖小功能

vue3.0 抽奖小功能相关推荐