uniapp 实现抽奖功能

其他 2021-11-18 07:09:19 阅读次数: 0

实现效果

在这里插入图片描述

wxml代码

<view class="bg">
		<view class="container">
			<view class="limitbean">剩余极限豆 {
    
    {
    
    limitnum}}</view>
			<view class="frame_view">
				<view class="frame_row" style="margin-top: 48rpx;">
					<view class="frame_item" :class="'item' + color[0]">
						<image :src="award[0].img"></image>
						<text>{
    
    {
    
     award[0].name }}</text>
					</view>
					<view class="frame_item" :class="'item' + color[1]">
						<image :src="award[1].img"></image>
						<text>{
    
    {
    
     award[1].name }}</text>
					</view>
					<view class="frame_item" :class="'item' + color[2]">
						<image :src="award[2].img"></image>
						<text>{
    
    {
    
     award[2].name }}</text>
					</view>
				</view>

				<view class="frame_row">
					<view class="frame_item" :class="'item' + color[7]">
						<image :src="award[7].img"></image>
						<text>{
    
    {
    
     award[7].name }}</text>
					</view>
					<!-- 抽奖 -->
					<!-- <image class="frame_item" :src="btnconfirm" @click="clickLuck"></image> -->
					<view style="text-align: center;color: #fff;">
						<view style="font-size: 36rpx;">{
    
    {
    
    free}}次</view>
						<view style="font-size: 28rpx;">免费次数</view>
					</view>
					<view class="frame_item" :class="'item' + color[3]">
						<image :src="award[3].img"></image>
						<text>{
    
    {
    
     award[3].name }}</text>
					</view>
				</view>

				<view class="frame_row">
					<view class="frame_item" :class="'item' + color[6]">
						<image :src="award[6].img"></image>
						<text>{
    
    {
    
     award[6].name }}</text>
					</view>
					<view class="frame_item" :class="'item' + color[5]">
						<image :src="award[5].img"></image>
						<text>{
    
    {
    
     award[5].name }}</text>
					</view>
					<view class="frame_item" :class="'item' + color[4]">

						<image :src="award[4].img"></image>
						<text>{
    
    {
    
     award[4].name }}</text>
					</view>
				</view>
			</view>
			<view class="luckbtulist">
				<view class="luckone" @click="clickLuck">
					<p v-if="payout==0" style="margin-top: 30upx;">免费抽1次</p>
					<view v-if="payout==1">
						<p style="margin-top: 10upx;">100极限豆</p>
						<p>抽1次</p>
					</view>

				</view>
				<view class="luckfive" @click="clickLuckFive">
					<p v-if="payout==0" style="margin-top: 30upx;">免费抽5次</p>

					<view v-if="payout==1">
						<p style="margin-top: 10upx;">400极限豆</p>
						<p>抽5次</p>
					</view>
				</view>
			</view>
			<view class="lucktips">
				<view class="lucktab">
					<view class="luckrule" @click="toggleTabs(0)" :style="styleObject">活动规则</view>
					<view class="record" @click="toggleTabs(1)" :style="styleObject1">获奖记录</view>
				</view>
				<view v-show="nowIndex==0" class="ruleinof">
					<view class="ruleconten">1、每100极限豆抽一次。</view>
					<view class="ruleconten">2、用户每日可免费抽5次，会员L3级以上根据会员权益次数增加。</view>
					<view class="ruleconten">3、系统赠送免费抽奖次数仅限当日使用。</view>
					<view class="ruleconten">4、抽中金币或疯狂值，实时发放，可在疯狂值明细或金币明细中查看。</view>
					<view class="ruleconten">5、抽中实物者，极限之路官方客服将会在3个工作日内通过电话取得联系，请保持手机畅通。</view>
					<view class="ruleconten">6、本活动最终解释权归极限之路科技有限公司所有。</view>
				</view>
				<view class="ruleinof" v-show="nowIndex==1">
					<view style="width: 100%;height: 496rpx;  margin-top: 40rpx;overflow-y:auto;">
						<view class="recordlist">
							<view class="">2019-04-18 14:32:39</view>
							<view class="">+500 极限豆</view>
						</view>
						<view class="recordlist">
							<view class="">2019-04-18 14:32:39</view>
							<view class="">+500 极限豆</view>
						</view>
						<view class="recordlist">
							<view class="">2019-04-18 14:32:39</view>
							<view class="">+500 极限豆</view>
						</view>
						<view class="recordlist">
							<view class="">2019-04-18 14:32:39</view>
							<view class="">+500 极限豆</view>
						</view>
					</view>
				</view>
			</view>
		</view>
		<!-- 弹出窗口 -->
		<view :class="{'share-box': shareState}" @click="handleHiddenShare">
			<view v-if="lucktype==0" class="nopop" :class="{'share-show': shareState}">
				<view style="margin-top: 60rpx;margin-left: 180rpx;margin-bottom: 30rpx;">
					<image src="https://cdnapp.jixianzhilu.cn/circle_image/2021_06_8_14_36_52_5.png" mode=""
						style="width: 124rpx;height: 144rpx;"></image>
				</view>
				<view class="poptitle">抽奖次数不足</view>
				<view class="popbtn">确定</view>
			</view>
			<!-- 单抽 -->
			<view v-else-if="lucktype==1" class="onepop" :class="{'share-show': shareState}">
				<view class="popconten">
					<image :src="prizeimg" mode="" style="width: 190rpx;height: 190rpx;"></image>
					<view style="margin-top: 20rpx;color: #4A4A4A;font-size: 28rpx;">{
    
    {
    
    prize}}</view>
				</view>
				<view class="popbtn" style="margin-top: -90rpx;">确定</view>
			</view>
			<!-- 五连抽 -->
			<view v-else-if="lucktype==2" class="onepop" :class="{'share-show': shareState}">
				<view class="popcontenlist">
					<view class="poplucklist">
						<image :src="prizeimg" mode="" style="width: 80rpx;height: 80rpx;"></image>
						<view style="margin-top: 0rpx;color: #4A4A4A;font-size: 28rpx;">{
    
    {
    
    prize}}</view>
					</view>

					<view class="poplucklist">
						<image :src="prizeimg" mode="" style="width: 80rpx;height: 80rpx;"></image>
						<view style="margin-top: 0rpx;color: #4A4A4A;font-size: 28rpx;">{
    
    {
    
    prize}}</view>
					</view>

					<view class="poplucklist">
						<image :src="prizeimg" mode="" style="width: 80rpx;height: 80rpx;"></image>
						<view style="margin-top: 0rpx;color: #4A4A4A;font-size: 28rpx;">{
    
    {
    
    prize}}</view>
					</view>

					<view class="poplucklist">
						<image :src="prizeimg" mode="" style="width: 80rpx;height: 80rpx;"></image>
						<view style="margin-top: 0rpx;color: #4A4A4A;font-size: 28rpx;">{
    
    {
    
    prize}}</view>
					</view>

					<view class="poplucklist">
						<image :src="prizeimg" mode="" style="width: 80rpx;height: 80rpx;"></image>
						<view style="margin-top: 0rpx;color: #4A4A4A;font-size: 28rpx;">{
    
    {
    
    prize}}</view>
					</view>

				</view>
				<view class="popbtn" style="margin-top: 60rpx;">确定</view>
			</view>
		</view>
	</view>

