uniapp九宫格概率抽奖功能

<template>
	<view class="">
		<uv-overlay :show="show" @click="show = false">
			<uv-modal ref="modal" title="抽奖活动" :content='draw[0].active.content' @confirm="confirm"></uv-modal>
		</uv-overlay>
		<view style="margin-top: 40px;">
			<uv-navbar title="抽奖">
				<template v-slot:left>
					<view class="uv-nav-slot">
						<uv-icon name="arrow-left" size="19" @tap="leftClick"></uv-icon>
						<uv-line direction="column" :hairline="false" length="16" margin="0 8px"></uv-line>
						<uv-icon name="home" size="20" @tap="home"></uv-icon>
					</view>
				</template>
			</uv-navbar>
		</view>
		<view class="draw">
			<image src="https://7up.pics/images/2023/12/26/img17704218ad045b198.png" mode="" class="draw_one"
				@tap="click">
			</image>
			<view class="last">
				<view class="draws_one" :style="'background-color:' +(back==1?'#F9DE23':'')" v-if="type==false">
				</view>
				<view class="draws_two" :style="'background-color:' +(back==2?'#F9DE23':'')" v-if="type==false">
				</view>
				<view class="draws_three" :style="'background-color:'+ (back==3?'#F9DE23':'')" v-if="type==false">
				</view>
				<view class="draws_four" :style="'background-color:'+ (back==4?'#F9DE23':'')" v-if="type==false">
				</view>
				<view class="draws_five" :style="'background-color:'+ (back==5?'#F9DE23':'')" v-if="type==false">
				</view>
				<view class="draws_six" :style="'background-color:'+ (back==6?'#F9DE23':'')" v-if="type==false">
				</view>
				<view class="draws_seven" :style="'background-color:'+ (back==7?'#F9DE23':'')" v-if="type==false">
				</view>
				<view class="draws_eight" :style="'background-color:'+ (back==8?'#F9DE23':'')" v-if="type==false">
				</view>


				<view class="draws_one" v-if="type==true">
					<image :src="'https://wwz.jingyi.icu'+draw[0].img" mode=""></image>
					<view class="">
						{{draw[0].name}}
					</view>
				</view>


				<view class="draws_two" v-if="type==true">
					<image :src="'https://wwz.jingyi.icu'+draw[1].img" mode="">
					</image>
					<view class="" v-if="type==true">
						{{draw[1].name}}
					</view>
				</view>


				<view class="draws_three" v-if="type==true">
					<image :src="'https://wwz.jingyi.icu'+draw[2].img" mode="">
					</image>
					<view class="">
						{{draw[2].name}}
					</view>
				</view>

				<view class="draws_four" v-if="type==true">
					<image :src="'https://wwz.jingyi.icu'+draw[3].img" mode=""></image>
					<view class="">
						{{draw[3].name}}
					</view>
				</view>


				<view class="draws_five" v-if="type==true">
					<image :src="'https://wwz.jingyi.icu'+draw[4].img" mode=""></image>
					<view class="">
						{{draw[4].name}}
					</view>
				</view>


				<view class="draws_six" v-if="type==true">
					<image :src="'https://wwz.jingyi.icu'+draw[5].img" mode=""></image>
					<view class="">
						{{draw[5].name}}
					</view>
				</view>

				<view class="draws_seven" v-if="type==true">
					<image :src="'https://wwz.jingyi.icu'+draw[6].img" mode="">
					</image>
					<view class="">
						{{draw[6].name}}
					</view>
				</view>
				<view class="draws_eight" v-if="type==true">
					<image :src="'https://wwz.jingyi.icu'+draw[7].img" mode="">
					</image>
					<view class="">
						{{draw[7].name}}
					</view>
				</view>
			</view>
			<view class="butt" @click="start">开始</view>
			<view class="butts" @click="end">结束</view>
		</view>
		<view class="hint">
			<view class="" @tap="shows">
				查看攻略
			</view>
			<view class="">
				可抽奖次数:{{nums}}
			</view>
			<view class="more" @tap="more">
				<view class="">
					更多
				</view>
				<view class="">
					<image src="../../static/right.png" mode=""></image>
				</view>
			</view>
		</view>
		<view class="content">
			<view class="content_head" style="">
				<view class="">
					序号
				</view>
				<view class="">
					昵称
				</view>
				<view class="">
					奖品
				</view>
				<view class="">
					时间
				</view>
			</view>

			<view class="container" style="margin-top:10px;">
				<scroll-view class="list" scroll-y>
					<view class="content_foot">
						<view class="" v-for="(item,index) in content" :key="item.id" style="margin-top: 10px;">
							<view class="contents" style="">
								<view class="">
									{{index+1}}
								</view>
								<view class="">
									{{item.nickname}}
								</view>
								<view class="">
									{{item.name}}
								</view>
								<view class="">
									{{item.create_time}}
								</view>
							</view>
						</view>
					</view>
				</scroll-view>
			</view>
		</view>
	</view>
