uniapp：幸运大转盘demo

Almost-Lottery来自插件市场

<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, // 抽奖转盘的整体尺寸，单位rpx
					actionSize: 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) 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].name
				let 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>

<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>