peko-h5/view/peko/activity/gift_changer/js/index.js

var browser = checkVersion();
const urlPrefix = getUrlPrefix();//判斷正式環境或者測試環境
// 封裝layer消息提醒框 hideLoading(layerIndex)
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 mySwiper
function swiperFun (mySwiper) {
    mySwiper = new Swiper('.swiper', {
        loop: false, // 循環模式選項
        // 如果需要分頁器
        pagination: {
            el: '.swiper-pagination',
            clickable: false,
            // 分頁的類型是自定義的----必填項
            type: 'bullets',
        },

    })
}
// 頂部返回事件
$('.back').click(() => {
    if (browser.android) {
        window.androidJsObj.closeWebView()
    } else {
        window.webkit.messageHandlers.closeWebView.postMessage(null)
    }
})
let headerBut = true;
let timeInterval = null;
var pageNum = 1;
var isLock = true;
var isAdd;
var compoundParam = {// 合成所需參數
    compoundRewardId: 0,
    compoundList: [],
};
var getDataArr = [];//初始化數組
var getDataRecordArr = [];//初始化數組記錄
var getDataArrIndex = 0;//初始化索引
var objs = {}
var lastNum = 0;
var size1;
var size2;
var arrs = [
    // { num: 0, goldprice: 0 },
]
$(function () {
    // debug
    if (EnvCheck() == 'test') {
        new VConsole();
    };
    getInfoFromClient();
    setTimeout(function () {
        // 頁面全屏
        if (browser.app) {
            if (browser.android) {
                window.androidJsObj.initShowNav(false)
            } else {
                window.webkit.messageHandlers.initShowNav.postMessage(0)
            }
        }
        // document.addEventListener('touchstart', function (event) {

        //     if (event.touches.length > 1) {

        //         event.preventDefault();

        //     }

        // })

        // var lastTouchEnd = 0;

        // document.addEventListener('touchend', function (event) {

        //     var now = (new Date()).getTime();

        //     if (now - lastTouchEnd <= 300) {

        //         event.preventDefault();

        //     }

        //     lastTouchEnd = now;

        // }, false)
        changeTab(tabIndex)
        noticeFun();
        getXsDataFun();
        getDataFun();
        listUserBackpackFun();
    }, 100);
})
// 播放svg
function svgaFun () {
    player1 = new SVGA.Player('.luzis');
    parser1 = new SVGA.Parser('.luzis');
    parser1.load('./images/luzi.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(() => {
            $('.header .luzi').css({ "background": "url(./images/luzi.png) no-repeat", "background-size": "100% 100%" });
            $('.header .luzis').hide();
        })
    })
}
function xsSvgaFun () {
    player1 = new SVGA.Player('.luzis');
    parser1 = new SVGA.Parser('.luzis');
    parser1.load('./images/xs_luzi.svga', function (videoItem) {
        player1.loops = 1;
        player1.clearsAfterStop = false;
        player1.setVideoItem(videoItem);
        player1.startAnimation();
        player1.setContentMode('AspectFill')
        player1.onFinished(() => {
            $('.header .luzi').css({ "background": "url(./images/xs_luzi.png) no-repeat", "background-size": "100% 100%" });
            $('.header .luzis').hide();
        })
    })
}
// 練造按鈕
$('.header .but').click(function () {
    var ifs = $(this).attr('ifckick') == undefined ? 0 : 1;
    var valArr = $('.speed_rogress .speed_rogress_top p').text().match(/\d+(\.\d+)?/g);
    if (ifs == 1 && valArr[0] >= valArr[1]) {
        if (headerBut) {
            headerBut = false;
            // console.log(valArr[0])
            // console.log(valArr[1] * 0.5)
            // console.log((valArr[0] - valArr[1])>= valArr[1]* 0.5 ? '超过百分之五十了':'合理范围内');
            if ((valArr[0] - valArr[1]) > 1000) {
                $('.refining .refining_in p').html('當前投入禮物值<b>已超過</b>煉制進度值，確認繼續煉制嗎?')
            } else {
                $('.refining .refining_in p').html('確認選擇這些背包禮物進行煉制嗎？')
            }
            $('.refining').show();
        }
    } else {
        console.log("不可點擊");
    }
})
//公告欄
function guangGao () {
    clearInterval(timeInterval);
    timeInterval = setInterval(function () {
        $('.header .notice ul').animate({
            marginTop: "-0.4rem"
        }, 200, function () {
            $(this).css({
                marginTop: "0"
            }).find("li:first").appendTo(this);
        });
    }, 2000);
}
// 輪播
function noticeFun () {
    showLoading();
    networkRequest({
        type: 'GET',
        url: urlPrefix + '/gift/compound/record/top',
        success (res) {
            if (res.code === 200) {
                var str = ``;
                res.data.forEach(res => {
                    str += `
                        <li><div class="sp1">${res.userNick}</div>合成了${res.giftPrice}鉆的<b>${res.giftName}</b></li>
                    `
                });
                $('.header .notice ul').append(str);
                guangGao();
            } else {
                toastMsg(res.message)
            }
            hideLoading(layerIndex);
        },
        error (err) {
            toastMsg('網絡錯誤，請退出重進');
        }
    })
}
// 合成禮物列錶
function getDataFun () {
    showLoading();
    networkRequest({
        type: 'GET',
        url: urlPrefix + '/gift/compound/giftList',
        success (res) {
            if (res.code === 200) {
                getDataArr = res.data;
                getDataArr.forEach((res, index) => {
                    getDataRecordArr[index] = 0
                    getDataArr[index].fraction = 0
                })
                dataRendering(getDataArrIndex);
            } else {
                toastMsg(res.message)
            }
            hideLoading(layerIndex);
        },
        error (err) {
            toastMsg('網絡錯誤，請退出重進');
        }
    })
}
// 限時合成禮物列錶
function getXsDataFun () {
    showLoading();
    networkRequest({
        type: 'GET',
        url: urlPrefix + '/gift/compound/limit/giftList',
        success (res) {
            if (res.code === 200) {
                if (tabIndex == 1) {
                    console.log('渲染限時合成禮物');
                    getDataArr = res.data;
                    getDataArr.forEach((res, index) => {
                        getDataRecordArr[index] = 0
                        getDataArr[index].fraction = 0
                    })
                    dataRendering(getDataArrIndex);
                }
                xsOpen = true;
                $(".header .tab_wrap").show();
            } else if (res.code === 26001) {
                xsOpen = false;
                $(".header .tab_wrap").hide();
            } else if (res.code === 26002) {
                $(".header .tab_wrap").show();
                xsOpen = false;
            } else {
                toastMsg(res.message);
                // console.log(res);
            }
            hideLoading(layerIndex);
        },
        error (err) {
            toastMsg('網絡錯誤，請退出重進');
        }
    })
}
// 初始化渲染合成禮物
function dataRendering (getDataArrIndex) {
    // console.log('getDataArrIndex',getDataArr);
    $('.header .qipao img').attr('src', getDataArr[getDataArrIndex].giftUrl);
    $('.header .qipao img').attr('RewardId', getDataArr[getDataArrIndex].compoundRewardId);
    $('.header .qipao img').attr('giftId', getDataArr[getDataArrIndex].giftId);
    $('.header .qipao p').html(`<span>${getDataArr[getDataArrIndex].giftName}</span>（${getDataArr[getDataArrIndex].goldPrice}鉆）`);
    $('.speed_rogress .speed_rogress_top p').html(`<span class='span'>${getDataArr[0].fraction}</span>/${getDataArr[getDataArrIndex].expendValue}`);
    let percent = Number($('.speed_rogress .speed_rogress_top p span').text()) / getDataArr[getDataArrIndex].expendValue * 100
    if (percent > 100) {
        $('.speed_rogress .speed_rogress_top .bar_wrap .line').css({ 'width': '100%' })
    } else {
        $('.speed_rogress .speed_rogress_top .bar_wrap .line').css({ 'width': `${(Number($('.speed_rogress .speed_rogress_top p span').text()) / getDataArr[getDataArrIndex].expendValue) * 100}%` })
    }

    if (Number($('.speed_rogress .speed_rogress_top p span').text()) >= getDataArr[getDataArrIndex].expendValue) {
        $('.header .but').attr('ifCkick', 1);
        // console.log(getDataArr[getDataArrIndex],11111111111);
        if (tabIndex == 0) {
            $('.header .but').css({
                'background': 'url(./images/but_active.png) no-repeat',
                'background-size': '100% 100%'
            });
            $('.speed_rogress .ps').html(`進度值已滿，趕快點擊煉制吧~`);
        } else {
            $('.header .but').css({
                'background': 'url(./images/xs_but_active.png) no-repeat',
                'background-size': '100% 100%'
            });
            $('.speed_rogress .ps').html(`煉制時有<span>${getDataArr[getDataArrIndex].compoundRate}%的概率</span>成功合成禮物，請註意！`);
        }
        // $('.header .but').addClass("but_active");

    } else {
        $('.header .but').attr('ifCkick',);
        if (tabIndex == 0) {
            $('.header .but').css({
                'background': 'url(./images/but.png) no-repeat',
                'background-size': '100% 100%'
            });
            $('.speed_rogress .ps').html(`進度值達到滿值時即可合成禮物哦~`);
        } else {
            $('.header .but').css({
                'background': 'url(./images/xs_but.png) no-repeat',
                'background-size': '100% 100%'
            });
            $('.speed_rogress .ps').html(`煉制時有<span>${getDataArr[getDataArrIndex].compoundRate}%的概率</span>成功合成禮物，請註意！`);
        }
        // $('.header .but').removeClass("but_active");
    }
}
//頭部禮物左切換
$('.header .left_but').click(function () {
    getDataArrIndex--
    if (getDataArrIndex < 0) {
        getDataArrIndex = getDataArr.length - 1;
        console.log('到頭了');
        dataRendering(getDataArrIndex)
    } else {
        dataRendering(getDataArrIndex);
    }
})
//頭部禮物右切換
$('.header .right_but').click(function () {
    getDataArrIndex++
    if (getDataArrIndex >= getDataArr.length) {
        // getDataArrIndex = getDataArr.length - 1
        getDataArrIndex = 0;
        console.log('到尾了');
        dataRendering(getDataArrIndex);
    } else {
        dataRendering(getDataArrIndex);
    }
})
// 獲取背包禮物
function listUserBackpackFun () {
    showLoading();
    networkRequest({
        type: 'GET',
        url: urlPrefix + '/backpack/listUserBackpack',
        data: { uid: pubInfo.uid },
        success (res) {
            if (res.code === 200) {
                if (res.data.length == 0) {
                    $('.bottom .swiper .not').show();
                } else {
                    // 為了解決tab切換時swiper插件重復初始化導致分頁原點錯亂問題，每次都重新創建swiper的盒子
                    $('.bottom .swiper').remove();
                    $('.bottom .b_Top').after(`
                        <div class="swiper">
                            <div class="swiper-wrapper">
                            </div>
                            <div class="swiper-pagination"></div>
                        </div>
                    `);
                    var gulp = Math.ceil(res.data.length / 8);
                    var swiper_slide_str = ''
                    res.data.forEach((res, index) => {
                        arrs[index] = { num: 0, goldprice: 0 };
                    })
                    for (let index = 1; index <= gulp; index++) {
                        swiper_slide_str += `
                        <div class="swiper-slide count${index}"></div>
                    `
                    }
                    $('.bottom .swiper .swiper-wrapper').append(swiper_slide_str);
                    var num = 1;
                    var nums = 0;
                    var goldPrices = 0;
                    res.data.forEach((res, index) => {
                        objs[res.giftId] = { num: 0 };
                        nums++
                        if (nums == 9) {
                            nums = 1;
                            num = num + 1;
                        }
                        $('.bottom .swiper .swiper-wrapper .count' + num + '').append(`
                                <div giftId='${res.giftId}' count="${res.count}" goldPrice="${res.goldPrice}">
                                    <img src="${res.giftUrl}" alt="">
                                    <span class="spans">${res.count}</span>
                                    <p>${res.goldPrice}鉆</p>
                                    <strong><i>0</i><span>/</span><b>${res.count}</b></strong>
                                    <!--<div class="div_active"></div>-->
                                </div>
                        `)
                        goldPrices = Number(goldPrices) + Number(res.goldPrice * res.count);
                    })
                    // $('.bottom .diamonds b').text(goldPrices);
                    $('.bottom .diamonds').remove();
                    $('.bottom .swiper').after(`<span class="diamonds">當前背包禮物總價值：<b>${goldPrices}</b>鉆</span>`);

                    // 初始化swiper
                    swiperFun(mySwiper);
                    // 點擊背包禮物列錶
                    $('.bottom .swiper .swiper-slide div').click(function () {
                        // 防止合成時點擊繼續添加
                        if (headerBut) {
                            // console.log('防止合成時點擊繼續添加');
                            $(this).parent().siblings().children().removeClass('div_active');
                            $(this).addClass('div_active').siblings().removeClass('div_active');
                            var src = $('.bottom .swiper .swiper-slide div img').attr("src");
                            $('.investment .investment_in .qipao img').attr("src", src)
                            // $(this).children('strong').show().parent().siblings().children('strong').hide()
                            $('.investment .investment_in .num input').val(objs[Number($('.bottom .swiper .swiper-slide .div_active').attr('giftid'))].num);
                            var srcs = $('.bottom .swiper .swiper-slide .div_active img').attr('src');
                            $('.investment .investment_in .qipao img').attr("src", srcs);
                            $(this).children('strong').children('i').text(objs[Number($(this).attr('giftid'))].num);
                            $('.investment').show();
                            size1 = Number($('.investment .investment_in .num input').val());
                            $(this).attr("ad", $('.speed_rogress .speed_rogress_top p span').text())
                            $(this).attr("num", $('.bottom .swiper .swiper-slide .div_active strong i').text())
                        }
                    })
                }
            } else {
                toastMsg(res.message)
            }
            hideLoading(layerIndex);
        },
        error (err) {
            toastMsg('網絡錯誤，請退出重進');
        }
    })
}
//合成記錄
function recordFun (pageNum) {
    showLoading();
    networkRequest({
        type: 'GET',
        url: urlPrefix + '/gift/compound/record',
        data: { pageNum, pageSize: 10 },
        success (res) {
            if (res.code === 200) {
                if (res.data.length == 0 && pageNum == 1) {
                    $('.record').hide();
                    $('.not_record').show();
                } else {
                    if (res.data.length == 0) {
                        isLock = false;
                    } else {
                        var str = ''
                        res.data.forEach(res => {
                            if (!res.giftId) {
                                str += `
                            <li>
                                <img class="no_tx" src="./images/mixFail.png" alt="">
                                <span style="margin-right: 0.3rem;">合成失敗</span>
                                <div class="time_m">${dateFormat(res.createTime, 'MM-dd')}</div>
                                <div class="time_d">${dateFormat(res.createTime, 'hh:mm')}</div>
                            </li>
                            `
                            } else {
                                str += `
                            <li>
                                <img class="tx" src="${res.giftUrl}" alt="">
                                <span style="margin-right: 0.3rem;">${res.giftName}</span>
                                <div class="time_m">${dateFormat(res.createTime, 'MM-dd')}</div>
                                <div class="time_d">${dateFormat(res.createTime, 'hh:mm')}</div>
                            </li>
                            `
                            }
                        });
                        $('.record .record_in ul').append(str)
                        $('.record').show();
                        $('.not_record').hide();
                        isLock = true;
                    }
                }
            } else {
                isLock = true;
                toastMsg(res.message)
            }
            hideLoading(layerIndex);
        },
        error (err) {
            isLock = true;
            toastMsg('網絡錯誤，請退出重進');
        }
    })
}
var isJL = false;
// 確認投入按鈕
$('.investment .investment_in .but').click(function () {
    var valArr = $('.speed_rogress .speed_rogress_top p').text().match(/\d+(\.\d+)?/g);
    var giftIds = $('.bottom .swiper .swiper-slide .div_active').attr('giftId');
    var val = $('.investment .investment_in .num input').val();
    objs[Number($('.bottom .swiper .swiper-slide .div_active').attr('giftid'))].num = val;
    var giftNum = objs[Number($('.bottom .swiper .swiper-slide .div_active').attr('giftid'))].num;
    var goldprice = Number($('.bottom .swiper .swiper-slide .div_active').attr(`goldprice`))
    compoundParam.compoundList.push({ giftId: Number(giftIds), num: giftNum })
    size2 = Number($('.investment .investment_in .num input').val());


    if (isJL) {
        if (size1 < size2) {
            console.log('增加了');
            var goldprice = Number($('.bottom .swiper .swiper-slide .div_active').attr(`goldprice`));
            var num = $('.bottom .swiper .swiper-slide .div_active').attr(`num`);
            getDataArr[0].fraction = Number($('.bottom .swiper .swiper-slide .div_active').attr(`ad`)) + goldprice * (val - num);
        } else if (size1 == size2) {
            console.log('不變');
            getDataArr[0].fraction = $('.speed_rogress .speed_rogress_top p span').text();
        } else {
            console.log('減少了');
            //--
            var goldprice = Number($('.bottom .swiper .swiper-slide .div_active').attr(`goldprice`));
            var num = $('.bottom .swiper .swiper-slide .div_active').attr(`num`);
            getDataArr[0].fraction = Number($('.bottom .swiper .swiper-slide .div_active').attr(`ad`)) + goldprice * (val - num);
        }
        $('.bottom .swiper .swiper-slide .div_active strong i').text(val)
    }
    dataRendering(getDataArrIndex);
    lastNum = $('.speed_rogress .speed_rogress_top p span').text();
    isJL = false;

    console.log($('.bottom .swiper .swiper-slide .div_active').index());
    if (giftNum > 0) {
        $('.bottom .swiper .swiper-slide .div_active strong i').addClass('iAct');
        $('.bottom .swiper .swiper-slide .div_active').addClass('div_active1');

    } else {
        $('.bottom .swiper .swiper-slide .div_active strong i').removeClass('iAct');
        $('.bottom .swiper .swiper-slide .div_active').removeClass('div_active1');
    }
    if (Number(lastNum) > Number(valArr[1])) {
        $('.speed_rogress .speed_rogress_top p .span').addClass('spanAct');
    } else {
        $('.speed_rogress .speed_rogress_top p .span').removeClass('spanAct');
    }
    if (Number(lastNum) - Number(valArr[1]) > 1000) {
        $('.investment2').show();
    } else {
        $('.investment').hide();
        $('.bottom .swiper .swiper-slide div').removeClass('div_active');
    }
})
// 取消提醒超出弹窗
$('.investment2 .investment_in .close').click(function () {
    // $('.investment2').show();
    $('.investment2').hide();
})
// 确认提醒超出弹窗
$('.investment2 .investment_in .ok').click(function () {
    $('.bottom .swiper .swiper-slide div').removeClass('div_active');
    $('.investment2').hide();
    $('.investment').hide();
})
// 關閉投入
$('.investment .investment_in .closeBut').click(function () {
    var val = $('.investment .investment_in .num input').val();
    var num = Number($('.bottom .swiper .swiper-slide .div_active strong b').text());
    var giftNum = objs[Number($('.bottom .swiper .swiper-slide .div_active').attr('giftid'))].num;
    var goldprice = Number($('.bottom .swiper .swiper-slide .div_active').attr(`goldprice`))
    // console.log(isAdd);
    // if (isAdd) {

    // }
    getDataArr[0].fraction = lastNum;
    $('.investment .investment_in .num input').val(val);
    $('.bottom .swiper .swiper-slide .div_active strong i').text(val);
    dataRendering(getDataArrIndex);
    $('.investment').hide();
})

