271 lines
7.6 KiB
JavaScript
271 lines
7.6 KiB
JavaScript
let urlPrefix = getUrlPrefix()
|
|
let browser = checkVersion()
|
|
let queryObj = getQueryString()
|
|
if (EnvCheck() === 'test') new VConsole
|
|
// 页面全屏
|
|
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: '加載中...',
|
|
success(e) {
|
|
layerIndex = $(e).attr('index')
|
|
}
|
|
})
|
|
}
|
|
const hideLoading = (index) => {
|
|
layer.close(index)
|
|
}
|
|
const toastMsg = (content = '操作完成', 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) {
|
|
const langReplace = window.lang.replace;
|
|
const localLang = window.lang;
|
|
const network = langReplace(localLang.demoModule.network)
|
|
toastMsg(network)
|
|
}
|
|
})
|
|
}
|
|
// 渲染小时榜上一小时前三
|
|
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) => {
|
|
if (item.score > 10000) {
|
|
item.score = (Math.floor(item.score / 1000)) / 10 + 'W'
|
|
}
|
|
const langReplace = window.lang.replace;
|
|
const localLang = window.lang;
|
|
let noAvatar1 = langReplace(localLang.demoModule.noAvatar1)
|
|
let noAvatar2 = langReplace(localLang.demoModule.noAvatar2)
|
|
let noAvatar3 = langReplace(localLang.demoModule.noAvatar3)
|
|
str += `
|
|
<div class="top_three_item">
|
|
<div class="avatar" data-uid=${item.uid}>
|
|
<p></p>
|
|
<img src="${item.avatar ? item.avatar : noAvatar1}" 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>${item.score}</span><br>${langReplace(localLang.demoModule.last_num)}`
|
|
}
|
|
</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.top_wait),
|
|
score: ''
|
|
})
|
|
currHourRank.push(...arr)
|
|
}
|
|
let str = ''
|
|
currHourRank.map((item, index) => {
|
|
const langReplace = window.lang.replace;
|
|
const localLang = window.lang;
|
|
if (item.score > 10000) {
|
|
item.score = (Math.floor(item.score / 1000)) / 10 + 'W'
|
|
}
|
|
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.top1) :
|
|
`${langReplace(localLang.demoModule.last_num)}<br><span>${item.score}</span>`
|
|
}
|
|
</div>
|
|
</li>
|
|
`
|
|
})
|
|
$('ul').html(str)
|
|
}
|
|
// 渲染当前房间榜单信息
|
|
const renderCurrentRoomInfo = () => {
|
|
const langReplace = window.lang.replace;
|
|
const localLang = window.lang;
|
|
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
|
|
}
|
|
}
|
|
})
|
|
$('.mine_index').html(rank ? rank : langReplace(localLang.demoModule.on_list))
|
|
$('.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.top1) :
|
|
(score === '' ? '' :
|
|
`
|
|
${langReplace(localLang.demoModule.last_num)}
|
|
<p>${score}</p>
|
|
`
|
|
)
|
|
}
|
|
`)
|
|
}
|
|
|
|
|
|
$(function () {
|
|
getInfoFromClient()
|
|
fuzzyMatchUpdateQueryStringParameterFun(); // 判断语言
|
|
|
|
|
|
setTimeout(() => {
|
|
// 初始化国际化
|
|
initLocalLang();
|
|
translateFun();
|
|
getHourList()
|
|
|
|
}, 50)
|
|
|
|
$('.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')
|
|
})
|
|
|
|
// 进行文本替换
|
|
function translateFun() {
|
|
const langReplace = window.lang.replace;
|
|
const localLang = window.lang;
|
|
$('title').text(langReplace(localLang.demoModule.hour_title));
|
|
$('#hour_title').html(langReplace(localLang.demoModule.hour_title));
|
|
$('#time_wrap_p1').html(langReplace(localLang.demoModule.time_wrap_p1));
|
|
$('#time_wrap_p2').html(langReplace(localLang.demoModule.time_wrap_p2));
|
|
$('#desc_p1').html(langReplace(localLang.demoModule.desc_p1));
|
|
$('#desc_p2').html(langReplace(localLang.demoModule.desc_p2));
|
|
$('#desc_p3').html(langReplace(localLang.demoModule.desc_p3));
|
|
$('#hour_top_bg').attr('src', langReplace(localLang.demoModule.hour_top_bg))
|
|
} |