</template>
<script>
	var intime = 100
	export default {
		data() {
			return {
				back: 0,
				type: true,
				draw: [],
				ai: null,
				round: 0,
				content: [],
				nums: 1,
				show: false,
				probability: [],
				Luck: true,
				index:null,
				user:'',

			}
		},
		onLoad() {
		this.user=uni.getStorageSync("userId")
		console.log(this.user);
	  this.winning_list()
			// 奖品列表
			let that = this;
			uni.request({
				url: "接口数据",
				method: 'POST',
				data: {
					参数
				},
				success: (res) => {
					console.log(res);
					that.draw = res.data.data;

				},
			});
		},

		methods: {
			// 提示
			winning_list(){
				uni.request({
					url: "接口数据",
					method: 'POST',
					success: (res) => {
						console.log(res, 123255225);
						this.content = res.data.data
				
					},
				})
			},

			click() {
				uni.showToast({
					title: '点击蓝色按钮开始，点击红色按钮暂停开奖',
					icon: "none"
				})
			},
			shows() {
				this.show = true
				this.$refs.modal.open();
			},

         // 跳转
		 more(){
			 uni.navigateTo({
			 	url:'/pages/prize_list/prize_list'
			 })
		 },

			//点击开始
			start() {
				if (this.Luck == false) { //防止过度点击
					return;
				}
				this.nums--
				this.Luck = false;
				let that = this
				that.type = false
				var arr = [];
				for (var i = 0; i < this.draw.length; i++) {
					for (var k = 0; k < this.draw[i].num; k++) {
						arr.push(i);
					}
				}
				console.log(arr);
				for (let i = 0, len = arr.length; i < len; i++) {
					let index = parseInt(Math.random() * (len - 1));
					let tempValue = arr[i];
					arr[i] = arr[index];
					arr[index] = tempValue;
				}
				
				console.log(arr);
				
				var a = Math.ceil(Math.random() * 100);
				console.log(arr[a],a);//5,81 每次不一样
				this.luckPosition = arr[a];
				// 使用永久性定时器
				that.ai = setInterval(() => {
					that.back += 1
					console.log(that.back);
					if (that.back == 9) {
						that.back = 1
						that.round += 1
					}
				}, intime)

			},
			random() {
				

				// var stack = [];
				// while (arr.length) {
				// 	var index = parseInt(Math.random() * arr.length); // 利用数组长度生成随机索引值
				// 	stack.push(arr[index]); // 将随机索引对应的数组元素添加到新的数组中
				// 	arr.splice(index, 1); // 删除原数组中随机生成的元素


				// }
			},

			//暂停
			end() {
				let that = this
				console.log(that.ai);
				if (that.ai==null) {
					uni.showToast({
					  title:'请先开始抽奖',
					  icon:"none"
					})
				}else if (that.round > 0){
					that.type = true
					clearInterval(that.ai)
					that.ai = null
					that.a = 0
                  console.log(this.luckPosition);
				    uni.request({
						header:{
							id:this.user
						},
						method:"POST",
				    	url:'接口数据',
						data:{
							参数
						},
						success(res) {
							console.log(res);
							that.winning_list()
							uni.showToast({
							  title:`恭喜获得${that.draw[that.luckPosition].name}`,
							   
							})
						}
				    })
		            
				 
				}
			

			},
		// 返回
		leftClick() {
			uni.navigateBack()
		},
		home() {
			uni.reLaunch({
				url: '/pages/shouye/tabbar'
			})
		},
		}
	}
