< template> < viewclass = " index" > < imagesrc = " ../../static/img/158.png" mode = " " class = " banner" > </ image> < viewclass = " title" > </ view> < almost-lottery:lotteryBg = " lotteryBg" :actionBg = " actionBg" :colors = " ['#fff','#FFDFD4']" :strFontColors = " ['#FF4100','#FF4100']" :strMarginOutside = " 30" :imgMarginStr = " 50" :imgWidth = " 62" :imgHeight = " 38" :imgCircled = " false" :lottery-size = " lotteryConfig.lotterySize" :action-size = " lotteryConfig.actionSize" :ring-count = " 6" :duration = " 4" :self-rotaty = " false" :img-circled = " true" :canvasCached = " true" :prize-list = " prizeList" :prize-index = " prizeIndex" @reset-index = " prizeIndex = -1" @draw-before = " handleDrawBefore" @draw-start = " handleDrawStart" @draw-end = " handleDrawEnd" @finish = " handleDrawFinish" v-if = " prizeList.length" /> < u-button:ripple = " true" class = " btn" @click = " submit" :loading = " loading" > </ u-button> </ view> </ template> < script> import AlmostLottery from '@/uni_modules/almost-lottery/components/almost-lottery/almost-lottery.vue' import { clearCacheFile, clearStore} from '@/uni_modules/almost-lottery/utils/almost-utils.js' export default { name : 'Home' , components : { AlmostLottery} , data ( ) { return { isDev : false , lotteryConfig : { lotterySize : 600 , actionSize : 200 } , lotteryBg : require ( '../../static/img/156.png' ) , actionBg : require ( '../../static/img/157.png' ) , prizeList : [ ] , prizeIndex : - 1 , prizeing : false , freeNum : 0 , loading : false , rules : [ ] } } , onLoad ( ) { this . prizeList = [ ] this . getPrizeList ( ) } , onShow ( ) { this . $http. get ( '/api/turntable/index' ) . then ( res => { if ( res. code == 1 ) { this . freeNum = res. data. lottery_count; this . rules = res. data. rules; } } ) } , onUnload ( ) { uni. hideLoading ( ) } , methods : { async getPrizeList ( ) { uni. showLoading ( { title : '奖品准备中...' } ) this . $http. get ( '/api/turntable/prizes' ) . then ( res => { if ( res. code == 1 ) { res. data. prizes. forEach ( item => { if ( item. multiple == 0 ) { this . prizeList. push ( { prizeId : item. id, prizeName : '谢谢参与' , prizeImage : item. image, name : item. name} ) } else { this . prizeList. push ( { prizeId : item. id, prizeName : item. name, prizeImage : item. image, name : item. name} ) } } ) } } ) } , handleDrawBefore ( callback ) { if ( this . freeNum > 0 ) { this . handleDrawStart ( ) } else { this . $toast ( '抽奖次数已用完' ) } } , handleDrawStart ( ) { console. log ( '触发抽奖按钮' ) if ( this . prizeing) return this . prizeing = true this . tryLotteryDraw ( ) } , tryLotteryDraw ( ) { this . $http. post ( '/api/turntable/lottery' ) . then ( res => { if ( res. code == 1 ) { this . freeNum-- this . prizeList. forEach ( ( item, index ) => { if ( item. prizeId == res. data. prize_id) { this . prizeIndex = index; } } ) console. log ( '本次抽中奖品 =>' , this . prizeList[ this . prizeIndex] . prizeName) } } ) } , handleDrawEnd ( ) { console. log ( '旋转结束，执行拿到结果后到逻辑' ) let prizeName = this . prizeList[ this . prizeIndex] . namelet tipContent = '' if ( prizeName === '谢谢参与' ) { tipContent = '很遗憾，没有中奖，请再接再厉！' } else { tipContent = ` 恭喜您，获得 ${ prizeName} ！ ` } uni. showModal ( { content : tipContent, showCancel : false , complete : ( ) => { this . prizeing = false } } ) } , handleDrawFinish ( res ) { console. log ( '抽奖转盘绘制完成' , res) if ( res. ok) { if ( console. timeEnd) { console. timeEnd ( '绘制转盘用时' ) } } let stoTimer = setTimeout ( ( ) => { stoTimer = null uni. hideLoading ( ) uni. showToast ( { title : res. msg, mask : true , icon : 'none' } ) } , 50 ) } , submit ( ) { if ( this . freeNum > 0 ) { this . handleDrawStart ( ) } else { this . $toast ( '抽奖次数已用完' ) } } , } , }
</ script> < stylelang = " scss" scoped > .index { min-height : 100vh; background : url ( '../../static/img/153.png' ) ; background-size : 750rpx 1334rpx ;.navRight { width : 144rpx; height : 46rpx; background : rgba ( 0, 0, 0, 0.1) ; border-radius : 40rpx 0rpx 0rpx 40rpx; padding-left : 20rpx; display : flex; align-items : center; uni-text { font-size : 24rpx; color : #fff; } uni-image { width : 10rpx; height : 17rpx; margin-left : 4rpx; } } .banner { display : block; width : 586rpx; height : 93rpx; margin : 20rpx auto 40rpx; } .title { text-align : center; font-size : 48rpx; font-weight : bold; color : #fff; margin-bottom : 20rpx; } .btn { width : 596rpx; height : 120rpx; background : url ( '../../static/img/154.png' ) ; background-size : 596rpx 120rpx; margin : 40rpx auto 35rpx; font-size : 40rpx; color : #BF3100; font-weight : bold; } .tips { padding : 30rpx 30rpx; .til { font-size : 28rpx; color : #fff; margin-bottom : 30rpx; } .text { line-height : 1.6; margin-bottom : 10rpx; font-size : 26rpx; color : #fff; } } }
</ style> 
