peko-h5/view/peko/activity/act-newYear-2022/js/index.js

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


// 封裝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',
        offset: 'b'
    })
}

if (!browser.app) {//false
    toastMsg('請在app內打開！');
} else {
    $('.wrap').removeClass('no-in-app')
}

var fireworks = 1 //1==许愿烟花 2==心愿烟花
var nowTime = new Date().getTime()
var endTime
var fireworksPrice1 = ''
var fireworksPrice2 = ''
var canWish = true //防止动效拉取中重复点击许愿按钮

$(function () {
    getInfoFromClient()
    setTimeout(function () {
        getInit()
        getRank(1)
    }, 100)
})

// 播放svg
function svgaFun(num) {
    player1 = new SVGA.Player('.svga1');
    parser1 = new SVGA.Parser('.svga1');
    parser1.load('./images/giftBg.svga', function (videoItem) {
        player1.loops = 1;
        player1.clearsAfterStop = false;
        player1.setVideoItem(videoItem);
        player1.startAnimation();
        player1.setContentMode('AspectFill')
        player1.onFinished(() => {
            openFireworks(1, num)
            $('.svga1').hide()
        })
    })
}
function svgaFun2(num) {
    player1 = new SVGA.Player('.svga2');
    parser1 = new SVGA.Parser('.svga2');
    parser1.load('./images/giftBg2.svga', function (videoItem) {
        player1.loops = 1;
        player1.clearsAfterStop = false;
        player1.setVideoItem(videoItem);
        player1.startAnimation();
        player1.setContentMode('AspectFill')
        player1.onFinished(() => {
            openFireworks(2, num)
            $('.svga2').hide()
        })
    })
}