// 監聽輸入框
$(".investment .investment_in .num input").on("focus", function () {
    if ($(this).val() == 0) {
        $('.investment .investment_in .num input').val('')
    }
})
$(".investment .investment_in .num input").on("input", function () {
    isJL = true;
    var val = $(this).val();
    var goldprice = Number($('.bottom .swiper .swiper-slide .div_active').attr(`goldprice`));
    var num = $('.speed_rogress .speed_rogress_top p span').text();
    if (val > Number($('.bottom .swiper .swiper-slide .div_active strong b').text())) {
        val = 0;
        $(this).val(0);
        toastMsg('背包庫存數量不足');
        getDataArr[0].fraction = lastNum;
    } else if (val == '') {
        val = 0;
        $(this).val(0);
        getDataArr[0].fraction = lastNum;
    }
    $(this).val(val);
})
// 增加煉制按鈕
var number = 0;
$('.investment .investment_in .num .add').click(function (event) {
    isJL = false;
    isAdd = true;
    var val = $('.investment .investment_in .num input').val();
    var num = Number($('.bottom .swiper .swiper-slide .div_active strong b').text());
    var giftNum = objs[Number($('.bottom .swiper .swiper-slide .div_active').attr('giftid'))].num;
    var goldprice = Number($('.bottom .swiper .swiper-slide .div_active').attr(`goldprice`))
    // console.log(isAdd);
    // if (isAdd) {

    // }
    val = Number(val) + 1;
    var indes = $('.bottom .swiper .swiper-slide .div_active').index();
    console.log(indes);
    arrs[indes].goldprice = goldprice;
    if (val > num) {
        toastMsg('背包庫存數量不足');
        val = val - 1;
        $('.bottom .swiper .swiper-slide .div_active').attr(`nums`, val);
        arrs[indes].num = Number($('.bottom .swiper .swiper-slide .div_active').attr('nums'));
    } else {
        var goldprice = Number($('.bottom .swiper .swiper-slide .div_active').attr(`goldprice`));
        var num = $('.bottom .swiper .swiper-slide .div_active').attr(`num`);
        getDataArr[0].fraction = Number($('.bottom .swiper .swiper-slide .div_active').attr(`ad`)) + goldprice * (val - num);
    }
    $('.investment .investment_in .num input').val(val);
    $('.bottom .swiper .swiper-slide .div_active strong i').text(val);
    // dataRendering(getDataArrIndex)
    event.stopPropagation();

})
// 減少煉制按鈕
$('.investment .investment_in .num .reduce').click(function (event) {
    isJL = false;
    isAdd = false;
    var val = $('.investment .investment_in .num input').val();
    val = Number(val) - 1;
    if (val < 0) {
        val = 0;
        // toastMsg('')；
    } else {
        var giftNum = objs[Number($('.bottom .swiper .swiper-slide .div_active').attr('giftid'))].num;
        var goldprice = Number($('.bottom .swiper .swiper-slide .div_active').attr(`goldprice`));
        var num = $('.bottom .swiper .swiper-slide .div_active').attr(`num`);
        //
        console.log(Number($('.bottom .swiper .swiper-slide .div_active').attr(`ad`)));
        console.log(val);
        console.log(num);
        console.log(goldprice * (val - num));

        getDataArr[0].fraction = Number($('.bottom .swiper .swiper-slide .div_active').attr(`ad`)) + goldprice * (val - num);
    }
    $('.bottom .swiper .swiper-slide .div_active').attr(`nums`, val);
    // dataRendering(getDataArrIndex)
    $('.investment .investment_in .num input').val(val);
    $('.bottom .swiper .swiper-slide .div_active strong i').text(val);
    event.stopPropagation();

})
// 確認煉制
$('.refining .refining_in div .ok').click(function () {
    compoundParam.compoundRewardId = Number($('.header .qipao img').attr('RewardId'));
    var arr2 = []
    var arr3 = []
    compoundParam.compoundList.forEach(item => {
        let index = arr2.findIndex(item1 => item1.giftId == item.giftId)
        if (index != -1) {
            arr2.splice(index, 1, Object.assign(item, { num: item.num }))
        } else {
            arr2.push(item)
        }
    })
    // console.log('arr22222',arr2);
    arr2.map((item, index) => {
        if (item.num != '') {
            if (parseInt(item.num) != 0) {
                // console.log(item,index);
                arr3.push(item)
            }
        }
    })

    compoundParam.compoundList = arr3;
    $('.header .luzis').show();
    setTimeout(() => {
        $('.header .luzi').css({ "background": "none" });
    }, 120);
    console.log('compoundParam', compoundParam);
    $('.refining').hide();
    if (tabIndex == 0) {
        svgaFun();
    } else {
        xsSvgaFun();
    }

    setTimeout(function () {
        showLoading();
        networkRequest({
            type: 'POST',
            contentType: 'application/json;charset=UTF-8',
            url: urlPrefix + '/gift/compound',
            data: JSON.stringify(compoundParam),
            success (res) {
                if (res.code === 200) {
                    $('.speed_rogress .speed_rogress_top p span').text(0)
                    $('.investment .investment_in .num input').val(0)

                    if (tabIndex == 0) {
                        $('.gxn .gxn_in .qb img').attr('src', res.data.picUrl);
                        $('.gxn .gxn_in p b').text(res.data.giftName);
                        changeTab(0)
                        noticeFun();
                        getDataFun();
                        listUserBackpackFun();
                        $('.gxn').show();
                    } else {
                        // console.log(1111111111111111,res);
                        let mixGiftId = $('.header .qipao img').attr('giftId');
                        // 不返回禮物為糟糕彈窗，返回與目標合成禮物不同則為失敗彈窗，合成相同則成功
                        if (!res.data) {
                            $(".xs_bad").fadeIn();
                        } else {
                            if (res.data.giftId == mixGiftId) {
                                $(".xs_success .qipao3 img").attr('src', res.data.picUrl);
                                $(".xs_success .success_in span b").text(res.data.giftName);
                                $(".xs_success").show();
                            } else {
                                $(".xs_fail .qipao3 img").attr('src', res.data.picUrl);
                                $(".xs_fail .fail_in span b").text(res.data.giftName);
                                $(".xs_fail").show();
                            }
                        }
                        changeTab(1)
                        noticeFun();
                        getXsDataFun();
                        listUserBackpackFun();
                    }
                } else {
                    toastMsg(res.message);
                    setTimeout(() => {
                        location.reload();
                    }, 2000);
                }
                hideLoading(layerIndex);
            },
            error (err) {
                toastMsg('網絡錯誤，請退出重進');
            }
        })
        headerBut = true;
        $(".header .but").removeAttr('ifCkick')
    }, 4000)

})
// 取消煉制
$('.refining .refining_in div .close').click(function () {
    headerBut = true;
    $('.bottom .swiper .swiper-slide div').removeClass('div_active');
    $('.refining').hide();
})
// 關閉規則
$('.rule img').click(function () {
    $('.rule').hide();
})
// 打開規則
$('.header .rule_icon').click(function () {
    $('.rule').show();
})
// 關閉無記錄彈窗
$('.not_record').click(function () {
    $('.not_record').hide();
})
// 關閉有記錄彈窗
$('.record .del').click(function () {
    $('.record').hide();
})
//打開合成記錄
$('.header .record_icon').click(function () {
    $('.record .record_in ul li').remove();
    recordFun(pageNum);
})
//  關閉合成記錄
$('.record .del').click(function () {
    pageNum = 1;
    $('.record').hide();
})
// 關閉恭喜妳
$('.gxn').click(function () {
    $(this).hide();
    location.reload()
})
// 關閉投入彈窗
// $('.investment').click(function (event) {
//     $('.investment .investment_in .num input').val(0);
//     $('.bottom .swiper .swiper-slide div strong i').text(0);
//     $('.bottom .swiper .swiper-slide div strong').hide();
//     event.stopPropagation();
//     $(this).hide()
// })
// 下拉合成記錄
$('.record .record_in ul').scroll(function () {
    let scrollTop = $(this).scrollTop()
    let scrollHeight = $('.record .record_in ul')[0].scrollHeight
    let ulHeight = $(this).innerHeight()
    if (scrollTop + ulHeight + 10 >= scrollHeight) {
        if (isLock) {
            // 請求下一頁
            isLock = false;
            pageNum = pageNum + 1
            recordFun(pageNum);
        } else {
            console.log('沒有更多了');
        }
    }
})
// 刷新背包
$('.bottom .b_Top img').click(function () {
    // showLoading();
    $('.speed_rogress .speed_rogress_top .bar_wrap .line').css('width', '0')
    $('.speed_rogress .speed_rogress_top p span').text(0)
    $('.bottom .swiper .swiper-slide').remove();
    $('.investment .investment_in .num input').val(0)
    $('.investment').hide();
    $('.speed_rogress .speed_rogress_top .spanAct').removeClass('spanAct')
    listUserBackpackFun();
    changeTab(tabIndex)
    noticeFun();
    getXsDataFun();
    getDataFun();
    listUserBackpackFun();
})

