uniapp通过概率实现随机抽奖的项目实践

 更新时间:2025年04月01日 09:22:27   作者:聂聂脸  
在很多电商平台或者活动中,都会有类似抽奖赢优惠券的功能,本文主要介绍了uniapp通过概率实现随机抽奖的项目实践,具有一定的参考价值,感兴趣的可以了解一下

在很多电商平台或者活动中,都会有类似“抽奖赢优惠券”的功能。这个功能通常要求用户通过某些随机算法来决定是否中奖以及获得的优惠券内容。实现这一功能时,如何正确地处理中奖概率、抽取优惠券并返回抽奖结果是一个常见的问题。

本文将介绍如何通过一些代码操作逻辑实现一个抽奖系统,模拟从接口获取优惠券,并基于优惠券的中奖概率来判断是否中奖。

首先需要从接口获取优惠券数据。然后通过生成一个随机数,并与优惠券的中奖概率进行比较来判断是否中奖。如果中奖,渲染相应的优惠券信息;否则显示未中奖消息。将中奖信息提交给后端接口,以记录中奖信息。

步骤一

  •  使用 uni.request 向后端接口发起请求,获取所有的优惠券数据。
  • 请求成功后,将数据传递给 lotteryDraw 函数来执行后续的抽奖逻辑。
const fetchWinRatio = async () => {
	try {
		uni.request({
			url: BASE_URL + '/pay/cardlog/getcard',  // 请求的 URL 地址
			data: {
				uid: 1, // 用户 ID
			},
			method: 'GET',  // 请求方法
			success(res) {
				const discountNo = res.data.data; // 获取到的优惠券数据
				// 调用抽奖函数
				lotteryDraw(discountNo);
			},
			fail(err) {
				console.error('请求失败:', err);  // 打印请求错误信息
			},
		});
	} catch (err) {
		console.error('获取中奖比例失败', err);
		resultMessage.value = '获取中奖比例失败,请重试';
	}
};

步骤二

  • Math.random() 生成一个介于 0 到 1 之间的随机数。
  • 然后遍历所有优惠券,根据每个优惠券的 win_ratio 判断是否中奖:
  • 如果随机数小于或等于当前优惠券的 win_ratio,即认为该优惠券中奖。
  • 根据中奖的优惠券类型渲染不同的优惠信息(如满减、百分比优惠等)。
const lotteryDraw = (discountNo) => {
	// 生成 0 到 1 的随机数
	const randomNumber = Math.random();
	console.log(`生成的随机数: ${randomNumber}`);

	// 遍历所有优惠券
	for (let i = 0; i < discountNo.length; i++) {
		const coupon = discountNo[i];
		// 判断是否中奖
		if (randomNumber <= coupon.win_ratio) {
			// 如果中奖,从优惠券数组中选取当前优惠券
			winningCoupon.value = coupon;
			// 抽到了奖券就将id赋值给装奖券id的变量
			couponId.value = winningCoupon.value.id;
			// 判断类型是满减时0
			if (winningCoupon.value.type == 0) {
				// 渲染抽到的奖券减免
				resultMessage.value = `满${winningCoupon.value.min_money}元 可以减免${winningCoupon.value.discount}元`; 
			} else if (winningCoupon.value.type == 1) {
				resultMessage.value = `满${winningCoupon.value.min_money}元 可以减免百分之${winningCoupon.value.discount * 100}`; 
			}
		} else {
			resultMessage.value = '很遗憾,未抽到优惠券';
		}
	}
};

步骤三

  • 根据中奖优惠券的 type 字段,分为两种类型:满减和百分比优惠。
  • 渲染具体的优惠信息,并通过 resultMessage 显示。
if (winningCoupon.value.type == 0) {
	resultMessage.value = `满${winningCoupon.value.min_money}元 可以减免${winningCoupon.value.discount}元`; 
} else if (winningCoupon.value.type == 1) {
	resultMessage.value = `满${winningCoupon.value.min_money}元 可以减免百分之${winningCoupon.value.discount * 100}`; 
}

