uniapp通過概率實現(xiàn)隨機抽獎的項目實踐

更新時間：2025年04月01日 09:22:27 作者：聶聶臉

在很多電商平臺或者活動中,都會有類似抽獎贏優(yōu)惠券的功能,本文主要介紹了uniapp通過概率實現(xiàn)隨機抽獎的項目實踐,具有一定的參考價值,感興趣的可以了解一下

在很多電商平臺或者活動中，都會有類似“抽獎贏優(yōu)惠券”的功能。這個功能通常要求用戶通過某些隨機算法來決定是否中獎以及獲得的優(yōu)惠券內(nèi)容。實現(xiàn)這一功能時，如何正確地處理中獎概率、抽取優(yōu)惠券并返回抽獎結果是一個常見的問題。

本文將介紹如何通過一些代碼操作邏輯實現(xiàn)一個抽獎系統(tǒng)，模擬從接口獲取優(yōu)惠券，并基于優(yōu)惠券的中獎概率來判斷是否中獎。

首先需要從接口獲取優(yōu)惠券數(shù)據(jù)。然后通過生成一個隨機數(shù)，并與優(yōu)惠券的中獎概率進行比較來判斷是否中獎。如果中獎，渲染相應的優(yōu)惠券信息；否則顯示未中獎消息。將中獎信息提交給后端接口，以記錄中獎信息。

步驟一

使用 uni.request 向后端接口發(fā)起請求，獲取所有的優(yōu)惠券數(shù)據(jù)。
請求成功后，將數(shù)據(jù)傳遞給 lotteryDraw 函數(shù)來執(zhí)行后續(xù)的抽獎邏輯。

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; // 獲取到的優(yōu)惠券數(shù)據(jù)
				// 調用抽獎函數(shù)
				lotteryDraw(discountNo);
			},
			fail(err) {
				console.error('請求失敗：', err);  // 打印請求錯誤信息
			},
		});
	} catch (err) {
		console.error('獲取中獎比例失敗', err);
		resultMessage.value = '獲取中獎比例失敗，請重試';
	}
};

步驟二

Math.random() 生成一個介于 0 到 1 之間的隨機數(shù)。
然后遍歷所有優(yōu)惠券，根據(jù)每個優(yōu)惠券的 win_ratio 判斷是否中獎：
如果隨機數(shù)小于或等于當前優(yōu)惠券的 win_ratio，即認為該優(yōu)惠券中獎。
根據(jù)中獎的優(yōu)惠券類型渲染不同的優(yōu)惠信息（如滿減、百分比優(yōu)惠等）。

const lotteryDraw = (discountNo) => {
	// 生成 0 到 1 的隨機數(shù)
	const randomNumber = Math.random();
	console.log(`生成的隨機數(shù): ${randomNumber}`);

	// 遍歷所有優(yōu)惠券
	for (let i = 0; i < discountNo.length; i++) {
		const coupon = discountNo[i];
		// 判斷是否中獎
		if (randomNumber <= coupon.win_ratio) {
			// 如果中獎，從優(yōu)惠券數(shù)組中選取當前優(yōu)惠券
			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 = '很遺憾，未抽到優(yōu)惠券';
		}
	}
};

步驟三

根據(jù)中獎優(yōu)惠券的 type 字段，分為兩種類型：滿減和百分比優(yōu)惠。
渲染具體的優(yōu)惠信息，并通過 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 向后端接口發(fā)送抽獎結果。
提交中獎的優(yōu)惠券 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);
	}
});

通過這幾個步驟，我們成功實現(xiàn)了一個簡單的抽獎系統(tǒng)。系統(tǒng)首先從后端獲取優(yōu)惠券數(shù)據(jù)，然后通過概率判斷是否中獎，最后將中獎信息提交給后端。通過這種方式，我們可以實現(xiàn)一個靈活且高效的抽獎系統(tǒng)，適應多種不同場景的需求。

到此這篇關于uniapp通過概率實現(xiàn)隨機抽獎的項目實踐的文章就介紹到這了,更多相關uniapp 概率隨機抽獎內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關文章希望大家以后多多支持腳本之家！

您可能感興趣的文章: