uniapp：幸运大转盘demo

在这里插入图片描述

<template><view class="index"><image src="../../static/img/158.png" mode="" class="banner"></image><view class="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">立即抽奖（{{freeNum}}次）</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, // 抽奖转盘的整体尺寸，单位rpxactionSize: 200 // 抽奖按钮的尺寸，单位rpx},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) returnthis.prizeing = truethis.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 = nulluni.hideLoading()uni.showToast({title: res.msg,mask: true,icon: 'none'})}, 50)},submit(){if (this.freeNum > 0) {this.handleDrawStart()} else {this.$toast('抽奖次数已用完')}},},}
</script><style lang="scss" scoped>.index {min-height: 100vh;background: url('../../static/img/153.png')no-repeat left top #D8231C;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')no-repeat center;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>