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 概率随机抽奖内容，建议搜索本站历史文章或继续浏览后续相关文章，感谢大家的支持！

UniApp 基于概率的随机抽奖功能实现指南

步骤一

步骤二

步骤三

步骤四

实用工具推荐