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

let urlPrefix = getUrlPrefix()
let browser = checkVersion()
let env = EnvCheck();
if (env == 'test') {
    new VConsole();
}

let lock = false //防止用户暴力点击加的锁


// 封装layer消息提醒框
let layerIndex
const showLoading = (content = '加载中...') => {
    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 {
    $('.wrap').removeClass('no-in-app')
    if (browser.ios) {window.webkit.messageHandlers.getChannel.postMessage(null);}
}


// 获取用户相关信息
let myFragment
const getUserInfo = (param) => {
    networkRequest({
        type: 'GET',
        url: urlPrefix + '/act/luckySea/getUserActInfo',
        success (res) {
            if (res.code === 200) {
                $('.info-bottom').find('.avatar img').attr('src', res.data.avatar)

                if (res.data.todayReward.toString().length >= 5) {
                    res.data.todayReward = (res.data.todayReward / 10000).toFixed(2) + 'W'
                }
                $('.info-bottom').find('.award span').html(res.data.todayReward + '钻石')
                $('.info-bottom').find('.fragment').html(res.data.nick)
                myFragment = res.data.diamonds
                $('.info-bottom .activeBalance span').text(res.data.diamonds);
            } else {
                return toastMsg(res.message)
            }
        },
        error (err) {
            toastMsg('網絡錯誤，請退出重進')
        }
    })
}
function numberFormat (value) {
    var param = {};
    var k = 10000,
        sizes = ['', 'W', '亿', '万亿'],
        i;
    if (value < k) {
        param.value = value
        param.unit = ''
    } else {
        i = Math.floor(Math.log(value) / Math.log(k));

        param.value = ((value / Math.pow(k, i))).toFixed(2);
        param.unit = sizes[i];
    }
    console.log(param)
    return param;
}
// 获取用户碎片信息
const getUserPieceNum = () => {
    networkRequest({
        type: 'GET',
        url: urlPrefix + '/act/luckySea/getUserActInfo',
        success (res) {
            if (res.code === 200) {
                $('.info-bottom').find('.fragment span').html(res.data.diamonds)
                myFragment = res.data.diamonds
            } else {
                return toastMsg(res.message)
            }
            lock = !lock
        },
        error (err) {
            toastMsg('網絡錯誤，請退出重進')
        }
    })
}

// 获取游戏模式 1普通模式 2礼物模式
let modelType
const getGameMode = () => {
    networkRequest({
        type: 'GET',
        url: urlPrefix + '/act/luckySea/getTimeConfig',
        success (res) {
            if (res.code === 200) {
                modelType = res.data.modelType
                getNewestAct()
            } else {
                return toastMsg(res.message)
            }
        },
        error (err) {
            toastMsg('網絡錯誤，請退出重進')
        }
    })
}

let userComeinTime   //用户进入游戏界面时间，后端返回的timestamp
let startTime, drawStageStartTime, showResultStageStartTime, endTime  //4个时间戳判断落于哪个界面
let timer2
let roundId
let roundIdArr = []
let arrTime = [], arrTime2 = [], arrTime3 = []

const getNewestAct = () => {
    networkRequest({
        type: 'GET',
        url: urlPrefix + '/act/luckySea/getNewestAct',
        success (res) {
            if (res.code === 200) {
                if ($.isEmptyObject(res.data) || res.data.status === 4) {
                    return showLoading('服务器正在维护中...')
                } else {
                    console.log(res.timestamp > res.data.endTime);
                    if (res.timestamp >= res.data.endTime) { //请求的还是上一轮的数据，重新请求
                        console.log('请求的还是上一轮的数据，必须重新请求');
                        showLoading()
                        timer2 = setTimeout(() => {
                            getNewestAct()
                        }, 600);
                    } else {
                        clearTimeout(timer2)
                        hideLoading(layerIndex)

                        roundId = res.data.roundId
                        getListItem(roundId, modelType)

                        // 进行下一轮时，arrTime重新置为空数组，不然在下一轮开始的时候也会执行location.reload()
                        if (roundIdArr.length < 2) {
                            roundIdArr = [roundId, roundId]
                        } else {
                            roundIdArr[0] = roundIdArr[1]
                            roundIdArr[1] = roundId
                            if (roundIdArr[0] != roundIdArr[1]) {
                                arrTime = []
                                arrTime2 = []
                                arrTime3 = []
                            }
                        }


                        userComeinTime = res.timestamp

                        startTime = res.data.startTime
                        drawStageStartTime = res.data.drawStageStartTime
                        showResultStageStartTime = res.data.showResultStageStartTime
                        endTime = res.data.endTime
                        console.log('获取5个时间戳的值-----', 'timestamp:', userComeinTime, 'startTime:', startTime, 'drawStageStartTime:', drawStageStartTime, 'showResultStageStartTime:', showResultStageStartTime, 'endTime:', endTime);
                        showView()
                    }
                }
            } else {
                return toastMsg(res.message)
            }
        },
        error (err) {
            toastMsg('網絡錯誤，請退出重進')
        }
    })
}

//不为3继续请求 为3拿数据 为4弹窗
let status

// 显示哪个界面
let $countDown

//区分倒计时到0时的区别处理的字段，处于第二阶段时isStatus2为真,处于第三阶段时isStatus3为真
let isStatus2
let isStatus3

let isSelectTab = false
let mySelect
let fragmentNum
let reg = /^[0-9]*$/

const showView = () => {
    if (startTime <= userComeinTime && userComeinTime < drawStageStartTime) {
        // 第一阶段
        console.log('进入第一阶段');
        $('.previous-result').show();
        isSelectTab = false
        $('.select-time').show().siblings().hide()
        $countDown = $('.select-time .count-down .count-down-num')

        mySelect = sessionStorage.getItem("mySelect")
        if (reg.test(mySelect)) {
            $('.btn-wrap div').eq(mySelect).addClass('active').siblings().removeClass('active')
            fragmentNum = parseInt($('.btn-wrap div').eq(mySelect).html())
            isSelectTab = true
        } else {
            $('.btn-wrap div').eq(0).addClass('active').siblings().removeClass('active')
            fragmentNum = parseInt($('.btn-wrap div').eq(0).html())
            isSelectTab = true
        }

        $('.award-wrap').html('').show()
        $('.award-info .desc').html('')

        getPreviousResults(6, roundId)
        showCountDown(userComeinTime, startTime, drawStageStartTime)
        getUserInfo()

    } else if (drawStageStartTime <= userComeinTime && userComeinTime < showResultStageStartTime) {
        // 第二阶段
        console.log('进入第二阶段');
        sessionStorage.removeItem("mySelect")

        $('.wait-time').show().siblings().hide()
        $countDown = $('.wait-time .count-down .count-down-num')

        clearTimeout(timer2s) //清除第一阶段的2s气泡定时器
        time2sIndex = 0

        isStatus2 = true //处于第二阶段的标识
        console.log('isStatus2的值------------', isStatus2);

        // $('.btn-wrap').find('div').removeClass('active')

        getPreviousResults(6, roundId)
        showCountDown(userComeinTime, drawStageStartTime, showResultStageStartTime)
        judgeStatus()
        getUserInfo()

        // 播放5s动画
        let player = new SVGA.Player('.wait-time');
        let parser = new SVGA.Parser('.wait-time');
        parser.load('./images/wait.svga', function (videoItem) {
            // player.loops = 2;
            player.clearsAfterStop = false;
            player.setVideoItem(videoItem);
            player.startAnimation();
            $('.previous-result').hide();
            $('.current-tip').hide();
        })

    } else if (showResultStageStartTime <= userComeinTime && userComeinTime < endTime) {
        // 第三阶段
        console.log('进入第三阶段');
        $('.draw-time').show().siblings().hide()
        $countDown = $('.draw-time .count-down .count-down-num')

        isStatus3 = true //处于第三阶段的标识
        console.log('isStatus3的值------------', isStatus3);

        showCountDown(userComeinTime, showResultStageStartTime, endTime)
        judgeStatus()
        getUserInfo()
        // getPreviousResults(6, roundId)
        $('.previous-result').hide();
        $('.current-tip').hide();
        $('.current-tip').hide();
    }
}

// 显示倒计时
let countDownTime
let deltaT
let timer
let delayTime
let interval
const showCountDown = (timestamp, startTime, endTime) => {
    deltaT = ((endTime - startTime) - (timestamp - startTime)) / 1000 //12.361
    if (deltaT >= 1) {
        interval = 1
    } else {
        interval = 0
    }
    console.log('deltaT----------', deltaT);
    countDownTime = Math.floor(deltaT) //12.361 => 12
    delayTime = deltaT - countDownTime  //请求接口的延迟时间

    $countDown.html(countDownTime)

    timer = setInterval(() => {
        if (browser.ios) {
            if (!isStatus3 && !isStatus2) {
                // 处理第一阶段
                if (arrTime.length < 2) {
                    arrTime = [new Date().getTime(), new Date().getTime()]
                } else {
                    arrTime[0] = arrTime[1]
                    arrTime[1] = new Date().getTime()
                    if ((arrTime[1] - arrTime[0]) / 1000 > 1.5) {
                        window.location.reload()
                    }
                }
            } else if (isStatus2) {
                // 第二阶段也要处理
                if (arrTime2.length < 2) {
                    arrTime2 = [new Date().getTime(), new Date().getTime()]
                } else {
                    arrTime2[0] = arrTime2[1]
                    arrTime2[1] = new Date().getTime()
                    if ((arrTime2[1] - arrTime2[0]) / 1000 > 1.5) {
                        window.location.reload()
                    }
                }
            } else if (isStatus3) {
                // 第三阶段也要处理
                if (arrTime3.length < 2) {
                    arrTime3 = [new Date().getTime(), new Date().getTime()]
                } else {
                    arrTime3[0] = arrTime3[1]
                    arrTime3[1] = new Date().getTime()
                    if ((arrTime3[1] - arrTime3[0]) / 1000 > 1.5) {
                        window.location.reload()
                    }
                }
            }
        }
        countDownTime--
        if (countDownTime <= 0) {
            $countDown.html(0)
            clearInterval(timer)

            if (isStatus2) {  // 倒计时为0时，处于第二阶段的处理
                if (status) {
                    // hideLoading(layerIndex)
                    setTimeout(() => {
                        getNewestAct()
                    }, delayTime * 1000)
                    isStatus2 = false
                } else {
                    showLoading()
                    // toastMsg('服务器繁忙，请稍等')
                    console.log('status的值-----------', status);
                    judgeStatus()

                }
            } else if (isStatus3) {   //倒计时为0时，处于第三阶段的处理
                setTimeout(() => {
                    getNewestAct()
                    // getListItem(roundId)
                }, delayTime * 1000)
                // getNewestAct()
                // getListItem()
                isStatus3 = false
            } else {
                setTimeout(() => {
                    getNewestAct()
                }, delayTime * 1000)
            }


            // else {
            //     setTimeout(() => {
            //         getNewestAct()
            //     }, delayTime * 1000)
            // }

        } else {
            $countDown.html(countDownTime)
        }
    }, interval * 1000)
}

//判断status的状态
let timer4
let drawInfo
let img //第三阶段的中奖动物img

const judgeStatus = () => {
    console.log('进入二阶段时轮询查看结果是否已经出了');
    networkRequest({
        type: 'GET',
        url: urlPrefix + '/act/luckySea/getNewestAct',
        success (res) {
            if (res.code === 200) {
                console.log('res.data的值------------', res.data);
                if ($.isEmptyObject(res.data) || res.data.status === 4) {
                    console.log('程序崩了！！！');
                    return showLoading('服务器正在维护中...')
                } else if (res.data.status === 3) {
                    clearTimeout(timer4)
                    status = true
                    if (isStatus2 && countDownTime <= 0) {
                        showCountDown(userComeinTime, drawStageStartTime, showResultStageStartTime)
                    }
                    // hideLoading(layerIndex)
                    console.log('status为3时返回的数据--------------', res.data);
                    drawInfo = res.data
                    img = res.data.drawImageUrl
                    if (isStatus3) {
                        getPreviousResults(6, roundId)
                    }
                    renderDrawInfo()
                    if (res.data.rankUserList.length != 0) {
                        if (res.data.rankUserList[0] != undefined) {
                            $('.top_three .img1').css({ "background": `url(${res.data.rankUserList[0]}) no-repeat`, "background-size": '100% 100%' });
                            $('.top_three .img1').text('');
                        };
                        if (res.data.rankUserList[1] != undefined) {
                            $('.top_three .img2').css({ "background": `url(${res.data.rankUserList[1]}) no-repeat`, "background-size": '100% 100%' })
                            $('.top_three .img2').text('');
                        };
                        if (res.data.rankUserList[2] != undefined) {
                            $('.top_three .img3').css({ "background": `url(${res.data.rankUserList[2]}) no-repeat`, "background-size": '100% 100%' })
                            $('.top_three .img3').text('');
                        };
                        $('.top_three').show();
                    } else {
                        $('.top_three').hide();
                    }
                } else {

                    timer4 = setTimeout(() => {
                        judgeStatus()
                    }, 1000)

                }
            } else {
                toastMsg(res.message)
            }
        },
        error (err) {
            toastMsg('網絡錯誤，請退出重進')
        }
    })
}

// 渲染开奖信息
let topThreeArr = []
const renderDrawInfo = () => {
    $('.draw-time .current-tip .current-result').html(drawInfo.drawName)
    $('.draw-pic img').attr('src', drawInfo.drawImageUrl)

    // if (isStatus3) {
    //     if (drawInfo.userDrawResult.drawStatus === 1) {
    //         $('.award-info .desc').html('恭喜你，猜中了！')
    //         if (modelType === 1) {
    //             $('.award-wrap').html(`获得 <span class="award-total">${drawInfo.userDrawResult.prizeDiamonds} </span>鉆石`)
    //         } else {
    //             $('.award-wrap').html(`获得 <span class="award-name">${drawInfo.userDrawResult.prizeName} </span>(<span class="awrad-price">${drawInfo.userDrawResult.prizePrice}</span>钻)*<span class="award-num">${drawInfo.userDrawResult.prizeCount}</span>个 累计<span class="award-total">${drawInfo.userDrawResult.prizeDiamonds}</span>鉆石`)
    //         }
    //     } else if (drawInfo.userDrawResult.drawStatus === 2) {
    //         $('.award-info .desc').html('很遗憾，本轮未猜中')
    //         $('.award-wrap').hide()
    //     } else if (drawInfo.userDrawResult.drawStatus === 3) {
    //         $('.award-info .desc').html('本轮未参与')
    //         $('.award-wrap').hide()
    //     }
    // }

    // 渲染前三名
    topThreeArr = drawInfo.rankUserList
    let str = ''
    if (topThreeArr.length === 0) {
        $('.topthree-desc').html('本輪無人猜中')
        $('.top-three-list p img').attr('src', './images/default-hui.png')
    } else {
        $('.topthree-desc').html('')
        topThreeArr.map((item, index) => {
            $('.top-three-list p img').eq(index).attr('src', item)
        })
        if (topThreeArr.length === 1) {
            $('.top-three-list p img').eq(1).attr('src', './images/default-hui.png')
            $('.top-three-list p img').eq(2).attr('src', './images/default-hui.png')
        } else if (topThreeArr.length === 2) {
            $('.top-three-list p img').eq(2).attr('src', './images/default-hui.png')
        }
    }
}

// 获取每一轮抽奖的相关配置
let listItem = []
const getListItem = (roundId, type) => {
    networkRequest({
        type: 'GET',
        url: urlPrefix + '/act/luckySea/listItem',
        data: {
            roundId,
            type
        },
        success (res) {
            if (res.code === 200) {
                listItem = res.data
                renderListItem()
            } else {
                toastMsg(res.message)
            }
        },
        error (err) {
            toastMsg('網絡錯誤，請退出重進')
        }
    })
}

// 2s气泡定时器
let timer2s
let time2sIndex = 0
const setTimeout2s = () => {
    clearTimeout(timer2s)
    $('.bubble-2s').eq(time2sIndex).fadeIn(50)
    timer2s = setTimeout(function () {
        $('.bubble-2s').eq(time2sIndex).fadeOut(50)
        if (time2sIndex >= listItem.length - 1) {
            time2sIndex = 0
        } else {
            time2sIndex++;
        }
        setTimeout2s()
    }, 2000)
}

// 渲染每一轮抽奖的选项
const renderListItem = () => {
    let str = ''
    if (modelType === 1) {
        listItem.map((item) => {
            str += `
                <li data-total-num={"number":"${item.costPieceNum}","id":"${item.id}"}>
                    <img src="${item.imgUrl}" alt="">
                    <div class="multiple">x${item.multiple}</div>
                    <div class="name general">${item.name}</div>
                    <div class="bubble-2s">
                        <p class="first-line">收獲</p>
                        <p class="second-line">  <span>${item.multiple}</span> 倍獎勵</p>
                    </div>
                    <div class="select-num">${item.costPieceNum === 0 ? '' : '+ ' + item.costPieceNum}</div>
                </li>
            `
        })
    } else {
        listItem.map((item) => {
            str += `
                <li data-total-num={"number":"${item.costPieceNum}","id":"${item.id}"}>
                    <img src="${item.imgUrl}" alt="">
                    <div class="multiple">x${item.multiple}</div>
                    <div class="name">${item.name} <p class="gift-price">${item.price ? `(${item.price}鉆石)` : ''}</p></div>
                    <div class="bubble-2s">
                        <p class="first-line">收獲</p>
                        <p class="second-line">  <span>${item.multiple}</span> 倍獎勵</p>
                    </div>
                    <div class="select-num">${item.costPieceNum === 0 ? '' : '+ ' + item.costPieceNum}</div>
                </li>
            `
        })
    }
    $('.game-area').find('ul').html(str)
    setTimeout2s()
}

// 获取往轮游戏结果
let previousResults = []
const getPreviousResults = (count, roundId) => {
    networkRequest({
        type: 'GET',
        url: urlPrefix + '/act/luckySea/listLuckySeaActInfo',
        data: {
            count,
            roundId
        },
        success (res) {
            if (res.code === 200) {
                previousResults = res.data
                renderPreviousResults()
            }
        },
        error (err) {
            toastMsg('網絡錯誤，請退出重進')
        }
    })
}

// 渲染往轮游戏结果
const renderPreviousResults = () => {

    let str = ''
    if (previousResults.length < 5) {
        let len = 5 - previousResults.length
        let arr = new Array(len).fill(1)
        previousResults.push(...arr)
    }
    if (isStatus3) {
        if (img) {
            previousResults.pop()
            previousResults.unshift({
                drawImageUrl: img
            })
            console.log(previousResults);
        }

    }
    previousResults.map((item) => {
        str += `
            <p><img src="${item.drawImageUrl}" alt=""></p>
        `
    })
    $('.result-list').html(str)
}

// 发送用户抽奖数量
const sendUserDrawInfo = (itemId, num) => {
    networkRequest({
        type: 'POST',
        url: urlPrefix + '/act/luckySea/draw',
        contentType: 'application/json',
        data: `[ {
            "itemId":${itemId},
            "num":${num}
          }]`,
        success (res) {
            if (res.code === 200) {
                
            } else {
                toastMsg(res.message)
            }
        },
        error (err) {
            toastMsg('網絡錯誤，請退出重進')
        }
    })
}


/******************************************** 今日排名相关  ********************************************/

// 榜单类型，1是鉆石榜，2是欧皇榜
let type = 1

let pageSize = 10

// 鉆石榜单
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)
                    myInfoD = res.data.myRankInfo
                    renderMyInfo()
                    renderRankList()
                    isLockD = true
                } else {
                    if (res.data.rankList.length === pageSize) {
                        // 可以请求下一页
                        canRequsetNextPageN = true
                    } else {
                        // 不再请求下一页
                        canRequsetNextPageN = false
                    }
                    rankListN.push(...res.data.rankList)
                    myInfoN = res.data.myRankInfo
                    renderMyInfo()
                    renderRankList()
                    isLockN = 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)
        if (myInfoD.nick) {
            myInfoD.nick.length > 5 ? myInfoD.nick.slice(0, 5) + '...' : myInfoD.nick
        } else {
            myInfoD.nick = '未知'
        }
        $('.mine-info').find('.mine-nick').html(myInfoD.nick)
        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)
        if (myInfoN.nick) {
            myInfoN.nick.length > 5 ? myInfoN.nick.slice(0, 5) + '...' : myInfoN.nick
        } else {
            myInfoN.nick = '未知'
        }
        $('.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, 1)
        if (rankListD.length === 0) {
            let len = 1 - 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="diamond-num">${num}</p>
                    <p class="nick">${item.nick.length > 5 ? item.nick.slice(0, 5) + '...' : item.nick}</p>
                </div>
            `
        })
        $('.topthree-wrap').html(topThreeStr)


        // 渲染非前3
        let othersArr = rankListD.slice(1)
        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 + 2}</span>
                    <div class="others-info">
                        <img src="${item.avatar}" alt="">
                        <span class="others-nick">${item.nick.length > 5 ? item.nick.slice(0, 5) + '...' : item.nick}</span>
                    </div>
                    <span class="others-diamond-num">距離上一名${num}</span>
                </li>
            `
        })
        $('.other-rank').html(others)
    } else {
        // 欧皇榜单
        // 渲染前3
        let topThreeArr = rankListN.slice(0, 1)
        if (rankListN.length === 0) {
            let len = 1 - 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="diamond-num" style="display:block">${num}</p>
                    <p class="nick">${item.nick.length > 5 ? item.nick.slice(0, 5) + '...' : item.nick}</p>
                </div>
            `
        })
        $('.topthree-wrap').html(topThreeStr)

        // 渲染非前3
        let othersArr = rankListN.slice(1)
        console.log(othersArr);
        let others = ''
        othersArr.map((item, index) => {
            let num
            if (item.erbanNo) {
                num = '' + item.num + '次'
            }
            others += `
                <li>
                    <span class="index">${index + 2}</span>
                    <div class="others-info">
                        <img src="${item.avatar}" alt="">
                        <span class="others-nick">${item.nick.length > 5 ? item.nick.slice(0, 5) + '...' : item.nick}</span>
                    </div>
                    <span class="others-diamond-num">${num}</span>
                </li>
            `
        })
        $('.other-rank').html(others)
    }

}


$(function () {
    getInfoFromClient()
    setTimeout(function () {
        // getUserInfo()
        getGameMode()
        // getNewestAct()
        // getListItem()
    }, 50)

    // 监听按钮点击事件
    // let fragmentNum
    // let isSelectTab = false
    $('.btn-wrap').on('click', 'div', function () {
        $(this).addClass('active').siblings().removeClass('active')
        fragmentNum = parseInt($(this).html())
        console.log(fragmentNum)
        isSelectTab = true
        sessionStorage.setItem("mySelect", $(this).index())
    })
    // 监听规则按钮点击事件
    $('.rule').on('click', function () {
        $('.shade-mask').show()
    })
    // 关闭规则弹窗
    $('.shade-mask').on('click', function () {
        $(this).hide()
    })
    $('.shade-content-close').on('click', function () {
        $('.shade-mask').hide()
    })
    $('.shade-content').on('click', function (e) {
        e.stopPropagation()
    })
    // 跳转特权商城
    $('.mall').on('click', function () {
        window.location.href = './mall.html'
    })
    $('.add').on('click', function () {
        window.location.href = './mall.html'
    })
    // 监听游戏记录按钮点击事件
    $('.record').on('click', function () {
        window.location.href = './record.html'
    })

    // 监听今日排名按钮点击事件
    $('.rank').on('click', function () {
        // getListRank(type, pageD)
        // $('.shade-mask-rank').show()
        window.location.href = './rank.html'
    })
    // 监听今日排名tab
    $('.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()
        } else {
            if (clickTabCanNetworkN) {
                getListRank(type, pageN)
            } else {
                renderRankList()
                renderMyInfo()
            }
            clickTabCanNetworkN = false
        }
    })
    // 关闭排名弹窗
    $('.shade-mask-rank').on('click', function () {
        $(this).hide()
        type = 1
        pageD = 1
        pageN = 1
        myInfoD = []
        myInfoN = []
        rankListD = []
        rankListN = []
        clickTabCanNetworkN = true
        $('.diamond-rank').addClass('active').siblings('.num-rank').removeClass('active')
        $('.other-rank').html('')
    })
    $('.shade-content-rank').on('click', function (e) {
        e.stopPropagation()
    })
    // 监听滚动
    $('.other-rank').on('scroll', function () {
        let scrollTop = $(this).scrollTop();//这是已经卷进去滚动条的的高度
        let scrollHeight = $('.other-rank')[0].scrollHeight;//这个是other-rank包含滚动条的总高度
        let ulHeight = $(this).innerHeight();//这个是other-rank的高度

        //这样距离到底还有一段距离就请求，但是会导致重复请求，所以要加锁限制
        if (scrollTop + ulHeight + 100 >= scrollHeight) {
            if (type === 1) {
                if (isLockD) {
                    isLockD = false
                    pageD++
                    if (pageSize * pageD > 30) {
                        toastMsg('没有更多数据啦~')
                    } else {
                        if (canRequsetNextPageD) {
                            getListRank(type, pageD);
                        } else {
                            toastMsg('没有更多数据啦~')
                        }
                    }
                } else {
                    if (scrollTop + ulHeight >= scrollHeight) {
                        if (pageSize * pageD > 30) {
                            toastMsg('没有更多数据啦~')
                        }
                    }
                }

            } else {
                if (isLockN) {
                    isLockN = false
                    pageN++
                    if (pageSize * pageN > 30) {
                        toastMsg('没有更多数据啦~')
                    } else {
                        if (canRequsetNextPageN) {
                            getListRank(type, pageN);
                        } else {
                            toastMsg('没有更多数据啦')
                        }
                    }
                } else {
                    if (scrollTop + ulHeight >= scrollHeight) {
                        if (pageSize * pageN > 30) {
                            toastMsg('没有更多数据啦~')
                        }
                    }
                }
            }
        }
    })

    // 播放3s动画
    let player1 = new SVGA.Player('.draw-time');
    let parser1 = new SVGA.Parser('.draw-time');
    parser1.load('./images/draw.svga', function (videoItem) {
        // player.loops = 2;
        player1.clearsAfterStop = false;
        player1.setVideoItem(videoItem);
        player1.startAnimation();
    })

    // 关闭碎片不足提示弹窗
    $('.cancel-btn').on('click', function () {
        $('.shade-mask-fragmentNum').hide()
    })
    $('.shade-mask-fragmentNum').on('click', function () {
        $(this).hide()
    })
    $('.shade-content-fragmentNum').on('click', function (e) {
        e.stopPropagation()
    })

    $('.confirm-btn').on('click', function () {
        if (browser.ios) {//ios
            console.log(pubInfo.channel)
            if (pubInfo.channel == 'appstore') {
                window.webkit.messageHandlers.openChargePage.postMessage(null);
            } else {
                window.location.href = '../../modules/payApp/index.html';
            }
        } else if (browser.android) {//android
            let getChannel = window.androidJsObj.getChannel();
            if (getChannel == 'google') {
                var jsonObj = '{"routerType":"5"}';
                window.androidJsObj.jumpAppointPage(jsonObj)
            } else {
                window.location.href = '../../modules/payApp/index.html';
            }
        }
        $('.shade-mask-fragmentNum').hide()
    })
    $('.activeBalance b').click(function () {
        if (browser.ios) {//ios
            console.log(pubInfo.channel)
            if (pubInfo.channel == 'appstore') {
                window.webkit.messageHandlers.openChargePage.postMessage(null);
            } else {
                window.location.href = '../../modules/payApp/index.html';
            }
        } else if (browser.android) {//android
            let getChannel = window.androidJsObj.getChannel();
            if (getChannel == 'google') {
                var jsonObj = '{"routerType":"5"}';
                window.androidJsObj.jumpAppointPage(jsonObj)
            } else {
                window.location.href = '../../modules/payApp/index.html';
            }
        }
    })
    // 点击海鲜动物的动画以及发送请求
    $('.select-time ul').on('click', 'li', function () {
        if (!isSelectTab) {
            return toastMsg('请先选择碎片数量')
        }
        if (myFragment < fragmentNum) {
            $('.shade-mask-fragmentNum').show()
            return
        }
        if (!lock) {
            lock = !lock
            console.log($(this).data('total-num'));
            console.log($(this).data('total-num').number);
            console.log(fragmentNum);
            $(this).data('total-num').number = parseInt($(this).data('total-num').number) + fragmentNum
            $(this)
                .stop(true, true)
                .animate({ scale: 1.1 }, 200)
                .animate({ scale: 1 }, 200, function () {
                    if (lock) {
                        $(this).find('.select-num').html('+' + $(this).data('total-num').number).hide().fadeIn(200)
                    }
                    setTimeout(() => {
                        // getUserInfo()
                        getUserPieceNum()
                        // getListItem(roundId)
                    },100)
                })
            sendUserDrawInfo($(this).data('total-num').id, fragmentNum)
        }
    })

    // ios去到后台或者锁屏后再回来倒计时不准确
    let leftTime, deltaTime, startTime, endTime
    document.addEventListener('visibilitychange', function () {
        if (document.visibilityState == 'hidden') {
            leftTime = countDownTime
            startTime = new Date().getTime()
        } else if (document.visibilityState == 'visible') {
            endTime = new Date().getTime()
            deltaTime = Math.floor((endTime - startTime) / 1000)  //出去了多久
            if (deltaTime > 300) {
                window.location.reload()
            }
            countDownTime = leftTime - deltaTime
            if (countDownTime < 0) {
                countDownTime = 0
            }
            $countDown.html(countDownTime)
        }
    })
})