uniapp 九宫格抽奖功能效果demo（整理）

最新推荐文章于 2024-08-14 15:17:32 发布
最新推荐文章于 2024-08-14 15:17:32 发布
阅读量708 收藏 3
点赞数 1
文章标签： uni-app 前端 javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/m0_67063430/article/details/127047160
版权 
<template>
	<view class="bg">
		<view class="container">
			<view class="limitbean">剩余抽奖次数 {{free}}</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>
					<!-- 抽奖 -->
					<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 style="margin-top: 30upx;">免费抽奖</p>
				</view>
				<view class="luckfive" @click="clickLuckFive">
					<p style="margin-top: 30upx;">分享加一次</p>
				</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">我是活动规则</view>
				</view>
				<view class="ruleinof" v-if="isif" v-show="nowIndex==1">
					<view style="width: 100%;height: 496rpx;  margin-top: 40rpx;overflow-y:auto;">
						<view class="recordlist">
							<view>时间:{{cjtime}}</view>
							<view>{{prize}}</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>
	</view>
</template>

<script>
	//计数器
	var interval = null;
	//值越大旋转时间越长  即旋转速度
	var intime = 100;
	export default {
		data() {
			return {
				//抽奖记录的显示
				isif: false,
				cjtime: "",
				// nowIndex为0的时候显示抽奖规则，nowIndex为1的时候显示抽奖记录
				nowIndex: 0,
				// 九宫格初始化的位置
				color: [0, 0, 0, 0, 0, 0, 0, 0],
				//chance中奖率   
				award: [{
						img: 'https://cdnapp.jixianzhilu.cn/circle_image/2021_06_8_14_34_47_2.png',
						name: '谢谢参与',
						chance: 0,

					},
					{
						img: 'https://cdnapp.jixianzhilu.cn/circle_image/2021_06_8_14_35_36_10.png',
						name: '洗衣机',
						chance: 100,

					},
					{
						img: 'https://cdnapp.jixianzhilu.cn/circle_image/2021_06_8_14_35_36_10.png',
						name: '谢谢参与',
						chance: 0,

					},
					{
						img: 'https://cdnapp.jixianzhilu.cn/circle_image/2021_06_8_14_34_47_2.png',
						name: '笔记本',
						chance: 0,

					},
					{
						img: 'https://cdnapp.jixianzhilu.cn/circle_image/2021_06_8_14_35_36_10.png',
						name: '谢谢参与',
						chance: 0,

					},
					{
						img: 'https://cdnapp.jixianzhilu.cn/circle_image/2021_06_8_14_34_47_2.png',
						name: '电脑',
						chance: 0,

					},
					{
						img: 'https://cdnapp.jixianzhilu.cn/circle_image/2021_06_8_14_35_36_10.png',
						name: '谢谢参与',
						chance: 0,

					},
					{
						img: 'https://cdnapp.jixianzhilu.cn/circle_image/2021_06_8_14_35_36_10.png',
						name: '冰箱',
						chance: 0,

					}
				], //接收数组
				Luck: true, //防置重复点击
				lucktype: 2, //判断奖品类型
				luckPosition: 0, //停止位置
				prize: '', //奖品，
				prizeimg: 'https://cdnapp.jixianzhilu.cn/circle_image/2021_06_8_14_35_36_10.png', //奖品图片
				// 弹窗按钮
				shareState: false,
				// tab切换
				styleObject: {
					'border-bottom': '3px solid #A24A1E',
				},
				styleObject1: '',
				//免费抽奖次数
				free: 3,
				// 判断类型
				payout: 0
			};
		},
		created() {
			//获取当前时间戳
			var date = new Date().getTime();
			// 把当前的时间戳转换成yyy-MM-dd HH:mm:ss
			function timestampToTime(timestamp) {
				var date = new Date(timestamp); //时间戳为10位需*1000，时间戳为13位的话不需乘1000
				var Y = date.getFullYear() + '-';
				var M = (date.getMonth() + 1 < 10 ? '0' + (date.getMonth() + 1) : date.getMonth() + 1) + '-';
				var D = (date.getDate() < 10 ? '0' + date.getDate() : date.getDate()) + ' ';
				var h = (date.getHours() < 10 ? '0' + date.getHours() : date.getHours()) + ':';
				var m = (date.getMinutes() < 10 ? '0' + date.getMinutes() : date.getMinutes()) + ':';
				var s = date.getSeconds() < 10 ? '0' + date.getSeconds() : date.getSeconds();
				return Y + M + D + h + m + s;
			}
			var hour = timestampToTime(date)
			console.log(hour);
			this.cjtime = hour;
		},
		methods: {
			// 记录切换nowIndex(0)的时候显示活动规则nowIndex(1)的时候显示奖品记录
			toggleTabs(index) {
				this.nowIndex = index;
				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() {
				//抽奖记录的显示
				setTimeout(() => {
					this.isif = true;
				}, 8000);
				if (this.Luck == false) { //防止过度点击
					return;
				}
				this.Luck = false;
				// }
				//判断免费次数		
				if (this.free == 0) {
					this.shareState = true
					this.lucktype = 0
					this.Luck = true;
					return;
				}
				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;
				}
				//从数组中随机抽取一个位置
				var a = Math.ceil(Math.random() * 10);
				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;
				//清空计时器
				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);
				e.stop(e.luckPosition);
			},

			// 停止
			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 - 3
						}
					}
				}, time);
			},
			// 分享加一次
			clickLuckFive() {
				this.free = this.free + 1;
			}

		},


	};
</script>

