uni-app 九宫格抽奖活动

一、效果图

二、代码 

<template>
	<view class="container">
		<view class="container_circle" v-for="(v,i) in  circleList" :key="i"
		:style="{'top':v.topCircle+'rpx','left':v.leftCircle+'rpx','background-color':(i%2 ==0)?oneCircleColor:twoCircleColor}"></view>
		<view class="container_content">
			<view class="content_out" v-for="(v,i) in prizeList" :key="i"
			:style="{'top':v.topAward+'rpx','left':v.leftAward+'rpx',
			'background':  (i==indexSelect)?prizeCheckColor:prizeDefaultColor,
			'background-size':' 400%',
			'animation': 'animatebox 4s linear infinite'
			}">
			<image class="award_image" :src="v.imgList"></image>
			</view>
			<view class="content_btn" @tap="handleStart" :style="{'background-color':isRunning?'#55ffff':'#f7f7f7'}">开始</view>
		</view>
		<view class="container_num">剩余抽奖次数{{luckDrawNum}}</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				circleList:[], // 圆圈数组
				prizeList:[], // 奖品数组
				oneCircleColor:'#29f5ff', // 圆圈颜色1
				twoCircleColor:'#aaaaff', // 圆圈颜色2
				prizeDefaultColor:'#FFF', // 奖品的默认颜色
				prizeCheckColor:'linear-gradient(72.5deg, #aa0000, #ff0000, #ff00ff, #550000, #ffaaff, #aa0000, #ff0000)', // 奖品的选中颜色
				indexSelect: 0, //被选中的奖品index
				isRunning: false, //是否正在抽奖
				//奖品图片数组
				imgList:[
					'https://cdn.cnbj1.fds.api.mi-img.com/nr-pub/202209261921_a1b840c267bd26bcf4dc654d52f259e5.png?w=800&h=800',
					'https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/0bcd64f412dfb5e15695fa96d21ecb23.png?w=800&h=800',
					'https://cdn.cnbj1.fds.api.mi-img.com/nr-pub/202208111030_e3554c41e0484da99b16bb9e02142e68.png?w=800&h=800',
					'https://cdn.cnbj0.fds.api.mi-img.com/b2c-shopapi-pms/pms_1653393310.29013051.png',
					'https://cdn.cnbj1.fds.api.mi-img.com/nr-pub/202209261921_a1b840c267bd26bcf4dc654d52f259e5.png?w=800&h=800',
					'https://cdn.cnbj0.fds.api.mi-img.com/b2c-shopapi-pms/9E253411E26FD16C7215D7E74321FA45.png',
					'https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/cc0be95d45d0063b0aa8bb541be22c77.png?w=800&h=800',
					'https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/0c4b5e30d14ca8b51dc6fa6917295ff5.png?w=800&h=800'
				],
				luckDrawNum:2  ,//剩余抽奖次数
				repeat:true
			};
		},
		onLoad() {
			//圆点设置
			let topCircle = 7.5;
			let leftCircle = 7.5;
			let circleList = [];
			for(let i = 0; i < 24; i++) {
				if(i == 0) {
					topCircle = 15;
					leftCircle = 15;
				}else if (i < 6) {
					topCircle = 7.5;
					leftCircle += 102.5;
				}else if (i == 6) {
					topCircle = 15;
					leftCircle = 620;
				}else if (i < 12) {
					topCircle += 94;
					leftCircle = 620;
				}else if (i == 12) {
					topCircle = 565;
					leftCircle = 620;
				}else if (i < 18) {
					topCircle = 570;
					leftCircle-= 102.5; 
				}else if (i == 18) {
					topCircle = 565;
					leftCircle = 15;
				}else if (i < 24) {
					topCircle -= 94;
					leftCircle = 7.5;
				}else {
					return;
				}
				circleList.push({ topCircle, leftCircle });
			}
			this.circleList = circleList;
			//圆点闪烁
			setInterval(()=> {
			if (this.oneCircleColor == '#29f5ff') {
					this.oneCircleColor = '#aaaaff';
					this.twoCircleColor = '#29f5ff';
				} else {
					this.oneCircleColor = '#29f5ff';
					this.twoCircleColor = '#aaaaff';
				}
			},500)
			let prizeList = [];
			//间距,怎么顺眼怎么设置吧.
			let topAward = 25;
			let leftAward = 25;
			for (let j = 0; j < 8; j++) {
				if (j == 0) {
					topAward = 25;
					leftAward = 25;
				} else if (j < 3) {
					topAward = topAward;
					//166.6666是宽.15是间距.下同
					leftAward = leftAward + 166.6666 + 15;
				} else if (j < 5) {
					leftAward = leftAward;
					//150是高,15是间距,下同
					topAward = topAward + 150 + 15;
				} else if (j < 7) {
					leftAward = leftAward - 166.6666 - 15;
					topAward = topAward;
				} else if (j < 8) {
					leftAward = leftAward;
					topAward = topAward - 150 - 15;
				}
				let imgList = this.imgList[j];
				prizeList.push({ topAward, leftAward,imgList});
			}
			this.prizeList = prizeList;
		},
		methods:{
			// 点击开始
			handleStart(){
				if (this.isRunning) return;
				if (this.luckDrawNum != 0) {
					this.luckDrawNum--
				} else{
					uni.showModal({
						title: '提示',
						content: '分享获取抽奖次数',
						showCancel: false, 
						success: (res)=> {
							if (res.confirm) {
							}
						}
					});
					this.indexSelect = 0
					return
				}
				this.isRunning = true;
				let indexSelect = 0;
				let i = 0;
				let timer = setInterval(()=> {
					indexSelect++;
					i += 30;
					let randomNum = 1000+Math.ceil(Math.random()*1000)//控制奖品
					if (i > randomNum) {
						//去除循环
						clearInterval(timer);
						//获奖提示
						uni.showModal({
							title: '恭喜您',
							content: '获得了第' + (this.indexSelect + 1) + '个奖品',
							showCancel: false, 
							success: (res)=> {
								if (res.confirm) {
									this.isRunning = false;
								}
							}
						});
					}
					indexSelect = indexSelect % 8;
					this.indexSelect = indexSelect;
				},200 + i)
			}
		}
	}