// tab切換
var tabIndex = 0;
function changeTab (tabIndex) {
    if (tabIndex == 0) {
        $("body").css('background', '#462978');
        $('.tab_wrap .tab_item').eq(0).find('img').attr('src', "./images/pt_tab_active.png");
        $('.tab_wrap .tab_item').eq(0).siblings().find('img').attr('src', "./images/xs_tab.png");
        $('.header').css({
            'background-image': 'url(./images/header.png)',
            'height': '13.5733333333rem'
        });
        $('.header .title').show();
        $('.header .left_but').attr('src', './images/left_but.png');
        $('.header .right_but').attr('src', './images/right_but.png');
        $('.header .left_text').css('color', '#fff');
        $('.header .right_text').css('color', '#fff');

        $('.header .luzi').css({
            'background-image': 'url(./images/luzi.png)',
            'margin': '0.5rem auto 0'
        });
        $('.header .qipao').css({ "margin": "-7.36rem auto 0" });
        $('.header .but').css({
            'background': "url(./images/but.png) no-repeat",
            'background-size': '100% 100%'
        })
        $('.speed_rogress .speed_rogress_top .bar_wrap').addClass('speed').removeClass('xs_speed');
        $('.speed_rogress .bar_wrap .xs_border').remove();
        $('.speed_rogress .bar_wrap .line').attr('src', "./images/line.png");
        // $('.speed_rogress .speed_rogress_top .bar_wrap .line').css({ 'width': "100%" })

        $('.speed_rogress_top .wenhao').css('display', 'none');
        $('.bottom').css('background', '#462978');
        $('.bottom .b_Top').css('background-image', 'url(./images/topK.png)',);
        $('.bottom .b_Top').find('img').attr('src', './images/shuaxin.png');
        $('.bottom .b_Top p').css('color', '#F6CA89',);
        $('.bottom .diamonds').css('color', '#ffffff',);

    } else {
        $("body").css('background', '#151A2C');
        $('.tab_wrap .tab_item').eq(1).find('img').attr('src', "./images/xs_tab_active.png");
        $('.tab_wrap .tab_item').eq(1).siblings().find('img').attr('src', "./images/pt_tab.png");
        $('.header').css({
            'background-image': 'url(./images/xs_header.png)',
            'height': '15.186666667rem'
        });
        $('.header .title').hide();
        $('.header .left_but').attr('src', './images/xs_left_but.png');
        $('.header .right_but').attr('src', './images/xs_right_but.png');
        $('.header .left_text').css('color', '#F1D9AE');
        $('.header .right_text').css('color', '#F1D9AE');
        $('.header .luzi').css({
            'background-image': 'url(./images/xs_luzi.png)',
            'margin': '0.1rem auto 0'
        });
        $('.header .qipao').css({ "margin": "-7.06rem auto 0" });
        $('.header .but').css({
            'background': "url(./images/xs_but.png) no-repeat",
            'background-size': '100% 100%'
        })
        $('.speed_rogress .speed_rogress_top .bar_wrap').addClass('xs_speed').removeClass('speed');
        $('.speed_rogress .bar_wrap .line').before(`<img src="./images/xs_lines.png" class="xs_border" alt="">`);
        $('.speed_rogress .bar_wrap .line').attr('src', "./images/xs_line.png");
        // $('.speed_rogress .speed_rogress_top .bar_wrap .line').css({ 'width': "80%" })


        $('.speed_rogress_top .wenhao').css('display', 'block');
        $('.bottom').css('background', '#151A2C');
        $('.bottom .b_Top').css('background-image', 'url(./images/xs_topK.png)',);
        $('.bottom .b_Top').find('img').attr('src', './images/xs_shuaxin.png');
        $('.bottom .b_Top p').css('color', '#BAB0FF',);
        $('.bottom .diamonds').css('color', '#BAB0FF',);

    }
}
var xsOpen      //是否開啟限時爐
var firstEnter  //用戶是否首次進入限時爐
$('.tab_wrap .tab_item').click(function () {
    tabIndex = $(this).index();
    // console.log('tabIndex',tabIndex);
    if (tabIndex == 0) {
        changeTab(tabIndex);
        getDataFun();
        listUserBackpackFun();
        getDataArrIndex = 0;
        // location.reload();
    } else {
        getXsDataFun();
        getDataArrIndex = 0;
        setTimeout(() => {
            // console.log('xsOpen',xsOpen);
            if (!xsOpen) {
                $('.xs_close').fadeIn();
                tabIndex = 0;
            } else {
                changeTab(tabIndex);
                listUserBackpackFun();
                firstEnter = localStorage.getItem("firstEnter");
                if (firstEnter == null) {
                    firstEnterFun();
                    localStorage.setItem("firstEnter", "false");
                }
            }
        }, 500);

    }
})

