peko-h5/view/peko/activity/act-kitchen/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'
    })
}
var diamonds = 0;//存儲當前用戶鉆石余額
var gearPosition = 100;//當前檔位;
var roundId;//當前進行輪的roundId;
var timer;//定時器存儲
var countupTimes;//存儲每個階段倒計時剩余時間戳;
var userComeinTime, startTime, drawStageStartTime, showResultStageStartTime, endTime;
var circulate = 0;//等待開獎中動效計時
var circulateTime;//存儲開獎中動效計時器
// 榜單類型，1是鉆石榜，2是歐皇榜
let type = 1
let pageSize = 20
let page = 1
let pageSizeLack = true;
var audioIf = true;
var backgroundMusic = document.getElementById('backgroundMusic');
var lotteryMusic = document.getElementById('lotteryMusic');
var drawBut = document.getElementById("draw");
backgroundMusic.volume = 0.2;
drawBut.volume = 1;
$(function () {
    getInfoFromClient()
    setTimeout(function () {
        getNewestAct();
    }, 100)
    let startPlayPromise = backgroundMusic.play();
    if (startPlayPromise !== undefined) {
        startPlayPromise.catch(error => {
            if (error.name === "NotAllowedError") {
                // 弹窗引导用户与页面做交互，只需要一个简单的按钮即可
                // 记得在按钮上绑定一个带有play()方法的回调函数，以element-plus的组件为例
                audioIf = false;
                $('.muciek').attr('src', './images/jin.png');
                toastMsg('检测到您的设备因权限问题，无法播放音乐，请在右上角打开音乐')
            }
        }).then(() => {
        });
    }
})
// 獲取用戶相關信息
function getUserInfo () {
    networkRequest({
        type: 'GET',
        url: urlPrefix + '/act/luckySea/getUserActInfo',
        success (res) {
            if (res.code === 200) {
                diamonds = res.data.diamonds;
                $('.my .right b').text(`今日獎勵: ${unitProcessing(res.data.todayReward, 100000, 1, 'w')}`);
                $('.my .left b').text(`鉆石余額: ${unitProcessing(res.data.diamonds, 100000, 1, 'w')}`);
            } else {
                toastMsg(res.message)
                return
            }
        },
        error (err) {
            toastMsg('網絡錯誤，請退出重進')
        }
    })
}
// 獲取最新一次的深海奇緣活動信息
function getNewestAct () {
    // showLoading()
    networkRequest({
        type: 'GEt',
        url: urlPrefix + '/act/luckySea/getNewestAct',
        data: { count: 10 },
        success (res) {
            if (res.code === 200) {
                // 處理往輪結果傳參
                roundId = res.data.roundId;
                listLuckySeaActInfo(roundId);
                if ($.isEmptyObject(res.data) || res.data.status === 4) {
                    return showLoading('服務器正在維護中...')
                } else {
                    if (res.timestamp >= res.data.endTime) { //請求的還是上一輪的數據，重新請求
                        console.log('請求的還是上一輪的數據，必須重新請求');
                        showLoading()
                        timer = setTimeout(() => {
                            getNewestAct()
                        }, 600);
                    } else {//活動狀態(1: 選擇階段 2:正在開獎 3:已經開獎)
                        userComeinTime = res.timestamp
                        startTime = res.data.startTime
                        drawStageStartTime = res.data.drawStageStartTime
                        showResultStageStartTime = res.data.showResultStageStartTime
                        endTime = res.data.endTime
                        clearInterval(circulateTime);
                        listItem(roundId);
                        if (startTime <= userComeinTime && userComeinTime < drawStageStartTime) {
                            // 第一階段
                            if (audioIf) {
                                backgroundMusic.play();
                            }
                            console.log("第一階段");
                            countupTimes = Math.floor(((drawStageStartTime - startTime) - (userComeinTime - startTime)) / 1000 + 1);
                            countup(1);
                            $('.masks').hide();
                            $('.result_popup').hide();
                        } else if (drawStageStartTime <= userComeinTime && userComeinTime < showResultStageStartTime) {
                            // 第二階段
                            backgroundMusic.pause();
                            lotteryMusic.currentTime = 0;
                            lotteryMusic.volume = 1;
                            if (audioIf) {
                                lotteryMusic.play();
                            }

                            console.log("第二階段");
                            countupTimes = Math.floor(((showResultStageStartTime - drawStageStartTime) - (userComeinTime - drawStageStartTime)) / 1000 + 1);
                            countup(2);
                            circulateTime = setInterval(function () {
                                circulate = circulate > 8 ? 0 : circulate;
                                circulate++;
                                $('.box .box_in .sBox .sBox1').removeClass('sBox_active');
                                $(`.box .box_in .item${circulate} .sBox1`).addClass('sBox_active');
                                $('.box .box_in .sBox .qp').hide();
                                $('.masks').show();
                            }, 100);
                        } else if (showResultStageStartTime <= userComeinTime && userComeinTime < endTime) {
                            // 第三階段
                            lotteryMusic.pause();
                            if (audioIf) {
                                backgroundMusic.play();
                            }
                            console.log("第三階段");
                            countupTimes = Math.floor(((endTime - showResultStageStartTime) - (userComeinTime - showResultStageStartTime)) / 1000 + 1);
                            countup(3);
                            // 渲染本輪結果
                            var str = '';
                            $('.result_popup .result_popup_in .resultList li').remove();
                            res.data.drawItemList.forEach(res => {
                                str += `
                                    <li>
                                        <img src="${res.drawName == '大象' ? './images/1.png' : res.drawName == '斑馬' ? './images/2.png' : res.drawName == '河馬' ? './images/3.png' : res.drawName == '考拉' ? './images/4.png' : res.drawName == '狐貍' ? './images/5.png' : res.drawName == '豹子' ? './images/6.png' : res.drawName == '老虎' ? './images/7.png' : res.drawName == '獅子' ? './images/8.png' : res.drawImageUrl}" alt="">
                                        <div class="name">${res.drawName}</div>
                                    </li>
                                `
                            })
                            $('.result_popup .result_popup_in .resultList').append(str);
                            // 渲染本輪投入和產出
                            var costPieceNum = 0;
                            res.data.userDrawResult.drawRecords.forEach((res, i) => {
                                costPieceNum = costPieceNum + res.costPieceNum;
                            })
                            $('.result_popup .result_popup_in .income .p1 b').text(costPieceNum);
                            $('.result_popup .result_popup_in .income .p2 b').text(res.data.userDrawResult.prizeDiamonds);
                            // 處理前三
                            var top3 = res.data.rankUserList.slice(0, 3);
                            if (top3.length < 3) {
                                let arr = new Array(3 - top3.length).fill({
                                    avatar: './images/logo.png',
                                    nick: '虛位以待',
                                    prizeDiamonds: ""
                                })
                                top3.push(...arr)
                            }
                            // 渲染前三
                            top3.forEach((res, i) => {
                                $(`.result_popup .result_popup_in .no .no${i + 1} .tx`).attr('src', res.avatar);
                                $(`.result_popup .result_popup_in .no .no${i + 1} .tx`).attr('uid', res.uid);
                                $(`.result_popup .result_popup_in .no .no${i + 1} .name`).text(res.nick);
                                $(`.result_popup .result_popup_in .no .no${i + 1} p b`).text(res.prizeDiamonds);
                            })
                            $('.result_popup').show();
                        }
                    }
                }
            } else {
                toastMsg(res.message)
            }
            hideLoading(layerIndex)
        },
        error (err) {
            hideLoading(layerIndex)
            toastMsg('網絡錯誤，請退出重進')
        }
    })
}
// 倒計時
function countup (status) {
    timer = setInterval(() => {
        countupTimes--
        if (countupTimes <= 0) {
            getNewestAct();
            clearInterval(timer);
            if (status == 1) {
                $('.box .boxTitle').html(`請選擇：<b>${countupTimes}</b> 秒`);
            } else if (status == 2) {
                circulate = 0;
                $('.box .boxTitle').html(`開獎中：<b>${countupTimes}</b> 秒`);
            } else {
                $('.box .boxTitle').html(`下一輪：<b>${countupTimes}</b> 秒`);
                $('.result_popup .result_popup_in .result_popup_inTitle b').html(`${countupTimes}`);
            }
        } else {
            if (status == 1) {
                $('.box .boxTitle').html(`請選擇：<b>${countupTimes}</b> 秒`);
            } else if (status == 2) {
                $('.box .boxTitle').html(`開獎中：<b>${countupTimes}</b> 秒`);
            } else {
                $('.box .boxTitle').html(`下一輪：<b>${countupTimes}</b> 秒`);
                $('.result_popup .result_popup_in .result_popup_inTitle b').html(`${countupTimes}`);
            }
        }

    }, 1000);
}
// 渲染抽獎列錶
function listItem (roundId) {
    // showLoading()
    networkRequest({
        type: 'GEt',
        url: urlPrefix + '/act/luckySea/listItem',
        data: { roundId },
        success (res) {
            if (res.code === 200) {
                res.data.forEach((res, i) => {
                    if (res.costPieceNum > 0) {
                        $(`.box .box_in .item${i + 1} .qp`).show();
                        $(`.box .box_in .item${i + 1} .sBox1 `).addClass('sBox_active');
                    } else {
                        $(`.box .box_in .item${i + 1} .qp`).hide();
                        $(`.box .box_in .item${i + 1} .sBox1 `).removeClass('sBox_active');
                    }
                    $(`.box .box_in .item${i + 1}`).attr('id', res.id);
                    $(`.box .box_in .item${i + 1} .sBox1 img`).attr('src', res.name == '大象' ? './images/1.png' : res.name == '斑馬' ? './images/2.png' : res.name == '河馬' ? './images/3.png' : res.name == '考拉' ? './images/4.png' : res.name == '狐貍' ? './images/5.png' : res.name == '豹子' ? './images/6.png' : res.name == '老虎' ? './images/7.png' : res.name == '獅子' ? './images/8.png' : res.imgUrl);
                    $(`.box .box_in .item${i + 1} .qp p b`).text(res.costPieceNum == 0 ? '' : res.costPieceNum);
                    $(`.box .box_in .item${i + 1} .bei`).text('x' + res.multiple);
                    $(`.box .box_in .item${i + 1} .SboxText`).text(res.name);
                })
                $('.box .box_in .sBox').show();
                getUserInfo();
            } else {
                toastMsg(res.message)
            }
            hideLoading(layerIndex)
        },
        error (err) {
            hideLoading(layerIndex)
            toastMsg('網絡錯誤，請退出重進')
        }
    })
}
// 獲取往輪結果
function listLuckySeaActInfo (roundId) {
    // showLoading()
    networkRequest({
        type: 'GEt',
        url: urlPrefix + '/act/luckySea/listLuckySeaActInfo',
        data: { count: 10, roundId },
        success (res) {
            if (res.code === 200) {
                res.data.forEach((res, i) => {
                    if (res.drawItemList.length > 1) {
                        if (res.drawName == '素食狂歡') {
                            $(`.resultOut .sqp_in${i + 1} `).attr('src', './images/su.png');
                        } else {
                            $(`.resultOut .sqp_in${i + 1} `).attr('src', './images/rou.png');
                        }
                    } else {
                        // $(`.resultOut .sqp_in${i + 1} `).attr('src', res.drawItemList[0].drawImageUrl);
                        $(`.resultOut .sqp_in${i + 1} `).attr('src', res.drawItemList[0].drawName == '大象' ? './images/1.png' : res.drawItemList[0].drawName == '斑馬' ? './images/2.png' : res.drawItemList[0].drawName == '河馬' ? './images/3.png' : res.drawItemList[0].drawName == '考拉' ? './images/4.png' : res.drawItemList[0].drawName == '狐貍' ? './images/5.png' : res.drawItemList[0].drawName == '豹子' ? './images/6.png' : res.drawItemList[0].drawName == '老虎' ? './images/7.png' : res.drawItemList[0].drawName == '獅子' ? './images/8.png' : res.drawItemList[0].drawImageUrl);
                    }
                });
                $('.resultOut .sqp_in').show();
            } else {
                toastMsg(res.message)
            }
            hideLoading(layerIndex)
        },
        error (err) {
            hideLoading(layerIndex)
            toastMsg('網絡錯誤，請退出重進')
        }
    })
}
// 檔位切換
$('.box .tab div').click(function () {
    var i = $(this).index() + 1;
    $(this).addClass('active').siblings().removeClass('active');
    gearPosition = i == 1 ? 100 : i == 2 ? 500 : 5000;
})
// 抽獎接口
function draw (itemId, tais) {
    // showLoading()
    networkRequest({
        type: 'POST',
        url: urlPrefix + '/act/luckySea/draw',
        data: { itemId, num: gearPosition },
        success (res) {
            if (res.code === 200) {
                listItem(roundId);
                getUserInfo();
            } else {
                toastMsg(res.message)
            }
            hideLoading(layerIndex)
        },
        error (err) {
            hideLoading(layerIndex)
            toastMsg('網絡錯誤，請退出重進')
        }
    })
}
// 選擇食材按鈕
$('.box .box_in .sBox').click(function () {
    var id = $(this).attr('id');
    // $(this).children('.qp').show();
    drawBut.pause();
    drawBut.currentTime = 0; // 将当前时间设置为0，可选
    if (audioIf) {
        drawBut.play();
    }

    draw(id, $(this));
})
// 去充值按鈕
$('.my div .add').click(function () {
    if (browser.app) {
        if (browser.android) {
            let channel = pubInfo.deviceInfo.channel;
            console.log(pubInfo.deviceInfo);
            if (channel == "google") {
                window.androidJsObj.openChargePage(6);
            } else {
                window.androidJsObj.openChargePage(6);
                window.location.href = urlPrefix + '/peko/modules/pay/index.html?channelType=4';
            }
        } else if (browser.ios) {
            let channel = pubInfo.deviceInfo.channel;
            if (channel == "appstore") {
                window.webkit.messageHandlers.openChargePage.postMessage(null);
            } else {
                window.webkit.messageHandlers.chargePayClickPage.postMessage(6);
                window.location.href = urlPrefix + '/peko/modules/pay/index.html?channelType=4';
            }
        }
    } else {
        toastMsg('請在app內打開')
    }
})
// 打開規則彈窗
$('.header .rule_icon').click(function () {
    $('.shade-mask').show()
})
// 關閉規則彈窗
$('.shade-mask').click(function () {
    $('.shade-mask').hide()
})
// 打開遊戲記錄
$('.header .record_icon').click(function () {
    window.location.href = './record.html'
})
// 關閉排行榜
$('.shade-mask-rank').click(function () {
    $('.shade-mask-rank').hide()
    return false;
})
// 監聽今日排名按鈕點擊事件
$('.header .rank_icon').click(function () {
    $('.shade-mask-rank .shade-content-rank .other-rank li').remove();
    page = 1;
    getListRank(type, page);
    $('.shade-mask-rank').show()
})
// 監聽今日排名tab
$('.tab-wrap').on('click', 'span', function () {
    page = 1;
    type = $(this).index() + 1;
    $(this).addClass('active').siblings().removeClass('active');
    $('.shade-mask-rank .shade-content-rank .other-rank li').remove();
    getListRank(type, page);
    return false;
})
function getListRank (type, page) {
    networkRequest({
        type: 'GET',
        url: urlPrefix + '/act/luckySea/listRank',
        data: {
            type,
            page,
            pageSize
        },
        success (res) {
            if (res.code === 200) {
                if (page == 1) {
                    // 處理第一名
                    $('.shade-mask-rank .shade-content-rank .rank-top .topthree-wrap .info-wrap').remove();
                    let topOne = res.data.rankList.slice(0, 1)
                    if (topOne.length === 0) {
                        let arr = new Array(len).fill({
                            nick: '虛位以待',
                            avatar: './images/logo.png',
                            num: ''
                        })
                        topThreeArr.push(...arr)
                    }
                    var topOneStr = ''
                    topOne.forEach(item => {
                        topOneStr += `
                    <div class="info-wrap" uid="${item.uid}">
                        <div class="avatar">
                            <p></p>
                            <img src="${item.avatar}" alt="">
                        </div>
                        <p class="diamond-num" style="display:${type == 1 ? 'none' : 'block'}">${type == 1 ? '' : item.num + '次'}</p>
                        <p class="nick">${item.nick.length > 5 ? item.nick.slice(0, 5) + '...' : item.nick}</p>
                    </div>
                    `
                    })
                    $('.shade-mask-rank .shade-content-rank .rank-top .topthree-wrap').append(topOneStr);
                    //處理底部數據
                    let erbanNo = res.data.myRankInfo.erbanNo
                    let myIndex;
                    res.data.rankList.findIndex((item, index) => {
                        if (item.erbanNo == erbanNo) {
                            myIndex = index;
                        };
                    })
                    if (myIndex != undefined) {
                        $('.mine-rank').html(myIndex + 1)
                    } else {
                        $('.mine-rank').html('未上榜')
                    }
                    // $('.shade-mask-rank .shade-content-rank .mine .mine-rank').text(myIndex + 1);
                    $('.shade-mask-rank .shade-content-rank .mine .mine-diamond-num').text(type == 1 ? `${unitProcessing(res.data.myRankInfo.num, 10000, 1, 'w')}` : `猜中 ${res.data.myRankInfo.num} 次`);
                    $('.shade-mask-rank .shade-content-rank .mine .mine-info img').attr('src', res.data.myRankInfo.avatar);
                    $('.shade-mask-rank .shade-content-rank .mine .mine-info .mine-nick').text(res.data.myRankInfo.nick.length > 5 ? res.data.myRankInfo.nick.slice(0, 5) + '...' : res.data.myRankInfo.nick)
                }
                if (res.data.rankList.length > 0) {
                    // 非前第一數據
                    var str = '';
                    var list = res.data.rankList.slice(1);
                    list.forEach((item, i) => {
                        str += `
                        <li uid="${item.uid}">
                            <span class="index">${i + 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">${type == 1 ? `${unitProcessing(item.num, 10000, 1, 'w')}` : `猜中 ${item.num} 次`}</span>
                        </li>
                    `
                    });
                    $('.shade-mask-rank .shade-content-rank .other-rank').append(str);
                    pageSizeLack = true;
                } else {
                    pageSizeLack = false;
                }
            } else {
                pageSizeLack = true;
                toastMsg(res.message)
            }
        },
        error (err) {
            pageSizeLack = true;
            toastMsg('網絡錯誤')
        }
    })
}
// 檢測榜單是否滑到底部
$(".shade-mask-rank .shade-content-rank .other-rank").scroll(function () {
    var divHeight = $(this).height();
    var nScrollHeight = $(this)[0].scrollHeight;
    var nScrollTop = $(this)[0].scrollTop;
    if (nScrollTop + divHeight + 50 >= nScrollHeight) {
        console.log("到達底部了");
        if (pageSizeLack) {
            pageSizeLack = false;
            page++;
            getListRank(type, page)
        }
    }
});
// 取消余額不足彈窗
$('.cancel-btn').click(function () {
    $('.shade-mask-fragmentNum').hide();
})
// 取消余額不足跳轉彈窗按鈕
$('.shade-mask-fragmentNum .shade-content-fragmentNum .fragmentNum-btn-wrap .confirm-btn').click(function () {
    if (browser.app) {
        if (browser.android) {
            let channel = pubInfo.deviceInfo.channel;
            console.log(pubInfo.deviceInfo);
            if (channel == "google") {
                window.androidJsObj.openChargePage(6);
            } else {
                window.androidJsObj.openChargePage(6);
                window.location.href = urlPrefix + '/peko/modules/pay/index.html?channelType=4';
            }
        } else if (browser.ios) {
            let channel = pubInfo.deviceInfo.channel;
            if (channel == "appstore") {
                window.webkit.messageHandlers.openChargePage.postMessage(null);
            } else {
                window.webkit.messageHandlers.chargePayClickPage.postMessage(6);
                window.location.href = urlPrefix + '/peko/modules/pay/index.html?channelType=4';
            }
        }
    } else {
        toastMsg('請在app內打開')
    }
    $('.shade-mask-fragmentNum').hide()
})
$('.muciek').click(function () {
    audioIf = !audioIf;
    if (audioIf) {
        $(this).attr('src', './images/bo.png')
        backgroundMusic.play();
        lotteryMusic.volume = 0;
        lotteryMusic.play();
    } else {
        $(this).attr('src', './images/jin.png')
        backgroundMusic.pause();
        lotteryMusic.pause();
    }
})
//返回页面 重新请求接口
// var hiddenProperty = 'hidden' in document ? 'hidden' :
//     'webkitHidden' in document ? 'webkitHidden' :
//         'mozHidden' in document ? 'mozHidden' : null;

// var visibilityChangeEvent = hiddenProperty.replace(/hidden/i, 'visibilitychange');
// var onVisibilityChange = function () {
//     if (!document[hiddenProperty]) {
//         location.reload()
//     }
// }
// document.addEventListener(visibilityChangeEvent, onVisibilityChange);