peko-h5/view/peko/activity/act-ocean/js/rank.js

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('沒有更多數據啦~')
                        }
                    }
                }
            }
        }
      })
})