// 获取初始化配置
function getInit() {
    showLoading()
    networkRequest({
        type: 'GET',
        url: urlPrefix + '/act/newYearFirework/getConfig',
        success(res) {
            if (res.code === 200) {
                endTime = res.data.endTime;
                fireworksPrice1 = res.data.fireworks[1].price;
                fireworksPrice2 = res.data.fireworks[2].price;
                if (nowTime >= res.data.endTime) {
                    $('.gift-box-wrap .wish').css('filter', 'grayscale(0.8)')
                }

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

// 获奖记录接口
var page
var totalList = 0
function getConvertRecord(page) {
    scrollBool = false;
    showLoading()
    networkRequest({
        type: 'GET',
        url: urlPrefix + '/act/newYearFirework/listRewardRecord',
        data: { page, size: 10 },
        success(res) {
            if (res.code === 200) {
                if (res.data.records.length > 0) {
                    // page++;
                    var str = ``;
                    res.data.records.forEach((res, i) => {
                        str += `
                        <li>
                            <b>${res.giftName}*<i>${res.totalNum}</i></b>
                            <b>${dateFormat(res.lastTimestamp, "yyyy.MM.dd")} <e>${dateFormat(res.lastTimestamp, "hh:mm:ss")}</e></b>
                        </li>
                        `
                        totalList++
                    });
                    console.log('totalList', totalList);
                    $('.recordBox .record_in .box').append(str);
                    scrollBool = true;
                } else {
                    scrollBool = false;
                    $('.recordBox .record_in .tips').show();
                }
                $('.recordBox').show();
                hideLoading(layerIndex)
            } else {
                scrollBool = true;
                bodyScroolFun(false)
                hideLoading(layerIndex)
                toastMsg(res.message)
            }
        },
        error(err) {
            scrollBool = true;
            bodyScroolFun(false)
            hideLoading(layerIndex)
            toastMsg('網絡錯誤，請退出重進')
        }
    })
}

// 烟花开奖接口
function openFireworks(type, num) {
    showLoading()
    networkRequest({
        type: 'POST',
        url: urlPrefix + '/act/newYearFirework/draw',
        data: { type, num },
        success(res) {
            if (res.code === 200) {
                var list = ''
                res.data.forEach(item => {
                    list += `
                    <li>
                        <div class="bg">
                            <img src="${item.giftUrl}" alt="">
                        </div>
                        <span>${item.giftName}</span>
                        <p>*${item.num}</p>
                    </li>
                    `
                })
                if (res.data.length <= 2) {
                    $('.gx .gx_in ul').append(list)
                    $('.gx').show()
                } else {
                    $('.gxs .gxs_in ul').append(list)
                    $('.gxs').show()
                }
                canWish = true
                hideLoading(layerIndex)
            } else if (res.code == 31005) {
                $('.tishiBox').show()
                canWish = true
                hideLoading(layerIndex)
            } else {
                toastMsg(res.message)
                canWish = true
                hideLoading(layerIndex)
            }
        },
        error(err) {
            canWish = true
            hideLoading(layerIndex)
            toastMsg('網絡錯誤，請退出重進')
        }
    })
}

// 榜单接口
//  type(1=许愿榜日榜、2=许愿榜总榜、3=心愿榜日榜、4=心愿榜周榜)
function getRank(type) {
    $('.rank-wrap .list ul li').remove();
    showLoading()
    networkRequest({
        type: 'GET',
        url: urlPrefix + '/act/newYearFirework/getRank',
        data: { type },
        success(res) {
            if (res.code === 200) {
                let value = type == 1 ? '許願值' : type == 2 ? '許願值' : '心願值'
                // 前三
                var top3 = res.data.rankList.slice(0, 3);
                var notTop3 = res.data.rankList.slice(3);
                if (top3.length < 3) {
                    let arr = new Array(3 - top3.length).fill({
                        avatar: './images/logo.png',
                        nick: '虚位以待',
                        score: ""
                    })
                    top3.push(...arr)
                }
                top3.forEach((res, index) => {
                    $(`.rank-wrap .list .no${index + 1} .tx`).attr('src', res.avatar);
                    $(`.rank-wrap .list .no${index + 1} .tx`).attr('uid', res.uid);
                    $(`.rank-wrap .list .no${index + 1} .nick`).html(res.nick.length > 5 ? res.nick.slice(0, 5) + '...' : res.nick);
                    $(`.rank-wrap .list .no${index + 1} .score`).html(`${value + ':'}${res.score > 10000 ? (Math.floor(res.score / 1000) / 10).toFixed(1) + 'w' : res.score}`);
                });
                // 非前三
                let str = ``;
                notTop3.forEach((res, i) => {
                    str += `
                    <li uid="${res.uid}">
                        <div class="num">${res.ranking}</div>
                        <img src="${res.avatar}" class="tx" alt="">
                        <div class="nick">${res.nick.length > 5 ? res.nick.slice(0, 5) + '...' : res.nick}</div>
                        <div class="score">${value}:<b>${unitProcessing(res.score, 10000, 1, 'w')}</b></div>
                    </li>
                    `
                })
                $('.rank-wrap .list ul').append(str);

                if (notTop3.length < 7) {
                    $('.rank-wrap .list ul li').eq(notTop3.length - 1).after(`<li>等你來上榜~</li>`)
                }
                if (notTop3.length == 0) {
                    $('.rank-wrap .list ul').append(`<li>等你來上榜~</li>`)
                }

                // 自己排名
                $('.rank-wrap .myRank .num').html(res.data.meRank.ranking == 0 ? '未上榜' : res.data.meRank.ranking);
                $('.rank-wrap .myRank .tx').attr('src', res.data.meRank.avatar);
                $('.rank-wrap .myRank .nick').text(res.data.meRank.nick.length > 5 ? res.data.meRank.nick.slice(0, 5) + '...' : res.data.meRank.nick)
                $('.rank-wrap .myRank .score').html(`${value + ':'}${res.data.meRank.score > 10000 ? (Math.floor(res.data.meRank.score / 1000) / 10).toFixed(1) + 'w' : res.data.meRank.score}`);
                hideLoading(layerIndex)
            } else {
                toastMsg(res.message)
                hideLoading(layerIndex)
            }
        },
        error(err) {
            hideLoading(layerIndex)
            toastMsg('網絡錯誤，請退出重進')
        }
    })
}

// 埋点接口
//  event（pay_click=点击去充值、pages_click=看别人主页）
function sendLog(event) {
    networkRequest({
        type: 'POST',
        url: urlPrefix + '/act/newYearFirework/log',
        data: { event: event },
        success(res) {
            if (res.code === 200) {
                console.log(res);
            }
        },
        error(err) {
            toastMsg('網絡錯誤，請退出重進')
        }
    })
}

// 点击跳转个人主页
$('.rank-wrap .list .no').click(function () {
    let uid = $(this).find('.tx').attr('uid')
    if (uid) {
        openPerson(uid)
    }
})
$('.rank-wrap .list ul').on('click', 'li', function () {
    let uid = $(this).attr('uid')
    if (uid) {
        openPerson(uid)
    }
})

// 投入+
$('.gift-box-wrap .but .add').click(function () {
    let val = $('.gift-box-wrap .but input').val();
    if (val >= 99) {
        toastMsg('最多可輸入99')
        $('.gift-box-wrap .but input').val(parseInt(99))
    } else {
        $('.gift-box-wrap .but input').val(parseInt(val) + 1)
    }
})
// 投入-
$('.gift-box-wrap .but .cut').click(function () {
    let val = $('.gift-box-wrap .but input').val();
    if (val <= 1) {
        toastMsg('至少投入1')
        $('.gift-box-wrap .but input').val(parseInt(1))
    } else {
        $('.gift-box-wrap .but input').val(parseInt(val) - 1)
    }
})
// 監聽輸入框
$('.gift-box-wrap .but').on('input', 'input', function () {
    if ($(this).val() >= 99) {
        toastMsg('最多可輸入99')
        $('.gift-box-wrap .but input').val(parseInt(99))
    } else if ($(this).val() <= 1) {
        toastMsg('至少投入1')
        $('.gift-box-wrap .but input').val(parseInt(1))
    }
})

// 许愿按钮
$('.gift-box-wrap .wish').click(function () {
    if (nowTime >= endTime) {
        toastMsg('活动已结束~')
    } else {
        let num = $('.gift-box-wrap .but input').val()
        if (num == 0) {
            toastMsg('至少投入1')
            return
        }
        if(canWish){
            if (fireworks == 1) {
                $('.svga1').show()
                svgaFun(num)
                canWish = false
                // setTimeout(() => {
                //     openFireworks(1, num)
                // }, 1000);
                
            } else {
                $('.svga2').show()
                svgaFun2(num)
                canWish = false
                // setTimeout(() => {
                //     openFireworks(2, num)
                // }, 1000);
            }
        }else {
            toastMsg('煙花點燃中，請稍後~')
        }


    }

})

// 礼盒切换
$('.gift-box-wrap .wishTab .item').click(function () {
    let index = $(this).index();
    if (index == 0) {
        $(this).addClass('item1_act').siblings().removeClass('item2_act')
        $(this).html('').siblings().html('心願煙花')
        $('.gift-box-wrap .wish img').attr('src', './images/wish1Btn.png')
        $('.gift-box-wrap .gift-box img').attr('src', './images/giftBg.png')
        $('.gift-box-wrap .award img').attr('src', './images/gift1.png')
        fireworks = 1;

    } else {
        $(this).addClass('item2_act').siblings().removeClass('item1_act')
        $(this).html('').siblings().html('許願煙花')
        $('.gift-box-wrap .wish img').attr('src', './images/wish2Btn.png')
        $('.gift-box-wrap .gift-box img').attr('src', './images/giftBg2.png')
        $('.gift-box-wrap .award img').attr('src', './images/gift2.png')
        fireworks = 2;

    }
})

// 榜单切换
var thisRank = 'rank1'
$('.rank-wrap .rankTab .tab').click(function () {
    let index = $(this).index();
    if (index == 0) {
        $(this).addClass('tab1_act').siblings().removeClass('tab2_act')
        $(this).html('').siblings().html('心願榜')
        $('.rank-wrap .dateTab img').eq(0).attr('src', './images/tab_day_act.png')
        $('.rank-wrap .dateTab img').eq(1).attr('src', './images/tab_total.png')
        getRank(1)
        thisRank = 'rank1'
    } else {
        $(this).addClass('tab2_act').siblings().removeClass('tab1_act')
        $(this).html('').siblings().html('許願榜')
        $('.rank-wrap .dateTab img').eq(0).attr('src', './images/tab_day_act.png')
        $('.rank-wrap .dateTab img').eq(1).attr('src', './images/tab_total.png')
        getRank(3)
        thisRank = 'rank2'
    }
})
// 日榜总榜切换
$('.rank-wrap .dateTab img').click(function () {
    let index = $(this).index();
    if (index == 0) {
        $(this).attr('src', './images/tab_day_act.png')
        $(this).siblings().attr('src', './images/tab_total.png')
        if (thisRank == 'rank1') {
            getRank(1)
        } else {
            getRank(3)
        }
    } else {
        $(this).attr('src', './images/tab_total_act.png')
        $(this).siblings().attr('src', './images/tab_day.png')
        if (thisRank == 'rank1') {
            getRank(2)
        } else {
            getRank(4)
        }
    }
})

// 榜单彈窗切换
$('.rewardBox .rewardTab .tab').click(function () {
    let index = $(this).index();
    if (index == 0) {
        $(this).addClass('tab1_act').siblings().removeClass('tab2_act')
        $(this).html('').siblings().html('心願榜')
        $('.rewardBox .reward_in .box img').attr('src','./images/reward1.png')

    } else {
        $(this).addClass('tab2_act').siblings().removeClass('tab1_act')
        $(this).html('').siblings().html('許願榜')
        $('.rewardBox .reward_in .box img').attr('src','./images/reward2.png')

    }
})

// 规则弹窗
$('.rule').click(function () {
    bodyScroolFun(true)
    $('.ruleBox').show();
})
$('.ruleBox .close').click(function () {
    bodyScroolFun(false)
    $('.ruleBox').hide();
})

// 关闭恭喜获得弹窗
$('.gx .gx_in .sure,.close').click(function () {
    $('.gx .gx_in ul li').remove()
    $('.gx').hide()
})
$('.gxs .gxs_in .sure,.close').click(function () {
    $('.gxs .gxs_in ul li').remove()
    $('.gxs').hide()
})
// 我的獎勵
$('.record').click(function () {
    bodyScroolFun(true)
    page = 0;
    page++
    totalList = 0
    $('.recordBox .record_in .box li').remove();
    $('.recordBox .record_in .tips').hide();
    getConvertRecord(page);
})
$('.recordBox .close').click(function () {
    bodyScroolFun(false)
    $('.recordBox').hide();
})
var scrollBool = true;
// 获奖记录监听滚动
$('.recordBox .record_in .box').scroll(function () {
    let scrollTop = $(this).scrollTop()
    let scrollHeight = $('.recordBox .record_in .box')[0].scrollHeight
    let ulHeight = $(this).innerHeight()
    if (scrollTop + ulHeight + 100 >= scrollHeight) {
        if (scrollBool) {
            page++;
            getConvertRecord(page);
        }
    }
})

// 榜單獎勵
$('.rank-wrap .reward').click(function () {
    bodyScroolFun(true)
    $('.rewardBox').show();
})
$('.rewardBox .close').click(function () {
    bodyScroolFun(false)
    $('.rewardBox').hide();
})

// 溫馨提示
$('.tishiBox .close').click(function () {
    bodyScroolFun(false)
    $('.tishiBox').hide();
})

// 去充值(pay_click=点击去充值埋点)
$('.tishiBox').on('click', '.recharge', function () {
    if (browser.app) {
        if (browser.android) {
            let channel = pubInfo.deviceInfo.channel;
            console.log(pubInfo.deviceInfo);
            if (channel == "google") {
                sendLog('pay_click')
                window.androidJsObj.openChargePage(0);
            } else {
                sendLog('pay_click')
                window.location.href = urlPrefix + '/peko/modules/pay/index.html?channelType=4';
            }
        } else if (browser.ios) {
            sendLog('pay_click')
            window.webkit.messageHandlers.openChargePage.postMessage(null)
        }
    } else {
        toastMsg('請在app內打開')
    }
})

//跳转个人主页 （pages_click=看别人主页埋点）
function openPerson(uid) {
    if (browser.app) {
        if (browser.ios) {
            sendLog('pages_click')
            window.webkit.messageHandlers.openPersonPage.postMessage(uid);
        } else if (browser.android) {
            if (androidJsObj && typeof androidJsObj === 'object') {
                sendLog('pages_click')
                window.androidJsObj.openPersonPage(uid);
            }
        }
    } else {
        toastMsg('請在app內打開')
    }
}

// 控制body是否可以滑动
function bodyScroolFun(bool) {
    if (bool) {
        $('body').css('overflow', 'hidden');
    } else {
        $('body').css('overflow', 'auto');

    }
}