peko-h5/view/peko/activity/explore/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'
    })
}

// 獲取用戶信息
let isGetUserInfoInterFace //是否獲取到個人信息接口
const getUserInfo = (param) => {
    showLoading('獲取個人信息中...')
    networkRequest({
        type: 'GET',
        url: urlPrefix + '/activities/draw/queryTicketNum',
        data: {
            uid: pubInfo.uid
        },
        timeout: 8000, //超时时间设置，单位毫秒
        complete: function (XMLHttpRequest, status) {//请求完成后最终执行参数
            if (status == 'timeout') {//超时,status还有success,error等值的情况
                //这里我使用的是layer中的弹出框（当然也可以用其他的）
                hideLoading(layerIndex)
                toastMsg('请求连接超时')
            }
        },
        success (res) {
            if (res.code === 200) {
                isGetUserInfoInterFace = true
                isShow()
                $('.mine').find('.avatar img').attr('src', res.data.avatar)
                if (!res.data.nick) {
                    res.data.nick = '未知'
                }
                if (res.data.nick.length > 10) {
                    res.data.nick = res.data.nick.substring(0, 10) + '...'
                }
                $('.mine').find('.nick').html(res.data.nick)
                $('.mine').find('.diamond-num span').html(res.data.userPurse.diamonds)
                if (param) {
                    $('.mine').find('.meteor-num span')[0].innerHTML = parseInt($('.mine').find('.meteor-num span')[0].innerHTML) + param
                } else {
                    $('.mine').find('.meteor-num span').html(res.data.num)
                }
                getListPack()
            } else {
                toastMsg(res.message)
            }
            hideLoading(layerIndex)
        },
        error (err) {
            toastMsg('網絡錯誤')
            hideLoading(layerIndex)
        }
    })
}

// 獲取禮包信息
let isGetListPackInterFace //是否獲取到禮包接口
let listPack = []
const getListPack = () => {
    showLoading('獲取禮包信息中...')
    networkRequest({
        type: 'POST',
        url: urlPrefix + '/activities/draw/getPackList',
        data: {
            uid: pubInfo.uid
        },
        timeout: 8000, //超时时间设置，单位毫秒
        complete: function (XMLHttpRequest, status) {//请求完成后最终执行参数
            if (status == 'timeout') {//超时,status还有success,error等值的情况
                //这里我使用的是layer中的弹出框（当然也可以用其他的）
                hideLoading(layerIndex)
                toastMsg('请求连接超时')
            }
        },
        success (res) {
            if (res.code === 200) {
                isGetListPackInterFace = true
                isShow()
                listPack = res.data
                renderList()
            } else {
                toastMsg(res.message)
            }
            hideLoading(layerIndex)
        },
        error () {
            toastMsg('網絡錯誤')
            hideLoading(layerIndex)
        }
    })
}

// 渲染禮包
let arrTips = [
    '獲得信物1個',
    '獲得信物10個',
    '獲得信物100個',
    '獲得信物1000個',
]
const renderList = () => {
    listPack.map((item, index) => {
        let $li = $('ul.buy-area li').eq(index)
        $li.find('.headwear-name').html(item.name)
        $li.find('.headwear-price').html(item.sellingPrice + '鉆石/天')
        $li.find('.headwear-award').html(arrTips[index])

        $('.content span').eq(index).html(item.name)

        let currentBuyBtn = $('.buy-btn').eq(index)
        currentBuyBtn.data('name', item.name)
        currentBuyBtn.data('day', 1)
        currentBuyBtn.data('gold', item.sellingPrice)
        currentBuyBtn.data('giftId', item.id)
        currentBuyBtn.data('ticketNum', item.ticketNum)
    })
}

//只有兩個接口都請求到數據，才渲染默認頁面
const isShow = () => {
    if (isGetListPackInterFace && isGetUserInfoInterFace) {
        hideLoading(layerIndex)
        $('.wrap').show()
    } else {
        showLoading('加載中...')
    }
}

