477 lines
16 KiB
HTML
477 lines
16 KiB
HTML
<!DOCTYPE html>
|
||
<html lang="en">
|
||
|
||
<head>
|
||
<meta charset="UTF-8">
|
||
<meta name="viewport"
|
||
content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">
|
||
<title>友达赏</title>
|
||
<link rel="stylesheet" href="animate.min.css" />
|
||
<style>
|
||
* {
|
||
margin: 0;
|
||
padding: 0;
|
||
}
|
||
|
||
|
||
.content-container {
|
||
width: 100%;
|
||
height: 100vh;
|
||
display: flex;
|
||
flex-direction: column;
|
||
align-items: center;
|
||
justify-content: center;
|
||
box-sizing: border-box;
|
||
background-image: url("https://image.zfunbox.cn/static/web/static/common/slot_bg.webp");
|
||
background-size: cover;
|
||
background-position: center;
|
||
position: fixed;
|
||
top: 0;
|
||
left: 0;
|
||
z-index: 999;
|
||
}
|
||
|
||
.slot-icon {
|
||
padding-bottom: 25px;
|
||
}
|
||
|
||
|
||
.slot-view {
|
||
background-size: 100% 100%;
|
||
width: 100%;
|
||
padding-top: 40px;
|
||
padding-bottom: 40px;
|
||
display: flex;
|
||
justify-content: center;
|
||
align-items: center;
|
||
}
|
||
|
||
.slot-view-1 {
|
||
background: url("https://image.zfunbox.cn/static/image/lucky/di_5.png") no-repeat;
|
||
background-size: 100% 100%;
|
||
}
|
||
|
||
.slot-view-3 {
|
||
background: url("https://image.zfunbox.cn/static/image/lucky/di_3.png") no-repeat;
|
||
background-size: 100% 100%;
|
||
}
|
||
|
||
.slot-view-5 {
|
||
background: url("https://image.zfunbox.cn/static/image/lucky/di_5.png") no-repeat;
|
||
background-size: 100% 100%;
|
||
}
|
||
|
||
.item-lottry {
|
||
height: 152.78px;
|
||
width: 152.78px;
|
||
display: flex;
|
||
justify-content: center;
|
||
align-items: center;
|
||
font-size: 30rpx;
|
||
border-radius: 16rpx;
|
||
color: black;
|
||
box-sizing: border-box;
|
||
background-color: rgba(255, 255, 255, 1);
|
||
}
|
||
|
||
.slot-tips {
|
||
color: #484848;
|
||
font-size: 14px;
|
||
text-align: center;
|
||
padding: 10px;
|
||
|
||
}
|
||
|
||
.skip-animation {
|
||
color: #249073;
|
||
font-size: 18px;
|
||
text-align: center;
|
||
padding-bottom: 5px;
|
||
display: inline-block;
|
||
opacity: 0.7;
|
||
|
||
}
|
||
</style>
|
||
</head>
|
||
|
||
<body onload="pageLoad()">
|
||
<div class="content-container">
|
||
<div class="slot-icon animate__animated animate__fadeInDown">
|
||
<img src="https://image.zfunbox.cn/static/image/lucky/icon.png" style="height: 45px; width: 120px" />
|
||
</div>
|
||
<div id="slot-view" class="slot-view ">
|
||
<div id="my-lucky"></div>
|
||
</div>
|
||
<view class="slot-tips">
|
||
动画结果因设备差异可能会显示异常，获得赏品以（恭喜获得）结果为准</view>
|
||
<view class="skip-animation animate__animated animate__fadeIn" style="animation-duration: 2s;"
|
||
onClick="skipAnimation()">跳过动画</view>
|
||
</view>
|
||
</div>
|
||
<div style="display: none;">
|
||
<img src="https://image.zfunbox.cn/static/image/lucky/di_5.png" style="height: 0px; width: 0px" />
|
||
<img src="https://image.zfunbox.cn/static/image/lucky/di_3.png" style="height: 0px; width: 0px" />
|
||
<img src="https://image.zfunbox.cn/static/image/lucky/di_1.png" style="height: 0px; width: 0px" />
|
||
<div id="prize-list"></div>
|
||
</div>
|
||
|
||
<script type="text/javascript" src="uni.webview.1.5.1.js"></script>
|
||
<script src="./index.umd.js"></script>
|
||
<script>
|
||
function shuffle(array) {
|
||
for (let i = array.length - 1; i > 0; i--) {
|
||
// 生成一个 0 到 i 之间的随机整数
|
||
const j = Math.floor(Math.random() * (i + 1));
|
||
// 交换 array[i] 和 array[j]
|
||
[array[i], array[j]] = [array[j], array[i]];
|
||
}
|
||
return array;
|
||
}
|
||
function sleep(ms) {
|
||
return new Promise(resolve => setTimeout(resolve, ms));
|
||
}
|
||
function getImage(image) {
|
||
return image + "?imageMogr2/thumbnail/!75x75r";
|
||
}
|
||
const rowHeight = 80;
|
||
var myLucky = null;
|
||
var slotModel = 0;
|
||
var prize = null;
|
||
var lotteryResult = [];
|
||
var currentLotteryResult = null;
|
||
var stopSleep = 2500;
|
||
|
||
|
||
/**
|
||
* 添加奖品图片
|
||
* @param {*} _prize
|
||
*/
|
||
function addPrizeImage(_prize) {
|
||
prize = _prize;
|
||
let prizes = getDefaultPrizes();
|
||
//加载图片缓存
|
||
// document.getElementById('prize-list').innerHTML = "";
|
||
// for (let i = 0; i < prizes.length; i++) {
|
||
// //prize-list img
|
||
// let img = document.createElement('img');
|
||
// img.src = getImage(prizes[i].imgurl);
|
||
// img.style.width = '75px';
|
||
// img.style.height = '75px';
|
||
// document.getElementById('prize-list').appendChild(img);
|
||
// }
|
||
message_1("InitPrizeSuccess", "调用成功");
|
||
|
||
}
|
||
|
||
/**
|
||
* 添加抽奖次数
|
||
* @param {*} count
|
||
*/
|
||
async function addLotteryCount(count) {
|
||
if (myLucky) {
|
||
document.getElementById('my-lucky').innerHTML = '';
|
||
}
|
||
|
||
let slotColumns = 0;
|
||
if (count >= 6) {
|
||
slotColumns = 5;
|
||
} else {
|
||
slotColumns = count;
|
||
}
|
||
document.getElementById('slot-view').style.backgroundImage = 'url("https://image.zfunbox.cn/static/image/lucky/di_' + slotColumns + '.png")';
|
||
slotModel = count;
|
||
let prizeList = getDefaultPrizes();
|
||
let prizes = [];
|
||
for (let i = 0; i < prizeList.length; i++) {
|
||
prizes.push({
|
||
imgs: [{
|
||
src: getImage(prizeList[i].imgurl),
|
||
width: "75px",
|
||
height: "75px",
|
||
},],
|
||
background: "#ffffff",
|
||
data: prizeList[i], // 将原始数据保存到prize中，方便后续使用
|
||
});
|
||
}
|
||
// 根据当前模式创建slots
|
||
let arr = Array.from({
|
||
length: prizeList.length
|
||
}, (_, i) => i);
|
||
|
||
let slots = [];
|
||
for (let i = 0; i < slotColumns; i++) {
|
||
slots.push({
|
||
order: shuffle([...arr]),
|
||
speed: 50
|
||
});
|
||
}
|
||
let height = rowHeight * slotColumns;
|
||
|
||
myLucky = new LuckyCanvas.SlotMachine('#my-lucky', {
|
||
width: '100vw',
|
||
height: height + 'px',
|
||
slots: slots,
|
||
prizes: prizes,
|
||
defaultConfig: {
|
||
mode: 'horizontal',
|
||
rowSpacing: '10px',
|
||
colSpacing: '10px'
|
||
},
|
||
end: async function (prize) {
|
||
console.log(prize);
|
||
console.log('抽奖结束');
|
||
message_1("luckyStop", "抽奖结束", null);
|
||
await sleep(1000);
|
||
// alert(currentLotteryResult.)length;
|
||
if (currentLotteryResult.length == 0) {
|
||
message_1("stopLottery", "抽奖结束", null);
|
||
}
|
||
if (currentLotteryResult.length > 0) {
|
||
// slotModel
|
||
startLottery(stopSleep);
|
||
}
|
||
}
|
||
});
|
||
myLucky.init();
|
||
message_1("addLotteryCountSuccess", "初始化结束", null);
|
||
}
|
||
|
||
/**
|
||
* 开始抽奖
|
||
*/
|
||
async function startLottery(data) {
|
||
myLucky.init();
|
||
await sleep(200);
|
||
console.log("datadatadatadata", data, data.stopSleep, data.stopSleep);
|
||
let _lotteryResult = data.lotteryResult;
|
||
let _stopSleep = data['stopSleep'];
|
||
if (_lotteryResult != null) {
|
||
lotteryResult = _lotteryResult;
|
||
currentLotteryResult = lotteryResult;
|
||
}
|
||
stopSleep = _stopSleep;
|
||
myLucky.play();
|
||
message_1("luckyPlay", "开始抽奖", null);
|
||
await sleep(stopSleep);
|
||
stopLottery();
|
||
}
|
||
/**
|
||
* 停止抽奖
|
||
*/
|
||
async function stopLottery() {
|
||
// if(lotteryResult)
|
||
let _current;
|
||
if (Array.isArray(currentLotteryResult)) {
|
||
if (currentLotteryResult.length > 5) {
|
||
_current = currentLotteryResult.splice(0, 5);
|
||
} else {
|
||
_current = currentLotteryResult.splice(0, currentLotteryResult.length);
|
||
}
|
||
} else {
|
||
_current = currentLotteryResult;
|
||
}
|
||
myLucky.stop(_current);
|
||
|
||
}
|
||
// 获取默认奖品列表
|
||
function getDefaultPrizes() {
|
||
if (prize && prize.length > 0) {
|
||
return prize;
|
||
}
|
||
return [{
|
||
id: 1128,
|
||
title: "兹琪露娜提亚斯",
|
||
imgurl: "https://image.zfunbox.cn/topic/20250515/2986e27e673ef675e02771cdebd9b822.jpg",
|
||
price: "350.00",
|
||
real_pro: "0.02000",
|
||
goods_type: 1,
|
||
doubling: 1,
|
||
is_lingzhu: 0,
|
||
},
|
||
{
|
||
id: 1129,
|
||
title: "月岗恋钟",
|
||
imgurl: "https://image.zfunbox.cn/topic/20250515/2c5ed2097716db6bef01da718bc3c091.jpg",
|
||
price: "132.00",
|
||
real_pro: "0.02000",
|
||
goods_type: 1,
|
||
doubling: 3,
|
||
is_lingzhu: 0,
|
||
},
|
||
{
|
||
id: 1130,
|
||
title: "BANDAI万代拼装模型 1/100 MG 机动战士高达 倒A 逆A-15岁以上",
|
||
imgurl: "https://image.zfunbox.cn/topic/20250515/e35da49b4976f156f2f98dec002274a5.png",
|
||
price: "305.00",
|
||
real_pro: "0.03000",
|
||
goods_type: 1,
|
||
doubling: 1,
|
||
is_lingzhu: 0,
|
||
},
|
||
{
|
||
id: 1131,
|
||
title: "BANDAI 万代拼装模型 MG 主天使-15岁以上",
|
||
imgurl: "https://image.zfunbox.cn/topic/20250515/77302c6f1ea9ea6a8516cc1208174aee.png",
|
||
price: "289.00",
|
||
real_pro: "0.03000",
|
||
goods_type: 1,
|
||
doubling: 1,
|
||
is_lingzhu: 0,
|
||
},
|
||
{
|
||
id: 1132,
|
||
title: "BANDAI万代 HG00 09 1/144 座天使高达一型-15岁以上",
|
||
imgurl: "https://image.zfunbox.cn/topic/20250515/55e816c93b5e4103a30682c586816b11.jpg",
|
||
price: "114.00",
|
||
real_pro: "0.50000",
|
||
goods_type: 1,
|
||
doubling: 3,
|
||
is_lingzhu: 0,
|
||
},
|
||
{
|
||
id: 1133,
|
||
title: "BANDAI万代拼装模型 HGUC 130 机动战士高达 杰斯塔-15岁以上",
|
||
imgurl: "https://image.zfunbox.cn/topic/20250515/aeb6bfb8b4aa8a29796b242e4f5d56d9.png",
|
||
price: "113.00",
|
||
real_pro: "1.50000",
|
||
goods_type: 1,
|
||
doubling: 1,
|
||
is_lingzhu: 0,
|
||
},
|
||
{
|
||
id: 1134,
|
||
title: "BANDAI万代拼装模型HG26 1/144 凯列班高达 异灵高达-15岁以上",
|
||
imgurl: "https://image.zfunbox.cn/topic/20250515/329e3a7e21772a63cea03d31f948345d.png",
|
||
price: "112.00",
|
||
real_pro: "1.00000",
|
||
goods_type: 1,
|
||
doubling: 2,
|
||
is_lingzhu: 0,
|
||
},
|
||
{
|
||
id: 1135,
|
||
title: "梦幻",
|
||
imgurl: "https://image.zfunbox.cn/topic/20250515/d2c7e48515d393084000595074209042.jpg",
|
||
price: "41.00",
|
||
real_pro: "2.50000",
|
||
goods_type: 1,
|
||
doubling: 2,
|
||
is_lingzhu: 0,
|
||
},
|
||
{
|
||
id: 1136,
|
||
title: "谜拟丘",
|
||
imgurl: "https://image.zfunbox.cn/topic/20250515/6031827bc455cbf86ff778d74ddffbd3.jpg",
|
||
price: "38.00",
|
||
real_pro: "1.50000",
|
||
goods_type: 1,
|
||
doubling: 1,
|
||
is_lingzhu: 0,
|
||
},
|
||
{
|
||
id: 1137,
|
||
title: "小提琴模型1个",
|
||
imgurl: "https://image.zfunbox.cn/topic/20250515/22846dea5a933ab314998afc51abb7bb.jpg",
|
||
price: "13.80",
|
||
real_pro: "92.90000",
|
||
goods_type: 1,
|
||
doubling: 1,
|
||
is_lingzhu: 0,
|
||
},
|
||
];
|
||
}
|
||
|
||
document.addEventListener('UniAppJSBridgeReady', function () {
|
||
uni.getEnv(function (res) {
|
||
if (res.plus) {
|
||
console.log('当前环境为【5+App】');
|
||
} else if (res.miniprogram) {
|
||
console.log('当前环境为【微信小程序】');
|
||
}
|
||
});
|
||
window.isAppReady = true; // 标记 App 环境已准备好
|
||
message_1('load', '初始化成功', null);
|
||
console.log('UniAppJSBridgeReady 已触发，可以与 App 通信');
|
||
|
||
});
|
||
function message_1(action, msg, data) {
|
||
if (window.isAppReady) {
|
||
uni.postMessage({
|
||
data: {
|
||
action: action,
|
||
data: data,
|
||
msg: msg
|
||
}
|
||
});
|
||
}
|
||
}
|
||
function skipAnimation() {
|
||
console.log('跳过动画');
|
||
|
||
message_1("stopLottery", "跳过动画", null);
|
||
console.log('执行结束');
|
||
}
|
||
function OnMessage(action, data) {
|
||
console.log('触发触发触发触发触发触发触发触发触发', action);
|
||
|
||
// console.log(data);
|
||
// alert('aaa');
|
||
if (action == 'addPrizeImage') {
|
||
// alert('aaa');
|
||
if (data != null && data != "") {
|
||
let _prize = JSON.parse(data);
|
||
addPrizeImage(_prize);
|
||
}
|
||
}
|
||
if (action == 'addLotteryCount') {
|
||
let _count = parseInt(data);
|
||
addLotteryCount(_count);
|
||
}
|
||
if (action == 'startLottery') {
|
||
console.log("startLottery", data);
|
||
let _data = JSON.parse(data);
|
||
|
||
startLottery(_data);
|
||
}
|
||
}
|
||
function parseQueryString(urlOrQueryString) {
|
||
// 如果传入的是完整URL（如 "/path?name=value"），提取查询部分
|
||
let queryString = urlOrQueryString;
|
||
const questionMarkIndex = queryString.indexOf('?');
|
||
if (questionMarkIndex !== -1) {
|
||
queryString = queryString.slice(questionMarkIndex + 1);
|
||
}
|
||
|
||
const params = {};
|
||
if (!queryString) return params; // 如果没有查询参数，返回空对象
|
||
|
||
const pairs = queryString.split('&');
|
||
for (const pair of pairs) {
|
||
const [key, value] = pair.split('=');
|
||
// 解码 URI 组件，并处理无值情况（如 "key" 而不是 "key=value"）
|
||
params[key] = value ? decodeURIComponent(value) : '';
|
||
}
|
||
|
||
return params;
|
||
}
|
||
function pageLoad() {
|
||
let o = parseQueryString(window.location.search);
|
||
if (o.c != null) {
|
||
let slotColumns = 0;
|
||
if (o.c >= 6) {
|
||
slotColumns = 5;
|
||
} else {
|
||
slotColumns = o.c;
|
||
}
|
||
document.getElementById('slot-view').style.backgroundImage = 'url("https://image.zfunbox.cn/static/image/lucky/di_' + slotColumns + '.png")';
|
||
let height = rowHeight * slotColumns + 80;
|
||
|
||
document.getElementById('slot-view').style.minHeight = height + 'px';
|
||
|
||
}
|
||
}
|
||
</script>
|
||
|
||
</body>
|
||
|
||
</html> |