</script>

<style scoped lang="scss">
	@mixin flex($direction: row) {
		/* #ifndef APP-NVUE */
		display: flex;
		/* #endif */
		flex-direction: $direction;
	}
	
	.uv-nav-slot {
		@include flex;
		align-items: center;
		justify-content: space-between;
		border-width: 0.5px;
		border-radius: 100px;
		border-color: #dadbde;
		padding: 3px 7px;
		opacity: 0.8;
	}
	
	.draw {
		position: relative;
	}

	.draw_one {
		width: 100vw;
		height: 100vh;
		position: absolute;
		top: 0;
		left: 0;
	}

	.last {
		font-size: 13px;
		text-align: center;
	}

	.last image {
		height: 45px;
		width: 45px;
	}

	.draws_one {
		height: 9vh;
		width: 24vw;
		position: absolute;
		z-index: 10;
		top: 28vh;
		left: 13vw;
		border-radius: 10rpx;
	}

	.butts {
		height: 4vh;
		width: 15vw;
		position: absolute;
		top: 57vh;
		left: 35vw;
		background-color: red;
		opacity: 0;
	}

	.butt {

		height: 4vh;
		width: 15vw;
		position: absolute;
		top: 57vh;
		left: 53vw;
		/* background-color: red; */
		opacity: 0;
	}

	.three_one {
		background-color: red;
		position: absolute;
		z-index: 10;
		top: 28vh;
		left: 13vw;
		border-radius: 10rpx;
	}


	.draws_two {
		height: 9vh;
		width: 24vw;
		position: absolute;
		z-index: 10;
		top: 28vh;
		left: 38vw;
		border-radius: 10rpx;
	}


	.draws_three {
		height: 9vh;
		width: 24vw;
		position: absolute;
		z-index: 10;
		top: 28vh;
		left: 63vw;
		border-radius: 10rpx;
	}

	.draws_four {
		height: 9vh;
		width: 24vw;
		position: absolute;
		z-index: 10;
		top: 37.8vh;
		left: 63vw;
		border-radius: 10rpx;
	}

	.draws_five {
		height: 9vh;
		width: 24vw;
		position: absolute;
		z-index: 10;
		top: 47.6vh;
		left: 63vw;
		border-radius: 10rpx;
	}

	.draws_six {
		height: 9vh;
		width: 24vw;
		position: absolute;
		z-index: 10;
		top: 47.6vh;
		left: 38vw;
		border-radius: 10rpx;
	}

	.draws_seven {
		height: 9vh;
		width: 24vw;
		position: absolute;
		z-index: 10;
		top: 47.6vh;
		left: 13vw;
		border-radius: 10rpx;
	}

	.draws_eight {
		height: 9vh;
		width: 24vw;
		position: absolute;
		z-index: 10;
		top: 37.8vh;
		left: 13vw;
		border-radius: 10rpx;
	}

	.content {
		margin-top: 70vh;
		text-align: center;
		font-size: 13px;
		position: absolute;


	}

	.content_head {
		display: flex;
		justify-content: space-around;
		text-align: center
	}

	.content_head view {
		width: 90px;
	}

	.contents {
		display: flex;
		justify-content: space-around;
		text-align: center;
	}

	.contents view {
		width: 90px;
	}

	.container {
		height: 150px;
		overflow: hidden;
	}

	.list {
		height: 100%;
	}

	/* 介绍 */
	.hint {
		display: flex;
		justify-content: space-between;
		align-items: center;
		position: absolute;
		margin-top: 62vh;
		font-size: 13px;
		width: 95%;
		margin-left: 2.5%;
	}

	.more image {
		width: 30px;
		height: 30px;
	}

	.more {
		display: flex;
		align-items: center;
	}
</style>