364 lines
15 KiB
JavaScript
364 lines
15 KiB
JavaScript
let urlPrefix = getUrlPrefix()
|
||
let browser = checkVersion()
|
||
let env = EnvCheck();
|
||
if (env == 'test') {
|
||
new VConsole();
|
||
}
|
||
// 封裝layer消息提醒框
|
||
let layerIndex
|
||
var langReplace;
|
||
var localLang;
|
||
const showLoading = (content = langReplace(localLang.demoModule.layerIndex1)) => {
|
||
layer.open({
|
||
type: 2,
|
||
shadeClose: false,
|
||
content,
|
||
success(e) {
|
||
layerIndex = $(e).attr('index')
|
||
}
|
||
})
|
||
}
|
||
const hideLoading = (index) => {
|
||
layer.close(index)
|
||
}
|
||
const toastMsg = (content = langReplace(localLang.demoModule.layerIndex2), time = 2) => {
|
||
layer.open({
|
||
content,
|
||
time,
|
||
skin: 'msg'
|
||
})
|
||
}
|
||
var countupTime;//倒计时容器
|
||
var page = 0;
|
||
var maxPage = 0;
|
||
var arr = [];
|
||
// 初始化函數
|
||
$(function () {
|
||
getInfoFromClient();
|
||
fuzzyMatchUpdateQueryStringParameterFun(); // 判断语言
|
||
setTimeout(function () {
|
||
// 頁面全屏
|
||
if (browser.app) {
|
||
if (browser.android) {
|
||
window.androidJsObj.initShowNav(false)
|
||
} else {
|
||
window.webkit.messageHandlers.initShowNav.postMessage(0)
|
||
}
|
||
};
|
||
// 頂部返回事件
|
||
$('.back img').click(() => {
|
||
if (browser.android) {
|
||
window.androidJsObj.closeWebView()
|
||
} else {
|
||
window.webkit.messageHandlers.closeWebView.postMessage(null)
|
||
}
|
||
})
|
||
fuzzyMatchUpdateQueryStringParameterFun(); // 判断语言
|
||
langReplace = window.lang.replace;
|
||
localLang = window.lang;
|
||
translateFun();
|
||
getConfig();
|
||
}, 100)
|
||
})
|
||
// 处理SVGA
|
||
document.addEventListener('DOMContentLoaded', function () {
|
||
function loadSVGA(containerId, svgaPath) {
|
||
var container = document.getElementById(containerId);
|
||
var player = new SVGA.Player(container);
|
||
|
||
var parser = new SVGA.Parser();
|
||
parser.load(svgaPath, function (videoItem) {
|
||
player.setVideoItem(videoItem);
|
||
player.startAnimation();
|
||
});
|
||
}
|
||
|
||
loadSVGA('zj300k', './svga/300k.svga');
|
||
|
||
loadSVGA('zj1.5M', './svga/zj1.5M.svga');
|
||
loadSVGA('ts1.5M', './svga/ts1.5M.svga');
|
||
|
||
loadSVGA('zj3M', './svga/zj3M.svga');
|
||
loadSVGA('ts3M', './svga/ts3M.svga');
|
||
|
||
loadSVGA('zj6M', './svga/zj6M.svga');
|
||
loadSVGA('ts6M', './svga/ts6M.svga');
|
||
|
||
loadSVGA('zj10M', './svga/zj10M.svga');
|
||
loadSVGA('ts10M', './svga/ts10M.svga');
|
||
|
||
loadSVGA('ts20M', './svga/ts20M.svga');
|
||
|
||
loadSVGA('ts30M', './svga/ts30M.svga');
|
||
|
||
loadSVGA('ts90M', './svga/ts90M.svga');
|
||
|
||
});
|
||
function translateFun() {
|
||
var langReplace = window.lang.replace;
|
||
var localLang = window.lang;
|
||
$('.text1').text(langReplace(localLang.demoModule.text1));
|
||
$('.text2').text(langReplace(localLang.demoModule.text2));
|
||
$('.text3').text(langReplace(localLang.demoModule.text3));
|
||
$('.text4').text(langReplace(localLang.demoModule.text4));
|
||
$('.text5').text(langReplace(localLang.demoModule.text5));
|
||
$('.text6').text(langReplace(localLang.demoModule.text6));
|
||
$('.text7').html(langReplace(localLang.demoModule.text7));
|
||
$('.text8').html(langReplace(localLang.demoModule.text8));
|
||
$('.text9').text(langReplace(localLang.demoModule.text9));
|
||
$('.text10').text(langReplace(localLang.demoModule.text10));
|
||
$('.text11').text(langReplace(localLang.demoModule.text11));
|
||
$('.text6M').text(langReplace(localLang.demoModule.text6M));
|
||
$('.text12').text(langReplace(localLang.demoModule.text12));
|
||
$('.text13').text(langReplace(localLang.demoModule.text13));
|
||
$('.text14').text(langReplace(localLang.demoModule.text14));
|
||
$('.text90M').text(langReplace(localLang.demoModule.text90M));
|
||
$('.text17').text(langReplace(localLang.demoModule.text17));
|
||
$('.text18').text(langReplace(localLang.demoModule.text18));
|
||
$('.text19').text(langReplace(localLang.demoModule.text19));
|
||
$('.priorityWinners').text(langReplace(localLang.demoModule.priorityWinners));
|
||
if (browser.ios) {
|
||
$('.null').text(langReplace(localLang.demoModule.text15));
|
||
} else {
|
||
|
||
$('.null').text(langReplace(localLang.demoModule.text16));
|
||
}
|
||
$('.rule .rule_in .box').html(langReplace(localLang.demoModule.enRule))
|
||
}
|
||
console.log(unitProcessingAr(7000000, 1));
|
||
// 配置接口
|
||
function getConfig() {
|
||
showLoading()
|
||
networkRequest({
|
||
type: 'get',
|
||
url: urlPrefix + '/activity/h5/dayConsume',
|
||
data: { uid: pubInfo.uid },
|
||
success(res) {
|
||
if (res.code === 200) {
|
||
// 处理是否代理人
|
||
res.data.rechargeUser ? $('.myBox').hide() : $('.myBox').show();
|
||
// 处理等级不足不显示榜单
|
||
// res.data.wealth <= 7 ? $('.priorityWinners,.priorityWinnersBox').hide() : $('.priorityWinners,.priorityWinnersBox').show()
|
||
// 处理倒计时
|
||
countup(res.data.endTime - res.timestamp);
|
||
// 处理顶部进度以及个人信息
|
||
$('.myBox .tx').attr('src', res.data.avatar);
|
||
$('.myBox .name').text(res.data.nick);
|
||
$('.myBox .tetxBox .r b').text(res.data.goldNum);
|
||
console.log(res.data.goldNum < 700000);
|
||
if (res.data.goldNum < 6000000) {
|
||
$('.myBox .tetxBox .r strong').text(6000000);
|
||
$('.myBox .lineBox .box1 span b').text(unitProcessingAr(300000));
|
||
$('.myBox .lineBox .box1').css('left', `${(300000 / 6000000) * 100}%`);
|
||
$('.myBox .lineBox .box2 span b').text(unitProcessingAr(1500000, 1));
|
||
$('.myBox .lineBox .box2').css('left', `${(1500000 / 6000000) * 100}%`);
|
||
$('.myBox .lineBox .box3 span b').text(unitProcessingAr(3000000, 1));
|
||
$('.myBox .lineBox .box3').css('left', `${(3000000 / 6000000) * 100}%`);
|
||
$('.myBox .lineBox .box4 span b').text(unitProcessingAr(6000000, 1));
|
||
$('.myBox .lineBox .box4').css('right', `0%`);
|
||
$('.myBox .lineBox .line').css('width', `${((res.data.goldNum / 6000000) * 100) > 100 ? 100 : (res.data.goldNum / 6000000) * 100}%`);
|
||
if (res.data.goldNum >= 300000) { $('.myBox .lineBox .box1').addClass('act') }
|
||
if (res.data.goldNum >= 1500000) { $('.myBox .lineBox .box2').addClass('act') }
|
||
if (res.data.goldNum >= 3000000) { $('.myBox .lineBox .box3').addClass('act') }
|
||
if (res.data.goldNum >= 6000000) { $('.myBox .lineBox .box4').addClass('act') }
|
||
} else {
|
||
$('.myBox .tetxBox .r strong').text(90000000);
|
||
$('.myBox .lineBox .box1 span b').text(unitProcessingAr(10000000));
|
||
$('.myBox .lineBox .box1').css('left', `5%`);
|
||
$('.myBox .lineBox .box2 span b').text(unitProcessingAr(20000000));
|
||
$('.myBox .lineBox .box2').css('left', `25%`);
|
||
$('.myBox .lineBox .box3 span b').text(unitProcessingAr(30000000));
|
||
$('.myBox .lineBox .box3').css('left', `50%`);
|
||
$('.myBox .lineBox .box4 span b').text(unitProcessingAr(90000000));
|
||
$('.myBox .lineBox .box4').css('right', `0`);
|
||
// 修改进度条宽度计算逻辑，使其在达到各档位时能正确显示对应宽度
|
||
let progressWidth = 0;
|
||
if (res.data.goldNum < 10000000) {
|
||
// 在第一档之前，按比例计算(0-5%)
|
||
progressWidth = (res.data.goldNum / 10000000) * 5;
|
||
} else if (res.data.goldNum < 20000000) {
|
||
// 在第一档和第二档之间，按比例计算(5-25%)
|
||
progressWidth = 5 + ((res.data.goldNum - 10000000) / (20000000 - 10000000)) * (25 - 5);
|
||
} else if (res.data.goldNum < 30000000) {
|
||
// 在第二档和第三档之间，按比例计算(25-50%)
|
||
progressWidth = 25 + ((res.data.goldNum - 20000000) / (30000000 - 20000000)) * (50 - 25);
|
||
} else {
|
||
// 在第三档之后，按比例计算(50-100%)
|
||
progressWidth = 50 + ((res.data.goldNum - 30000000) / (90000000 - 30000000)) * (100 - 50);
|
||
}
|
||
// 确保最大宽度不超过100%
|
||
progressWidth = progressWidth > 100 ? 100 : progressWidth;
|
||
$('.myBox .lineBox .line').css('width', `${progressWidth}%`);
|
||
if (res.data.goldNum >= 10000000) { $('.myBox .lineBox .box1').addClass('act') }
|
||
if (res.data.goldNum >= 20000000) {
|
||
$('.myBox .lineBox .box2').addClass('act')
|
||
}
|
||
if (res.data.goldNum >= 30000000) {
|
||
$('.myBox .lineBox .box3').addClass('act')
|
||
}
|
||
if (res.data.goldNum >= 90000000) { $('.myBox .lineBox .box4').addClass('act') }
|
||
}
|
||
// 处理每个档位的用户前四名
|
||
res.data.activityLevelUserVo.forEach((item, i) => {
|
||
var str = '';
|
||
// 等级小于七级展示默认
|
||
if (res.data.wealth <= 7) {
|
||
$(`.content1 .level${item.level} .priorityWinnersBox div`).remove();
|
||
$(`.content2 .level${item.level} .priorityWinnersBox div`).remove();
|
||
str = `
|
||
<div>
|
||
<img src="./images/null.png" alt="">
|
||
<span>${localLang.demoModule.waiting}</span>
|
||
</div>
|
||
`
|
||
$(`.content1 .level${item.level} .priorityWinnersBox`).append(str);
|
||
$(`.content2 .level${item.level} .priorityWinnersBox`).append(str);
|
||
} else {
|
||
if ((item.level) <= 4) {
|
||
$(`.content1 .level${item.level} .priorityWinnersBox div`).remove();
|
||
} else {
|
||
$(`.content2 .level${item.level} .priorityWinnersBox div`).remove();
|
||
}
|
||
if (item.userVos.length > 0) {
|
||
item.userVos.forEach(val => {
|
||
str += `
|
||
<div>
|
||
<img src="${val.avatar}" alt="">
|
||
<span>${val.name}</span>
|
||
</div>
|
||
`
|
||
})
|
||
} else {
|
||
str += `
|
||
<div>
|
||
<img src="./images/null.png" alt="">
|
||
<span>${localLang.demoModule.waiting}</span>
|
||
</div>
|
||
`
|
||
}
|
||
if ((item.level) <= 4) {
|
||
$(`.content1 .level${item.level} .priorityWinnersBox`).append(str);
|
||
} else {
|
||
$(`.content2 .level${item.level} .priorityWinnersBox`).append(str);
|
||
}
|
||
}
|
||
|
||
})
|
||
} else {
|
||
toastMsg(res.message)
|
||
}
|
||
hideLoading(layerIndex)
|
||
},
|
||
error(err) {
|
||
hideLoading(layerIndex)
|
||
toastMsg(langReplace(localLang.demoModule.layerIndex3))
|
||
}
|
||
})
|
||
}
|
||
// 倒計時
|
||
function countup(leftTime) {
|
||
clearTimeout(countupTime)
|
||
//獲取當前時間
|
||
// var now = nowTime;
|
||
var d = 0;
|
||
var h = 0;
|
||
var m = 0;
|
||
var s = 0;
|
||
//定義變數 d,h,m,s保存倒計時的時間
|
||
var d, h, m, s;
|
||
//遞歸每秒調⽤countTime⽅法，顯⽰動態時間效果
|
||
if (leftTime > 0) {
|
||
d = getzf(Math.floor(leftTime / 1000 / 60 / 60 / 24));
|
||
h = getzf(Math.floor(leftTime / 1000 / 60 / 60 % 24));
|
||
m = getzf(Math.floor(leftTime / 1000 / 60 % 60));
|
||
s = getzf(Math.floor(leftTime / 1000 % 60));
|
||
//將倒計時賦值到div中
|
||
$('.header .timeBox .hour b').text(h);
|
||
$('.header .timeBox .min b').text(m);
|
||
$('.header .timeBox .sec b').text(s);
|
||
} else {
|
||
getConfig();
|
||
}
|
||
if (leftTime > 0) {
|
||
leftTime = leftTime - 1000;
|
||
}
|
||
countupTime = setTimeout(function () {
|
||
countup(leftTime);
|
||
}, 1000);
|
||
}
|
||
//补0操作
|
||
function getzf(num) {
|
||
if (parseInt(num) < 10) {
|
||
num = '0' + num;
|
||
}
|
||
return num;
|
||
}
|
||
// tab切换
|
||
$('.tab div').click(function () {
|
||
var i = $(this).index() + 1;
|
||
$('.content1,.content2').hide();
|
||
$(`.content${i}`).show();
|
||
$(this).addClass(`${i == 2 ? 'act2' : 'act'}`).siblings().removeClass('act').removeClass('act2')
|
||
})
|
||
// 打开mp4弹窗
|
||
$('.content2 .contentBox2 .box .zjIcon').click(function () {
|
||
var video = document.getElementById('zjVideo');
|
||
video.play();
|
||
bodyScroolFun(true);
|
||
$('.video').show();
|
||
})
|
||
$('.content2 .contentBox3 .box .zjIcon').click(function () {
|
||
var video = document.getElementById('zjVideo2');
|
||
video.play();
|
||
bodyScroolFun(true);
|
||
$('.video2').show();
|
||
})
|
||
$('.content2 .contentBox4 .box .zjIcon').click(function () {
|
||
var video = document.getElementById('zjVideo3');
|
||
video.play();
|
||
bodyScroolFun(true);
|
||
$('.video3').show();
|
||
})
|
||
// 关闭mp4弹窗
|
||
$('.video .close,.video2 .close,.video3 .close').click(function () {
|
||
var video = document.getElementById('zjVideo');
|
||
var video2 = document.getElementById('zjVideo2');
|
||
var video3 = document.getElementById('zjVideo3');
|
||
video.pause();
|
||
video2.pause();
|
||
video3.pause();
|
||
bodyScroolFun(false);
|
||
$('.video,.video2,.video3').hide();
|
||
})
|
||
// 监听播放完毕事件
|
||
var video = document.getElementById('zjVideo');
|
||
video.addEventListener('ended', function () {
|
||
video.pause();
|
||
bodyScroolFun(false);
|
||
$('.video').hide();
|
||
});
|
||
// 监听播放完毕事件
|
||
var video2 = document.getElementById('zjVideo2');
|
||
video.addEventListener('ended', function () {
|
||
video2.pause();
|
||
bodyScroolFun(false);
|
||
$('.video2').hide();
|
||
});
|
||
// 监听播放完毕事件
|
||
var video3 = document.getElementById('zjVideo3');
|
||
video.addEventListener('ended', function () {
|
||
video3.pause();
|
||
bodyScroolFun(false);
|
||
$('.video3').hide();
|
||
});
|
||
|
||
// 打开规则
|
||
$('.header .rule_icon').click(function () {
|
||
$('.rule').show();
|
||
bodyScroolFun(true);
|
||
})
|
||
// 关闭规则
|
||
$('.rule .rule_in .close').click(function () {
|
||
$('.rule').hide();
|
||
bodyScroolFun(false);
|
||
}) |