// 用戶首次進入限時爐引導
function firstEnterFun () {
    $('.step_wrap .step1').show();
    $('.guide_mask').show();
}
// 引導按鈕
$('.step_wrap .step_but').click(function () {
    let $index = $(this).parent().index();
    // console.log($index);
    $(this).parent().fadeOut();
    $(this).parent().next().show();
    if ($index == 0) {
        $('.header .qipao').css({ 'z-index': '999' });
        $('.speed_rogress').css({ 'z-index': '999' });
        $('.speed_rogress .ps').hide();
        $('.speed_rogress .wenhao').hide();

    } else if ($index == 1) {
        $('.header .qipao').css({ 'z-index': '0' });
        $('.header .but').css({
            'z-index': '999',
            'background': "url(./images/xs_but_active.png) no-repeat",
            'background-size': '100% 100%'
        });
        $('.speed_rogress .ps').show();
        $('.speed_rogress .wenhao').show();
    } else {
        $('.header .but').css({
            'z-index': '0',
            'background': "url(./images/xs_but.png) no-repeat",
            'background-size': '100% 100%'
        });
        $('.speed_rogress').css({ 'z-index': '0' });
        let suc_src = getDataArr[0].giftUrl;
        let suc_name = getDataArr[0].giftName;
        $('.step4 .success_wrap .qipao3 img').attr('src', suc_src);
        $('.step4 .success_wrap span b').html(suc_name);
        $('.step4 .success_wrap').show();
        $('.step4 .bad_wrap').hide();
        setTimeout(() => {
            $('.step4 .success_wrap').hide();
            $('.step4 .bad_wrap').show();
        }, 2500);
    }
})
// 關閉最後引導
$('.step_wrap').on("click", ".step4", function () {
    console.log('關閉最後引導');
    $('.step_wrap .step4').hide();
    $('.guide_mask').hide();
})