js代码

<script>
	//计数器
	var interval = null;
	//值越大旋转时间越长  即旋转速度
	var intime = 100;
	export default {
    
    
		data() {
    
    
			return {
    
    
				nowIndex: 0,
				color: [0, 0, 0, 0, 0, 0, 0, 0],
				award: [{
    
    
						img: 'https://cdnapp.jixianzhilu.cn/circle_image/2021_06_8_14_34_47_2.png',
						name: '+1000极限豆',
						chance: '0'
					},
					{
    
    
						img: 'https://cdnapp.jixianzhilu.cn/circle_image/2021_06_8_14_35_36_10.png',
						name: '+150极限值',
						chance: '0'
					},
					{
    
    
						img: 'https://cdnapp.jixianzhilu.cn/circle_image/2021_06_8_14_35_36_10.png',
						name: '+160极限值',
						chance: '0'
					},
					{
    
    
						img: 'https://cdnapp.jixianzhilu.cn/circle_image/2021_06_8_14_34_47_2.png',
						name: '+170极限豆',
						chance: '8'
					},
					{
    
    
						img: 'https://cdnapp.jixianzhilu.cn/circle_image/2021_06_8_14_35_36_10.png',
						name: '+180极限值',
						chance: '0'
					},
					{
    
    
						img: 'https://cdnapp.jixianzhilu.cn/circle_image/2021_06_8_14_34_47_2.png',
						name: '+100极限豆',
						chance: '2'
					},
					{
    
    
						img: 'https://cdnapp.jixianzhilu.cn/circle_image/2021_06_8_14_35_36_10.png',
						name: '+120极限值',
						chance: '3'
					},
					{
    
    
						img: 'https://cdnapp.jixianzhilu.cn/circle_image/2021_06_8_14_35_36_10.png',
						name: '+140极限值',
						chance: '2'
					}
				], //接收数组
				Luck: true, //防置重复点击
				lucktype: 2, //判断奖品类型
				luckPosition: 0, //停止位置
				prize: '+2000极限豆', //奖品，
				prizeimg: 'https://cdnapp.jixianzhilu.cn/circle_image/2021_06_8_14_35_36_10.png', //奖品图片
				// 弹窗按钮
				shareState: false,
				// 极限豆
				limitnum: 100,
				// tab切换
				styleObject: {
    
    
					'border-bottom': '3px solid #A24A1E',
				},
				styleObject1: '',
				//免费
				free: 2,
				// 判断类型
				payout: 0
			};
		},
		methods: {
    
    
			// 记录切换
			toggleTabs(index) {
    
    
				this.nowIndex = index;
				// this.shareState=true
				if (index == 1) {
    
    
					this.styleObject1 = {
    
    
						'border-bottom': '3px solid #A24A1E',
					}
					this.styleObject = {
    
    }
				} else {
    
    
					this.styleObject = {
    
    
						'border-bottom': '3px solid #A24A1E',
					}
					this.styleObject1 = {
    
    }
				}
			},
			// 关闭中奖弹窗
			handleHiddenShare() {
    
    
				this.shareState = false
			},
			// 点击抽奖
			clickLuck() {
    
    
				if (this.Luck == false) {
    
     //防止过度点击
					return;
				}
				this.Luck = false;
				// 判断极限豆
				if (this.limitnum < 100) {
    
    
					this.shareState = true
					this.lucktype = 0
					this.Luck = true;
					return;
				}
				//判断免费次数		
				if (this.free == 0 && this.limitnum < 100) {
    
    
					this.shareState = true
					this.lucktype = 0
					this.Luck = true;
				}
				var arr = [];
				//根据概率循环位置
				for (var i = 0; i < this.award.length; i++) {
    
    
					for (var k = 0; k < this.award[i].chance; 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() * 10);
				// console.log(arr[a]);			
				//    console.log(this.award[arr[a]].name)				
				if (this.free != 0) {
    
    
					this.free = this.free - 1 //抽奖次数减1
				}

				if (this.free == 0) {
    
    
					this.payout = 1
				}
				this.luckPosition = arr[a]; //位置
				this.prize = this.award[arr[a]].name //奖品名字
				this.prizeimg = this.award[arr[a]].img //奖品图片
				// 设置this
				var e = this;
				//设置按钮不可点击
				//	e.btnconfirm = getApp().globalData.img_url + '/dianjichoujiangd.png';
				//清空计时器
				clearInterval(interval);
				var index = 0;
				//循环设置每一项的背景图
				interval = setInterval(function() {
    
    
					var c = [0, 0, 0, 0, 0, 0, 0, 0];
					if (index > 7) {
    
    
						index = 0;
					}
					c[index] = 1;
					e.color = c;
					index++;
				}, intime);
				// console.log(intime);
				//模拟网络请求时间  设为两秒
				// var stoptime = 1000;
				// setTimeout(function() {
    
    
				e.stop(e.luckPosition);
				// }, stoptime);
			},

			// 停止
			stop(which) {
    
    
				var e = this;
				//清空计数器
				clearInterval(interval);
				//初始化当前位置
				var current = -1;
				var color = e.color;
				for (var i = 0; i < color.length; i++) {
    
    
					if (color[i] == 1) {
    
    
						current = i;
					}
				}
				//下标从1开始
				var index = current + 1;
				e.stopLuck(which, index, intime, 10);
			},
			/**
			 * which:中奖位置
			 * index:当前位置
			 * time：时间标记
			 * splittime：每次增加的时间 值越大减速越快
			 */
			stopLuck(which, index, time, splittime) {
    
    
				var e = this;
				//值越大出现中奖结果后减速时间越长
				var color = e.color;
				setTimeout(function() {
    
    
					//重置前一个位置
					var c = [0, 0, 0, 0, 0, 0, 0, 0];
					if (index > 7) {
    
    
						index = 0;
					}
					//当前位置为选中状态
					c[index] = 1;
					e.color = c;
					//如果旋转时间过短或者当前位置不等于中奖位置则递归执行
					//直到旋转至中奖位置
					if (time < 400 || index != which) {
    
    
						//越来越慢
						splittime++;
						time += splittime;
						//当前位置+1
						index++;
						e.stopLuck(which, index, time, splittime);
					} else {
    
    
						//中奖
						e.shareState = true
						e.Luck = true;
						e.lucktype = 1
						if (e.payout == 1) {
    
    
							e.limitnum = e.limitnum - 100
						}

					}
				}, time);
			},
			// 五连抽
			clickLuckFive() {
    
    
				this.shareState = true
				this.payout = 1
				if (this.free < 5) {
    
    
					this.lucktype = 0
				} else {
    
    
					this.free = 0
					this.lucktype = 2 //五连抽
				}


			}

		},


	};
</script>

css代码

<style>
	.bg {
    
    
		width: 100%;
		min-height: 2200upx;
		background: url("https://cdnapp.jixianzhilu.cn/circle_image/2021_06_8_14_37_20_3.png") no-repeat;
		background-size: 100% 100%;

	}

	.container {
    
    
		overflow: hidden;
	}

	.limitbean {
    
    
		width: 100%;
		color: #fff;
		text-align: center;
		margin-top: 398rpx;
		font-size: 30rpx;
		margin-bottom: 24rpx;
	}

	.frame_view {
    
    
		width: 648rpx;
		height: 688rpx;
		margin: 0 auto;
		border-radius: 30rpx;
		background: url("https://cdnapp.jixianzhilu.cn/circle_image/2021_06_8_14_37_50_4.png") no-repeat;
		background-size: 100% 100%;
		overflow: hidden;
	}

	.frame_row {
    
    
		width: 520rpx;
		height: 168rpx;
		display: flex;
		flex-direction: row;
		justify-content: space-between;
		align-items: center;
		margin-left: 64rpx;
		margin-bottom: 20rpx;

	}

	.frame_item {
    
    
		width: 168rpx;
		height: 168rpx;
		display: flex;
		align-items: center;
		justify-content: center;
		flex-wrap: wrap;
		font-size: 20px;
		/* box-sizing:border-box; */
		background: #FFFFFF;
		/* 	border-radius: 17px; */
		/* 	box-shadow: 0px 6px 0px 0px rgba(236,231,228,1); */
		background: url("https://cdnapp.jixianzhilu.cn/circle_image/2021_06_8_14_41_5_0.png") no-repeat;
		background-size: 100% 100%;


	}

	.frame_item image {
    
    
		width: 80rpx;
		height: 80rpx;
		display: block;

	}

	.frame_item text {
    
    
		font-size: 26rpx;
		display: block;
		width: 100%;
		text-align: center;
		color: #818181;
		margin-top: -40rpx;
	}

	.item1 {
    
    
		background: url("https://cdnapp.jixianzhilu.cn/circle_image/2021_06_8_14_42_16_6.png") no-repeat;
		background-size: 100% 100%;
		// box-shadow: 0px 10px 20px 0px rgba(170,56,0,1), 0px 0px 20px 0px rgba(196,58,215,1), 0px 4px 0px 0px rgba(255,255,255,0.29);

	}

	.luckbtulist {
    
    
		width: 100%;
		display: flex;
		align-items: center;
		justify-content: center;
		color: #fff;
	}

	.luckone {
    
    
		width: 310upx;
		height: 100upx;
		background: linear-gradient(360deg, #E4392C 0%, #F6A261 100%);
		box-shadow: 0px 10px 20px 0px rgba(153, 0, 0, 0.81), 0px 5px 0px 0px rgba(195, 48, 7, 1), 0px 4px 0px 0px rgba(255, 255, 255, 0.23);
		border-radius: 50upx;
		margin-right: 28rpx;
		text-align: center;
	}

	.luckfive {
    
    
		width: 310upx;
		height: 100upx;
		background: linear-gradient(180deg, #FFC3AC 0%, #D43EDC 100%);
		box-shadow: 0px 10px 20px 0px rgba(170, 56, 0, 1), 0px 5px 0px 0px rgba(196, 58, 215, 1), 0px 4px 0px 0px rgba(255, 255, 255, 0.29);
		border-radius: 50px;
		text-align: center;
	}

	.lucktips {
    
    
		width: 686rpx;
		height: 800rpx;
		background: #FFF8DF;
		border-radius: 20rpx;
		margin: 0 auto;
		margin-top: 70rpx;
	}

	.lucktab {
    
    
		width: 580rpx;
		height: 104rpx;
		border-bottom: 1rpx solid #A24A1E;
		margin: 0 auto;
		display: flex;
		align-items: center;
		justify-content: space-around;
		font-size: 28rpx;
		color: #98370A;
		font-weight: 600;
	}

	.lucktab view {
    
    
		height: 100%;
		line-height: 104rpx;
	}

	.action {
    
    

		border-bottom: 3px solid #A24A1E;

	}

	.ruleinof {
    
    
		width: 584rpx;
		height: 496rpx;
		margin: 0 auto;
		font-size: 28rpx;
		font-family: PingFangSC-Regular, PingFang SC;
		font-weight: 400;
		color: #D97645;

	}

	.ruleinof .ruleconten {
    
    
		margin-top: 40rpx;
		line-height: 40rpx;
	}

	.recordlist {
    
    
		display: flex;
		align-items: center;
		justify-content: space-between;
		margin-bottom: 20rpx;
	}


	// 弹出窗口
	.share-box {
    
    
		width: 100%;
		height: 100%;
		position: fixed;
		top: 0rpx;
		left: 0rpx;
		bottom: 0rpx;
		right: 0rpx;
		background-color: rgba(0, 0, 0, 0.4);
		transition: .3s;
		z-index: 999;
	}

	.nopop {
    
    
		display: none;
		width: 470rpx;
		height: 455rpx;
		background: #FFFFFF;
		border-radius: 30px;
		position: absolute;
		left: 50%;
		top: 50%;
		margin-top: -228rpx;
		/* 高度的一半 */
		margin-left: -235rpx;
		/* 宽度的一半 */
	}

	.share-show {
    
    
		display: block !important;
	}

	.poptitle {
    
    
		font-size: 28rpx;
		font-family: PingFangSC-Regular, PingFang SC;
		font-weight: 400;
		color: #4A4A4A;
		text-align: center;

	}

	.popbtn {
    
    
		width: 310upx;
		height: 100upx;
		background: linear-gradient(360deg, #E4392C 0%, #F6A261 100%);
		box-shadow: 0px 10px 10px 0px rgba(153, 0, 0, 0.81), 0px 5px 0px 0px rgba(195, 48, 7, 1), 0px 4px 0px 0px rgba(255, 255, 255, 0.23);
		border-radius: 50upx;
		margin-right: 28rpx;
		text-align: center;
		line-height: 100upx;
		font-size: 32upx;
		color: #fff;
		margin: 0 auto;
		margin-top: 36upx;
	}

	.onepop {
    
    
		display: none;
		width: 696rpx;
		height: 872rpx;
		background: url("https://cdnapp.jixianzhilu.cn/circle_image/2021_06_8_14_41_31_5.png") no-repeat;
		background-size: 100% 100%;
		position: absolute;
		left: 50%;
		top: 50%;
		margin-top: -438rpx;
		/* 高度的一半 */
		margin-left: -350rpx;
		/* 宽度的一半 */
		overflow: hidden;
	}

	.popconten {
    
    
		width: 470rpx;
		height: 472rpx;
		background: url("https://cdnapp.jixianzhilu.cn/circle_image/2021_06_8_14_39_28_5.png") no-repeat;
		background-size: 100% 100%;
		margin: 0 auto;
		margin-top: 340rpx;
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;

	}

	.popcontenlist {
    
    
		width: 470rpx;
		height: 300rpx;
		margin: 0 auto;
		margin-top: 370rpx;
		display: flex;
		align-items: center;
		flex-wrap: wrap;

	}

	.poplucklist {
    
    
		width: 88rpx;
		height: 180rpx;
		margin-left: 56rpx;
	}
</style>

完整代码如下

<template>
	<view class="bg">
		<view class="container">
			<view class="limitbean">剩余极限豆 {
    
    {
    
    limitnum}}</view>
			<view class="frame_view">
				<view class="frame_row" style="margin-top: 48rpx;">
					<view class="frame_item" :class="'item' + color[0]">
						<image :src="award[0].img"></image>
						<text>{
    
    {
    
     award[0].name }}</text>
					</view>
					<view class="frame_item" :class="'item' + color[1]">
						<image :src="award[1].img"></image>
						<text>{
    
    {
    
     award[1].name }}</text>
					</view>
					<view class="frame_item" :class="'item' + color[2]">
						<image :src="award[2].img"></image>
						<text>{
    
    {
    
     award[2].name }}</text>
					</view>
				</view>

				<view class="frame_row">
					<view class="frame_item" :class="'item' + color[7]">
						<image :src="award[7].img"></image>
						<text>{
    
    {
    
     award[7].name }}</text>
					</view>
					<!-- 抽奖 -->
					<!-- <image class="frame_item" :src="btnconfirm" @click="clickLuck"></image> -->
					<view style="text-align: center;color: #fff;">
						<view style="font-size: 36rpx;">{
    
    {
    
    free}}次</view>
						<view style="font-size: 28rpx;">免费次数</view>
					</view>
					<view class="frame_item" :class="'item' + color[3]">
						<image :src="award[3].img"></image>
						<text>{
    
    {
    
     award[3].name }}</text>
					</view>
				</view>

				<view class="frame_row">
					<view class="frame_item" :class="'item' + color[6]">
						<image :src="award[6].img"></image>
						<text>{
    
    {
    
     award[6].name }}</text>
					</view>
					<view class="frame_item" :class="'item' + color[5]">
						<image :src="award[5].img"></image>
						<text>{
    
    {
    
     award[5].name }}</text>
					</view>
					<view class="frame_item" :class="'item' + color[4]">

						<image :src="award[4].img"></image>
						<text>{
    
    {
    
     award[4].name }}</text>
					</view>
				</view>
			</view>
			<view class="luckbtulist">
				<view class="luckone" @click="clickLuck">
					<p v-if="payout==0" style="margin-top: 30upx;">免费抽1次</p>
					<view v-if="payout==1">
						<p style="margin-top: 10upx;">100极限豆</p>
						<p>抽1次</p>
					</view>

				</view>
				<view class="luckfive" @click="clickLuckFive">
					<p v-if="payout==0" style="margin-top: 30upx;">免费抽5次</p>

					<view v-if="payout==1">
						<p style="margin-top: 10upx;">400极限豆</p>
						<p>抽5次</p>
					</view>
				</view>
			</view>
			<view class="lucktips">
				<view class="lucktab">
					<view class="luckrule" @click="toggleTabs(0)" :style="styleObject">活动规则</view>
					<view class="record" @click="toggleTabs(1)" :style="styleObject1">获奖记录</view>
				</view>
				<view v-show="nowIndex==0" class="ruleinof">
					<view class="ruleconten">1、每100极限豆抽一次。</view>
					<view class="ruleconten">2、用户每日可免费抽5次，会员L3级以上根据会员权益次数增加。</view>
					<view class="ruleconten">3、系统赠送免费抽奖次数仅限当日使用。</view>
					<view class="ruleconten">4、抽中金币或疯狂值，实时发放，可在疯狂值明细或金币明细中查看。</view>
					<view class="ruleconten">5、抽中实物者，极限之路官方客服将会在3个工作日内通过电话取得联系，请保持手机畅通。</view>
					<view class="ruleconten">6、本活动最终解释权归极限之路科技有限公司所有。</view>
				</view>
				<view class="ruleinof" v-show="nowIndex==1">
					<view style="width: 100%;height: 496rpx;  margin-top: 40rpx;overflow-y:auto;">
						<view class="recordlist">
							<view class="">2019-04-18 14:32:39</view>
							<view class="">+500 极限豆</view>
						</view>
						<view class="recordlist">
							<view class="">2019-04-18 14:32:39</view>
							<view class="">+500 极限豆</view>
						</view>
						<view class="recordlist">
							<view class="">2019-04-18 14:32:39</view>
							<view class="">+500 极限豆</view>
						</view>
						<view class="recordlist">
							<view class="">2019-04-18 14:32:39</view>
							<view class="">+500 极限豆</view>
						</view>
					</view>
				</view>
			</view>
		</view>
		<!-- 弹出窗口 -->
		<view :class="{'share-box': shareState}" @click="handleHiddenShare">
			<view v-if="lucktype==0" class="nopop" :class="{'share-show': shareState}">
				<view style="margin-top: 60rpx;margin-left: 180rpx;margin-bottom: 30rpx;">
					<image src="https://cdnapp.jixianzhilu.cn/circle_image/2021_06_8_14_36_52_5.png" mode=""
						style="width: 124rpx;height: 144rpx;"></image>
				</view>
				<view class="poptitle">抽奖次数不足</view>
				<view class="popbtn">确定</view>
			</view>
			<!-- 单抽 -->
			<view v-else-if="lucktype==1" class="onepop" :class="{'share-show': shareState}">
				<view class="popconten">
					<image :src="prizeimg" mode="" style="width: 190rpx;height: 190rpx;"></image>
					<view style="margin-top: 20rpx;color: #4A4A4A;font-size: 28rpx;">{
    
    {
    
    prize}}</view>
				</view>
				<view class="popbtn" style="margin-top: -90rpx;">确定</view>
			</view>
			<!-- 五连抽 -->
			<view v-else-if="lucktype==2" class="onepop" :class="{'share-show': shareState}">
				<view class="popcontenlist">
					<view class="poplucklist">
						<image :src="prizeimg" mode="" style="width: 80rpx;height: 80rpx;"></image>
						<view style="margin-top: 0rpx;color: #4A4A4A;font-size: 28rpx;">{
    
    {
    
    prize}}</view>
					</view>

					<view class="poplucklist">
						<image :src="prizeimg" mode="" style="width: 80rpx;height: 80rpx;"></image>
						<view style="margin-top: 0rpx;color: #4A4A4A;font-size: 28rpx;">{
    
    {
    
    prize}}</view>
					</view>

					<view class="poplucklist">
						<image :src="prizeimg" mode="" style="width: 80rpx;height: 80rpx;"></image>
						<view style="margin-top: 0rpx;color: #4A4A4A;font-size: 28rpx;">{
    
    {
    
    prize}}</view>
					</view>

					<view class="poplucklist">
						<image :src="prizeimg" mode="" style="width: 80rpx;height: 80rpx;"></image>
						<view style="margin-top: 0rpx;color: #4A4A4A;font-size: 28rpx;">{
    
    {
    
    prize}}</view>
					</view>

					<view class="poplucklist">
						<image :src="prizeimg" mode="" style="width: 80rpx;height: 80rpx;"></image>
						<view style="margin-top: 0rpx;color: #4A4A4A;font-size: 28rpx;">{
    
    {
    
    prize}}</view>
					</view>

				</view>
				<view class="popbtn" style="margin-top: 60rpx;">确定</view>
			</view>
		</view>
	</view>
</template>

<script>
	//计数器
	var interval = null;
	//值越大旋转时间越长  即旋转速度
	var intime = 100;
	export default {
    
    
		data() {
    
    
			return {
    
    
				nowIndex: 0,
				color: [0, 0, 0, 0, 0, 0, 0, 0],
				award: [{
    
    
						img: 'https://cdnapp.jixianzhilu.cn/circle_image/2021_06_8_14_34_47_2.png',
						name: '+1000极限豆',
						chance: '0'
					},
					{
    
    
						img: 'https://cdnapp.jixianzhilu.cn/circle_image/2021_06_8_14_35_36_10.png',
						name: '+150极限值',
						chance: '0'
					},
					{
    
    
						img: 'https://cdnapp.jixianzhilu.cn/circle_image/2021_06_8_14_35_36_10.png',
						name: '+160极限值',
						chance: '0'
					},
					{
    
    
						img: 'https://cdnapp.jixianzhilu.cn/circle_image/2021_06_8_14_34_47_2.png',
						name: '+170极限豆',
						chance: '8'
					},
					{
    
    
						img: 'https://cdnapp.jixianzhilu.cn/circle_image/2021_06_8_14_35_36_10.png',
						name: '+180极限值',
						chance: '0'
					},
					{
    
    
						img: 'https://cdnapp.jixianzhilu.cn/circle_image/2021_06_8_14_34_47_2.png',
						name: '+100极限豆',
						chance: '2'
					},
					{
    
    
						img: 'https://cdnapp.jixianzhilu.cn/circle_image/2021_06_8_14_35_36_10.png',
						name: '+120极限值',
						chance: '3'
					},
					{
    
    
						img: 'https://cdnapp.jixianzhilu.cn/circle_image/2021_06_8_14_35_36_10.png',
						name: '+140极限值',
						chance: '2'
					}
				], //接收数组
				Luck: true, //防置重复点击
				lucktype: 2, //判断奖品类型
				luckPosition: 0, //停止位置
				prize: '+2000极限豆', //奖品，
				prizeimg: 'https://cdnapp.jixianzhilu.cn/circle_image/2021_06_8_14_35_36_10.png', //奖品图片
				// 弹窗按钮
				shareState: false,
				// 极限豆
				limitnum: 100,
				// tab切换
				styleObject: {
    
    
					'border-bottom': '3px solid #A24A1E',
				},
				styleObject1: '',
				//免费
				free: 2,
				// 判断类型
				payout: 0
			};
		},
		methods: {
    
    
			// 记录切换
			toggleTabs(index) {
    
    
				this.nowIndex = index;
				// this.shareState=true
				if (index == 1) {
    
    
					this.styleObject1 = {
    
    
						'border-bottom': '3px solid #A24A1E',
					}
					this.styleObject = {
    
    }
				} else {
    
    
					this.styleObject = {
    
    
						'border-bottom': '3px solid #A24A1E',
					}
					this.styleObject1 = {
    
    }
				}
			},
			// 关闭中奖弹窗
			handleHiddenShare() {
    
    
				this.shareState = false
			},
			// 点击抽奖
			clickLuck() {
    
    
				if (this.Luck == false) {
    
     //防止过度点击
					return;
				}
				this.Luck = false;
				// 判断极限豆
				if (this.limitnum < 100) {
    
    
					this.shareState = true
					this.lucktype = 0
					this.Luck = true;
					return;
				}
				//判断免费次数		
				if (this.free == 0 && this.limitnum < 100) {
    
    
					this.shareState = true
					this.lucktype = 0
					this.Luck = true;
				}
				var arr = [];
				//根据概率循环位置
				for (var i = 0; i < this.award.length; i++) {
    
    
					for (var k = 0; k < this.award[i].chance; 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() * 10);
				// console.log(arr[a]);			
				//    console.log(this.award[arr[a]].name)				
				if (this.free != 0) {
    
    
					this.free = this.free - 1 //抽奖次数减1
				}

				if (this.free == 0) {
    
    
					this.payout = 1
				}
				this.luckPosition = arr[a]; //位置
				this.prize = this.award[arr[a]].name //奖品名字
				this.prizeimg = this.award[arr[a]].img //奖品图片
				// 设置this
				var e = this;
				//设置按钮不可点击
				//	e.btnconfirm = getApp().globalData.img_url + '/dianjichoujiangd.png';
				//清空计时器
				clearInterval(interval);
				var index = 0;
				//循环设置每一项的背景图
				interval = setInterval(function() {
    
    
					var c = [0, 0, 0, 0, 0, 0, 0, 0];
					if (index > 7) {
    
    
						index = 0;
					}
					c[index] = 1;
					e.color = c;
					index++;
				}, intime);
				// console.log(intime);
				//模拟网络请求时间  设为两秒
				// var stoptime = 1000;
				// setTimeout(function() {
    
    
				e.stop(e.luckPosition);
				// }, stoptime);
			},

			// 停止
			stop(which) {
    
    
				var e = this;
				//清空计数器
				clearInterval(interval);
				//初始化当前位置
				var current = -1;
				var color = e.color;
				for (var i = 0; i < color.length; i++) {
    
    
					if (color[i] == 1) {
    
    
						current = i;
					}
				}
				//下标从1开始
				var index = current + 1;
				e.stopLuck(which, index, intime, 10);
			},
			/**
			 * which:中奖位置
			 * index:当前位置
			 * time：时间标记
			 * splittime：每次增加的时间 值越大减速越快
			 */
			stopLuck(which, index, time, splittime) {
    
    
				var e = this;
				//值越大出现中奖结果后减速时间越长
				var color = e.color;
				setTimeout(function() {
    
    
					//重置前一个位置
					var c = [0, 0, 0, 0, 0, 0, 0, 0];
					if (index > 7) {
    
    
						index = 0;
					}
					//当前位置为选中状态
					c[index] = 1;
					e.color = c;
					//如果旋转时间过短或者当前位置不等于中奖位置则递归执行
					//直到旋转至中奖位置
					if (time < 400 || index != which) {
    
    
						//越来越慢
						splittime++;
						time += splittime;
						//当前位置+1
						index++;
						e.stopLuck(which, index, time, splittime);
					} else {
    
    
						//中奖
						e.shareState = true
						e.Luck = true;
						e.lucktype = 1
						if (e.payout == 1) {
    
    
							e.limitnum = e.limitnum - 100
						}

					}
				}, time);
			},
			// 五连抽
			clickLuckFive() {
    
    
				this.shareState = true
				this.payout = 1
				if (this.free < 5) {
    
    
					this.lucktype = 0
				} else {
    
    
					this.free = 0
					this.lucktype = 2 //五连抽
				}


			}

		},


	};
</script>

<style>
	.bg {
    
    
		width: 100%;
		min-height: 2200upx;
		background: url("https://cdnapp.jixianzhilu.cn/circle_image/2021_06_8_14_37_20_3.png") no-repeat;
		background-size: 100% 100%;

	}

	.container {
    
    
		overflow: hidden;
	}

	.limitbean {
    
    
		width: 100%;
		color: #fff;
		text-align: center;
		margin-top: 398rpx;
		font-size: 30rpx;
		margin-bottom: 24rpx;
	}

	.frame_view {
    
    
		width: 648rpx;
		height: 688rpx;
		margin: 0 auto;
		border-radius: 30rpx;
		background: url("https://cdnapp.jixianzhilu.cn/circle_image/2021_06_8_14_37_50_4.png") no-repeat;
		background-size: 100% 100%;
		overflow: hidden;
	}

	.frame_row {
    
    
		width: 520rpx;
		height: 168rpx;
		display: flex;
		flex-direction: row;
		justify-content: space-between;
		align-items: center;
		margin-left: 64rpx;
		margin-bottom: 20rpx;

	}

	.frame_item {
    
    
		width: 168rpx;
		height: 168rpx;
		display: flex;
		align-items: center;
		justify-content: center;
		flex-wrap: wrap;
		font-size: 20px;
		/* box-sizing:border-box; */
		background: #FFFFFF;
		/* 	border-radius: 17px; */
		/* 	box-shadow: 0px 6px 0px 0px rgba(236,231,228,1); */
		background: url("https://cdnapp.jixianzhilu.cn/circle_image/2021_06_8_14_41_5_0.png") no-repeat;
		background-size: 100% 100%;


	}

	.frame_item image {
    
    
		width: 80rpx;
		height: 80rpx;
		display: block;

	}

	.frame_item text {
    
    
		font-size: 26rpx;
		display: block;
		width: 100%;
		text-align: center;
		color: #818181;
		margin-top: -40rpx;
	}

	.item1 {
    
    
		background: url("https://cdnapp.jixianzhilu.cn/circle_image/2021_06_8_14_42_16_6.png") no-repeat;
		background-size: 100% 100%;
		// box-shadow: 0px 10px 20px 0px rgba(170,56,0,1), 0px 0px 20px 0px rgba(196,58,215,1), 0px 4px 0px 0px rgba(255,255,255,0.29);

	}

	.luckbtulist {
    
    
		width: 100%;
		display: flex;
		align-items: center;
		justify-content: center;
		color: #fff;
	}

	.luckone {
    
    
		width: 310upx;
		height: 100upx;
		background: linear-gradient(360deg, #E4392C 0%, #F6A261 100%);
		box-shadow: 0px 10px 20px 0px rgba(153, 0, 0, 0.81), 0px 5px 0px 0px rgba(195, 48, 7, 1), 0px 4px 0px 0px rgba(255, 255, 255, 0.23);
		border-radius: 50upx;
		margin-right: 28rpx;
		text-align: center;
	}

	.luckfive {
    
    
		width: 310upx;
		height: 100upx;
		background: linear-gradient(180deg, #FFC3AC 0%, #D43EDC 100%);
		box-shadow: 0px 10px 20px 0px rgba(170, 56, 0, 1), 0px 5px 0px 0px rgba(196, 58, 215, 1), 0px 4px 0px 0px rgba(255, 255, 255, 0.29);
		border-radius: 50px;
		text-align: center;
	}

	.lucktips {
    
    
		width: 686rpx;
		height: 800rpx;
		background: #FFF8DF;
		border-radius: 20rpx;
		margin: 0 auto;
		margin-top: 70rpx;
	}

	.lucktab {
    
    
		width: 580rpx;
		height: 104rpx;
		border-bottom: 1rpx solid #A24A1E;
		margin: 0 auto;
		display: flex;
		align-items: center;
		justify-content: space-around;
		font-size: 28rpx;
		color: #98370A;
		font-weight: 600;
	}

	.lucktab view {
    
    
		height: 100%;
		line-height: 104rpx;
	}

	.action {
    
    

		border-bottom: 3px solid #A24A1E;

	}

	.ruleinof {
    
    
		width: 584rpx;
		height: 496rpx;
		margin: 0 auto;
		font-size: 28rpx;
		font-family: PingFangSC-Regular, PingFang SC;
		font-weight: 400;
		color: #D97645;

	}

	.ruleinof .ruleconten {
    
    
		margin-top: 40rpx;
		line-height: 40rpx;
	}

	.recordlist {
    
    
		display: flex;
		align-items: center;
		justify-content: space-between;
		margin-bottom: 20rpx;
	}


	// 弹出窗口
	.share-box {
    
    
		width: 100%;
		height: 100%;
		position: fixed;
		top: 0rpx;
		left: 0rpx;
		bottom: 0rpx;
		right: 0rpx;
		background-color: rgba(0, 0, 0, 0.4);
		transition: .3s;
		z-index: 999;
	}

	.nopop {
    
    
		display: none;
		width: 470rpx;
		height: 455rpx;
		background: #FFFFFF;
		border-radius: 30px;
		position: absolute;
		left: 50%;
		top: 50%;
		margin-top: -228rpx;
		/* 高度的一半 */
		margin-left: -235rpx;
		/* 宽度的一半 */
	}

	.share-show {
    
    
		display: block !important;
	}

	.poptitle {
    
    
		font-size: 28rpx;
		font-family: PingFangSC-Regular, PingFang SC;
		font-weight: 400;
		color: #4A4A4A;
		text-align: center;

	}

	.popbtn {
    
    
		width: 310upx;
		height: 100upx;
		background: linear-gradient(360deg, #E4392C 0%, #F6A261 100%);
		box-shadow: 0px 10px 10px 0px rgba(153, 0, 0, 0.81), 0px 5px 0px 0px rgba(195, 48, 7, 1), 0px 4px 0px 0px rgba(255, 255, 255, 0.23);
		border-radius: 50upx;
		margin-right: 28rpx;
		text-align: center;
		line-height: 100upx;
		font-size: 32upx;
		color: #fff;
		margin: 0 auto;
		margin-top: 36upx;
	}

	.onepop {
    
    
		display: none;
		width: 696rpx;
		height: 872rpx;
		background: url("https://cdnapp.jixianzhilu.cn/circle_image/2021_06_8_14_41_31_5.png") no-repeat;
		background-size: 100% 100%;
		position: absolute;
		left: 50%;
		top: 50%;
		margin-top: -438rpx;
		/* 高度的一半 */
		margin-left: -350rpx;
		/* 宽度的一半 */
		overflow: hidden;
	}

	.popconten {
    
    
		width: 470rpx;
		height: 472rpx;
		background: url("https://cdnapp.jixianzhilu.cn/circle_image/2021_06_8_14_39_28_5.png") no-repeat;
		background-size: 100% 100%;
		margin: 0 auto;
		margin-top: 340rpx;
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;

	}

	.popcontenlist {
    
    
		width: 470rpx;
		height: 300rpx;
		margin: 0 auto;
		margin-top: 370rpx;
		display: flex;
		align-items: center;
		flex-wrap: wrap;

	}

	.poplucklist {
    
    
		width: 88rpx;
		height: 180rpx;
		margin-left: 56rpx;
	}
</style>

猜你喜欢

转载自blog.csdn.net/Shids_/article/details/118143204
今日推荐
LFOSSA 源来如此公开课 | 掌握云原生未来：CNCF 认证全面攻略与备考秘籍
国产云输入法——仅华为无云端数据上传安全问题
开源日报 | 工业开源项目OGG 1.0；姐姐，你要和我一起配置火狐吗；苹果AI遥遥落后？Fedora 40
开放签电子签章：停止新增，优化体验，前进更进（五一假期前工作）
开源日报 | 中学生开源前端动画引擎；全球首个Llama3 8B中文版开源模型；联想电脑恐出局；Linus讽刺AI炒作
“百模大战”必有一战 | 2024中国“百模大战”竞争格局分析
周排行
Family Tree 题解
BZOJ 1093 最大半连通子图 SCC + DP
幂等处理
Spring----学习（2）----XML 配置Bean 自动装配
SQL Server 远程更新目标表数据
HIbernate3.6 环境搭建
特殊符号正则表达式
【Linux】第一章 进程的理解
843. n-皇后问题（dfs+输出各种情况）
空间数据库2
每日归档
更多
2024-04-26(39)
2024-04-25(22)
2024-04-24(36)
2024-04-23(26)
2024-04-22(39)
2024-04-21(0)
2024-04-20(6)
2024-04-19(5)
2024-04-18(0)
2024-04-17(5)

代码天地 © 2018 codetd.com

境外服务器   最新电视剧2022