</script>

<style lang="scss">
.container {
	position: relative;
	height: 600rpx;
	width: 650rpx;
	margin: 100rpx auto;
	border-radius: 40rpx;
	background: linear-gradient(72.5deg, #e9f78c, #ffffb9, #cc55e5, #ef9bcb, #e5b8d8, #ffb140, #f7ed54);
	background-size: 400%;
	animation: animatebox 4s linear infinite;
	@keyframes animatebox {
		0% {
			background-position: 0%;
		}
	
		50% {
			background-position: 100%;
		}
	
		100% {
			background-position: 0%;
		}
	}
	
	
	.container_circle {
		position: absolute;
		display: block;
		border-radius: 50%;
		height: 20rpx;
		width: 20rpx;
	}
	.container_content{
		position: absolute;
		left: 0;
		right: 0;
		top: 0;
		bottom: 0;
		width: 580rpx;
		height: 530rpx;
		background-color: #b375ff;
		
		
		border-radius: 40rpx;
		margin: auto;
		
		background: linear-gradient(72.5deg, #ef499c, #cc55e5, #ffb140, #f7ed54, #ffb140, #cc55e5, #ef499c);
		background-size: 400%;
		animation: animate1 4s linear infinite;
		@keyframes animate1 {
			0% {
				background-position: 0%;
			}
		
			50% {
				background-position: 100%;
			}
		
			100% {
				background-position: 0%;
			}
		}
		
		
		.content_out{
			position: absolute;
			height: 150rpx;
			width: 166.6666rpx;
			background-color: #f5f0fc;
			border-radius: 15rpx;
			box-shadow: 0 5px 0 #d87fde;
			.award_image{
				position: absolute;
				margin: auto;
				top: 0;
				left: 0;
				bottom: 0;
				right: 0;
				height: 140rpx;
				width: 130rpx;
			}
		}
		.content_btn{
			position: absolute;
			top: 50%;
			left: 50%;
			transform: translate(-50%,-50%);
			border-radius: 15rpx;
			height: 150rpx;
			width: 166.6666rpx;
			background-color: #ffe400;
			box-shadow: 0 5rpx 0 #e7930a;
			color: #b375ff;
			text-align: center;
			font-size: 55rpx;
			font-weight: bolder;
			line-height: 150rpx;
			background: linear-gradient(72.5deg, #f7a0ec, #ffb140, #e58da0, #ef7ecb, #ab9ae5, #ffec8a, #f6f7a6);
			background-size: 400%;
			animation: animate 4s linear infinite;
			@keyframes animate {
				0% {
					background-position: 0%;
				}
			
				50% {
					background-position: 100%;
				}
			
				100% {
					background-position: 0%;
				}
			}
			
		}
	}
	.container_num{
		position: absolute;
		top: -60rpx;
		left: 50%;
		transform: translateX(-50%);
		background-image: -webkit-linear-gradient(left, #083a96, #e63609 25%, #083a96 50%, #e63609 75%, #083a96);
		-webkit-text-fill-color: transparent;
		background-clip: text;
		background-size: 200% 100%;
		animation: masked-animation 4s infinite linear;
		@keyframes masked-animation {
			 0%{ background-position: 0 0;}
			 100% { background-position: -100% 0;}
		}
	}
}
</style>