$(function () {
    getInfoFromClient()
    setTimeout(function () {
        getUserInfo()
    }, 500)

    // 點擊玩法介紹按鈕
    $('.rule-btn').on('click', function () {
        $('.shade').fadeIn(300)
        $('.rule-mask').fadeIn(300)
        $('body').css('overflow', 'hidden')
    })
    // 關閉規則彈窗
    $('.rule-mask .cancel').on('click', function () {
        $('.shade').fadeOut(300)
        $('.rule-mask').fadeOut(300)
        $('body').css('overflow', 'auto')
    })
    $('.shade').on('click', function () {
        $('.shade').hide()
        $('.rule-mask').hide()
        $('.shade-mask-success').hide()
        $('.shade-mask-no-money').hide()
        $('body').css('overflow', 'auto')
    })
    $('.rule-mask').on('click', function (e) {
        e.stopPropagation()
    })

    // 監聽購買按鈕點擊事件
    $('ul.buy-area').on('click', '.buy-btn', function () {
        console.log($(this).data());
        if (!$(this).data('name') || !$(this).data('day') || !$(this).data('gold') || !$(this).data('giftId')) {
            toastMsg('禮包信息不完整')
            return
        }

        giftObj = {}
        giftObj['name'] = $(this).data('name')
        giftObj['day'] = $(this).data('day')
        giftObj['gold'] = $(this).data('gold')
        giftObj['giftId'] = $(this).data('giftId')
        giftObj['num'] = 1
        giftObj['ticketNum'] = $(this).data('ticketNum')


        $('.shade-mask-buy').find('.title span').html(giftObj['name'])
        $('.shade-mask-buy').find('.buy-day span').html(giftObj['day'])
        $('.shade-mask-buy').find('.buy-price span').html(giftObj['gold'])
        $('.shade-mask-buy').find('.inputNum').val(giftObj['num'])
        $('.shade-mask-buy').fadeIn(50)
        $('body').css('overflow', 'hidden')
    })
    // 關閉購買彈窗
    $('.buy-confirm-btn .cancel').on('click', function () {
        $('.shade-mask-buy').fadeOut(50)
        $('body').css('overflow', 'auto')
    })
    $('.shade-mask-buy').on('click', function () {
        $('.shade-mask-buy').fadeOut(50)
        $('body').css('overflow', 'auto')
    })
    $('.shade-content-buy').on('click', function (e) {
        e.stopPropagation()
    })
    // 增加購買數量
    $('.increase').on('click', function () {
        if (giftObj['num'] < 999) {
            giftObj['num']++;
            giftObj['day']++;
            let allPrice = giftObj['num'] * giftObj['gold'];
            $('.inputNum').val(giftObj['num'])
            $('.buy-day span').html(giftObj['day'])
            $('.buy-price span').html(allPrice)
        } else {
            toastMsg('單次購買數量最多為999')
        }
    })
    // 減少購買數量
    $('.decrease').on('click', function () {
        if ($('.inputNum').val() > 0) {
            giftObj['num']--;
            giftObj['day']--;
            let allPrice = giftObj['num'] * giftObj['gold'];
            $('.inputNum').val(giftObj['num'])
            $('.buy-day span').html(giftObj['day'])
            $('.buy-price span').html(allPrice)
        } else {
            toastMsg('最少購買數量為1')
        }
    })
    // 手動輸入購買數量
    $('.inputNum').on('input', function () {
        let exp = /^[0-9]+$/
        if (!exp.test($(this).val())) {
            toastMsg('請輸入數字')
            return
        }
        if ($(this).val() > 999) {
            giftObj['num'] = 999
        } else {
            giftObj['num'] = $(this).val()
        }
        giftObj['day'] = giftObj['num'];
        let allPrice = giftObj['num'] * giftObj['gold'];
        $('.inputNum').val(giftObj['num'])
        $('.buy-day span').html(giftObj['day'])
        $('.buy-price span').html(allPrice)
    })
    // 確認購買
    let lock = false
    $('.confirm').on('click', function () {
        let exp = /^[0-9]+$/
        if (!exp.test($('.inputNum').val())) {
            toastMsg('請輸入數字')
            $('.inputNum').val(1)
            return
        }
        if ($('.inputNum').val() == 0) {
            return toastMsg('最少購買數量為1')
        }
        if (!lock) {
            lock = true
            networkRequest({
                type: 'POST',
                url: urlPrefix + '/activity/pack/buy',
                data: {
                    uid: pubInfo.uid,
                    packId: giftObj.giftId,
                    packNum: giftObj.num,
                    ticket: pubInfo.ticket
                },
                success (res) {
                    if (res.code === 200) {
                        getUserInfo(res.data)
                        $('.shade-mask-buy').hide()
                        $('.shade').fadeIn(300)
                        $('.shade-mask-success .tip').html(`獲贈信物x` + giftObj.ticketNum * giftObj.num)
                        $('.shade-mask-success').fadeIn()
                    } else if (res.code === 2103) {
                        $('.shade-mask-buy').hide()
                        $('.shade').fadeIn(300)
                        $('.shade-mask-no-money').show()
                        $('.shade-mask-no-money').fadeIn()
                    } else {
                        toastMsg(res.message)
                    }
                    lock = false
                },
                error (err) {
                    toastMsg('網絡錯誤')
                }
            })
        }

    })
    // 關閉購買成功彈窗
    $('.in-btn').on('click', function () {
        $('.shade-mask-success').fadeOut()
        $('.shade').fadeOut()
        $('body').css('overflow', 'auto')
    })
    // 跳轉充值
    $('.recharge').on('click', function () {
        $('.shade-mask-no-money').fadeOut(300)
        $('.shade').fadeOut(300)
        $('body').css('overflow', 'auto')
        if (browser.app) {
            if (browser.android) {
                // tools.nativeUtils.jumpAppointPage('RECHARGE_PAGE')
                window.androidJsObj.openChargePage(8);
            } else if (browser.ios) {
                window.webkit.messageHandlers.chargePayClickPage.postMessage(8)
                window.webkit.messageHandlers.openChargePage.postMessage(null)
            }
        } else {
            toastMsg('請在app內打開')
        }
    })

    // //從充值頁面返回活動頁面 重新請求用戶信息接口
    // 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]){
    //         $('.shade-mask-no-money').hide()
    //         getUserInfo()
    //     } 
    // }
    // document.addEventListener(visibilityChangeEvent, onVisibilityChange);
    //返回页面 重新请求接口
    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);
})