步骤四

  • 使用 uni.request 向后端接口发送抽奖结果。
  • 提交中奖的优惠券 ID(cid)以及用户的相关信息。
uni.request({
	url: BASE_URL + '/pay/cardlog/lotto',
	method: 'POST',
	data: {
		uid: decryptedData.value,
		openid: openidArr.value,
		type: numberWx.value,
		cid: winningCoupon.value.id
	},
	success: (res) => {
		console.log('抽奖结果', res.data.data);
		logId.value = res.data.data;
	},
	fail: (err) => {
		console.error('请求失败', err);
	}
});

通过这几个步骤,我们成功实现了一个简单的抽奖系统。系统首先从后端获取优惠券数据,然后通过概率判断是否中奖,最后将中奖信息提交给后端。通过这种方式,我们可以实现一个灵活且高效的抽奖系统,适应多种不同场景的需求。

到此这篇关于uniapp通过概率实现随机抽奖的项目实践的文章就介绍到这了,更多相关uniapp 概率随机抽奖内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家!

相关文章

  • JavaScript实现仿Clock ISO时钟

    JavaScript实现仿Clock ISO时钟

    这篇文章给大家分享了JavaScript实现仿Clock ISO时钟的方法以及实例代码,有兴趣的朋友参考学习下下。
    2018-06-06
  • JS实现带鼠标效果的头像及文章列表代码

    JS实现带鼠标效果的头像及文章列表代码

    这篇文章主要介绍了JS实现带鼠标效果的头像及文章列表代码,涉及JavaScript响应鼠标事件动态切换页面元素样式的相关技巧,具有一定参考借鉴价值,需要的朋友可以参考下
    2015-09-09
  • JavaScript实现淘宝商品图切换效果

    JavaScript实现淘宝商品图切换效果

    这篇文章主要为大家详细介绍了JavaScript实现淘宝商品图切换效果,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2021-04-04
  • JavaScript实现导入和导出Excel的示例详解

    JavaScript实现导入和导出Excel的示例详解

    在现代的Web应用开发中,与Excel文件的导入和导出成为了一项常见而重要的任务,本文主要介绍了如何在熟悉的电子表格 UI 中轻松导入 Excel 文件,需要的可以参考下
    2024-03-03
  • 一文详解fetch,ajax,axios的区别以及使用

    一文详解fetch,ajax,axios的区别以及使用

    在现代Web开发中,数据交互是必不可少的环节,这篇文章主要介绍了fetch,ajax,axios的区别以及使用的相关资料,文中通过代码介绍的非常详细,需要的朋友可以参考下
    2025-07-07
  • JavaScript数组去重的几种方法详谈

    JavaScript数组去重的几种方法详谈

    这篇文章给大家总结下JavaScript数组去重的几种方法,面试中也经常会遇到这个问题。文中给大家引申的还有合并数组并去重的方法,感兴趣的朋友跟随脚本之家小编一起学习吧
    2021-10-10
  • js类定义函数时用prototype与不用的区别示例介绍

    js类定义函数时用prototype与不用的区别示例介绍

    没有使用prototype的方法相当于类的静态方法,相反,使用prototype的方法相当于类的实例方法,不许new后才能使用
    2014-06-06
  • js中offset,client , scroll 三大元素知识点总结

    js中offset,client , scroll 三大元素知识点总结

    在本篇文章里小编给大家整理了关于js 元素offset,client , scroll 三大系列总结,有需要的朋友们可以学习下。
    2019-09-09
  • js实现简单的手风琴效果

    js实现简单的手风琴效果

    本文主要介绍了js实现简单手风琴效果的实例,具有很好的参考价值,下面跟着小编一起来看下吧
    2017-02-02
  • Webpack的Loader和Plugin的区别

    Webpack的Loader和Plugin的区别

    这篇文章主要介绍了Webpack的Loader和Plugin的区别,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2020-11-11

最新评论