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() 生成一个介于 01 之间的随机数。

  • 然后遍历所有优惠券,根据每个优惠券的 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);
    }
    });

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

相关推荐
码农客栈1 天前
小程序学习(十一)之uni-app和原生小程序开发区别
学习·小程序·uni-app
Json____1 天前
使用uni-app开发抖音小程序遇到previewImage方法图片加载不出来解决方案
小程序·uni-app
Jyywww1211 天前
Uniapp+Vue3 使用父传子方法实现自定义tabBar
javascript·vue.js·uni-app
2501_916008892 天前
iOS开发APP上架全流程解析:从开发到App Store的完整指南
android·ios·小程序·https·uni-app·iphone·webview
酷酷的鱼2 天前
2026 跨平台开发终极选型:Flutter, React Native 与 uni-app x 深度博标与规划指南
flutter·react native·uni-app
biyezuopinvip2 天前
基于uni-app和Express的问答对战小程序的设计与实现(论文)
小程序·uni-app·毕业设计·论文·express·毕业论文·问答对战小程序的设计与实现
2501_915909063 天前
Charles 抓不到包怎么办?iOS 调试过程中如何判断请求路径
android·ios·小程序·https·uni-app·iphone·webview
2501_916007473 天前
iOS和iPadOS文件管理系统全面解析与使用指南
android·ios·小程序·https·uni-app·iphone·webview
卜锦元3 天前
EchoChat搭建自己的音视频会议系统01-准备工作
c++·golang·uni-app·node.js·音视频
敲敲了个代码3 天前
让 Vant 弹出层适配 Uniapp Webview 返回键
前端·javascript·vue.js·学习·面试·uni-app