// 關閉限時魔法爐冷卻彈窗
$('.xs_close .del').click(function () {
    $('.xs_close').fadeOut()
})

// 打開限時屋規則
$('.speed_rogress .wenhao').click(function () {
    $('.xs_rule').fadeIn();
})
// 關閉限時屋規則
$('.xs_rule .del').click(function () {
    $('.xs_rule').fadeOut();
})
// 關閉限時屋合成成功彈窗
$('.xs_success .del').click(function () {
    $('.xs_success').fadeOut();
    $(".header .but").removeAttr('ifCkick');
    getXsDataFun();
    listUserBackpackFun();
    headerBut = true;
    timeInterval = null;
    pageNum = 1;
    isLock = true;
    compoundParam = {// 合成所需參數
        compoundRewardId: 0,
        compoundList: [],
    };
    getDataArr = [];//初始化數組
    getDataRecordArr = [];//初始化數組記錄
    getDataArrIndex = 0;//初始化索引
    objs = {}
    lastNum = 0;

})
// 關閉限時屋合成失敗彈窗
$('.xs_fail .del').click(function () {
    $('.xs_fail').fadeOut();
    $(".header .but").removeAttr('ifCkick');
    getXsDataFun();
    listUserBackpackFun();
    headerBut = true;
    timeInterval = null;
    pageNum = 1;
    isLock = true;
    compoundParam = {// 合成所需參數
        compoundRewardId: 0,
        compoundList: [],
    };
    getDataArr = [];//初始化數組
    getDataRecordArr = [];//初始化數組記錄
    getDataArrIndex = 0;//初始化索引
    objs = {}
    lastNum = 0;
})
// 關閉限時屋合成糟糕彈窗
$('.xs_bad .del').click(function () {
    $('.xs_bad').fadeOut();
    $(".header .but").removeAttr('ifCkick');
    getXsDataFun();
    listUserBackpackFun();
    headerBut = true;
    timeInterval = null;
    pageNum = 1;
    isLock = true;
    compoundParam = {// 合成所需參數
        compoundRewardId: 0,
        compoundList: [],
    };
    getDataArr = [];//初始化數組
    getDataRecordArr = [];//初始化數組記錄
    getDataArrIndex = 0;//初始化索引
    objs = {}
    lastNum = 0;
})