538 lines
17 KiB
JavaScript
538 lines
17 KiB
JavaScript
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 cardArr = [];//記錄選擇卡片
|
||
var gearPosition = []//檔位價值的鉆石
|
||
var gearPositionActive = 0;//當前選澤的檔位
|
||
var prodId = [];//檔位類型
|
||
var prodIdActive;
|
||
var lock = true;//鎖
|
||
var lock2 = true;
|
||
var page = 1;//頁碼
|
||
var scrollLock = true;
|
||
var arrLast = []//記錄上次開獎的數組
|
||
// 初始化函數
|
||
$(function () {
|
||
setTimeout(function () {
|
||
getInfoFromClient()
|
||
setTimeout(function () {
|
||
// 頁面全屏
|
||
if (browser.app) {
|
||
if (browser.android) {
|
||
window.androidJsObj.initShowNav(false)
|
||
} else {
|
||
window.webkit.messageHandlers.initShowNav.postMessage(0)
|
||
}
|
||
};
|
||
// 頂部返回事件
|
||
$('.back').click(() => {
|
||
if (browser.android) {
|
||
window.androidJsObj.closeWebView()
|
||
} else {
|
||
window.webkit.messageHandlers.closeWebView.postMessage(null)
|
||
}
|
||
})
|
||
getAdvertising();
|
||
productList();
|
||
svgaFun();
|
||
svgaFun2();
|
||
}, 100)
|
||
})
|
||
})
|
||
// 播放svg
|
||
function svgaFun () {
|
||
player1 = new SVGA.Player('.star_in');
|
||
parser1 = new SVGA.Parser('.star_in');
|
||
parser1.load('./images/star.svga', function (videoItem) {
|
||
// player1.loops= 1
|
||
// player1.clearsAfterStop = false;
|
||
// player1.setVideoItem(videoItem);
|
||
// player1.startAnimation();
|
||
// player1.loops = 1;
|
||
player1.clearsAfterStop = false;
|
||
player1.setVideoItem(videoItem);
|
||
player1.startAnimation();
|
||
player1.setContentMode('AspectFill')
|
||
player1.onFinished(() => {
|
||
// $('.svga').hide()
|
||
})
|
||
})
|
||
}
|
||
// 播放svg
|
||
function svgaFun2 () {
|
||
player2 = new SVGA.Player('.roulette_in');
|
||
parser2 = new SVGA.Parser('.roulette_in');
|
||
parser2.load('./images/roulette.svga', function (videoItem) {
|
||
// player1.loops= 1
|
||
// player1.clearsAfterStop = false;
|
||
// player1.setVideoItem(videoItem);
|
||
// player1.startAnimation();
|
||
// player1.loops = 1;
|
||
player2.clearsAfterStop = false;
|
||
player2.setVideoItem(videoItem);
|
||
player2.startAnimation();
|
||
player2.setContentMode('AspectFill')
|
||
player2.onFinished(() => {
|
||
// $('.svga').hide()
|
||
})
|
||
})
|
||
}
|
||
// 公告接口
|
||
function getAdvertising () {
|
||
showLoading()
|
||
networkRequest({
|
||
type: 'GET',
|
||
url: urlPrefix + '/seekElfin/draw/list',
|
||
data: {
|
||
count: 30
|
||
},
|
||
success (res) {
|
||
if (res.code === 200) {
|
||
let result = ''
|
||
res.data.forEach(res => {
|
||
result += `
|
||
<li>恭喜 <b>${res.nick.length > 5 ? res.nick.slice(0, 5) + '...' : res.nick}</b>翻開 <b>幸運塔羅</b> 獲得 <i>${res.receiveGoldNum}鉆石</i></li>
|
||
`
|
||
})
|
||
$('.ul1').append(result)
|
||
var num = $(".ul1").find("li").length;
|
||
if (num > 1) {
|
||
setInterval(function () {
|
||
$('.ul1').animate({
|
||
marginTop: "-0.4rem"
|
||
}, 200, function () {
|
||
$(this).css({
|
||
marginTop: "0"
|
||
}).find("li:first").appendTo(this);
|
||
});
|
||
}, 2000);
|
||
}
|
||
} else {
|
||
toastMsg(res.message)
|
||
}
|
||
hideLoading(layerIndex)
|
||
},
|
||
error (err) {
|
||
hideLoading(layerIndex)
|
||
toastMsg('網絡錯誤，請退出重進')
|
||
}
|
||
})
|
||
}
|
||
// 檔位接口
|
||
function productList () {
|
||
showLoading()
|
||
networkRequest({
|
||
type: 'GET',
|
||
url: urlPrefix + '/seekElfin/product/list',
|
||
data: {
|
||
uid: pubInfo.uid
|
||
},
|
||
success (res) {
|
||
if (res.code === 200) {
|
||
gearPositionActive = res.data[0].prodNeedPrice;
|
||
prodIdActive = res.data[0].prodId;
|
||
res.data.forEach((res, i) => {
|
||
gearPosition.push(res.prodNeedPrice);
|
||
prodId.push(res.prodId);
|
||
$(`.tarotBox .tabBox .tabBox${i + 1} b`).text(`${res.prodNeedPrice}鉆/張`)
|
||
})
|
||
getUserInfo();
|
||
} else {
|
||
toastMsg(res.message)
|
||
}
|
||
hideLoading(layerIndex)
|
||
},
|
||
error (err) {
|
||
hideLoading(layerIndex)
|
||
toastMsg('網絡錯誤，請退出重進')
|
||
}
|
||
})
|
||
}
|
||
// 獲取用戶信息
|
||
const getUserInfo = () => {
|
||
// showLoading()
|
||
networkRequest({
|
||
type: 'POST',
|
||
url: urlPrefix + '/seekElfin/user/info',
|
||
data: {
|
||
uid: pubInfo.uid
|
||
},
|
||
success: function (res) {
|
||
if (res.code == 200) {
|
||
$('.tarotBox .diamond b').text(res.data.diamonds);
|
||
} else {
|
||
toastMsg(res.message);
|
||
}
|
||
hideLoading(layerIndex)
|
||
},
|
||
error: function (res) {
|
||
hideLoading(layerIndex)
|
||
console.log(res, '報錯啦');
|
||
toastMsg('網絡錯誤，請退出重進')
|
||
}
|
||
})
|
||
}
|
||
// 抽獎記錄
|
||
const recordPage = () => {
|
||
showLoading()
|
||
networkRequest({
|
||
type: 'GET',
|
||
url: urlPrefix + '/seekElfin/record/page',
|
||
data: {
|
||
uid: pubInfo.uid,
|
||
current: page,
|
||
size: 10,
|
||
},
|
||
success: function (res) {
|
||
if (res.code == 200) {
|
||
var str = ''
|
||
res.data.records.forEach((res, i) => {
|
||
// <div>${JSON.parse(res.selectdNo).length}張</div>
|
||
str += `
|
||
<li calss="${i % 2 == 0 ? 'active' : ''}">
|
||
<div>${res.prodName}</div>
|
||
<div>${res.selectdNo}</div>
|
||
<div class="box ${res.win ? 'box_acitve' : 'box_acitve'}">${res.win ? `幸運號碼: ${res.drawNum}<br>${res.receiveGoldNum}鉆石` :`未猜中<br>幸運號碼: ${res.drawNum}`}</div>
|
||
<div class="time">${dateFormat(res.createTime, 'yyyy.MM.dd')}<br>${dateFormat(res.createTime, 'hh:mm:ss')}</div>
|
||
</li>
|
||
`
|
||
});
|
||
$('.winningRecord .winningRecord_in ul').append(str);
|
||
if (res.data.records.length == 0) {
|
||
scrollLock = false;
|
||
} else {
|
||
scrollLock = true;
|
||
}
|
||
} else {
|
||
scrollLock = true;
|
||
toastMsg(res.message);
|
||
}
|
||
hideLoading(layerIndex)
|
||
},
|
||
error: function (res) {
|
||
scrollLock = true;
|
||
hideLoading(layerIndex)
|
||
toastMsg('網絡錯誤，請退出重進')
|
||
}
|
||
})
|
||
}
|
||
// 抽獎接口
|
||
const draw = () => {
|
||
lock = false;
|
||
showLoading()
|
||
networkRequest({
|
||
type: 'POST',
|
||
url: urlPrefix + '/seekElfin/draw',
|
||
data: JSON.stringify({
|
||
prodId: prodIdActive,
|
||
selectedNo: cardArr,
|
||
roomUid: pubInfo.roomUid,
|
||
// roomUid: pubInfo.uid,
|
||
}),
|
||
headers: { 'Content-Type': 'application/json;charset=utf8' },
|
||
success: function (res) {
|
||
if (res.code == 200) {
|
||
kineticEffect(cardArr, res.data.win, res);
|
||
getUserInfo();
|
||
}
|
||
else if (res.code == 2103) {
|
||
lock = true;
|
||
$('.shade-mask-fragmentNum').show();
|
||
bodyScroolFun(true);
|
||
// toastMsg(res.message);
|
||
} else {
|
||
lock = true;
|
||
toastMsg(res.message);
|
||
}
|
||
hideLoading(layerIndex)
|
||
},
|
||
error: function (res) {
|
||
lock = true;
|
||
hideLoading(layerIndex)
|
||
console.log(res, '報錯啦');
|
||
toastMsg('網絡錯誤，請退出重進')
|
||
}
|
||
})
|
||
}
|
||
// 恢復初始樣式函數
|
||
function initialStytle (bool) {
|
||
if (bool) {
|
||
// arrLast = [0, 1, 2];
|
||
arrLast.forEach((res, i) => {
|
||
$(`.tarotBox .cardBox${res}`).css({
|
||
transition: ' all 1s',
|
||
transform: 'rotateY(-360deg)',
|
||
})
|
||
})
|
||
setTimeout(function () {
|
||
$('.tarotBox .cardBox').css({
|
||
transition: ' all 0s',
|
||
transform: 'rotateY(0deg)',
|
||
});
|
||
}, 1000)
|
||
}
|
||
lock = true;
|
||
// 清空已選卡片
|
||
cardArr = [];
|
||
// 恢復卡片默認樣式
|
||
$('.tarotBox .cardBox').removeClass('card1_active');
|
||
$('.tarotBox .cardBox').removeClass('card2_active');
|
||
$('.tarotBox .cardBox').removeClass('card3_active');
|
||
|
||
// 恢復默認選擇文案
|
||
$('.tarotBox .cardBoxText').html(`
|
||
<p>共選擇 <b>${cardArr.length}</b> 張</p>
|
||
<p>翻到鉆石卡的概率為<b>${cardArr.length * 10}%</b></p>
|
||
`);
|
||
// 清除中獎&未中獎樣式
|
||
$('.tarotBox .cardBox').removeClass('card_not');
|
||
$('.tarotBox .cardBox').removeClass('card_winning1');
|
||
$('.tarotBox .cardBox').removeClass('card_winning2');
|
||
$('.tarotBox .cardBox').removeClass('card_winning3');
|
||
$('.tarotBox .cardBoxText_no').hide();
|
||
$('.tarotBox .cardBoxText_gx').hide()
|
||
$('.tarotBox .cardBoxText').show();
|
||
$('.tarotBox .cardBoxText_gift').show();
|
||
$('.cardBoxBut').show();
|
||
$('.butAgain').hide();
|
||
}
|
||
// 處理動效
|
||
function kineticEffect (arr, bool, data) {
|
||
arrLast = arr;
|
||
arr.forEach((res, i) => {
|
||
$(`.tarotBox .cardBox${res}`).css({
|
||
transition: ' all 1s',
|
||
transform: 'rotateY(360deg)',
|
||
})
|
||
})
|
||
|
||
setTimeout(function () {
|
||
$('.tarotBox .cardBox').css({
|
||
transition: ' all 0s',
|
||
transform: 'rotateY(0deg)',
|
||
});
|
||
arr.forEach((res, i) => {
|
||
$(`.tarotBox .cardBox${res}`).addClass('card_not');
|
||
})
|
||
if (bool) {
|
||
//中獎
|
||
$(`.tarotBox .cardBox${data.data.drawNum}`).addClass(prodIdActive == 1 ? 'card_winning1' : prodIdActive == 2 ? 'card_winning2' : 'card_winning3')
|
||
$('.tarotBox .cardBoxText').hide();
|
||
$('.tarotBox .cardBoxText_gift').hide();
|
||
$('.cardBoxText_gx').html(`
|
||
<p>翻到幸運數字${data.data.drawNum}！</p>
|
||
<p>獲得 <b>${data.data.receiveGoldNum}</b> 鉆石</p>
|
||
`)
|
||
$('.cardBoxText_gx').show();
|
||
} else {
|
||
//未中獎
|
||
$('.tarotBox .cardBoxText').hide();
|
||
$('.tarotBox .cardBoxText_gift').hide();
|
||
$('.tarotBox .cardBoxText_no').show();
|
||
}
|
||
$('.cardBoxBut').hide();
|
||
$('.tarotBox .butAgain').attr('src', prodIdActive == 1 ? './images/butAgain1.png' : prodIdActive == 2 ? './images/butAgain2.png' : './images/butAgain3.png')
|
||
$('.butAgain').show();
|
||
}, 1000)
|
||
}
|
||
// 檔位tab切換按鈕
|
||
$('.tarotBox .tabBox div').click(function () {
|
||
if (lock) {
|
||
var i = $(this).index() + 1;
|
||
// 切換tab樣式
|
||
$('.tarotBox .tabBox div').removeClass('active1').removeClass('active2').removeClass('active3');
|
||
$(this).addClass(`active${i}`);
|
||
// 切換卡牌樣式
|
||
$('.tarotBox .cardBox').hide();
|
||
$(`.tarotBox .card${i}`).show();
|
||
// 切換按鈕樣式
|
||
$('.tarotBox .cardBoxBut').attr('src', `./images/but${i}.png`)
|
||
// if (i == 1) {
|
||
gearPositionActive = gearPosition[i - 1];
|
||
prodIdActive = prodId[i - 1];
|
||
$('.tarotBox .gradeText b').text(gearPositionActive * 10);
|
||
console.log(gearPositionActive);
|
||
// } else if (i == 2) {
|
||
// gearPosition = 1000;
|
||
// $('.tarotBox .gradeText b').text(gearPosition * 10);
|
||
// } else {
|
||
// gearPosition = 10000;
|
||
// $('.tarotBox .gradeText b').text(gearPosition * 10);
|
||
// }
|
||
// 清空默認樣式
|
||
initialStytle();
|
||
}
|
||
})
|
||
// 選擇初級卡片按鈕
|
||
$('.tarotBox .card1').click(function () {
|
||
var i = $(this).index();
|
||
tarotBox($(this), i, 1);
|
||
})
|
||
// 選擇中級卡片按鈕
|
||
$('.tarotBox .card2').click(function () {
|
||
var i = $(this).index();
|
||
tarotBox($(this), i, 2);
|
||
})
|
||
// 選擇高級卡片按鈕
|
||
$('.tarotBox .card3').click(function () {
|
||
var i = $(this).index();
|
||
tarotBox($(this), i, 3);
|
||
})
|
||
// 選擇卡片樣式
|
||
function tarotBox (dom, i, type) {
|
||
if (lock) {
|
||
var i = type == 1 ? dom.index() - 3 : type == 2 ? dom.index() - 13 : dom.index() - 23;
|
||
if (cardArr.indexOf(i) == -1) {
|
||
if (cardArr.length < 9) {
|
||
dom.addClass(type == 1 ? 'card1_active' : type == 2 ? 'card2_active' : 'card3_active');
|
||
cardArr.push(i);
|
||
} else {
|
||
toastMsg('最多只能選擇9張');
|
||
}
|
||
} else {
|
||
dom.removeClass(type == 1 ? 'card1_active' : type == 2 ? 'card2_active' : 'card3_active');
|
||
cardArr.splice(cardArr.indexOf(i), 1);
|
||
}
|
||
$('.tarotBox .cardBoxText').html(`
|
||
<p>共選擇 <b>${cardArr.length}</b> 張</p>
|
||
<p>翻到鉆石卡的概率為<b>${cardArr.length * 10}%</b></p>
|
||
`);
|
||
console.log(cardArr);
|
||
}
|
||
}
|
||
// 翻牌按鈕
|
||
$('.tarotBox .cardBoxBut').click(function () {
|
||
if (cardArr.length == 0) {
|
||
toastMsg('請先選擇卡片');
|
||
return;
|
||
}
|
||
if (lock) {
|
||
draw();
|
||
}
|
||
})
|
||
// 再翻一次按鈕
|
||
$('.butAgain').click(function () {
|
||
initialStytle(true);
|
||
lock = true;
|
||
})
|
||
// 跳轉充值頁面
|
||
$('.tarotBox .diamond').click(() => {
|
||
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內打開')
|
||
}
|
||
})
|
||
// 打開規則
|
||
$('.rule').click(function () {
|
||
$(window).scrollTop(0)
|
||
bodyScroolFun(true);
|
||
$('.rule_pub ').show();
|
||
})
|
||
// 關閉規則
|
||
$('.rule_pub .rule_pub_in .close').click(function () {
|
||
bodyScroolFun(false);
|
||
$('.rule_pub ').hide();
|
||
})
|
||
// 打開記錄
|
||
$('.record').click(function () {
|
||
$(window).scrollTop(0)
|
||
$('.winningRecord .winningRecord_in ul li').remove();
|
||
page = 1;
|
||
recordPage();
|
||
bodyScroolFun(true);
|
||
$('.winningRecord ').show();
|
||
})
|
||
// 關閉記錄
|
||
$('.winningRecord .winningRecord_in .close').click(function () {
|
||
bodyScroolFun(false);
|
||
$('.winningRecord ').hide();
|
||
})
|
||
// 記錄監聽滾動
|
||
$('.winningRecord .winningRecord_in ul').scroll(function () {
|
||
let scrollTop = $(this).scrollTop()
|
||
let scrollHeight = $('.winningRecord .winningRecord_in ul')[0].scrollHeight
|
||
let ulHeight = $(this).innerHeight()
|
||
if (scrollTop + ulHeight + 10 >= scrollHeight) {
|
||
if (scrollLock) {
|
||
scrollLock = false;
|
||
page++;
|
||
recordPage();
|
||
console.log('到底了');
|
||
}
|
||
}
|
||
})
|
||
// 關閉去充值彈窗
|
||
$('.shade-mask-fragmentNum .cancel-btn').click(function () {
|
||
$('.shade-mask-fragmentNum').hide();
|
||
bodyScroolFun(false);
|
||
})
|
||
// 確認去充值彈窗
|
||
$('.shade-mask-fragmentNum .confirm-btn').click(function () {
|
||
$('.shade-mask-fragmentNum').hide();
|
||
bodyScroolFun(false);
|
||
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內打開')
|
||
}
|
||
}) |