369 lines
11 KiB
JavaScript
369 lines
11 KiB
JavaScript
let urlPrefix = getUrlPrefix()
|
||
let browser = checkVersion()
|
||
let env = EnvCheck();
|
||
if (env == 'test') {
|
||
new VConsole();
|
||
}
|
||
|
||
// 封装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'
|
||
})
|
||
}
|
||
|
||
if(!browser.app){
|
||
toastMsg('请在app内打开！');
|
||
}else{
|
||
$('body').removeClass('no-in-app')
|
||
}
|
||
|
||
// 榜单类型，1是钻石榜，2是欧皇榜
|
||
let type = 1
|
||
|
||
let pageSize = 20
|
||
|
||
// 钻石榜单
|
||
let pageD = 1
|
||
let myInfoD = []
|
||
let rankListD = []
|
||
// 欧皇榜单
|
||
let pageN = 1
|
||
let myInfoN = []
|
||
let rankListN = []
|
||
let clickTabCanNetworkN = true
|
||
|
||
let isLockD = true
|
||
let isLockN = true
|
||
let isLock = true
|
||
|
||
let canRequsetNextPageD = true
|
||
let canRequsetNextPageN = true
|
||
|
||
const getListRank = (type, page) => {
|
||
networkRequest({
|
||
type: 'GET',
|
||
url: urlPrefix + '/act/luckySea/listRank',
|
||
data:{
|
||
type,
|
||
page,
|
||
pageSize
|
||
},
|
||
success(res){
|
||
if(res.code === 200){
|
||
if(type === 1){
|
||
// 钻石榜单
|
||
if(res.data.rankList.length === pageSize){
|
||
// 可以请求下一页
|
||
canRequsetNextPageD = true
|
||
}else{
|
||
// 不再请求下一页
|
||
canRequsetNextPageD = false
|
||
}
|
||
rankListD.push(...res.data.rankList)
|
||
// 底部个人信息只渲染一次 x
|
||
// if(pageD === 1){
|
||
// }
|
||
myInfoD = res.data.myRankInfo
|
||
renderMyInfo()
|
||
renderRankList()
|
||
isLockD = true
|
||
}else{
|
||
if(res.data.rankList.length === pageSize){
|
||
// 可以请求下一页
|
||
console.log('gekk');
|
||
canRequsetNextPageN = true
|
||
}else{
|
||
// 不再请求下一页
|
||
canRequsetNextPageN = false
|
||
}
|
||
rankListN.push(...res.data.rankList)
|
||
// 底部个人信息只渲染一次 x
|
||
// if(pageN === 1){
|
||
// }
|
||
myInfoN = res.data.myRankInfo
|
||
renderMyInfo()
|
||
// renderMyInfo()
|
||
renderRankList()
|
||
isLockN = true
|
||
}
|
||
// isLock = true
|
||
}else{
|
||
toastMsg(res.message)
|
||
}
|
||
},
|
||
error(err){
|
||
toastMsg('網絡錯誤')
|
||
}
|
||
})
|
||
}
|
||
|
||
// 渲染底部个人信息
|
||
const renderMyInfo = () => {
|
||
if(type === 1){
|
||
// 钻石榜单
|
||
let erbanNo = myInfoD.erbanNo
|
||
let myIndex = rankListD.findIndex((item, index) => {
|
||
return item.erbanNo === erbanNo
|
||
})
|
||
if(myIndex === -1){
|
||
$('.mine-rank').html('未上榜')
|
||
}else{
|
||
$('.mine-rank').html(myIndex + 1)
|
||
}
|
||
$('.mine-info').find('img').attr('src', myInfoD.avatar)
|
||
$('.mine-info').find('.mine-nick').html(myInfoD.nick)
|
||
// if(myInfoD.num.toString().length >= 5) {
|
||
// myInfoD.num = (myInfoD.num/10000).toFixed(2) + 'w'
|
||
// }
|
||
let tostr = myInfoD.num.toString()
|
||
let num
|
||
if(tostr.length >= 5) {
|
||
num = (myInfoD.num/10000).toFixed(2) + 'w'
|
||
}else{
|
||
num = myInfoD.num
|
||
}
|
||
$('.mine-diamond-num').html(num)
|
||
}else{
|
||
let erbanNo = myInfoN.erbanNo
|
||
let myIndex = rankListN.findIndex((item, index) => {
|
||
return item.erbanNo === erbanNo
|
||
})
|
||
if(myIndex === -1){
|
||
$('.mine-rank').html('未上榜')
|
||
}else{
|
||
$('.mine-rank').html(myIndex + 1)
|
||
}
|
||
$('.mine-info').find('img').attr('src', myInfoN.avatar)
|
||
$('.mine-info').find('.mine-nick').html(myInfoN.nick)
|
||
$('.mine-diamond-num').html('猜對' + myInfoN.num + '次')
|
||
}
|
||
}
|
||
|
||
// 渲染榜单信息
|
||
const renderRankList = () => {
|
||
if(type === 1){
|
||
// 钻石榜单
|
||
// 渲染前3
|
||
let topThreeArr = rankListD.slice(0, 3)
|
||
console.log(topThreeArr);
|
||
if(rankListD.length < 3){
|
||
let len = 3 - rankListD.length
|
||
let arr = new Array(len).fill({
|
||
nick: '虛位以待',
|
||
avatar: './images/default.png',
|
||
num: ''
|
||
})
|
||
topThreeArr.push(...arr)
|
||
}
|
||
let topThreeStr = ''
|
||
topThreeArr.map((item) => {
|
||
let tostr = item.num.toString()
|
||
let num
|
||
if(tostr.length >= 5) {
|
||
num = (item.num/10000).toFixed(2) + 'w'
|
||
}else{
|
||
num = item.num
|
||
}
|
||
|
||
topThreeStr += `
|
||
<div class="info-wrap">
|
||
<div class="avatar">
|
||
<p></p>
|
||
<img src="${item.avatar}" alt="">
|
||
</div>
|
||
<p class="nick">${item.nick.length > 5 ? item.nick.slice(0,5) + '...' : item.nick}</p>
|
||
<p class="diamond-num">${num}</p>
|
||
</div>
|
||
`
|
||
})
|
||
$('.topthree-wrap').html(topThreeStr)
|
||
|
||
|
||
// 渲染非前3
|
||
let othersArr = rankListD.slice(3)
|
||
console.log(othersArr);
|
||
let others = ''
|
||
othersArr.map((item, index) => {
|
||
let tostr = item.num.toString()
|
||
let num
|
||
if(tostr.length >= 5) {
|
||
num = (item.num/10000).toFixed(2) + 'w'
|
||
}else{
|
||
num = item.num
|
||
}
|
||
others += `
|
||
<li>
|
||
<span class="index">${index+4}</span>
|
||
<div class="others-info">
|
||
<img src="${item.avatar}" alt="">
|
||
<span class="others-nick">${item.nick}</span>
|
||
</div>
|
||
<span class="others-diamond-num">${num}</span>
|
||
</li>
|
||
`
|
||
})
|
||
$('.other-rank').html(others)
|
||
}else{
|
||
// 欧皇榜单
|
||
// 渲染前3
|
||
let topThreeArr = rankListN.slice(0, 3)
|
||
console.log(topThreeArr);
|
||
if(rankListN.length < 3){
|
||
let len = 3 - rankListN.length
|
||
let arr = new Array(len).fill({
|
||
nick: '虛位以待',
|
||
avatar: './images/default.png'
|
||
})
|
||
topThreeArr.push(...arr)
|
||
}
|
||
let topThreeStr = ''
|
||
topThreeArr.map((item) => {
|
||
let num = ''
|
||
if(item.erbanNo){
|
||
num = '猜對'+item.num + '次'
|
||
}
|
||
topThreeStr += `
|
||
<div class="info-wrap">
|
||
<div class="avatar">
|
||
<p></p>
|
||
<img src="${item.avatar}" alt="">
|
||
</div>
|
||
<p class="nick">${item.nick.length > 5 ? item.nick.slice(0,5) + '...' : item.nick}</p>
|
||
<p class="diamond-num">${num}</p>
|
||
</div>
|
||
`
|
||
})
|
||
$('.topthree-wrap').html(topThreeStr)
|
||
|
||
// 渲染非前3
|
||
let othersArr = rankListN.slice(3)
|
||
console.log(othersArr);
|
||
let others = ''
|
||
othersArr.map((item, index) => {
|
||
let num
|
||
if(item.erbanNo){
|
||
num = '猜對'+item.num + '次'
|
||
}
|
||
others += `
|
||
<li>
|
||
<span class="index">${index+4}</span>
|
||
<div class="others-info">
|
||
<img src="${item.avatar}" alt="">
|
||
<span class="others-nick">${item.nick}</span>
|
||
</div>
|
||
<span class="others-diamond-num">${num}</span>
|
||
</li>
|
||
`
|
||
})
|
||
$('.other-rank').html(others)
|
||
}
|
||
|
||
}
|
||
|
||
$(function(){
|
||
getInfoFromClient()
|
||
setTimeout(function(){
|
||
getListRank(type, pageD)
|
||
}, 50)
|
||
|
||
$('.other-rank').height($(window).innerHeight() - $('.rank-top').height());
|
||
|
||
$('.tab-wrap').on('click', 'span', function(){
|
||
$(this).addClass('active').siblings().removeClass('active')
|
||
if(type === $(this).index() + 1) return
|
||
type = $(this).index() + 1
|
||
|
||
|
||
$('.other-rank').scrollTop(0)
|
||
if(type === 1){
|
||
renderRankList()
|
||
renderMyInfo()
|
||
// getListRank(type, pageD)
|
||
}else{
|
||
if(clickTabCanNetworkN){
|
||
getListRank(type, pageN)
|
||
}else{
|
||
renderRankList()
|
||
renderMyInfo()
|
||
}
|
||
clickTabCanNetworkN = false
|
||
}
|
||
})
|
||
|
||
// 监听滚动
|
||
$('.other-rank').scroll(function(){
|
||
|
||
let scrollTop = $(this).scrollTop();//这是已经卷进去滚动条的的高度
|
||
let scrollHeight = $('.other-rank')[0].scrollHeight;//这个是other-rank包含滚动条的总高度
|
||
let ulHeight = $(this).innerHeight();//这个是other-rank的高度
|
||
console.log(ulHeight,scrollTop, scrollHeight);
|
||
|
||
// 安卓可以只触发一次(安卓机型太多，不确定是否所有安卓都能触发一次)，ios会触发多次，ios要加锁, pc端触发不了
|
||
|
||
|
||
//这样距离到底还有一段距离就请求，但是会导致重复请求，所以要加锁限制
|
||
if(scrollTop + ulHeight + 100 >= scrollHeight){
|
||
console.log('到底了');
|
||
if(type === 1){
|
||
if(isLockD){
|
||
isLockD = false
|
||
pageD++
|
||
if(pageSize * pageD > 100){
|
||
toastMsg('沒有更多數據啦~')
|
||
}else{
|
||
if(canRequsetNextPageD){
|
||
getListRank(type,pageD);
|
||
}else{
|
||
toastMsg('沒有更多數據啦~')
|
||
}
|
||
}
|
||
}else{
|
||
if(scrollTop + ulHeight >= scrollHeight){
|
||
if(pageSize * pageD > 100){
|
||
toastMsg('沒有更多數據啦~')
|
||
}
|
||
}
|
||
}
|
||
|
||
}else{
|
||
// getListRank(type,++pageN);
|
||
if(isLockN){
|
||
isLockN = false
|
||
pageN++
|
||
if(pageSize * pageN > 100){
|
||
toastMsg('沒有更多數據啦~')
|
||
}else{
|
||
if(canRequsetNextPageN){
|
||
getListRank(type,pageN);
|
||
}else{
|
||
toastMsg('没有更多数据啦')
|
||
}
|
||
}
|
||
}else{
|
||
if(scrollTop + ulHeight >= scrollHeight){
|
||
if(pageSize * pageN > 100){
|
||
toastMsg('沒有更多數據啦~')
|
||
}
|
||
}
|
||
}
|
||
}
|
||
}
|
||
})
|
||
}) |