254 lines
7.1 KiB
JavaScript
254 lines
7.1 KiB
JavaScript
let urlPrefix = getUrlPrefix()
|
|
let browser = checkVersion()
|
|
let queryObj = getQueryString()
|
|
if (EnvCheck() === 'test') new VConsole
|
|
var langReplace;
|
|
var localLang;
|
|
// 页面全屏
|
|
if(browser.app) {
|
|
if (browser.android) {
|
|
window.androidJsObj.initShowNav(false)
|
|
} else {
|
|
window.webkit.messageHandlers.initShowNav.postMessage(0)
|
|
}
|
|
}
|
|
|
|
// 封装layer消息提醒框
|
|
let layerIndex
|
|
const showLoading = () => {
|
|
layer.open({
|
|
type: 2,
|
|
shadeClose: false,
|
|
content: langReplace(localLang.demoModule.hour_text5),
|
|
success(e) {
|
|
layerIndex = $(e).attr('index')
|
|
}
|
|
})
|
|
}
|
|
const hideLoading = (index) => {
|
|
layer.close(index)
|
|
}
|
|
const toastMsg = (content = langReplace(localLang.demoModule.hour_text6), time = 2) => {
|
|
layer.open({
|
|
content,
|
|
time,
|
|
skin: 'msg'
|
|
})
|
|
}
|
|
|
|
|
|
let currHourRank = []
|
|
let lastHourRank = []
|
|
let currRoomInfo = {}
|
|
let timestamp
|
|
|
|
let page = 1
|
|
let pageSize = 10
|
|
let rankList = []
|
|
let canNext = true
|
|
let isLock = true
|
|
|
|
// 获取小时榜数据
|
|
const getHourList = () => {
|
|
networkRequest({
|
|
type: 'GET',
|
|
url: urlPrefix + '/single/broadcast/listHourRank',
|
|
data: {
|
|
roomUid: queryObj.roomUid
|
|
},
|
|
success(res) {
|
|
if (res.code === 200) {
|
|
currHourRank = res.data.currHourRank
|
|
lastHourRank = res.data.lastHourRank
|
|
currRoomInfo = res.data.currRoomInfo
|
|
timestamp = res.timestamp
|
|
countDown()
|
|
renderLastHourThree()
|
|
renderCurrentList()
|
|
renderCurrentRoomInfo()
|
|
} else {
|
|
toastMsg(res.message)
|
|
}
|
|
},
|
|
error(err) {
|
|
toastMsg(langReplace(localLang.demoModule.hour_text7))
|
|
}
|
|
})
|
|
}
|
|
// 渲染小时榜上一小时前三
|
|
const renderLastHourThree = () => {
|
|
lastHourRank = lastHourRank.slice(0, 3)
|
|
if(lastHourRank.length < 3) {
|
|
let len = 3 - lastHourRank.length
|
|
let arr = new Array(len).fill({
|
|
nick: '',
|
|
score: ''
|
|
})
|
|
lastHourRank.push(...arr)
|
|
}
|
|
let str = ''
|
|
lastHourRank.map((item, index) => {
|
|
str += `
|
|
<div class="top_three_item">
|
|
<div class="avatar" data-uid=${item.uid}>
|
|
<p></p>
|
|
<img src="${item.avatar ? item.avatar : `./images/default-avatar.png`}" alt="">
|
|
</div>
|
|
<div class="nick">${item.nick.length>5?item.nick.slice(0, 5)+'...' : item.nick}</div>
|
|
<div class="num" style="display:${item.score === '' ? 'none' : 'block'}">
|
|
${
|
|
index == 0 ?
|
|
'<img src="./images/single/first-icon.png" alt=""></img>' :
|
|
`<span>${unitProcessingAr(item.score,1)}</span><!-- <br> -->${langReplace(localLang.demoModule.hour_text8)}`
|
|
}
|
|
</div>
|
|
</div>
|
|
`
|
|
})
|
|
$('.top_three_wrap').html(str)
|
|
}
|
|
// 倒计时
|
|
const countDown = () => {
|
|
let t = new Date(timestamp)
|
|
console.log(t);
|
|
console.log(timestamp);
|
|
let y = t.getFullYear()
|
|
let m = t.getMonth()+1
|
|
let d = t.getDate()
|
|
let h = t.getHours()
|
|
let disT = new Date(`${y}/${m}/${d} ${h+1}:00:00`).getTime() - timestamp
|
|
let min = Math.floor(disT / 1000 / 60)
|
|
let s
|
|
let delta = disT/1000 - Math.floor(disT / 1000)
|
|
if(delta > 0.5) {
|
|
s = Math.ceil(disT / 1000 % 60)
|
|
}else {
|
|
s = Math.floor(disT / 1000 % 60)
|
|
}
|
|
$('.time_wrap .h').html(h)
|
|
$('.time_wrap .m').html(min<10 ? '0'+min : min)
|
|
$('.time_wrap .s').html(s<10? '0'+s : s)
|
|
let timer = setInterval(() => {
|
|
disT -= 1000
|
|
if(disT <= 0) {
|
|
getHourList()
|
|
clearInterval(timer)
|
|
return
|
|
}
|
|
min = Math.floor(disT / 1000 / 60)
|
|
s = Math.floor(disT / 1000 % 60)
|
|
$('.time_wrap .m').html(min<10 ? '0'+min : min)
|
|
$('.time_wrap .s').html(s<10? '0'+s : s)
|
|
}, 1000)
|
|
}
|
|
// 渲染小时榜当前列表
|
|
const renderCurrentList = () => {
|
|
currHourRank = currHourRank.slice(0, 10)
|
|
if(currHourRank.length < 10) {
|
|
let len = 10 - currHourRank.length
|
|
let arr = new Array(len).fill({
|
|
nick: langReplace(localLang.demoModule.hour_text9),
|
|
score: ''
|
|
})
|
|
currHourRank.push(...arr)
|
|
}
|
|
let str = ''
|
|
currHourRank.map((item, index) => {
|
|
str += `
|
|
<li>
|
|
<div class="index">${index+1}</div>
|
|
<div class="others_avatar" data-uid=${item.uid}>
|
|
<img src="${item.avatar ? item.avatar : `./images/default-avatar.png`}" alt="">
|
|
</div>
|
|
<div class="others_nick">${item.nick.length>8?item.nick.slice(0, 8)+'...' : item.nick}</div>
|
|
<div class="others_num" style="display:${item.score === '' ? 'none' : 'block'}">
|
|
${
|
|
index === 0 ?
|
|
langReplace(localLang.demoModule.hour_text10) :
|
|
`${langReplace(localLang.demoModule.hour_text8)}<!-- <br> --><span>${unitProcessingAr(item.score,1)}</span>`
|
|
}
|
|
</div>
|
|
</li>
|
|
`
|
|
})
|
|
$('ul').html(str)
|
|
}
|
|
// 渲染当前房间榜单信息
|
|
const renderCurrentRoomInfo = () => {
|
|
let rank = ''
|
|
let score = ''
|
|
currHourRank.forEach((item, index) => {
|
|
if(item.uid == currRoomInfo.uid) {
|
|
rank = index+1
|
|
// if(item.score > 10000) {
|
|
// score = ( Math.floor(item.score/1000) ) / 10 + 'W'
|
|
// }else {
|
|
// score = item.score
|
|
// }
|
|
score = unitProcessingAr(item.score,1)
|
|
}
|
|
})
|
|
$('.mine_index').html(rank ? rank : langReplace(localLang.demoModule.hour_text11))
|
|
$('.mine_avatar').attr('src', currRoomInfo.avatar)
|
|
$('.mine_avatar').data('uid', currRoomInfo.uid)
|
|
$('.mine_nick').html(currRoomInfo.nick.length>8 ? currRoomInfo.nick.slice(0, 8)+'...' : currRoomInfo.nick)
|
|
$('.mine_num').html(`
|
|
${
|
|
score === 0 ?
|
|
langReplace(localLang.demoModule.hour_text10) :
|
|
(score === '' ? '' :
|
|
`
|
|
${langReplace(localLang.demoModule.hour_text8)}
|
|
<p>${score}</p>
|
|
`
|
|
)
|
|
}
|
|
`)
|
|
}
|
|
|
|
|
|
$(function () {
|
|
getInfoFromClient()
|
|
fuzzyMatchUpdateQueryStringParameterFun(); // 判断语言
|
|
setTimeout(() => {
|
|
langReplace = window.lang.replace;
|
|
localLang = window.lang;
|
|
translateFun();
|
|
getHourList()
|
|
setTimeout(function () {
|
|
$('#body').show();
|
|
}, 300)
|
|
}, 50)
|
|
function translateFun() {
|
|
var langReplace = window.lang.replace;
|
|
var localLang = window.lang;
|
|
$('#hour_title').html(langReplace(localLang.demoModule.hour_title));
|
|
$('.hour_title').html(langReplace(localLang.demoModule.hour_title));
|
|
$('#hore_text1').html(langReplace(localLang.demoModule.hore_text1));
|
|
$('#hour_text33').html(langReplace(localLang.demoModule.hour_text33));
|
|
$('#hour_text2').html(langReplace(localLang.demoModule.hour_text2));
|
|
$('#hour_text4').html(langReplace(localLang.demoModule.hour_text4));
|
|
}
|
|
$('.rule_icon').click(() => {
|
|
window.location.href = './rule.html'
|
|
})
|
|
|
|
|
|
//跳转个人主页
|
|
function openPerson(document, dom) {
|
|
$(document).on('click', dom, function () {
|
|
let erbanUid = $(this).data('uid')
|
|
if (!browser.app) return
|
|
if (browser.ios) {
|
|
window.webkit.messageHandlers.openPersonPage.postMessage(erbanUid);
|
|
} else if (browser.android) {
|
|
if (androidJsObj && typeof androidJsObj === 'object') {
|
|
window.androidJsObj.openPersonPage(erbanUid);
|
|
}
|
|
}
|
|
})
|
|
}
|
|
openPerson('.top_three_wrap', '.avatar')
|
|
openPerson('ul', '.others_avatar')
|
|
openPerson('.mine', '.mine_avatar')
|
|
}) |