<style>
	.bg {
		width: 100%;
		min-height: 2200upx;
		background-color: #136eb7;
		background-size: 100% 100%;

	}

	.container {
		overflow: hidden;
	}

	.limitbean {
		width: 100%;
		color: #fff;
		text-align: center;
		margin-top: 80rpx;
		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: #0d62ad;
		border-radius: 20rpx;
		margin: 0 auto;
		margin-top: 70rpx;
	}

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

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

	.action {

		border-bottom: 3px solid #e3672a;

	}

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

小马大咖
关注
uniapp - 全平台兼容 | 实现九宫格转盘抽奖功能效果，uniapp宫格老虎机抽奖活动，支持后端接口确定最终奖品，最好用的九宫格抽奖机插件组件源码，无bug（详细示例全部代码，一键复制开箱即用）
高级前端工程师
02-05 2406
uniapp，支付宝微信小程序，h5网站网页，九宫格抽奖，转盘抽奖，抽奖页面老虎机，宫格旋转抽奖组件，uniapp有哪些宫格抽奖的插件，有什么好用的抽奖组件插件，如何实现全平台兼容的九宫格抽奖插件，圆形转盘抽奖，让后端决定中奖奖品，支持让服务端接口确定抽中什么奖品，uniapp手机端网页九宫格抽奖，uniappH5移动端抽奖宫格组件，前端抽奖功能实现，微信小程序抽奖源码，uniapp抽奖概率控制, 九宫格抽奖, 抽奖插件, 移动端抽奖实现, H5抽奖应用, uni-app抽奖开发教程, 响应式抽奖组件, U
uniapp九宫格概率抽奖功能
weixin_59525879的博客
01-12 708
【代码】uniapp九宫格概率抽奖功能。
uni-app 九宫格抽奖活动
Tianxiaoxixi的博客
10-20 1182
uni-app 九宫格抽奖活动
uniapp 九宫格抽奖功能
weixin_58431406的博客
06-15 1617
uniapp 九宫格抽奖功能
uni-app 使用九宫格（uni-grid）布局组件
最新发布
u013948083的专栏
08-14 1295
uni-app 的 uni-grid 组件引入和开发步骤
uniapp 九宫格抽抽奖
YUlangML的博客
06-16 759
【代码】uniapp 九宫格抽抽奖。
uniapp实现简单的九宫格抽奖（附源码）
盛国强的博客
10-18 2131
uniapp实现简单的九宫格抽奖
uni.app 九宫格抽奖
pangzi_mm的博客
12-13 558
九宫格抽奖
实现一个九宫格抽奖，全部到位
05-07
实现一个九宫格抽奖，全部到位
微信小程序实现九宫格抽奖游戏效果
02-21
使用微信小程序开发的九宫格抽奖游戏。它主要实现了以下功能： 九宫格抽奖：用户可以通过点击开始按钮来启动抽奖，九宫格中的每个格子会随机变换颜色，当停止按钮被点击时，九宫格中的一个格子会被选中，显示用户的...
九宫格抽奖(内包含概率以及不重复抽到相同奖品)
01-15
web实现九宫格抽奖，实现概率抽奖 不重复抽奖，抽到之后改奖品增加盖章效果
九宫格抽奖根据后台设置抽奖滚动--特殊奖品滚动+抽几次后必中特殊奖品
07-02
根据后台自行设置，然后滚动时不让抽的特殊奖品直接跳过滚动（可设置多个特殊奖品），等到设置的第几次抽奖该抽到时滚动特殊奖品也就是抽了几次后必中特殊奖品
Uniapp 横向滚动抽奖页面 组件 引用即可 全端
09-26
引入组件即可 <template> <TC-choujiang></TC-choujiang> </template> 里面的商品图片和被抽出商品跳转页面按照实际情况进行修改。 商品图片可以从数据库中获取进行赋值即可 位置：uni_modules/TC-choujiang/components/TC-choujiang/TC-choujiang
微信小程序实现九宫格抽奖
10-17
主要为大家详细介绍了微信小程序实现九宫格抽奖，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
uniapp 九宫格抽奖
qq_44866534的博客
05-08 832
git地址 去git下载呦！这里直截取了部分代码 九宫格抽奖 /* func业务逻辑（带返回值） func2 判断（返回值为true/false）(参数为func获取到的值) func3 停止循环之后干的事情 比如弹框等 */ let runTimerOut = (Func,func2,CallBack) => { let timeOut = setTimeout(() => { console.log(typeof Func) if
uniapp九宫格抽奖
07-28
你可以使用 Uni-app 来实现九宫格抽奖功能。下面是一个简单的实现思路： 1. 首先，在你的 Uni-app 项目中创建一个页面来展示九宫格布局，并添加对应的样式。 2. 在页面的 data 中定义一个九宫格的数据结构，可以使用一个数组来表示九个格子的状态，初始状态可以全部设置为未中奖。 3. 在页面的 methods 中定义一个抽奖函数，用来触发抽奖行为。在抽奖函数中，可以使用随机数生成一个中奖的格子索引，并将对应格子的状态设置为中奖。 4. 在页面的模板中使用 v-for 遍历九个格子，并根据格子的状态来展示对应的内容，比如显示中奖的图标或者未中奖。 5. 在九宫格布局中添加一个按钮或者其他触发器，点击后调用抽奖函数。 通过上述步骤，你就可以在 Uni-app 中实现九宫格抽奖功能了。当用户点击抽奖按钮时，随机选取一个格子作为中奖格子，并在页面上展示对应的结果。希望这个简单的实现思路能够帮助到你！如果有任何问题，请随时提问。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

小马大咖

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值