在很多电商平台或者活动中,都会有类似"抽奖赢优惠券"的功能。这个功能通常要求用户通过某些随机算法来决定是否中奖以及获得的优惠券内容。实现这一功能时,如何正确地处理中奖概率、抽取优惠券并返回抽奖结果是一个常见的问题。
本文将介绍如何通过一些代码操作逻辑
实现一个抽奖系统,模拟从接口获取优惠券,并基于优惠券的中奖概率来判断是否中奖。
首先需要从接口获取优惠券数据。然后通过生成一个随机数,并与优惠券的中奖概率进行比较来判断是否中奖。如果中奖,渲染相应的优惠券信息;否则显示未中奖消息。将中奖信息提交给后端接口,以记录中奖信息。

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