peko-h5/view/peko/modules/luckyTarot/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 cardArr = [];//記錄選擇卡片
var gearPosition = []//檔位價值的鉆石
var gearPositionActive = 0;//當前選澤的檔位
var prodId = [];//檔位類型
var prodIdActive;
var lock = true;//鎖
var page = 1;//頁碼
var scrollLock = true;
var arrLast = []//記錄上次開獎的數組
// 初始化函數
$(function () {
    setTimeout(function () {
        getInfoFromClient()
        setTimeout(function () {
            // 頁面全屏
            if (browser.app) {
                if (browser.android) {
                    window.androidJsObj.initShowNav(false)
                } else {
                    window.webkit.messageHandlers.initShowNav.postMessage(0)
                }
            };
            // 頂部返回事件
            $('.back').click(() => {
                if (browser.android) {
                    window.androidJsObj.closeWebView()
                } else {
                    window.webkit.messageHandlers.closeWebView.postMessage(null)
                }
            })
            getAdvertising();
            productList();
            getUserInfo();
            svgaFun();
            svgaFun2();
        }, 100)
    })
})
// 播放svg
function svgaFun () {
    player1 = new SVGA.Player('.star_in');
    parser1 = new SVGA.Parser('.star_in');
    parser1.load('./images/star.svga', function (videoItem) {
        // player1.loops= 1
        // player1.clearsAfterStop = false;
        // player1.setVideoItem(videoItem);
        // player1.startAnimation();
        // player1.loops = 1;
        player1.clearsAfterStop = false;
        player1.setVideoItem(videoItem);
        player1.startAnimation();
        player1.setContentMode('AspectFill')
        player1.onFinished(() => {
            // $('.svga').hide()
        })
    })
}
// 播放svg
function svgaFun2 () {
    player2 = new SVGA.Player('.roulette_in');
    parser2 = new SVGA.Parser('.roulette_in');
    parser2.load('./images/roulette.svga', function (videoItem) {
        // player1.loops= 1
        // player1.clearsAfterStop = false;
        // player1.setVideoItem(videoItem);
        // player1.startAnimation();
        // player1.loops = 1;
        player2.clearsAfterStop = false;
        player2.setVideoItem(videoItem);
        player2.startAnimation();
        player2.setContentMode('AspectFill')
        player2.onFinished(() => {
            // $('.svga').hide()
        })
    })
}
// 公告接口 
function getAdvertising () {
    showLoading()
    networkRequest({
        type: 'GET',
        url: urlPrefix + '/seekElfin/draw/list',
        data: {
            count: 30
        },
        success (res) {
            if (res.code === 200) {
                let result = ''
                res.data.forEach(res => {
                    result += `
                      <li>恭喜 <b>${res.nick.length > 5 ? res.nick.slice(0, 5) + '...' : res.nick}</b>翻開 <b>幸運塔羅</b> 獲得 <i>${res.receiveGoldNum}鉆石</i></li>
                    `
                })
                $('.ul1').append(result)
                var num = $(".ul1").find("li").length;
                if (num > 1) {
                    setInterval(function () {
                        $('.ul1').animate({
                            marginTop: "-0.4rem"
                        }, 200, function () {
                            $(this).css({
                                marginTop: "0"
                            }).find("li:first").appendTo(this);
                        });
                    }, 2000);
                }
            } else {
                toastMsg(res.message)
            }
            hideLoading(layerIndex)
        },
        error (err) {
            hideLoading(layerIndex)
            toastMsg('網絡錯誤，請退出重進')
        }
    })
}
// 檔位接口 
function productList () {
    showLoading()
    networkRequest({
        type: 'GET',
        url: urlPrefix + '/seekElfin/product/list',
        data: {
            uid: pubInfo.uid
        },
        success (res) {
            if (res.code === 200) {
                gearPositionActive = res.data[0].prodNeedPrice;
                prodIdActive = res.data[0].prodId;
                res.data.forEach((res, i) => {
                    gearPosition.push(res.prodNeedPrice);
                    prodId.push(res.prodId);
                    $(`.tarotBox .tabBox .tabBox${i + 1} b`).text(`${res.prodNeedPrice}鉆/張`)
                })
            } else {
                toastMsg(res.message)
            }
            hideLoading(layerIndex)
        },
        error (err) {
            hideLoading(layerIndex)
            toastMsg('網絡錯誤，請退出重進')
        }
    })
}
// 獲取用戶信息
const getUserInfo = () => {
    showLoading()
    networkRequest({
        type: 'POST',
        url: urlPrefix + '/seekElfin/user/info',
        data: {
            uid: pubInfo.uid
        },
        success: function (res) {
            if (res.code == 200) {
                $('.tarotBox .diamond b').text(res.data.diamonds);
            } else {
                toastMsg(res.message);
            }
            hideLoading(layerIndex)
        },
        error: function (res) {
            hideLoading(layerIndex)
            console.log(res, '報錯啦');
            toastMsg('網絡錯誤，請退出重進')
        }
    })
}
// 抽獎記錄
const recordPage = () => {
    showLoading()
    networkRequest({
        type: 'GET',
        url: urlPrefix + '/seekElfin/record/page',
        data: {
            uid: pubInfo.uid,
            current: page,
            size: 10,
        },
        success: function (res) {
            if (res.code == 200) {
                var str = ''
                res.data.records.forEach((res, i) => {
                    str += `
                        <li calss="${i % 2 == 0 ? 'active' : ''}">
                            <div>${res.prodName}</div>
                            <div>${JSON.parse(res.selectdNo).length}張</div>
                            <div class="box ${res.win ? 'box_acitve' : ''}">${res.win ? `中獎<br>${res.receiveGoldNum}鉆石` : '未中獎'}</div>
                            <div class="time">${dateFormat(res.createTime, 'yyyy.MM.dd')}<br>${dateFormat(res.createTime, 'hh:mm:ss')}</div>
                        </li>
                    `
                });
                $('.winningRecord .winningRecord_in ul').append(str);
                if (res.data.records.length == 0) {
                    scrollLock = false;
                } else {
                    scrollLock = true;
                }
            } else {
                scrollLock = true;
                toastMsg(res.message);
            }
            hideLoading(layerIndex)
        },
        error: function (res) {
            scrollLock = true;
            hideLoading(layerIndex)
            toastMsg('網絡錯誤，請退出重進')
        }
    })
}
// 抽獎接口
const draw = () => {
    lock = false;
    showLoading()
    networkRequest({
        type: 'POST',
        url: urlPrefix + '/seekElfin/draw',
        data: JSON.stringify({
            prodId: prodIdActive,
            selectedNo: cardArr,
            roomUid: pubInfo.roomUid,
            // roomUid: pubInfo.uid,
        }),
        headers: { 'Content-Type': 'application/json;charset=utf8' },
        success: function (res) {
            if (res.code == 200) {
                kineticEffect(cardArr, res.data.win, res);
                getUserInfo();
            }
            else if (res.code == 2103) {
                lock = true;
                $('.shade-mask-fragmentNum').show();
                bodyScroolFun(true);
                // toastMsg(res.message);
            } else {
                lock = true;
                toastMsg(res.message);
            }
            hideLoading(layerIndex)
        },
        error: function (res) {
            lock = true;
            hideLoading(layerIndex)
            console.log(res, '報錯啦');
            toastMsg('網絡錯誤，請退出重進')
        }
    })
}
// 恢復初始樣式函數
function initialStytle (bool) {
    if (bool) {
        // arrLast = [0, 1, 2];
        arrLast.forEach((res, i) => {
            $(`.tarotBox .cardBox${res}`).css({
                transition: ' all 1s',
                transform: 'rotateY(-360deg)',
            })
        })
        setTimeout(function () {
            $('.tarotBox .cardBox').css({
                transition: ' all 0s',
                transform: 'rotateY(0deg)',
            });
        }, 1000)
    }
    lock = true;
    // 清空已選卡片
    cardArr = [];
    // 恢復卡片默認樣式
    $('.tarotBox .cardBox').removeClass('card1_active');
    $('.tarotBox .cardBox').removeClass('card2_active');
    $('.tarotBox .cardBox').removeClass('card3_active');

    // 恢復默認選擇文案
    $('.tarotBox .cardBoxText').html(`
        <p>共選擇 <b>${cardArr.length}</b> 張</p>
        <p>翻到鉆石卡的概率為<b>${cardArr.length * 10}%</b></p>
    `);
    // 清除中獎&未中獎樣式
    $('.tarotBox .cardBox').removeClass('card_not');
    $('.tarotBox .cardBox').removeClass('card_winning1');
    $('.tarotBox .cardBox').removeClass('card_winning2');
    $('.tarotBox .cardBox').removeClass('card_winning3');
    $('.tarotBox .cardBoxText_no').hide();
    $('.tarotBox .cardBoxText_gx').hide()
    $('.tarotBox .cardBoxText').show();
    $('.tarotBox .cardBoxText_gift').show();
    $('.cardBoxBut').show();
    $('.butAgain').hide();
}
// 處理動效
function kineticEffect (arr, bool, data) {
    arrLast = arr;
    arr.forEach((res, i) => {
        $(`.tarotBox .cardBox${res}`).css({
            transition: ' all 1s',
            transform: 'rotateY(360deg)',
        })
    })

    setTimeout(function () {
        $('.tarotBox .cardBox').css({
            transition: ' all 0s',
            transform: 'rotateY(0deg)',
        });
        arr.forEach((res, i) => {
            $(`.tarotBox .cardBox${res}`).addClass('card_not');
        })
        if (bool) {
            //中獎
            $(`.tarotBox .cardBox${data.data.drawNum}`).addClass(prodIdActive == 1 ? 'card_winning1' : prodIdActive == 2 ? 'card_winning2' : 'card_winning3')
            $('.tarotBox .cardBoxText').hide();
            $('.tarotBox .cardBoxText_gift').hide();
            $('.cardBoxText_gx').html(`
                <p>翻到鉆石卡!</p>
                <p>獲得 <b>${data.data.receiveGoldNum}</b> 鉆石</p>
            `)
            $('.cardBoxText_gx').show();
        } else {
            //未中獎
            $('.tarotBox .cardBoxText').hide();
            $('.tarotBox .cardBoxText_gift').hide();
            $('.tarotBox .cardBoxText_no').show();
        }
        $('.cardBoxBut').hide();
        $('.tarotBox .butAgain').attr('src', prodIdActive == 1 ? './images/butAgain1.png' : prodIdActive == 2 ? './images/butAgain2.png' : './images/butAgain3.png')
        $('.butAgain').show();
    }, 1000)
}
// 檔位tab切換按鈕
$('.tarotBox .tabBox div').click(function () {
    var i = $(this).index() + 1;
    // 切換tab樣式
    $('.tarotBox .tabBox div').removeClass('active1').removeClass('active2').removeClass('active3');
    $(this).addClass(`active${i}`);
    // 切換卡牌樣式
    $('.tarotBox .cardBox').hide();
    $(`.tarotBox .card${i}`).show();
    // 切換按鈕樣式
    $('.tarotBox .cardBoxBut').attr('src', `./images/but${i}.png`)
    // if (i == 1) {
    gearPositionActive = gearPosition[i - 1];
    prodIdActive = prodId[i - 1];
    $('.tarotBox .gradeText b').text(gearPositionActive * 10);
    // } else if (i == 2) {
    //     gearPosition = 1000;
    //     $('.tarotBox .gradeText b').text(gearPosition * 10);
    // } else {
    //     gearPosition = 10000;
    //     $('.tarotBox .gradeText b').text(gearPosition * 10);
    // }
    // 清空默認樣式
    initialStytle();
})
// 選擇初級卡片按鈕
$('.tarotBox .card1').click(function () {
    var i = $(this).index();
    tarotBox($(this), i, 1);
})
// 選擇中級卡片按鈕
$('.tarotBox .card2').click(function () {
    var i = $(this).index();
    tarotBox($(this), i, 2);
})
// 選擇高級卡片按鈕
$('.tarotBox .card3').click(function () {
    var i = $(this).index();
    tarotBox($(this), i, 3);
})
// 選擇卡片樣式
function tarotBox (dom, i, type) {
    if (lock) {
        var i = type == 1 ? dom.index() - 3 : type == 2 ? dom.index() - 13 : dom.index() - 23;
        if (cardArr.indexOf(i) == -1) {
            if (cardArr.length < 9) {
                dom.addClass(type == 1 ? 'card1_active' : type == 2 ? 'card2_active' : 'card3_active');
                cardArr.push(i);
            } else {
                toastMsg('最多只能選擇9張');
            }
        } else {
            dom.removeClass(type == 1 ? 'card1_active' : type == 2 ? 'card2_active' : 'card3_active');
            cardArr.splice(cardArr.indexOf(i), 1);
        }
        $('.tarotBox .cardBoxText').html(`
        <p>共選擇 <b>${cardArr.length}</b> 張</p>
        <p>翻到鉆石卡的概率為<b>${cardArr.length * 10}%</b></p>
    `);
        console.log(cardArr);
    }
}
// 翻牌按鈕
$('.tarotBox .cardBoxBut').click(function () {
    if (cardArr.length == 0) {
        toastMsg('請先選擇卡片');
        return;
    }
    if (lock) {
        draw();
    }
})
// 再翻一次按鈕
$('.butAgain').click(function () {
    initialStytle(true);
})
// 跳轉充值頁面
$('.tarotBox .diamond').click(() => {
    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內打開')
    }
})
// 打開規則
$('.rule').click(function () {
    bodyScroolFun(true);
    $('.rule_pub ').show();
})
// 關閉規則
$('.rule_pub .rule_pub_in .close').click(function () {
    bodyScroolFun(false);
    $('.rule_pub ').hide();
})
// 打開記錄
$('.record').click(function () {
    $('.winningRecord .winningRecord_in ul li').remove();
    page = 1;
    recordPage();
    bodyScroolFun(true);
    $('.winningRecord ').show();
})
// 關閉記錄
$('.winningRecord .winningRecord_in .close').click(function () {
    bodyScroolFun(false);
    $('.winningRecord ').hide();
})
// 記錄監聽滾動
$('.winningRecord .winningRecord_in ul').scroll(function () {
    let scrollTop = $(this).scrollTop()
    let scrollHeight = $('.winningRecord .winningRecord_in ul')[0].scrollHeight
    let ulHeight = $(this).innerHeight()
    if (scrollTop + ulHeight + 10 >= scrollHeight) {
        if (scrollLock) {
            scrollLock = false;
            page++;
            recordPage();
            console.log('到底了');
        }
    }
})
// 關閉去充值彈窗
$('.shade-mask-fragmentNum .cancel-btn').click(function () {
    $('.shade-mask-fragmentNum').hide();
    bodyScroolFun(false);
})
// 確認去充值彈窗
$('.shade-mask-fragmentNum .confirm-btn').click(function () {
    $('.shade-mask-fragmentNum').hide();
    bodyScroolFun(false);
    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內打開')
    }
})