peko-h5/view/peko/modules/pay/js/index.js

var browser = checkVersion();
const urlPrefix = getUrlPrefix();
var getUrl = getQueryString();
// 封裝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 erbanNo = '';
let chargeProdId = '';//金额:tw_payermax_1003_1000
let countryCode = "";//选择区号
let payChannel;//付款方式
let paymentType;//付款类型
let successUrl = window.location.href;//支付成功回调路径
var deviceId;//型号ID
var channelType;//参数值4：鉆石充值 || 参数值5：贵族vip充值 || 6：首充充值
var failureUrl = urlPrefix + '/peko/modules/pay/result.html?channelType=4';
var chargeGroupsArr = [];
let uid;
let openId;
var textLock = true;
var isRecommendArr = [];//记录是否推荐代充
var apply2NewLock = true;
$(function () {
    if (EnvCheck() == 'test') {//degBug
        new VConsole();
    }
    getInfoFromClient();//请求依赖
    setTimeout(function () {
        if (browser.app) {
            erbanNo = null;
            $('.bindingBox').hide();
            uid = pubInfo.uid;
            getSimpleUserByUid(uid);
        } else {
        }
        channelType = getUrl.channelType;
        getArea();
    }, 100)
})
// 请求地区列表
function getArea () {
    $('.area .area_in p').remove();
    $('.selectAddress .selectAddress_in .list_in p').remove();
    showLoading();
    networkRequest({
        type: 'GET',
        url: urlPrefix + '/charge/listChargeAreaInfo',
        data: { countryCode },
        success: function (res) {
            if (res.code == 200) {
                var str = '';
                res.data.forEach((res, i) => {
                    str += `
                    <p areaCode=${res.areaCode}>${res.areaName}</p>
                    `
                    isRecommendArr[i] = res.isRecommend;
                });
                $('.area .area_in').append(str);
                $('.selectAddress .selectAddress_in .list_in').append(str);
                $('.header .box .right i').text(res.data[0].areaName);
                $('.selectAddress .selectAddress_in .selectAddressList').html(`${res.data[0].areaName}<img src="./images/more_icon.png" alt="">`);
                if (countryCode == '') {
                    countryCode = res.data[0].areaCode;
                }
                if (isRecommendArr[0] == 1) {
                    $('.tabs i').show();
                } else {
                    $('.tabs i').hide();
                }
                getChargePageInfoForH5();
                if (!browser.app) {
                    if (window.localStorage.getItem('first')) {
                        $('.selectAddress').hide();
                    } else {
                        $('.selectAddress').show();
                        bodyScroolFun(true);
                    }
                }
            } else {
                hideLoading(layerIndex);
                toastMsg(res.message);
            }
        },
        error (err) {
            hideLoading(layerIndex);
            toastMsg('網絡錯誤');
        }
    });
}
// 调起选择下拉
$('.selectAddress .selectAddress_in .selectAddressList').click(function () {
    $('.selectAddress .selectAddress_in .list_in').css({ height: '6rem', 'padding': '0.2rem 0.53333rem' });
    return false
})
// 首次切换地区
$('.selectAddress .selectAddress_in .list_in').on('click', 'p', function () {
    countryCode = $(this).attr('areacode');
    var texts = $(this).text();
    $('.header .box .right i').text(texts);
    $('.selectAddress .selectAddress_in .selectAddressList').html(`${texts}<img src="./images/more_icon.png" alt="">`);
    $('.selectAddress .selectAddress_in .list_in').css({ height: '0', 'padding': '0' });
    return false;
})
// 关闭切换地区
$('.selectAddress').click(function () {
    window.localStorage.setItem('first', 1);
    $('.selectAddress').hide();
    $('.selectAddress .selectAddress_in .list_in').css({ height: '0', 'padding': '0' });
    $('.guidd').show();
})
// 首次确认地区
$('.selectAddress .selectAddress_in .but').click(function () {
    window.localStorage.setItem('first', 1);
    getChargePageInfoForH5();
    $('.selectAddress').hide();
    $('.guidd').show();
})
// 关闭引导图
$('.guidd').click(function () {
    $('.guidd').hide();
    bodyScroolFun(false);
})
// 渲染档位列表
function getChargePageInfoForH5 () {
    showLoading();
    networkRequest({
        type: 'GET',
        url: urlPrefix + '/charge/getChargePageInfoForH5',
        data: { countryCode, channelType, },
        success: function (res) {
            if (res.code == 200) {
                chargeGroupsArr = res;
                // if (countryCode == '') {
                getChargePageInfoForH5Html(res, 0, true);
                // }else{

                // }
            } else {
                toastMsg(res.message);
            }
            hideLoading(layerIndex);
        },
        error (err) {
            hideLoading(layerIndex);
            toastMsg('網絡錯誤');
        }
    });
}
// 渲染h5
function getChargePageInfoForH5Html (res, id, bool) {
    // 处理充值方式
    if (bool) {
        $('.page1 .way div').remove();
        var str = '';
        res.data.chargeGroups.forEach((res, i) => {
            if (i == 0) {
                payChannel = res.chargeWays[0].payChannel;
                paymentType = res.chargeWays[0].paymentType;
            }
            str += `
            <div style="${(i + 1) % 3 == 0 ? 'margin-right:0rem' : ''}" class="${i == 0 ? 'active' : ''}" id=${i}  payChannel=${res.chargeWays[0].payChannel} paymentType=${res.chargeWays[0].paymentType}>
                <img src="${res.chargeWays[0].logo}" alt="">
                <p>${res.groupName}</p>
                <span style="display:${res.chargeWays[0].recommend == 1 ? 'block' : 'none'}">推薦</span>
            </div>
        `
        });
        $('.page1 .way').append(str);
    }
    // 处理充值档位
    $('.page1 .position div').remove();
    var str2 = '';
    res.data.chargeGroups[id].chargeWays[0].chargeProds.forEach((res, i) => {
        if (i == 0) {
            chargeProdId = res.chargeProdId;
        }
        str2 += `
            <div class="${i == 0 ? 'active' : ''}" chargeProdId=${res.chargeProdId} style=${(i + 1) % 3 == 0 ? "margin-right:0rem" : ''}>
                <p><img src="./images/gold.png" alt="">${res.chargeGoldNum}</p>
                <span>${res.currencySign} ${res.money}</span>
            </div>
        `
    });
    $('.page1 .position').append(str2);
}
// 点击充值方式按钮
$('.page1 .way ').on('click', 'div', function () {
    $(this).addClass('active').siblings().removeClass('active')
    var id = $(this).attr('id');
    payChannel = $(this).attr('paychannel');
    paymentType = $(this).attr('paymenttype');
    getChargePageInfoForH5Html(chargeGroupsArr, id, false);
})
// 点击充值金额方式
$('.page1 .position').on('click', 'div', function () {
    $(this).addClass('active').siblings().removeClass('active')
    chargeProdId = $(this).attr('chargeProdId');
})
// 充值接口
function apply2New () {
    apply2NewLock = false;
    showLoading();
    networkRequest({
        type: 'POST',
        url: urlPrefix + '/charge/apply2New',
        data: { erbanNo, chargeProdId, countryCode, openId, payChannel, paymentType, successUrl, deviceId: deviceId, failureUrl },
        success: function (res) {
            if (res.code == 200) {
                window.location.href = res.data.payInfo.mweb_url;
            } else {
                apply2NewLock = true;
                toastMsg(res.message);
            }
            hideLoading(layerIndex);
        },
        error (err) {
            hideLoading(layerIndex);
            toastMsg('網絡錯誤');
            apply2NewLock = true;
        }

    });
}
// 确认是否已读协议按钮
$('.rule p img').click(function () {
    textLock = !textLock;
    if (textLock) {
        $('.rule p img').attr('src', './images/trueIcon.png');
    } else {
        $('.rule p img').attr('src', './images/falseIcon.png');
    }
})
// 确认充值按钮
$('.page1 .payBut').click(function () {
    if (!erbanNo) {
        toastMsg('請先確認綁定Piko ID')
        return
    }
    if (!payChannel) {
        toastMsg('請選擇儲值方式')
        return
    }
    if (!chargeProdId) {
        toastMsg('請選擇您的儲值金額')
        return
    }
    if (textLock == false) {
        toastMsg('請先勾選充值協議')
        return
    }
    if (apply2NewLock) {
        apply2New();
    }
    // if (browser.app) {
    // apply2New();
    // } else {
    //     $('.sure .sure_in img').attr('src', $('.userinfo img').attr('src'));
    //     $('.sure .sure_in p').text($('.userinfo .name').text());
    //     $('.sure .sure_in b').text($('.userinfo .id').text());
    //     $('.sure').show();
    //     bodyScroolFun(true);
    // }
})
// 确定绑定按钮
$('.bindingBox .binding .but').click(function () {
    if ($('.bindingBox .binding input').val() == '') {
        toastMsg('請輸入平台號');
        return
    }
    getSimpleUser($('.bindingBox .binding input').val());
})
// 确认绑定接口
function getSimpleUser (erbanNo) {
    showLoading();
    networkRequest({
        type: 'GET',
        url: urlPrefix + '/user/h5/getSimpleUser',
        data: { erbanNo },
        success: function (res) {
            if (res.code == 200) {
                $('.sure .sure_in img').attr('src', res.data.avatar);
                $('.sure .sure_in p').text(res.data.nick);
                $('.sure .sure_in b').html(`Piko ID: <i>${res.data.erbanNo}</i>`);
                $('.sure').show();
                bodyScroolFun(true);
            } else if (res.code == 1404) {
                bodyScroolFun(true);
                $('.userNull').show();
            } else {
                toastMsg(res.message);
            }
            hideLoading(layerIndex);
        },
        error (err) {
            hideLoading(layerIndex);
            toastMsg('網絡錯誤');
        }

    });
}
// 自动绑定接口
function getSimpleUserByUid (uid) {
    showLoading();
    networkRequest({
        type: 'GET',
        url: urlPrefix + '/user/h5/getSimpleUserByUid',
        data: { uid },
        success: function (res) {
            if (res.code == 200) {
                $('.sure .sure_in img').attr('src', res.data.avatar);
                $('.sure .sure_in p').text(res.data.nick);
                $('.sure .sure_in b').html(`Piko ID: <i>${res.data.erbanNo}</i>`);
                $('.bindingBox').hide();
                $('.bindingBox .binding input').val('');
                $('.userinfo img').attr('src', $('.sure .sure_in img').attr('src'));
                $('.userinfo .name').text($('.sure .sure_in p').text());
                $('.userinfo .id').text(`Piko ID: ${$('.sure .sure_in b i').text()}`);
                $('.userinfo').show();
                erbanNo = $('.sure .sure_in b i').text();
            } else if (res.code == 1404) {
                bodyScroolFun(true);
                $('.userNull').show();
            } else {
                toastMsg(res.message);
            }
            hideLoading(layerIndex);
        },
        error (err) {
            hideLoading(layerIndex);
            toastMsg('網絡錯誤');
        }

    });
}
// 切换地区
$('.area .area_in').on('click', 'p', function () {
    countryCode = $(this).attr('areacode');
    var texts = $(this).text();
    var id = $(this).index() - 1;
    $(this).addClass('active').siblings().removeClass('active');
    $('.header .box .right i').text(texts);
    getChargePageInfoForH5();
    bodyScroolFun(false);
    $('.area').hide();
    if (isRecommendArr[id] == 1) {
        $('.tabs i').show();
    } else {
        $('.tabs i').hide();
    }
    rechargeUserList(countryCode);
    return;
})
// 切换id用户按钮
$('.userinfo .but').click(function () {
    erbanNo = null;
    uid = null;
    $('.bindingBox').show();
    $('.userinfo').hide();
})
// 关闭id有误弹窗
$('.userNull .userNull_in .but').click(function () {
    bodyScroolFun(false);
    $('.userNull').hide();
})
// 代充列表接口
function rechargeUserList (regionCode) {
    showLoading();
    networkRequest({
        type: 'GET',
        url: urlPrefix + '/recharge/user/list',
        data: { regionCode },
        success: function (res) {
            $('.page2 ul li').remove();
            if (res.code == 200) {
                var str = ''
                if (res.data.length <= 0) {
                    str = '<li class="null"><img src="./images/null.png" alt=""><p>該地區暫無簽約代儲</p></li>'
                } else {
                    res.data.forEach((res) => {
                        str += `
                        <li>
                            <div class="left">
                                <div class="name">
                                    <b>${res.nick.length > 9 ? res.nick.slice(0, 9) + '...' : res.nick}</b>
                                    <span style="display:${res.isOnline == 0 ? 'none' : 'block'}"><i></i>在線</span>
                                </div>
                                <div class="id">Piko ID：${res.erbanNo}</div>
                            </div>
                            <div class="but" uid=${res.uid} erbanNo=${res.erbanNo}>聯系</div>
                            <div id="copy" class="copy" uid=${res.uid} erbanNo=${res.erbanNo}>復製ID</div>
                        </li> 
                    `
                    });
                }
                $('.page2 ul').append(str)
            } else {
                toastMsg(res.message);
            }
            hideLoading(layerIndex);
        },
        error (err) {
            hideLoading(layerIndex);
            toastMsg('網絡錯誤');
        }

    });
}
// 复制id按钮
$('.page2 ul').on('click', 'li .copy', function () {
    var erbanNo = $(this).attr('erbanNo');
    copyToClipboard(erbanNo);
})
// 关注接口
function fansLike (likedUid) {
    // showLoading();
    networkRequest({
        type: 'POST',
        url: urlPrefix + '/fans/like',
        data: { likedUid, type: 1, uid: pubInfo.uid },
        success: function (res) {
            if (res.code == 200) {
                if (browser.ios) {
                    window.webkit.messageHandlers.openPersonPage.postMessage(likedUid);
                } else if (browser.android) {
                    if (androidJsObj && typeof androidJsObj === 'object') {
                        window.androidJsObj.openPersonPage(likedUid);
                    }
                }
            } else {
                toastMsg(res.message);
            }
            hideLoading(layerIndex);
        },
        error (err) {
            hideLoading(layerIndex);
            toastMsg('網絡錯誤');
        }

    });
}
// 代充联系按钮
$('.page2 ul').on('click', 'li .but', function () {
    var erbanNo = $(this).attr('erbanNo');
    var uid = $(this).attr('uid');
    if (browser.app) {
        fansLike(uid)
        // if (browser.ios) {
        //     window.webkit.messageHandlers.openPersonPage.postMessage(uid);
        // } else if (browser.android) {
        //     if (androidJsObj && typeof androidJsObj === 'object') {
        //         window.androidJsObj.openPersonPage(uid);
        //     }
        // }
    } else {
        $('.toastMasge').show();
        bodyScroolFun(true);
    }
})
// 关闭信息弹窗按钮
$('.toastMasge .toastMasge_in .but').click(function () {
    $('.toastMasge').hide();
    bodyScroolFun(false);
})
//复制方法
function copyToClipboard (text) {
    if (text.indexOf('-') !== -1) {
        let arr = text.split('-');
        text = arr[0] + arr[1];
    }
    var textArea = document.createElement("textarea");
    textArea.style.position = 'fixed';
    textArea.style.top = '0';
    textArea.style.left = '0';
    textArea.style.width = '2em';
    textArea.style.height = '2em';
    textArea.style.padding = '0';
    textArea.style.border = 'none';
    textArea.style.outline = 'none';
    textArea.style.boxShadow = 'none';
    textArea.style.background = 'transparent';
    textArea.value = text;
    document.body.appendChild(textArea);
    textArea.select();

    try {
        var successful = document.execCommand('copy');
        var msg = successful ? '復制成功' : '該瀏覽器不支持點擊復制到剪貼闆';
        toastMsg(msg);
    } catch (err) {
        toastMsg('該瀏覽器不支持點擊復制到剪貼闆');
    }

    document.body.removeChild(textArea);
}
// 充值代充切换
$('.tab div').click(function () {
    var i = $(this).index() + 1;
    $(this).addClass('active').siblings().removeClass('active');
    $('.tab').removeClass('tab1').removeClass('tab2');
    $('.tab').addClass(`tab${i}`);
    $('.page1').hide();
    $('.page2').hide();
    $(`.page${i}`).show();
    if (i == 1) {
    } else {
        rechargeUserList(countryCode);
    }
})
// 打开选择地区弹窗
$('.header .box .right').click(function () {
    bodyScroolFun(true);
    $('.area').show();
})
// 关闭选择地区弹窗
$('.area').click(function () {
    bodyScroolFun(false);
    $('.area').hide();
    return;
})
// 取消二次确认弹窗
$('.sure .sure_in .close').click(function () {
    $('.sure').hide();
    bodyScroolFun(false);
})
// 确认二次确认弹窗
$('.sure .sure_in .ok').click(function () {
    $('.sure').hide();
    bodyScroolFun(false);
    $('.bindingBox').hide();
    $('.bindingBox .binding input').val('');
    $('.userinfo img').attr('src', $('.sure .sure_in img').attr('src'));
    $('.userinfo .name').text($('.sure .sure_in p').text());
    $('.userinfo .id').text(`Piko ID: ${$('.sure .sure_in b i').text()}`);
    $('.userinfo').show();
    erbanNo = $('.sure .sure_in b i').text();
})