Files
peko-h5/view/peko/activity/act-kitchen/js/index.js
2024-03-29 16:52:05 +08:00

557 lines
24 KiB
JavaScript
Raw Blame History

This file contains ambiguous Unicode characters

This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.

let urlPrefix = getUrlPrefix()
let browser = checkVersion()
let env = EnvCheck();
if (env == 'test') {
new VConsole();
}
// 封裝layer消息提醒框
let layerIndex
const showLoading = (content = '加載中...') => {
layer.open({
type: 2,
shadeClose: false,
content,
success (e) {
layerIndex = $(e).attr('index')
}
})
}
const hideLoading = (index) => {
layer.close(index)
}
const toastMsg = (content = '操作完成', time = 2) => {
layer.open({
content,
time,
skin: 'msg'
})
}
var diamonds = 0;//存儲當前用戶鉆石余額
var gearPosition = 100;//當前檔位;
var roundId;//當前進行輪的roundId;
var timer;//定時器存儲
var countupTimes;//存儲每個階段倒計時剩余時間戳;
var userComeinTime, startTime, drawStageStartTime, showResultStageStartTime, endTime;
var circulate = 0;//等待開獎中動效計時
var circulateTime;//存儲開獎中動效計時器
// 榜單類型1是鉆石榜2是歐皇榜
let type = 1
let pageSize = 20
let page = 1
let pageSizeLack = true;
var audioIf = true;
var backgroundMusic = document.getElementById('backgroundMusic');
var lotteryMusic = document.getElementById('lotteryMusic');
var drawBut = document.getElementById("draw");
backgroundMusic.volume = 0.2;
drawBut.volume = 1;
$(function () {
getInfoFromClient()
setTimeout(function () {
getNewestAct();
}, 100)
let startPlayPromise = backgroundMusic.play();
if (startPlayPromise !== undefined) {
startPlayPromise.catch(error => {
if (error.name === "NotAllowedError") {
// 弹窗引导用户与页面做交互,只需要一个简单的按钮即可
// 记得在按钮上绑定一个带有play()方法的回调函数以element-plus的组件为例
audioIf = false;
$('.muciek').attr('src', './images/jin.png');
toastMsg('检测到您的设备因权限问题,无法播放音乐,请在右上角打开音乐')
}
}).then(() => {
});
}
})
// 獲取用戶相關信息
function getUserInfo () {
networkRequest({
type: 'GET',
url: urlPrefix + '/act/luckySea/getUserActInfo',
success (res) {
if (res.code === 200) {
diamonds = res.data.diamonds;
$('.my .right b').text(`今日獎勵: ${unitProcessing(res.data.todayReward, 100000, 1, 'w')}`);
$('.my .left b').text(`鉆石余額: ${unitProcessing(res.data.diamonds, 100000, 1, 'w')}`);
} else {
toastMsg(res.message)
return
}
},
error (err) {
toastMsg('網絡錯誤,請退出重進')
}
})
}
// 獲取最新一次的深海奇緣活動信息
function getNewestAct () {
// showLoading()
networkRequest({
type: 'GEt',
url: urlPrefix + '/act/luckySea/getNewestAct',
data: { count: 10 },
success (res) {
if (res.code === 200) {
// 處理往輪結果傳參
roundId = res.data.roundId;
listLuckySeaActInfo(roundId);
if ($.isEmptyObject(res.data) || res.data.status === 4) {
return showLoading('服務器正在維護中...')
} else {
if (res.timestamp >= res.data.endTime) { //請求的還是上一輪的數據,重新請求
console.log('請求的還是上一輪的數據,必須重新請求');
showLoading()
timer = setTimeout(() => {
getNewestAct()
}, 600);
} else {//活動狀態(1: 選擇階段 2:正在開獎 3:已經開獎)
userComeinTime = res.timestamp
startTime = res.data.startTime
drawStageStartTime = res.data.drawStageStartTime
showResultStageStartTime = res.data.showResultStageStartTime
endTime = res.data.endTime
clearInterval(circulateTime);
listItem(roundId);
if (startTime <= userComeinTime && userComeinTime < drawStageStartTime) {
// 第一階段
if (audioIf) {
backgroundMusic.play();
}
console.log("第一階段");
countupTimes = Math.floor(((drawStageStartTime - startTime) - (userComeinTime - startTime)) / 1000 + 1);
countup(1);
$('.masks').hide();
$('.result_popup').hide();
} else if (drawStageStartTime <= userComeinTime && userComeinTime < showResultStageStartTime) {
// 第二階段
backgroundMusic.pause();
lotteryMusic.currentTime = 0;
lotteryMusic.volume = 1;
if (audioIf) {
lotteryMusic.play();
}
console.log("第二階段");
countupTimes = Math.floor(((showResultStageStartTime - drawStageStartTime) - (userComeinTime - drawStageStartTime)) / 1000 + 1);
countup(2);
circulateTime = setInterval(function () {
circulate = circulate > 8 ? 0 : circulate;
circulate++;
$('.box .box_in .sBox .sBox1').removeClass('sBox_active');
$(`.box .box_in .item${circulate} .sBox1`).addClass('sBox_active');
$('.box .box_in .sBox .qp').hide();
$('.masks').show();
}, 100);
} else if (showResultStageStartTime <= userComeinTime && userComeinTime < endTime) {
// 第三階段
lotteryMusic.pause();
if (audioIf) {
backgroundMusic.play();
}
console.log("第三階段");
countupTimes = Math.floor(((endTime - showResultStageStartTime) - (userComeinTime - showResultStageStartTime)) / 1000 + 1);
countup(3);
// 渲染本輪結果
var str = '';
$('.result_popup .result_popup_in .resultList li').remove();
res.data.drawItemList.forEach(res => {
str += `
<li>
<img src="${res.drawName == '大象' ? './images/1.png' : res.drawName == '斑馬' ? './images/2.png' : res.drawName == '河馬' ? './images/3.png' : res.drawName == '考拉' ? './images/4.png' : res.drawName == '狐貍' ? './images/5.png' : res.drawName == '豹子' ? './images/6.png' : res.drawName == '老虎' ? './images/7.png' : res.drawName == '獅子' ? './images/8.png' : res.drawImageUrl}" alt="">
<div class="name">${res.drawName}</div>
</li>
`
})
$('.result_popup .result_popup_in .resultList').append(str);
// 渲染本輪投入和產出
var costPieceNum = 0;
res.data.userDrawResult.drawRecords.forEach((res, i) => {
costPieceNum = costPieceNum + res.costPieceNum;
})
$('.result_popup .result_popup_in .income .p1 b').text(costPieceNum);
$('.result_popup .result_popup_in .income .p2 b').text(res.data.userDrawResult.prizeDiamonds);
// 處理前三
var top3 = res.data.rankUserList.slice(0, 3);
if (top3.length < 3) {
let arr = new Array(3 - top3.length).fill({
avatar: './images/logo.png',
nick: '虛位以待',
prizeDiamonds: ""
})
top3.push(...arr)
}
// 渲染前三
top3.forEach((res, i) => {
$(`.result_popup .result_popup_in .no .no${i + 1} .tx`).attr('src', res.avatar);
$(`.result_popup .result_popup_in .no .no${i + 1} .tx`).attr('uid', res.uid);
$(`.result_popup .result_popup_in .no .no${i + 1} .name`).text(res.nick);
$(`.result_popup .result_popup_in .no .no${i + 1} p b`).text(res.prizeDiamonds);
})
$('.result_popup').show();
}
}
}
} else {
toastMsg(res.message)
}
hideLoading(layerIndex)
},
error (err) {
hideLoading(layerIndex)
toastMsg('網絡錯誤,請退出重進')
}
})
}
// 倒計時
function countup (status) {
timer = setInterval(() => {
countupTimes--
if (countupTimes <= 0) {
getNewestAct();
clearInterval(timer);
if (status == 1) {
$('.box .boxTitle').html(`請選擇:<b>${countupTimes}</b> 秒`);
} else if (status == 2) {
circulate = 0;
$('.box .boxTitle').html(`開獎中:<b>${countupTimes}</b> 秒`);
} else {
$('.box .boxTitle').html(`下一輪:<b>${countupTimes}</b> 秒`);
$('.result_popup .result_popup_in .result_popup_inTitle b').html(`${countupTimes}`);
}
} else {
if (status == 1) {
$('.box .boxTitle').html(`請選擇:<b>${countupTimes}</b> 秒`);
} else if (status == 2) {
$('.box .boxTitle').html(`開獎中:<b>${countupTimes}</b> 秒`);
} else {
$('.box .boxTitle').html(`下一輪:<b>${countupTimes}</b> 秒`);
$('.result_popup .result_popup_in .result_popup_inTitle b').html(`${countupTimes}`);
}
}
}, 1000);
}
// 渲染抽獎列錶
function listItem (roundId) {
// showLoading()
networkRequest({
type: 'GEt',
url: urlPrefix + '/act/luckySea/listItem',
data: { roundId },
success (res) {
if (res.code === 200) {
res.data.forEach((res, i) => {
if (res.costPieceNum > 0) {
$(`.box .box_in .item${i + 1} .qp`).show();
$(`.box .box_in .item${i + 1} .sBox1 `).addClass('sBox_active');
} else {
$(`.box .box_in .item${i + 1} .qp`).hide();
$(`.box .box_in .item${i + 1} .sBox1 `).removeClass('sBox_active');
}
$(`.box .box_in .item${i + 1}`).attr('id', res.id);
$(`.box .box_in .item${i + 1} .sBox1 img`).attr('src', res.name == '大象' ? './images/1.png' : res.name == '斑馬' ? './images/2.png' : res.name == '河馬' ? './images/3.png' : res.name == '考拉' ? './images/4.png' : res.name == '狐貍' ? './images/5.png' : res.name == '豹子' ? './images/6.png' : res.name == '老虎' ? './images/7.png' : res.name == '獅子' ? './images/8.png' : res.imgUrl);
$(`.box .box_in .item${i + 1} .qp p b`).text(res.costPieceNum == 0 ? '' : res.costPieceNum);
$(`.box .box_in .item${i + 1} .bei`).text('x' + res.multiple);
$(`.box .box_in .item${i + 1} .SboxText`).text(res.name);
})
$('.box .box_in .sBox').show();
getUserInfo();
} else {
toastMsg(res.message)
}
hideLoading(layerIndex)
},
error (err) {
hideLoading(layerIndex)
toastMsg('網絡錯誤,請退出重進')
}
})
}
// 獲取往輪結果
function listLuckySeaActInfo (roundId) {
// showLoading()
networkRequest({
type: 'GEt',
url: urlPrefix + '/act/luckySea/listLuckySeaActInfo',
data: { count: 10, roundId },
success (res) {
if (res.code === 200) {
res.data.forEach((res, i) => {
if (res.drawItemList.length > 1) {
if (res.drawName == '素食狂歡') {
$(`.resultOut .sqp_in${i + 1} `).attr('src', './images/su.png');
} else {
$(`.resultOut .sqp_in${i + 1} `).attr('src', './images/rou.png');
}
} else {
// $(`.resultOut .sqp_in${i + 1} `).attr('src', res.drawItemList[0].drawImageUrl);
$(`.resultOut .sqp_in${i + 1} `).attr('src', res.drawItemList[0].drawName == '大象' ? './images/1.png' : res.drawItemList[0].drawName == '斑馬' ? './images/2.png' : res.drawItemList[0].drawName == '河馬' ? './images/3.png' : res.drawItemList[0].drawName == '考拉' ? './images/4.png' : res.drawItemList[0].drawName == '狐貍' ? './images/5.png' : res.drawItemList[0].drawName == '豹子' ? './images/6.png' : res.drawItemList[0].drawName == '老虎' ? './images/7.png' : res.drawItemList[0].drawName == '獅子' ? './images/8.png' : res.drawItemList[0].drawImageUrl);
}
});
$('.resultOut .sqp_in').show();
} else {
toastMsg(res.message)
}
hideLoading(layerIndex)
},
error (err) {
hideLoading(layerIndex)
toastMsg('網絡錯誤,請退出重進')
}
})
}
// 檔位切換
$('.box .tab div').click(function () {
var i = $(this).index() + 1;
$(this).addClass('active').siblings().removeClass('active');
gearPosition = i == 1 ? 100 : i == 2 ? 500 : 5000;
})
// 抽獎接口
function draw (itemId, tais) {
// showLoading()
networkRequest({
type: 'POST',
url: urlPrefix + '/act/luckySea/draw',
data: { itemId, num: gearPosition },
success (res) {
if (res.code === 200) {
listItem(roundId);
getUserInfo();
} else {
toastMsg(res.message)
}
hideLoading(layerIndex)
},
error (err) {
hideLoading(layerIndex)
toastMsg('網絡錯誤,請退出重進')
}
})
}
// 選擇食材按鈕
$('.box .box_in .sBox').click(function () {
var id = $(this).attr('id');
// $(this).children('.qp').show();
drawBut.pause();
drawBut.currentTime = 0; // 将当前时间设置为0可选
if (audioIf) {
drawBut.play();
}
draw(id, $(this));
})
// 去充值按鈕
$('.my div .add').click(function () {
if (browser.app) {
if (browser.android) {
let channel = pubInfo.deviceInfo.channel;
console.log(pubInfo.deviceInfo);
if (channel == "google") {
window.androidJsObj.openChargePage(6);
} else {
window.androidJsObj.openChargePage(6);
window.location.href = urlPrefix + '/peko/modules/pay/index.html?channelType=4';
}
} else if (browser.ios) {
let channel = pubInfo.deviceInfo.channel;
if (channel == "appstore") {
window.webkit.messageHandlers.openChargePage.postMessage(null);
} else {
window.webkit.messageHandlers.chargePayClickPage.postMessage(6);
window.location.href = urlPrefix + '/peko/modules/pay/index.html?channelType=4';
}
}
} else {
toastMsg('請在app內打開')
}
})
// 打開規則彈窗
$('.header .rule_icon').click(function () {
$('.shade-mask').show()
})
// 關閉規則彈窗
$('.shade-mask').click(function () {
$('.shade-mask').hide()
})
// 打開遊戲記錄
$('.header .record_icon').click(function () {
window.location.href = './record.html'
})
// 關閉排行榜
$('.shade-mask-rank').click(function () {
$('.shade-mask-rank').hide()
return false;
})
// 監聽今日排名按鈕點擊事件
$('.header .rank_icon').click(function () {
$('.shade-mask-rank .shade-content-rank .other-rank li').remove();
page = 1;
getListRank(type, page);
$('.shade-mask-rank').show()
})
// 監聽今日排名tab
$('.tab-wrap').on('click', 'span', function () {
page = 1;
type = $(this).index() + 1;
$(this).addClass('active').siblings().removeClass('active');
$('.shade-mask-rank .shade-content-rank .other-rank li').remove();
getListRank(type, page);
return false;
})
function getListRank (type, page) {
networkRequest({
type: 'GET',
url: urlPrefix + '/act/luckySea/listRank',
data: {
type,
page,
pageSize
},
success (res) {
if (res.code === 200) {
if (page == 1) {
// 處理第一名
$('.shade-mask-rank .shade-content-rank .rank-top .topthree-wrap .info-wrap').remove();
let topOne = res.data.rankList.slice(0, 1)
if (topOne.length === 0) {
let arr = new Array(len).fill({
nick: '虛位以待',
avatar: './images/logo.png',
num: ''
})
topThreeArr.push(...arr)
}
var topOneStr = ''
topOne.forEach(item => {
topOneStr += `
<div class="info-wrap" uid="${item.uid}">
<div class="avatar">
<p></p>
<img src="${item.avatar}" alt="">
</div>
<p class="diamond-num" style="display:${type == 1 ? 'none' : 'block'}">${type == 1 ? '' : item.num + '次'}</p>
<p class="nick">${item.nick.length > 5 ? item.nick.slice(0, 5) + '...' : item.nick}</p>
</div>
`
})
$('.shade-mask-rank .shade-content-rank .rank-top .topthree-wrap').append(topOneStr);
//處理底部數據
let erbanNo = res.data.myRankInfo.erbanNo
let myIndex;
res.data.rankList.findIndex((item, index) => {
if (item.erbanNo == erbanNo) {
myIndex = index;
};
})
if (myIndex != undefined) {
$('.mine-rank').html(myIndex + 1)
} else {
$('.mine-rank').html('未上榜')
}
// $('.shade-mask-rank .shade-content-rank .mine .mine-rank').text(myIndex + 1);
$('.shade-mask-rank .shade-content-rank .mine .mine-diamond-num').text(type == 1 ? `${unitProcessing(res.data.myRankInfo.num, 10000, 1, 'w')}` : `猜中 ${res.data.myRankInfo.num}`);
$('.shade-mask-rank .shade-content-rank .mine .mine-info img').attr('src', res.data.myRankInfo.avatar);
$('.shade-mask-rank .shade-content-rank .mine .mine-info .mine-nick').text(res.data.myRankInfo.nick.length > 5 ? res.data.myRankInfo.nick.slice(0, 5) + '...' : res.data.myRankInfo.nick)
}
if (res.data.rankList.length > 0) {
// 非前第一數據
var str = '';
var list = res.data.rankList.slice(1);
list.forEach((item, i) => {
str += `
<li uid="${item.uid}">
<span class="index">${i + 2}</span>
<div class="others-info">
<img src="${item.avatar}" alt="">
<span class="others-nick">${item.nick.length > 5 ? item.nick.slice(0, 5) + '...' : item.nick}</span>
</div>
<span class="others-diamond-num">${type == 1 ? `${unitProcessing(item.num, 10000, 1, 'w')}` : `猜中 ${item.num}`}</span>
</li>
`
});
$('.shade-mask-rank .shade-content-rank .other-rank').append(str);
pageSizeLack = true;
} else {
pageSizeLack = false;
}
} else {
pageSizeLack = true;
toastMsg(res.message)
}
},
error (err) {
pageSizeLack = true;
toastMsg('網絡錯誤')
}
})
}
// 檢測榜單是否滑到底部
$(".shade-mask-rank .shade-content-rank .other-rank").scroll(function () {
var divHeight = $(this).height();
var nScrollHeight = $(this)[0].scrollHeight;
var nScrollTop = $(this)[0].scrollTop;
if (nScrollTop + divHeight + 50 >= nScrollHeight) {
console.log("到達底部了");
if (pageSizeLack) {
pageSizeLack = false;
page++;
getListRank(type, page)
}
}
});
// 取消余額不足彈窗
$('.cancel-btn').click(function () {
$('.shade-mask-fragmentNum').hide();
})
// 取消余額不足跳轉彈窗按鈕
$('.shade-mask-fragmentNum .shade-content-fragmentNum .fragmentNum-btn-wrap .confirm-btn').click(function () {
if (browser.app) {
if (browser.android) {
let channel = pubInfo.deviceInfo.channel;
console.log(pubInfo.deviceInfo);
if (channel == "google") {
window.androidJsObj.openChargePage(6);
} else {
window.androidJsObj.openChargePage(6);
window.location.href = urlPrefix + '/peko/modules/pay/index.html?channelType=4';
}
} else if (browser.ios) {
let channel = pubInfo.deviceInfo.channel;
if (channel == "appstore") {
window.webkit.messageHandlers.openChargePage.postMessage(null);
} else {
window.webkit.messageHandlers.chargePayClickPage.postMessage(6);
window.location.href = urlPrefix + '/peko/modules/pay/index.html?channelType=4';
}
}
} else {
toastMsg('請在app內打開')
}
$('.shade-mask-fragmentNum').hide()
})
$('.muciek').click(function () {
audioIf = !audioIf;
if (audioIf) {
$(this).attr('src', './images/bo.png')
backgroundMusic.play();
lotteryMusic.volume = 0;
lotteryMusic.play();
} else {
$(this).attr('src', './images/jin.png')
backgroundMusic.pause();
lotteryMusic.pause();
}
})
//返回页面 重新请求接口
// var hiddenProperty = 'hidden' in document ? 'hidden' :
// 'webkitHidden' in document ? 'webkitHidden' :
// 'mozHidden' in document ? 'mozHidden' : null;
// var visibilityChangeEvent = hiddenProperty.replace(/hidden/i, 'visibilitychange');
// var onVisibilityChange = function () {
// if (!document[hiddenProperty]) {
// location.reload()
// }
// }
// document.addEventListener(visibilityChangeEvent, onVisibilityChange);