改造充值页面
This commit is contained in:
Dragon
File diff suppressed because it is too large
Load Diff
File diff suppressed because it is too large
Load Diff
BIN
view/peko/modules/pay/images/ddianicon.png
Normal file
BIN
view/peko/modules/pay/images/ddianicon.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 242 B |
BIN
view/peko/modules/pay/images/falseIcon.png
Normal file
BIN
view/peko/modules/pay/images/falseIcon.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 205 B |
BIN
view/peko/modules/pay/images/gold.png
Normal file
BIN
view/peko/modules/pay/images/gold.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 505 B |
Binary file not shown.
|
Before Width: | Height: | Size: 2.6 KiB After Width: | Height: | Size: 1.3 KiB |
BIN
view/peko/modules/pay/images/inputBG.png
Normal file
BIN
view/peko/modules/pay/images/inputBG.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 734 B |
Binary file not shown.
|
Before Width: | Height: | Size: 54 KiB After Width: | Height: | Size: 44 KiB |
BIN
view/peko/modules/pay/images/moreIcon.png
Normal file
BIN
view/peko/modules/pay/images/moreIcon.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 143 B |
Binary file not shown.
|
Before Width: | Height: | Size: 20 KiB After Width: | Height: | Size: 2.6 KiB |
BIN
view/peko/modules/pay/images/slogo.png
Normal file
BIN
view/peko/modules/pay/images/slogo.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 1.2 KiB |
BIN
view/peko/modules/pay/images/tab1.png
Normal file
BIN
view/peko/modules/pay/images/tab1.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 597 B |
BIN
view/peko/modules/pay/images/tab2.png
Normal file
BIN
view/peko/modules/pay/images/tab2.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 616 B |
BIN
view/peko/modules/pay/images/trueIcon.png
Normal file
BIN
view/peko/modules/pay/images/trueIcon.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 262 B |
@@ -3,98 +3,149 @@
|
||||
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<title id="pay_title">充值</title>
|
||||
<meta name="viewport"
|
||||
content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
|
||||
<meta name="apple-mobile-web-app-capable" content="yes">
|
||||
<meta name="apple-mobile-web-app-status-bar-style" content="black">
|
||||
<meta name="format-detection" content="telephone=no">
|
||||
<meta http-equiv="pragma" content="no-cache">
|
||||
<meta http-equiv="cache-control" content="no-cache">
|
||||
<meta http-equiv="expires" content="">
|
||||
<script src="../../common/js/flexible.js"></script>
|
||||
<meta http-equiv="X-UA-Compatible" content="IE=edge">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>充值</title>
|
||||
<link rel="stylesheet" href="../../common/css/reset.css">
|
||||
<link rel="stylesheet" href="css/index.css?v=1.1">
|
||||
<link rel="stylesheet" href="./css/index.css">
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<div class="logingActive" style="font-size: 0.35rem;"></div>
|
||||
<!-- header -->
|
||||
<div class="header">
|
||||
<!-- 头部 -->
|
||||
<div class="header_top">
|
||||
<div class="header_top_left">
|
||||
<img src="./images/logo.png" alt=""><b id="pay_header_t_l">piko儲值中心</b>
|
||||
<div class="box">
|
||||
<div class="left">
|
||||
<img src="./images/logo.png" alt="" class="logo">
|
||||
<b>Piko儲值中心</b>
|
||||
</div>
|
||||
<div class="header_top_right">
|
||||
<img src="./images/more.png" alt=""><b></b>
|
||||
<div class="right">
|
||||
<img src="./images/ddianicon.png" alt="" class="didianIcon">
|
||||
<i>台湾</i>
|
||||
<img src="./images/moreIcon.png" alt="" class="moreIcon">
|
||||
</div>
|
||||
</div>
|
||||
<!-- 输入框 -->
|
||||
<input class="user" type="text" id="pay_user_id" placeholder="請輸入piko賬號ID">
|
||||
</div>
|
||||
<!-- 选择支付方式 -->
|
||||
<div class="pay_method">
|
||||
<p id="pay_method_p">请选择儲值方式:</p>
|
||||
<!-- <div class="methods methods0">
|
||||
<p style="width: 100%;color: #000;height: 0.5rem;"></p>
|
||||
<span>
|
||||
<img src="" alt="">
|
||||
<p>迪迦奥特曼</p>
|
||||
</span>
|
||||
</div> -->
|
||||
<!-- <div class="methods methods1">
|
||||
<p style="width: 100%;color: #000;height: 0.5rem;"></p>
|
||||
<span>
|
||||
<img src="" alt="">
|
||||
<p>迪迦奥特曼</p>
|
||||
</span>
|
||||
</div> -->
|
||||
<div class="methodBox"></div>
|
||||
</div>
|
||||
<!-- 选择充值金额 -->
|
||||
<div class="pay_number">
|
||||
<p id="pay_number_sd">請選擇您的儲值金額:</p>
|
||||
<div class="number">
|
||||
<!-- <span class="active">
|
||||
<b>100,000 金幣</b>
|
||||
<i>NT$ 1,000</i>
|
||||
</span>
|
||||
<span>
|
||||
<b>100,000 金幣</b>
|
||||
<i>NT$ 1,000</i>
|
||||
</span>
|
||||
<span>
|
||||
<b>100,000 金幣</b>
|
||||
<i>NT$ 1,000</i>
|
||||
</span> -->
|
||||
</div>
|
||||
<div class="but1 pay_but">立即支付</div>
|
||||
<div class="but2 pay_but">立即支付</div>
|
||||
</div>
|
||||
<!-- 弹窗 -->
|
||||
<div class="pop_up">
|
||||
<div class="pop_up_in">
|
||||
<b id="pop_up_in_b">請選擇儲值地區</b>
|
||||
<!-- <p countryCode="TW" id="pop_up_in_p1">臺灣</p>
|
||||
<p countryCode="CN" id="pop_up_in_p2">大陸</p> -->
|
||||
<!-- <p>香港</p> -->
|
||||
<!-- 绑定输入框 -->
|
||||
<div class="bindingBox">
|
||||
<div class="binding">
|
||||
<input type="number" placeholder="請輸入要儲值的Piko ID">
|
||||
<div class="but">確定</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="stance">
|
||||
<div class="picture">
|
||||
<span id="pay_stance_picture">儲值服務即將開放，請耐心等待</span>
|
||||
<!-- 绑定完成后用户信息 -->
|
||||
<div class="userinfo" style="display: none;">
|
||||
<img src="./images/logo.png" alt="" class="tx">
|
||||
<div class="name">昵称</div>
|
||||
<div class="id">Piko ID: 123456</div>
|
||||
<div class="but">切换ID</div>
|
||||
</div>
|
||||
<!-- tab -->
|
||||
<div class="tab tab1">
|
||||
<div class="active">
|
||||
在線儲值
|
||||
<span></span>
|
||||
</div>
|
||||
<div class="tabs">
|
||||
官方代儲
|
||||
<span></span>
|
||||
<i>推薦</i>
|
||||
</div>
|
||||
</div>
|
||||
<div class="wx_skip">
|
||||
<img id="wx_skip_img" src="./images/wx_skip.png" alt="">
|
||||
<!-- 充值页面 -->
|
||||
<div class="page1">
|
||||
<h3>儲值方式</h3>
|
||||
<div class="way">
|
||||
<!-- <div class="">
|
||||
<img src="./images/logo.png" alt="">
|
||||
<p>Gash點數卡</p>
|
||||
<span>推薦</span>
|
||||
</div> -->
|
||||
</div>
|
||||
<h3>儲值金額</h3>
|
||||
<div class="position">
|
||||
<!-- <div class="">
|
||||
<p><img src="./images/gold.png" alt="">0</p>
|
||||
<span>TWD 0</span>
|
||||
</div> -->
|
||||
</div>
|
||||
<div class="payButBox">
|
||||
<!-- 确认充值 -->
|
||||
<div class="payBut">確認儲值</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- 代充页面 -->
|
||||
<div class="page2">
|
||||
<div class="rule">
|
||||
<p>官方代儲說明：</p>
|
||||
<p>若您有各種儲值需求，可以使用官方代儲服務，點擊聯系可直接前往Piko App咨詢相應代儲（如點擊聯系無效果，可復製代儲Piko
|
||||
ID進入App後搜索相應代儲並聯系），官方代儲在收到款項後，會直接對您的賬戶進行鉆石儲值</p>
|
||||
</div>
|
||||
<h3>平臺簽約代儲</h3>
|
||||
<!-- 代充列表 -->
|
||||
<ul>
|
||||
<!-- <li>
|
||||
<div class="left">
|
||||
<div class="name">
|
||||
<b>名称</b>
|
||||
<span><i></i>在线</span>
|
||||
</div>
|
||||
<div class="id">Piko ID：123456</div>
|
||||
</div>
|
||||
<div class="but">聯系</div>
|
||||
<div class="copy">復製ID</div>
|
||||
</li> -->
|
||||
<li class="null">
|
||||
<img src="./images/null.png" alt="">
|
||||
<p>該地區暫無簽約代儲</p>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
<!-- 充值说明 -->
|
||||
<div class="rule">
|
||||
<p><img src="./images/trueIcon.png" alt="" class="">已閱讀並同意<a
|
||||
href="../rule/rechargeAgreement.html">《用戶充值協議》</a>以及<a href="../rule/privacy-wap.html">《隱私政策》</a>
|
||||
</p>
|
||||
<p>如有疑問，請聯系官方客服</p>
|
||||
<p>客服WeChat:sd245376</p>
|
||||
<p>客服Line:pekoyuyin</p>
|
||||
</div>
|
||||
<!-- 选择地区弹窗 -->
|
||||
<div class="area">
|
||||
<div class="area_in">
|
||||
<h3>請選擇储值地区</h3>
|
||||
</div>
|
||||
</div>
|
||||
<!-- 绑定信息失败弹窗 -->
|
||||
<div class="userNull">
|
||||
<div class="userNull_in">
|
||||
<p>用戶ID有誤，請更換ID後重試</p>
|
||||
<div class="but">確認</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- 二次确认充值对象弹窗弹窗 -->
|
||||
<div class="sure">
|
||||
<div class="sure_in">
|
||||
<h3>請確認儲值對象</h3>
|
||||
<img src="./images/logo.png" alt="">
|
||||
<p>昵稱我是昵稱</p>
|
||||
<b>Piko ID：123456</b>
|
||||
<div class="close">取消</div>
|
||||
<div class="ok">確認</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- 信息弹窗提示 -->
|
||||
<div class="toastMasge">
|
||||
<div class="toastMasge_in">
|
||||
<p>请打开PikoApp，并搜索该用户</p>
|
||||
<div class="but">確認</div>
|
||||
</div>
|
||||
</div>
|
||||
<script src="../../common/js/jquery-3.2.1.min.js"></script>
|
||||
<script src="../../common/js/flexible.js"></script>
|
||||
<script src="../../common/js/vconsole.min.js"></script>
|
||||
<script src="../../common/js/pingpp.js"></script>
|
||||
<script src="../../common/js/common2.js?v=8.0"></script>
|
||||
<script src="../../common/js/layer.js"></script>
|
||||
<script src="./js/index.js?v=1.3"></script>
|
||||
</body>
|
||||
|
||||
</html>
|
||||
</html>
|
||||
<script src="../../common/js/flexible.js"></script>
|
||||
<script src="../../common/js/jquery-3.2.1.min.js"></script>
|
||||
<script src="../../common/js/common2.js"></script>
|
||||
<script src="../../common/js/layer.js"></script>
|
||||
<script src="../../common/js/vconsole.min.js"></script>
|
||||
<script src="./js/index.js"></script>
|
||||
@@ -1,295 +1,428 @@
|
||||
var browser = checkVersion();
|
||||
const urlPrefix = getUrlPrefix();
|
||||
var getUrl = getQueryString();
|
||||
const urlTest = "https://api.pekolive.com";
|
||||
const urlProduct = "https://beta.api.pekolive.com";
|
||||
let arr = [];
|
||||
let arr2 = [];
|
||||
let countryCode = "";//选择区号
|
||||
var channelType;//参数值4：鉆石充值 || 参数值5：贵族vip充值 || 6：首充充值
|
||||
let erbanNo;//账号
|
||||
// 封裝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 openId;
|
||||
let countryCode = "";//选择区号
|
||||
let payChannel;//付款方式
|
||||
let paymentType;//付款码
|
||||
var host = window.location.host;
|
||||
// let successUrl = `${window.location.protocol}//${host}/peko/modules/pay/index.html`;//支付成功回调路径
|
||||
let paymentType;//付款类型
|
||||
let successUrl = window.location.href;//支付成功回调路径
|
||||
let uid;
|
||||
let modeOfPayment = false;//判断是否有选择支付方式
|
||||
let paymentAmount = false;//判断是否有选择付款金额
|
||||
var deviceId;//型号ID
|
||||
var channelType;//参数值4：鉆石充值 || 参数值5：贵族vip充值 || 6：首充充值
|
||||
var chargeGroupsArr = [];
|
||||
let uid;
|
||||
let openId;
|
||||
var textLock = true;
|
||||
var isRecommendArr = [];//记录是否推荐代充
|
||||
$(function () {
|
||||
if (EnvCheck() == 'test') {//degBug
|
||||
new VConsole();
|
||||
}
|
||||
getInfoFromClient();//请求依赖
|
||||
setTimeout(function () {
|
||||
listChargeAreaInfo();
|
||||
if (browser.app) {
|
||||
erbanNo == null;
|
||||
$('body .pay_method, html .pay_method').css('margin', '-4.5rem auto 0');
|
||||
$('body .header .user, html .header .user').hide();
|
||||
$('.but1').hide();
|
||||
$('.but2').show();
|
||||
erbanNo = null;
|
||||
$('.bindingBox').hide();
|
||||
} else {
|
||||
uid = pubInfo.uid;
|
||||
}
|
||||
channelType = getUrl.channelType;
|
||||
getArea();
|
||||
}, 100)
|
||||
function get_param (param) {
|
||||
var query = location.search.substring(1).split('&');
|
||||
for (var i = 0; i < query.length; i++) {
|
||||
var kv = query[i].split('=');
|
||||
if (kv[0] == param) {
|
||||
return kv[1];
|
||||
}
|
||||
}
|
||||
return null;
|
||||
}
|
||||
// if (get_param('countryCodeURL') == "TW") {
|
||||
// countryCode = "TW";
|
||||
// $('.header_top_right b').text(langReplace(localLang.demoModule.pop_up_in_p1));//'臺灣'
|
||||
// } else if (get_param('countryCodeURL') == "CN") {
|
||||
// if (EnvCheck() == 'test') {
|
||||
// if (host != "anan.uat.lecheng163.com") {
|
||||
// window.location.href = ifCNFun() + '/peko/modules/pay/index.html?countryCodeURL=CN'
|
||||
// }
|
||||
// } else {
|
||||
// if (host != "anan.lecheng163.com") {
|
||||
// window.location.href = ifCNFun() + '/peko/modules/pay/index.html?countryCodeURL=CN'
|
||||
// }
|
||||
// }
|
||||
// countryCode = "CN";
|
||||
// $('.header_top_right b').text(langReplace(localLang.demoModule.pop_up_in_p2));//'大陸'
|
||||
// }
|
||||
$('.logingActive').hide();
|
||||
if (browser.weixin) {
|
||||
$('.wx_skip').show();
|
||||
} else {
|
||||
$('.wx_skip').hide();
|
||||
}
|
||||
function getChargePageInfoForH5 (countryCode) {
|
||||
deviceId = get_param('deviceId')
|
||||
channelType = get_param('channelType');
|
||||
let is_CN = countryCode == "CN" ? true : false;
|
||||
networkRequest({
|
||||
type: 'GET',
|
||||
url: urlPrefix + '/charge/getChargePageInfoForH5',
|
||||
data: { countryCode, channelType, },
|
||||
success: function (res) {
|
||||
if (res.code == 200) {
|
||||
$('.methods').remove();
|
||||
$('.methods span').remove();
|
||||
console.log(res)
|
||||
let strT = '';
|
||||
let strB = '';
|
||||
// $('.methods0 p').text(res.data.chargeGroups[0].groupName ? res.data.chargeGroups[0].groupName : '');
|
||||
// $('.methods1 p').text(res.data.chargeGroups[1] ? res.data.chargeGroups[1].groupName : '');
|
||||
res.data.chargeGroups.forEach((res1, index1) => {
|
||||
arr = res.data.chargeGroups;
|
||||
// strB +=
|
||||
$('.pay_method .methodBox').append(`
|
||||
<div class="methods methods${index1}">
|
||||
<p style="width: 100%;color: #000;height: 0.8rem;display: none;">${res1.groupName}</p>
|
||||
</div>
|
||||
`);
|
||||
res.data.chargeGroups[index1].chargeWays.forEach((res, index) => {
|
||||
// arr[index] = res.chargeProds;
|
||||
// strT +=
|
||||
$(`.methods${index1}`).append(`
|
||||
<span index=${index} type='${index1}' desc="${res.desc}" paymentType="${res.paymentType}" payChannel="${res.payChannel}">
|
||||
<img src="${res.logo}" alt="">
|
||||
<p>${res.desc}</p>
|
||||
</span>
|
||||
`);
|
||||
});
|
||||
|
||||
});
|
||||
coloursFun(0, 0);
|
||||
// 选择支付方式按钮
|
||||
$('.methods span').click(function () {
|
||||
modeOfPayment = true;
|
||||
console.log($(this))
|
||||
paymentType = $(this).attr('paymentType');
|
||||
payChannel = $(this).attr('payChannel');
|
||||
// $(this).parent().addClass('active').siblings().removeClass('active');
|
||||
chargeProdId = '';
|
||||
$('.methods span').removeClass('active');
|
||||
$(this).addClass('active');
|
||||
coloursFun($(this).attr('index'), $(this).attr('type'));
|
||||
})
|
||||
console.log(countryCode)
|
||||
$('.but2').off();
|
||||
$('.but2').on('click', function () {
|
||||
console.log(countryCode)
|
||||
if (modeOfPayment == false) {
|
||||
logingFun("請選擇儲值方式")//''
|
||||
} else if (paymentAmount == false || chargeProdId == '') {
|
||||
logingFun("請選擇您的儲值金額")//''
|
||||
} else {
|
||||
console.log(countryCode)
|
||||
networkRequest({
|
||||
type: 'POST',
|
||||
url: urlPrefix + '/charge/apply2New',
|
||||
data: { erbanNo, chargeProdId, countryCode, openId, payChannel, paymentType, successUrl, uid, deviceId: deviceId },
|
||||
success: function (res) {
|
||||
if (res.code == 200) {
|
||||
console.log(res)
|
||||
$('.logingActive').text("請稍等");//""
|
||||
$('.logingActive').show();
|
||||
window.location.href = res.data.payInfo.mweb_url;
|
||||
} else {
|
||||
logingFun(res.message)
|
||||
}
|
||||
}
|
||||
});
|
||||
}
|
||||
})
|
||||
} else if (res.code == 1900) {
|
||||
countryCode = "TW";
|
||||
getChargePageInfoForH5(countryCode);
|
||||
})
|
||||
// 请求地区列表
|
||||
function getArea () {
|
||||
$('.area .area_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);
|
||||
$('.header .box .right i').text(res.data[0].areaName);
|
||||
if (countryCode == '') {
|
||||
countryCode = res.data[0].areaCode
|
||||
}
|
||||
}
|
||||
});
|
||||
}
|
||||
function listChargeAreaInfo () {
|
||||
networkRequest({
|
||||
type: 'GET',
|
||||
url: urlPrefix + '/charge/listChargeAreaInfo',
|
||||
success: function (res) {
|
||||
if (res.code == 200) {
|
||||
var str = ``;
|
||||
var countryCodeIndexs = 0;
|
||||
res.data.forEach((res, i) => {
|
||||
str += `
|
||||
<p countryCode="${res.areaCode}" id="pop_up_in_p2">${res.areaName}</p>
|
||||
`
|
||||
if (getUrl.countryCode && res.areaCode == getUrl.countryCode) {
|
||||
countryCodeIndexs = i;
|
||||
}
|
||||
})
|
||||
if (getUrl.countryCode) {
|
||||
$('.header_top_right b').text(res.data[countryCodeIndexs].areaName);
|
||||
countryCode = res.data[countryCodeIndexs].areaCode;
|
||||
} else {
|
||||
$('.header_top_right b').text(res.data[0].areaName);
|
||||
countryCode = res.data[0].areaCode
|
||||
}
|
||||
$('.pop_up_in').append(str)
|
||||
getChargePageInfoForH5(countryCode);
|
||||
successUrl = updateQueryStringParameter(window.location.href, "countryCode", countryCode)
|
||||
console.log(successUrl);
|
||||
$('.pop_up_in p').click(function () {
|
||||
$('.header_top_right b').text($(this).text());
|
||||
countryCode = $(this).attr("countryCode");
|
||||
$('.pop_up').hide();
|
||||
// if (countryCode == "CN") {
|
||||
// if (EnvCheck() == 'test') {
|
||||
// if (host != "anan.uat.lecheng163.com") {
|
||||
// window.location.href = ifCNFun() + '/peko/modules/pay/index.html?countryCodeURL=CN'
|
||||
// }
|
||||
// } else {
|
||||
// if (host != "anan.lecheng163.com") {
|
||||
// window.location.href = ifCNFun() + '/peko/modules/pay/index.html?countryCodeURL=CN'
|
||||
// }
|
||||
// }
|
||||
// } else {
|
||||
// window.location.href = urlPrefix + '/peko/modules/pay/index.html?countryCodeURL=' + countryCode;
|
||||
// }
|
||||
successUrl = updateQueryStringParameter(window.location.href, "countryCode", countryCode)
|
||||
console.log(successUrl);
|
||||
getChargePageInfoForH5(countryCode);
|
||||
})
|
||||
if (isRecommendArr[0] == 1) {
|
||||
$('.tabs i').show();
|
||||
} else {
|
||||
logingFun(res.message)
|
||||
$('.tabs i').hide();
|
||||
}
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
$('.header_top_right').click(function () {
|
||||
$('.pop_up').show();
|
||||
});
|
||||
|
||||
$('.pop_up').click(function () {
|
||||
$('.pop_up').hide();
|
||||
})
|
||||
|
||||
function coloursFun (index, type) {
|
||||
$('.pay_number .number span').remove();
|
||||
var str = '';
|
||||
console.log(arr[type]);
|
||||
arr[type].chargeWays[index].chargeProds.forEach(res => {//金幣
|
||||
// <b>${res.chargeGoldNum.toLocaleString()} ${"金幣"}</b>
|
||||
str += `
|
||||
<span channel="${res.channel}" chargeProdId="${res.chargeProdId}" seqNo="${res.seqNo}">
|
||||
<b>${res.prodName}</b>
|
||||
<i>${res.currencySign} ${res.money.toLocaleString()}</i>
|
||||
</span>
|
||||
`
|
||||
})
|
||||
$('.pay_number .number').append(str);
|
||||
// 选择支付金额按钮
|
||||
$('.pay_number .number span').click(function () {
|
||||
paymentAmount = true;
|
||||
console.log($(this));
|
||||
chargeProdId = $(this).attr('chargeProdId');
|
||||
$(this).addClass('active').siblings().removeClass('active');
|
||||
})
|
||||
}
|
||||
$('.user').on('input', function () {
|
||||
var val = $(this).val();
|
||||
// console.log(val)
|
||||
if (isNumber(val)) {
|
||||
console.log('不是数字')
|
||||
$(this).val("");
|
||||
al = $(this).val();
|
||||
$('.but1').show();
|
||||
$('.but2').hide();
|
||||
} else {
|
||||
if (val != '') {
|
||||
$('.but1').hide();
|
||||
$('.but2').show();
|
||||
erbanNo = val;
|
||||
getChargePageInfoForH5();
|
||||
} else {
|
||||
$('.but1').show();
|
||||
$('.but2').hide();
|
||||
hideLoading(layerIndex);
|
||||
toastMsg(res.message);
|
||||
}
|
||||
},
|
||||
error (err) {
|
||||
hideLoading(layerIndex);
|
||||
toastMsg('網絡錯誤');
|
||||
}
|
||||
})
|
||||
function isNumber (string) {
|
||||
var r = string.match(/^[0-9]*$/);
|
||||
if (r == null) {
|
||||
return true
|
||||
} else {
|
||||
return 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);
|
||||
}
|
||||
function logingFun (res) {
|
||||
$('.logingActive').text(res.message == undefined ? res : res.message);
|
||||
$('.logingActive').show();
|
||||
setTimeout(function () {
|
||||
$('.logingActive').hide();
|
||||
}, 1500)
|
||||
}
|
||||
function ifCNFun () {
|
||||
var envChecks;
|
||||
const url = window.location.href;
|
||||
console.log(url)
|
||||
if (!url) return undefined;
|
||||
if (url.match(/uat/) || url.match(/127.0.0.1:/) || (url.match(/beta.api/))) { envChecks = "test" } else { envChecks = "live" };
|
||||
if (!envChecks) return undefined;
|
||||
return envChecks === 'live' ? urlProduct : urlTest;
|
||||
// 处理充值档位
|
||||
$('.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 () {
|
||||
showLoading();
|
||||
networkRequest({
|
||||
type: 'POST',
|
||||
url: urlPrefix + '/charge/apply2New',
|
||||
data: { erbanNo, chargeProdId, countryCode, openId, payChannel, paymentType, successUrl, uid, deviceId: deviceId },
|
||||
success: function (res) {
|
||||
if (res.code == 200) {
|
||||
window.location.href = res.data.payInfo.mweb_url;
|
||||
} else {
|
||||
toastMsg(res.message);
|
||||
}
|
||||
hideLoading(layerIndex);
|
||||
},
|
||||
error (err) {
|
||||
hideLoading(layerIndex);
|
||||
toastMsg('網絡錯誤');
|
||||
}
|
||||
|
||||
});
|
||||
}
|
||||
// 确认是否已读协议按钮
|
||||
$('.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');
|
||||
}
|
||||
})
|
||||
function updateQueryStringParameter (uri, key, value) {
|
||||
if (!value) {
|
||||
return uri;
|
||||
// 确认充值按钮
|
||||
$('.page1 .payBut').click(function () {
|
||||
if (!erbanNo && !browser.app) {
|
||||
toastMsg('請先綁定Piko ID')
|
||||
return
|
||||
}
|
||||
var re = new RegExp("([?&])" + key + "=.*?(&|$)", "i");
|
||||
var separator = uri.indexOf('?') !== -1 ? "&" : "?";
|
||||
if (uri.match(re)) {
|
||||
return uri.replace(re, '$1' + key + "=" + value + '$2');
|
||||
if (!payChannel) {
|
||||
toastMsg('請選擇儲值方式')
|
||||
return
|
||||
}
|
||||
else {
|
||||
return uri + separator + key + "=" + value;
|
||||
if (!chargeProdId) {
|
||||
toastMsg('請選擇您的儲值金額')
|
||||
return
|
||||
}
|
||||
}
|
||||
if (textLock == false) {
|
||||
toastMsg('請先勾選充值協議')
|
||||
return
|
||||
}
|
||||
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(ture);
|
||||
}
|
||||
})
|
||||
// 确定绑定按钮
|
||||
$('.bindingBox .binding .but').click(function () {
|
||||
if ($('.bindingBox .binding input').val() == '') {
|
||||
toastMsg('請輸入平台號');
|
||||
return
|
||||
}
|
||||
showLoading();
|
||||
networkRequest({
|
||||
type: 'GET',
|
||||
url: urlPrefix + '/user/h5/getSimpleUser',
|
||||
data: { erbanNo: $('.bindingBox .binding input').val(), },
|
||||
success: function (res) {
|
||||
if (res.code == 200) {
|
||||
$('.bindingBox').hide();
|
||||
$('.bindingBox .binding input').val('');
|
||||
$('.userinfo img').attr('src', res.data.avatar);
|
||||
$('.userinfo .name').text(res.data.nick);
|
||||
$('.userinfo .id').text(`Piko ID: ${res.data.erbanNo}`);
|
||||
$('.userinfo').show();
|
||||
erbanNo = res.data.erbanNo;
|
||||
} 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();
|
||||
}
|
||||
return;
|
||||
})
|
||||
// 切换id用户按钮
|
||||
$('.userinfo .but').click(function () {
|
||||
erbanNo = 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.lenght <= 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);
|
||||
})
|
||||
// 代充联系按钮
|
||||
$('.page2 ul').on('click', 'li .but', function () {
|
||||
var erbanNo = $(this).attr('erbanNo');
|
||||
var uid = $(this).attr('uid');
|
||||
if (browser.app) {
|
||||
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);
|
||||
apply2New();
|
||||
})
|
||||
|
||||
358
view/peko/modules/pay1/css/index.css
Normal file
358
view/peko/modules/pay1/css/index.css
Normal file
@@ -0,0 +1,358 @@
|
||||
@charset "UTF-8";
|
||||
body,
|
||||
html {
|
||||
height: 100%;
|
||||
background: #F3F5FA;
|
||||
}
|
||||
body .logingActive,
|
||||
html .logingActive {
|
||||
position: fixed;
|
||||
left: 50%;
|
||||
top: 50%;
|
||||
transform: translate(-50%, -50%);
|
||||
width: 100%;
|
||||
height: 1rem;
|
||||
line-height: 1rem;
|
||||
font-size: 0.48rem;
|
||||
text-align: center;
|
||||
border-radius: 0.1333333333rem;
|
||||
color: #fff;
|
||||
background: rgba(0, 0, 0, 0.6);
|
||||
z-index: 999;
|
||||
padding: 0 0.2rem;
|
||||
display: none;
|
||||
}
|
||||
body .wx_skip,
|
||||
html .wx_skip {
|
||||
position: fixed;
|
||||
left: 0;
|
||||
top: 0;
|
||||
bottom: 0;
|
||||
right: 0;
|
||||
background: rgba(0, 0, 0, 0.8);
|
||||
z-index: 9999999999;
|
||||
display: none;
|
||||
}
|
||||
body .wx_skip img,
|
||||
html .wx_skip img {
|
||||
width: 80%;
|
||||
height: 5.373333rem;
|
||||
position: absolute;
|
||||
left: 50%;
|
||||
top: 5%;
|
||||
transform: translateX(-50%);
|
||||
}
|
||||
body .header,
|
||||
html .header {
|
||||
width: 100%;
|
||||
height: 6.6666666667rem;
|
||||
background: #000;
|
||||
margin: 0 auto;
|
||||
background: linear-gradient(180deg, #F2E0FF 0%, #FAF7FE 100%);
|
||||
}
|
||||
body .header .header_top,
|
||||
html .header .header_top {
|
||||
width: 100%;
|
||||
height: 1.1733333333rem;
|
||||
line-height: 1.1733333333rem;
|
||||
box-sizing: border-box;
|
||||
padding: 0 0.4rem;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
}
|
||||
body .header .header_top .header_top_left,
|
||||
html .header .header_top .header_top_left {
|
||||
min-width: 4rem;
|
||||
height: 100%;
|
||||
position: relative;
|
||||
margin-left: 0.8rem;
|
||||
}
|
||||
body .header .header_top .header_top_left img,
|
||||
html .header .header_top .header_top_left img {
|
||||
position: absolute;
|
||||
width: 0.8rem;
|
||||
height: 0.8rem;
|
||||
top: 50%;
|
||||
transform: translateY(-50%);
|
||||
left: -0.9333333333rem;
|
||||
}
|
||||
body .header .header_top .header_top_left b,
|
||||
html .header .header_top .header_top_left b {
|
||||
color: #333;
|
||||
font-size: 0.48rem;
|
||||
}
|
||||
body .header .header_top .header_top_right,
|
||||
html .header .header_top .header_top_right {
|
||||
min-width: 0.6666666667rem;
|
||||
height: 100%;
|
||||
position: relative;
|
||||
}
|
||||
body .header .header_top .header_top_right img,
|
||||
html .header .header_top .header_top_right img {
|
||||
position: absolute;
|
||||
width: 0.5866666667rem;
|
||||
height: 0.5866666667rem;
|
||||
top: 50%;
|
||||
transform: translateY(-50%);
|
||||
left: -0.72rem;
|
||||
}
|
||||
body .header .header_top .header_top_right b,
|
||||
html .header .header_top .header_top_right b {
|
||||
color: #1F1A4E;
|
||||
font-size: 0.3733333333rem;
|
||||
}
|
||||
body .header .user,
|
||||
html .header .user {
|
||||
background: #FFFFFF;
|
||||
outline: none;
|
||||
border: none;
|
||||
width: 8.9333333333rem;
|
||||
height: 0.8533333333rem;
|
||||
border-radius: 0.8533333333rem;
|
||||
margin: 0.5333333333rem auto 0;
|
||||
display: block;
|
||||
box-sizing: border-box;
|
||||
padding: 0 0.1333333333rem;
|
||||
font-size: 0.4rem;
|
||||
padding: 0rem 0.4rem;
|
||||
}
|
||||
body .pay_method,
|
||||
html .pay_method {
|
||||
width: 9.2rem;
|
||||
min-height: 3rem;
|
||||
background: #fff;
|
||||
box-shadow: 0px 0px 0.3733333333rem 0px rgba(0, 0, 0, 0.1);
|
||||
margin: -3.5rem auto 0;
|
||||
border-radius: 0.1333333333rem;
|
||||
box-sizing: border-box;
|
||||
padding: 0.3733333333rem 0.2666666667rem;
|
||||
}
|
||||
body .pay_method p,
|
||||
html .pay_method p {
|
||||
font-size: 0.3733333333rem;
|
||||
color: #999;
|
||||
width: 100%;
|
||||
height: 0.8rem;
|
||||
}
|
||||
body .pay_method .methodBox,
|
||||
html .pay_method .methodBox {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
body .pay_method .methods,
|
||||
html .pay_method .methods {
|
||||
width: 30%;
|
||||
min-height: 2.5rem;
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
padding-left: 0.285rem;
|
||||
margin-bottom: 0.1rem;
|
||||
}
|
||||
body .pay_method .methods span,
|
||||
html .pay_method .methods span {
|
||||
float: left;
|
||||
display: block;
|
||||
width: 2.5rem;
|
||||
height: 1.7333333333rem;
|
||||
background: #F0F5F6;
|
||||
border-radius: 0.16rem;
|
||||
position: relative;
|
||||
margin-bottom: 1rem;
|
||||
margin-right: 0.3rem;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
body .pay_method .methods span img,
|
||||
html .pay_method .methods span img {
|
||||
position: absolute;
|
||||
left: 50%;
|
||||
top: 50%;
|
||||
transform: translate(-50%, -50%);
|
||||
width: 1.8rem;
|
||||
height: 1.5rem;
|
||||
border-radius: 50%;
|
||||
overflow: hidden;
|
||||
}
|
||||
body .pay_method .methods span p,
|
||||
html .pay_method .methods span p {
|
||||
color: #B3B3C3;
|
||||
font-size: 0.32rem;
|
||||
width: 100%;
|
||||
text-align: center;
|
||||
position: absolute;
|
||||
left: 0;
|
||||
top: 1.9rem;
|
||||
}
|
||||
body .pay_method .methods .active,
|
||||
html .pay_method .methods .active {
|
||||
background: url(../images/jvxing.png) no-repeat;
|
||||
background-size: 100% 100%;
|
||||
}
|
||||
body .pay_method .methods .active p,
|
||||
html .pay_method .methods .active p {
|
||||
color: #9168FA;
|
||||
}
|
||||
body .pay_number,
|
||||
html .pay_number {
|
||||
width: 9.2rem;
|
||||
min-height: 8.3333333333rem;
|
||||
background: #fff;
|
||||
box-shadow: 0px 0px 0.3733333333rem 0px rgba(0, 0, 0, 0.1);
|
||||
margin: 0.5333333333rem auto 1.3333333333rem;
|
||||
padding: 0.2666666667rem 0.2666666667rem;
|
||||
box-sizing: border-box;
|
||||
border-radius: 0.1333333333rem;
|
||||
}
|
||||
body .pay_number p,
|
||||
html .pay_number p {
|
||||
width: 100%;
|
||||
height: 0.8rem;
|
||||
color: #999;
|
||||
font-size: 0.3733333333rem;
|
||||
}
|
||||
body .pay_number .number,
|
||||
html .pay_number .number {
|
||||
width: 100%;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
body .pay_number .number span,
|
||||
html .pay_number .number span {
|
||||
display: block;
|
||||
width: 4.1866666667rem;
|
||||
height: 2.24rem;
|
||||
background: #F0F5F6;
|
||||
border-radius: 0.16rem;
|
||||
position: relative;
|
||||
margin-bottom: 0.5333333333rem;
|
||||
}
|
||||
body .pay_number .number span b,
|
||||
html .pay_number .number span b {
|
||||
position: absolute;
|
||||
color: #333;
|
||||
font-size: 0.4533333333rem;
|
||||
left: 0.2666666667rem;
|
||||
top: 0.2666666667rem;
|
||||
}
|
||||
body .pay_number .number span i,
|
||||
html .pay_number .number span i {
|
||||
position: absolute;
|
||||
color: #333;
|
||||
font-size: 0.32rem;
|
||||
right: 0.2666666667rem;
|
||||
bottom: 0.2666666667rem;
|
||||
font-style: normal;
|
||||
}
|
||||
body .pay_number .number .active,
|
||||
html .pay_number .number .active {
|
||||
background: url(../images/active.png) no-repeat;
|
||||
background-size: 100% 100%;
|
||||
}
|
||||
body .pay_number .but1,
|
||||
html .pay_number .but1 {
|
||||
color: #B3B3C3;
|
||||
font-size: 0.4266666667rem;
|
||||
width: 8.1066666667rem;
|
||||
height: 1.2266666667rem;
|
||||
border-radius: 1.4933333333rem;
|
||||
line-height: 1.2266666667rem;
|
||||
margin: 0 auto;
|
||||
text-align: center;
|
||||
background: #E6E6F0;
|
||||
}
|
||||
body .pay_number .but2,
|
||||
html .pay_number .but2 {
|
||||
color: #fff;
|
||||
font-size: 0.4266666667rem;
|
||||
width: 8.1066666667rem;
|
||||
height: 1.2266666667rem;
|
||||
border-radius: 1.4933333333rem;
|
||||
line-height: 1.2266666667rem;
|
||||
margin: 0 auto;
|
||||
text-align: center;
|
||||
background: linear-gradient(255deg, #CC66FF 1%, #9CB3FF 52%, #13E2F5 100%);
|
||||
display: none;
|
||||
}
|
||||
body .pop_up,
|
||||
html .pop_up {
|
||||
position: fixed;
|
||||
left: 0;
|
||||
top: 0;
|
||||
bottom: 0;
|
||||
right: 0;
|
||||
background: rgba(0, 0, 0, 0.6);
|
||||
z-index: 99;
|
||||
display: none;
|
||||
}
|
||||
body .pop_up .pop_up_in,
|
||||
html .pop_up .pop_up_in {
|
||||
position: absolute;
|
||||
left: 50%;
|
||||
top: 50%;
|
||||
transform: translate(-50%, -50%);
|
||||
width: 8rem;
|
||||
min-height: 2.933333rem;
|
||||
background: #fff;
|
||||
border-radius: 0.32rem;
|
||||
text-align: center;
|
||||
font-size: 0.4266666667rem;
|
||||
color: #333;
|
||||
}
|
||||
body .pop_up .pop_up_in b,
|
||||
html .pop_up .pop_up_in b {
|
||||
width: 100%;
|
||||
height: 1.5466666667rem;
|
||||
line-height: 1.5466666667rem;
|
||||
}
|
||||
body .pop_up .pop_up_in p,
|
||||
html .pop_up .pop_up_in p {
|
||||
width: 100%;
|
||||
height: 1.0666666667rem;
|
||||
line-height: 1.0666666667rem;
|
||||
border-top: 1px solid #ccc;
|
||||
}
|
||||
body .stance,
|
||||
html .stance {
|
||||
position: fixed;
|
||||
left: 0;
|
||||
top: 0;
|
||||
bottom: 0;
|
||||
right: 0;
|
||||
background: #fff;
|
||||
z-index: 999;
|
||||
display: none;
|
||||
}
|
||||
body .stance .picture,
|
||||
html .stance .picture {
|
||||
width: 8rem;
|
||||
height: 8rem;
|
||||
background: url(../images/null.png) no-repeat;
|
||||
background-size: 100% 100%;
|
||||
position: absolute;
|
||||
left: 50%;
|
||||
top: 40%;
|
||||
transform: translate(-50%, -50%);
|
||||
position: relative;
|
||||
}
|
||||
body .stance .picture span,
|
||||
html .stance .picture span {
|
||||
font-size: 0.64rem;
|
||||
color: #999999;
|
||||
position: absolute;
|
||||
left: 50%;
|
||||
bottom: -1.5rem;
|
||||
transform: translateX(-56%);
|
||||
width: 100%;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
input::-webkit-input-placeholder {
|
||||
/* placeholder颜色 */
|
||||
color: #929198;
|
||||
/* placeholder字体大小 */
|
||||
font-size: 0.32rem;
|
||||
/* placeholder位置 */
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
/*# sourceMappingURL=index.css.map */
|
||||
377
view/peko/modules/pay1/css/index.scss
Normal file
377
view/peko/modules/pay1/css/index.scss
Normal file
@@ -0,0 +1,377 @@
|
||||
@import '../../../common/css/flex.scss';
|
||||
|
||||
@function px2rem($px, $rem:75) {
|
||||
@return $px / $rem+rem;
|
||||
}
|
||||
|
||||
body,
|
||||
html {
|
||||
height: 100%;
|
||||
background: #F3F5FA;
|
||||
|
||||
.logingActive {
|
||||
position: fixed;
|
||||
left: 50%;
|
||||
top: 50%;
|
||||
transform: translate(-50%, -50%);
|
||||
// min-width: 2rem;
|
||||
width: 100%;
|
||||
height: 1rem;
|
||||
line-height: 1rem;
|
||||
font-size: px2rem(36, );
|
||||
text-align: center;
|
||||
border-radius: px2rem(10, );
|
||||
color: #fff;
|
||||
background: rgba(0, 0, 0, .6);
|
||||
z-index: 999;
|
||||
padding: 0 px2rem(15, );
|
||||
display: none;
|
||||
}
|
||||
|
||||
.wx_skip {
|
||||
position: fixed;
|
||||
left: 0;
|
||||
top: 0;
|
||||
bottom: 0;
|
||||
right: 0;
|
||||
background: rgba(0, 0, 0, .8);
|
||||
z-index: 9999999999;
|
||||
display: none;
|
||||
|
||||
img {
|
||||
width: 80%;
|
||||
height: 5.373333rem;
|
||||
position: absolute;
|
||||
left: 50%;
|
||||
top: 5%;
|
||||
transform: translateX(-50%);
|
||||
}
|
||||
}
|
||||
|
||||
.header {
|
||||
width: 100%;
|
||||
height: px2rem(500, );
|
||||
background: #000;
|
||||
margin: 0 auto;
|
||||
// background: url(../images/header.png) no-repeat;
|
||||
// background-size: 100% 100%;
|
||||
background: linear-gradient(180deg, #F2E0FF 0%, #FAF7FE 100%);;
|
||||
|
||||
.header_top {
|
||||
width: 100%;
|
||||
height: px2rem(88, );
|
||||
line-height: px2rem(88, );
|
||||
box-sizing: border-box;
|
||||
padding: 0 px2rem(30, );
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
|
||||
.header_top_left {
|
||||
min-width: px2rem(300, );
|
||||
height: 100%;
|
||||
position: relative;
|
||||
margin-left: 0.8rem;
|
||||
|
||||
img {
|
||||
position: absolute;
|
||||
width: px2rem(60, );
|
||||
height: px2rem(60, );
|
||||
top: 50%;
|
||||
transform: translateY(-50%);
|
||||
left: px2rem(-70, );
|
||||
}
|
||||
|
||||
b {
|
||||
color: #333;
|
||||
font-size: px2rem(36, );
|
||||
}
|
||||
}
|
||||
|
||||
.header_top_right {
|
||||
min-width: px2rem(50, );
|
||||
height: 100%;
|
||||
position: relative;
|
||||
|
||||
img {
|
||||
position: absolute;
|
||||
width: px2rem(44, );
|
||||
height: px2rem(44, );
|
||||
top: 50%;
|
||||
transform: translateY(-50%);
|
||||
left: px2rem(-54, );
|
||||
}
|
||||
|
||||
b {
|
||||
color: #1F1A4E;
|
||||
font-size: px2rem(28, );
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.user {
|
||||
background: #FFFFFF;
|
||||
outline: none;
|
||||
border: none;
|
||||
width: px2rem(670, );
|
||||
height: px2rem(64, );
|
||||
border-radius: px2rem(64, );
|
||||
margin: px2rem(40, ) auto 0;
|
||||
display: block;
|
||||
box-sizing: border-box;
|
||||
padding: 0 px2rem(10, );
|
||||
// text-align: center;
|
||||
font-size: px2rem(30, );
|
||||
padding: px2rem(0, ) px2rem(30, );
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
.pay_method {
|
||||
width: px2rem(690, );
|
||||
min-height: 3rem;
|
||||
background: #fff;
|
||||
box-shadow: 0px 0px px2rem(28, ) 0px rgba(0, 0, 0, 0.1);
|
||||
margin: -3.5rem auto 0;
|
||||
border-radius: px2rem(10, );
|
||||
box-sizing: border-box;
|
||||
padding: px2rem(28, ) px2rem(20, );
|
||||
|
||||
p {
|
||||
font-size: px2rem(28, );
|
||||
color: #999;
|
||||
width: 100%;
|
||||
height: px2rem(60, );
|
||||
}
|
||||
|
||||
.methodBox {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
|
||||
.methods {
|
||||
width: 30%;
|
||||
min-height: 2.5rem;
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
// justify-content: start;
|
||||
padding-left: 0.285rem;
|
||||
margin-bottom: 0.1rem;
|
||||
|
||||
|
||||
span {
|
||||
float: left;
|
||||
display: block;
|
||||
width: 2.5rem;
|
||||
height: px2rem(130, );
|
||||
background: #F0F5F6;
|
||||
border-radius: px2rem(12, );
|
||||
position: relative;
|
||||
// margin-bottom: px2rem(52, );
|
||||
margin-bottom: 1rem;
|
||||
margin-right: 0.3rem;
|
||||
box-sizing: border-box;
|
||||
|
||||
img {
|
||||
position: absolute;
|
||||
left: 50%;
|
||||
top: 50%;
|
||||
transform: translate(-50%, -50%);
|
||||
width: 1.8rem;
|
||||
height: 1.5rem;
|
||||
border-radius: 50%;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
p {
|
||||
color: #B3B3C3;
|
||||
font-size: px2rem(24, );
|
||||
width: 100%;
|
||||
text-align: center;
|
||||
position: absolute;
|
||||
left: 0;
|
||||
top: 1.9rem;
|
||||
}
|
||||
}
|
||||
|
||||
.active {
|
||||
// border: 2px solid #BB43FF;
|
||||
// box-sizing: border-box;
|
||||
background: url(../images/jvxing.png) no-repeat;
|
||||
background-size: 100% 100%;
|
||||
p{
|
||||
color: #9168FA;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.pay_number {
|
||||
width: px2rem(690, );
|
||||
min-height: px2rem(625, );
|
||||
background: #fff;
|
||||
box-shadow: 0px 0px px2rem(28, ) 0px rgba(0, 0, 0, 0.1);
|
||||
margin: px2rem(40, ) auto px2rem(100, );
|
||||
padding: px2rem(20, ) px2rem(20, );
|
||||
box-sizing: border-box;
|
||||
border-radius: px2rem(10, );
|
||||
|
||||
p {
|
||||
width: 100%;
|
||||
height: px2rem(60, );
|
||||
color: #999;
|
||||
font-size: px2rem(28, );
|
||||
}
|
||||
|
||||
.number {
|
||||
width: 100%;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
flex-wrap: wrap;
|
||||
|
||||
span {
|
||||
display: block;
|
||||
width: px2rem(314, );
|
||||
height: px2rem(168, );
|
||||
// background: url(../images/noActive.png) no-repeat;
|
||||
// background-size: 100% 100%;
|
||||
background: #F0F5F6;
|
||||
border-radius: px2rem(12, );
|
||||
position: relative;
|
||||
margin-bottom: px2rem(40, );
|
||||
|
||||
b {
|
||||
position: absolute;
|
||||
color: #333;
|
||||
font-size: px2rem(34, );
|
||||
left: px2rem(20, );
|
||||
top: px2rem(20, );
|
||||
}
|
||||
|
||||
i {
|
||||
position: absolute;
|
||||
color: #333;
|
||||
font-size: px2rem(24, );
|
||||
right: px2rem(20, );
|
||||
bottom: px2rem(20, );
|
||||
font-style: normal;
|
||||
}
|
||||
}
|
||||
|
||||
.active {
|
||||
background: url(../images/active.png) no-repeat;
|
||||
background-size: 100% 100%;
|
||||
}
|
||||
}
|
||||
|
||||
.but1 {
|
||||
color: #B3B3C3;
|
||||
font-size: px2rem(32, );
|
||||
width: px2rem(608, );
|
||||
height: px2rem(92, );
|
||||
border-radius: px2rem(112, );
|
||||
line-height: px2rem(92, );
|
||||
margin: 0 auto;
|
||||
text-align: center;
|
||||
// background: url('../images/noBut.png') no-repeat;
|
||||
// background-size: 100% 100%;
|
||||
background: #E6E6F0;
|
||||
}
|
||||
|
||||
.but2 {
|
||||
color: #fff;
|
||||
font-size: px2rem(32, );
|
||||
width: px2rem(608, );
|
||||
height: px2rem(92, );
|
||||
border-radius: px2rem(112, );
|
||||
line-height: px2rem(92, );
|
||||
margin: 0 auto;
|
||||
text-align: center;
|
||||
// background: url('../images/but.png') no-repeat;
|
||||
// background-size: 100% 100%;
|
||||
background: linear-gradient(255deg, #CC66FF 1%, #9CB3FF 52%, #13E2F5 100%);;
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
.pop_up {
|
||||
position: fixed;
|
||||
left: 0;
|
||||
top: 0;
|
||||
bottom: 0;
|
||||
right: 0;
|
||||
background: rgba(0, 0, 0, .6);
|
||||
z-index: 99;
|
||||
display: none;
|
||||
|
||||
.pop_up_in {
|
||||
position: absolute;
|
||||
left: 50%;
|
||||
top: 50%;
|
||||
transform: translate(-50%, -50%);
|
||||
width: px2rem(600, );
|
||||
min-height: 2.933333rem;
|
||||
background: #fff;
|
||||
border-radius: px2rem(24, );
|
||||
text-align: center;
|
||||
font-size: px2rem(32, );
|
||||
color: #333;
|
||||
|
||||
b {
|
||||
width: 100%;
|
||||
height: px2rem(116, );
|
||||
line-height: px2rem(116, );
|
||||
}
|
||||
|
||||
p {
|
||||
width: 100%;
|
||||
height: px2rem(80, );
|
||||
line-height: px2rem(80, );
|
||||
border-top: 1px solid #ccc;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.stance {
|
||||
position: fixed;
|
||||
left: 0;
|
||||
top: 0;
|
||||
bottom: 0;
|
||||
right: 0;
|
||||
background: #fff;
|
||||
z-index: 999;
|
||||
display: none;
|
||||
|
||||
.picture {
|
||||
width: px2rem(600, );
|
||||
height: px2rem(600, );
|
||||
background: url(../images/null.png) no-repeat;
|
||||
background-size: 100% 100%;
|
||||
position: absolute;
|
||||
left: 50%;
|
||||
top: 40%;
|
||||
transform: translate(-50%, -50%);
|
||||
position: relative;
|
||||
|
||||
span {
|
||||
font-size: 0.64rem;
|
||||
color: #999999;
|
||||
position: absolute;
|
||||
left: 50%;
|
||||
bottom: -1.5rem;
|
||||
transform: translateX(-56%);
|
||||
width: 100%;
|
||||
white-space: nowrap;
|
||||
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
input::-webkit-input-placeholder {
|
||||
/* placeholder颜色 */
|
||||
color: #929198;
|
||||
/* placeholder字体大小 */
|
||||
font-size: px2rem(24, );
|
||||
/* placeholder位置 */
|
||||
text-align: center;
|
||||
}
|
||||
|
Before Width: | Height: | Size: 9.6 KiB After Width: | Height: | Size: 9.6 KiB |
|
Before Width: | Height: | Size: 2.0 KiB After Width: | Height: | Size: 2.0 KiB |
BIN
view/peko/modules/pay1/images/header.png
Normal file
BIN
view/peko/modules/pay1/images/header.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 2.6 KiB |
|
Before Width: | Height: | Size: 11 KiB After Width: | Height: | Size: 11 KiB |
BIN
view/peko/modules/pay1/images/logo.png
Normal file
BIN
view/peko/modules/pay1/images/logo.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 54 KiB |
|
Before Width: | Height: | Size: 322 B After Width: | Height: | Size: 322 B |
|
Before Width: | Height: | Size: 2.5 KiB After Width: | Height: | Size: 2.5 KiB |
|
Before Width: | Height: | Size: 1.8 KiB After Width: | Height: | Size: 1.8 KiB |
BIN
view/peko/modules/pay1/images/null.png
Normal file
BIN
view/peko/modules/pay1/images/null.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 20 KiB |
|
Before Width: | Height: | Size: 15 KiB After Width: | Height: | Size: 15 KiB |
|
Before Width: | Height: | Size: 5.0 KiB After Width: | Height: | Size: 5.0 KiB |
|
Before Width: | Height: | Size: 5.3 KiB After Width: | Height: | Size: 5.3 KiB |
|
Before Width: | Height: | Size: 5.1 KiB After Width: | Height: | Size: 5.1 KiB |
100
view/peko/modules/pay1/index.html
Normal file
100
view/peko/modules/pay1/index.html
Normal file
@@ -0,0 +1,100 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<title id="pay_title">充值</title>
|
||||
<meta name="viewport"
|
||||
content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
|
||||
<meta name="apple-mobile-web-app-capable" content="yes">
|
||||
<meta name="apple-mobile-web-app-status-bar-style" content="black">
|
||||
<meta name="format-detection" content="telephone=no">
|
||||
<meta http-equiv="pragma" content="no-cache">
|
||||
<meta http-equiv="cache-control" content="no-cache">
|
||||
<meta http-equiv="expires" content="">
|
||||
<script src="../../common/js/flexible.js"></script>
|
||||
<link rel="stylesheet" href="../../common/css/reset.css">
|
||||
<link rel="stylesheet" href="css/index.css?v=1.1">
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<div class="logingActive" style="font-size: 0.35rem;"></div>
|
||||
<div class="header">
|
||||
<!-- 头部 -->
|
||||
<div class="header_top">
|
||||
<div class="header_top_left">
|
||||
<img src="./images/logo.png" alt=""><b id="pay_header_t_l">piko儲值中心</b>
|
||||
</div>
|
||||
<div class="header_top_right">
|
||||
<img src="./images/more.png" alt=""><b></b>
|
||||
</div>
|
||||
</div>
|
||||
<!-- 输入框 -->
|
||||
<input class="user" type="text" id="pay_user_id" placeholder="請輸入piko賬號ID">
|
||||
</div>
|
||||
<!-- 选择支付方式 -->
|
||||
<div class="pay_method">
|
||||
<p id="pay_method_p">请选择儲值方式:</p>
|
||||
<!-- <div class="methods methods0">
|
||||
<p style="width: 100%;color: #000;height: 0.5rem;"></p>
|
||||
<span>
|
||||
<img src="" alt="">
|
||||
<p>迪迦奥特曼</p>
|
||||
</span>
|
||||
</div> -->
|
||||
<!-- <div class="methods methods1">
|
||||
<p style="width: 100%;color: #000;height: 0.5rem;"></p>
|
||||
<span>
|
||||
<img src="" alt="">
|
||||
<p>迪迦奥特曼</p>
|
||||
</span>
|
||||
</div> -->
|
||||
<div class="methodBox"></div>
|
||||
</div>
|
||||
<!-- 选择充值金额 -->
|
||||
<div class="pay_number">
|
||||
<p id="pay_number_sd">請選擇您的儲值金額:</p>
|
||||
<div class="number">
|
||||
<!-- <span class="active">
|
||||
<b>100,000 金幣</b>
|
||||
<i>NT$ 1,000</i>
|
||||
</span>
|
||||
<span>
|
||||
<b>100,000 金幣</b>
|
||||
<i>NT$ 1,000</i>
|
||||
</span>
|
||||
<span>
|
||||
<b>100,000 金幣</b>
|
||||
<i>NT$ 1,000</i>
|
||||
</span> -->
|
||||
</div>
|
||||
<div class="but1 pay_but">立即支付</div>
|
||||
<div class="but2 pay_but">立即支付</div>
|
||||
</div>
|
||||
<!-- 弹窗 -->
|
||||
<div class="pop_up">
|
||||
<div class="pop_up_in">
|
||||
<b id="pop_up_in_b">請選擇儲值地區</b>
|
||||
<!-- <p countryCode="TW" id="pop_up_in_p1">臺灣</p>
|
||||
<p countryCode="CN" id="pop_up_in_p2">大陸</p> -->
|
||||
<!-- <p>香港</p> -->
|
||||
</div>
|
||||
</div>
|
||||
<div class="stance">
|
||||
<div class="picture">
|
||||
<span id="pay_stance_picture">儲值服務即將開放，請耐心等待</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="wx_skip">
|
||||
<img id="wx_skip_img" src="./images/wx_skip.png" alt="">
|
||||
</div>
|
||||
<script src="../../common/js/jquery-3.2.1.min.js"></script>
|
||||
<script src="../../common/js/flexible.js"></script>
|
||||
<script src="../../common/js/vconsole.min.js"></script>
|
||||
<script src="../../common/js/pingpp.js"></script>
|
||||
<script src="../../common/js/common2.js?v=8.0"></script>
|
||||
<script src="../../common/js/layer.js"></script>
|
||||
<script src="./js/index.js?v=1.3"></script>
|
||||
</body>
|
||||
|
||||
</html>
|
||||
295
view/peko/modules/pay1/js/index.js
Normal file
295
view/peko/modules/pay1/js/index.js
Normal file
@@ -0,0 +1,295 @@
|
||||
var browser = checkVersion();
|
||||
const urlPrefix = getUrlPrefix();
|
||||
var getUrl = getQueryString();
|
||||
const urlTest = "https://api.pekolive.com";
|
||||
const urlProduct = "https://beta.api.pekolive.com";
|
||||
let arr = [];
|
||||
let arr2 = [];
|
||||
let countryCode = "";//选择区号
|
||||
var channelType;//参数值4：鉆石充值 || 参数值5：贵族vip充值 || 6：首充充值
|
||||
let erbanNo;//账号
|
||||
let chargeProdId = '';//金额:tw_payermax_1003_1000
|
||||
let openId;
|
||||
let payChannel;//付款方式
|
||||
let paymentType;//付款码
|
||||
var host = window.location.host;
|
||||
// let successUrl = `${window.location.protocol}//${host}/peko/modules/pay/index.html`;//支付成功回调路径
|
||||
let successUrl = window.location.href;//支付成功回调路径
|
||||
let uid;
|
||||
let modeOfPayment = false;//判断是否有选择支付方式
|
||||
let paymentAmount = false;//判断是否有选择付款金额
|
||||
var deviceId;//型号ID
|
||||
$(function () {
|
||||
if (EnvCheck() == 'test') {//degBug
|
||||
new VConsole();
|
||||
}
|
||||
getInfoFromClient();//请求依赖
|
||||
setTimeout(function () {
|
||||
listChargeAreaInfo();
|
||||
if (browser.app) {
|
||||
erbanNo == null;
|
||||
$('body .pay_method, html .pay_method').css('margin', '-4.5rem auto 0');
|
||||
$('body .header .user, html .header .user').hide();
|
||||
$('.but1').hide();
|
||||
$('.but2').show();
|
||||
}
|
||||
}, 100)
|
||||
function get_param (param) {
|
||||
var query = location.search.substring(1).split('&');
|
||||
for (var i = 0; i < query.length; i++) {
|
||||
var kv = query[i].split('=');
|
||||
if (kv[0] == param) {
|
||||
return kv[1];
|
||||
}
|
||||
}
|
||||
return null;
|
||||
}
|
||||
// if (get_param('countryCodeURL') == "TW") {
|
||||
// countryCode = "TW";
|
||||
// $('.header_top_right b').text(langReplace(localLang.demoModule.pop_up_in_p1));//'臺灣'
|
||||
// } else if (get_param('countryCodeURL') == "CN") {
|
||||
// if (EnvCheck() == 'test') {
|
||||
// if (host != "anan.uat.lecheng163.com") {
|
||||
// window.location.href = ifCNFun() + '/peko/modules/pay/index.html?countryCodeURL=CN'
|
||||
// }
|
||||
// } else {
|
||||
// if (host != "anan.lecheng163.com") {
|
||||
// window.location.href = ifCNFun() + '/peko/modules/pay/index.html?countryCodeURL=CN'
|
||||
// }
|
||||
// }
|
||||
// countryCode = "CN";
|
||||
// $('.header_top_right b').text(langReplace(localLang.demoModule.pop_up_in_p2));//'大陸'
|
||||
// }
|
||||
$('.logingActive').hide();
|
||||
if (browser.weixin) {
|
||||
$('.wx_skip').show();
|
||||
} else {
|
||||
$('.wx_skip').hide();
|
||||
}
|
||||
function getChargePageInfoForH5 (countryCode) {
|
||||
deviceId = get_param('deviceId')
|
||||
channelType = get_param('channelType');
|
||||
let is_CN = countryCode == "CN" ? true : false;
|
||||
networkRequest({
|
||||
type: 'GET',
|
||||
url: urlPrefix + '/charge/getChargePageInfoForH5',
|
||||
data: { countryCode, channelType, },
|
||||
success: function (res) {
|
||||
if (res.code == 200) {
|
||||
$('.methods').remove();
|
||||
$('.methods span').remove();
|
||||
console.log(res)
|
||||
let strT = '';
|
||||
let strB = '';
|
||||
// $('.methods0 p').text(res.data.chargeGroups[0].groupName ? res.data.chargeGroups[0].groupName : '');
|
||||
// $('.methods1 p').text(res.data.chargeGroups[1] ? res.data.chargeGroups[1].groupName : '');
|
||||
res.data.chargeGroups.forEach((res1, index1) => {
|
||||
arr = res.data.chargeGroups;
|
||||
// strB +=
|
||||
$('.pay_method .methodBox').append(`
|
||||
<div class="methods methods${index1}">
|
||||
<p style="width: 100%;color: #000;height: 0.8rem;display: none;">${res1.groupName}</p>
|
||||
</div>
|
||||
`);
|
||||
res.data.chargeGroups[index1].chargeWays.forEach((res, index) => {
|
||||
// arr[index] = res.chargeProds;
|
||||
// strT +=
|
||||
$(`.methods${index1}`).append(`
|
||||
<span index=${index} type='${index1}' desc="${res.desc}" paymentType="${res.paymentType}" payChannel="${res.payChannel}">
|
||||
<img src="${res.logo}" alt="">
|
||||
<p>${res.desc}</p>
|
||||
</span>
|
||||
`);
|
||||
});
|
||||
|
||||
});
|
||||
coloursFun(0, 0);
|
||||
// 选择支付方式按钮
|
||||
$('.methods span').click(function () {
|
||||
modeOfPayment = true;
|
||||
console.log($(this))
|
||||
paymentType = $(this).attr('paymentType');
|
||||
payChannel = $(this).attr('payChannel');
|
||||
// $(this).parent().addClass('active').siblings().removeClass('active');
|
||||
chargeProdId = '';
|
||||
$('.methods span').removeClass('active');
|
||||
$(this).addClass('active');
|
||||
coloursFun($(this).attr('index'), $(this).attr('type'));
|
||||
})
|
||||
console.log(countryCode)
|
||||
$('.but2').off();
|
||||
$('.but2').on('click', function () {
|
||||
console.log(countryCode)
|
||||
if (modeOfPayment == false) {
|
||||
logingFun("請選擇儲值方式")//''
|
||||
} else if (paymentAmount == false || chargeProdId == '') {
|
||||
logingFun("請選擇您的儲值金額")//''
|
||||
} else {
|
||||
console.log(countryCode)
|
||||
networkRequest({
|
||||
type: 'POST',
|
||||
url: urlPrefix + '/charge/apply2New',
|
||||
data: { erbanNo, chargeProdId, countryCode, openId, payChannel, paymentType, successUrl, uid, deviceId: deviceId },
|
||||
success: function (res) {
|
||||
if (res.code == 200) {
|
||||
console.log(res)
|
||||
$('.logingActive').text("請稍等");//""
|
||||
$('.logingActive').show();
|
||||
window.location.href = res.data.payInfo.mweb_url;
|
||||
} else {
|
||||
logingFun(res.message)
|
||||
}
|
||||
}
|
||||
});
|
||||
}
|
||||
})
|
||||
} else if (res.code == 1900) {
|
||||
countryCode = "TW";
|
||||
getChargePageInfoForH5(countryCode);
|
||||
}
|
||||
}
|
||||
});
|
||||
}
|
||||
function listChargeAreaInfo () {
|
||||
networkRequest({
|
||||
type: 'GET',
|
||||
url: urlPrefix + '/charge/listChargeAreaInfo',
|
||||
success: function (res) {
|
||||
if (res.code == 200) {
|
||||
var str = ``;
|
||||
var countryCodeIndexs = 0;
|
||||
res.data.forEach((res, i) => {
|
||||
str += `
|
||||
<p countryCode="${res.areaCode}" id="pop_up_in_p2">${res.areaName}</p>
|
||||
`
|
||||
if (getUrl.countryCode && res.areaCode == getUrl.countryCode) {
|
||||
countryCodeIndexs = i;
|
||||
}
|
||||
})
|
||||
if (getUrl.countryCode) {
|
||||
$('.header_top_right b').text(res.data[countryCodeIndexs].areaName);
|
||||
countryCode = res.data[countryCodeIndexs].areaCode;
|
||||
} else {
|
||||
$('.header_top_right b').text(res.data[0].areaName);
|
||||
countryCode = res.data[0].areaCode
|
||||
}
|
||||
$('.pop_up_in').append(str)
|
||||
getChargePageInfoForH5(countryCode);
|
||||
successUrl = updateQueryStringParameter(window.location.href, "countryCode", countryCode)
|
||||
console.log(successUrl);
|
||||
$('.pop_up_in p').click(function () {
|
||||
$('.header_top_right b').text($(this).text());
|
||||
countryCode = $(this).attr("countryCode");
|
||||
$('.pop_up').hide();
|
||||
// if (countryCode == "CN") {
|
||||
// if (EnvCheck() == 'test') {
|
||||
// if (host != "anan.uat.lecheng163.com") {
|
||||
// window.location.href = ifCNFun() + '/peko/modules/pay/index.html?countryCodeURL=CN'
|
||||
// }
|
||||
// } else {
|
||||
// if (host != "anan.lecheng163.com") {
|
||||
// window.location.href = ifCNFun() + '/peko/modules/pay/index.html?countryCodeURL=CN'
|
||||
// }
|
||||
// }
|
||||
// } else {
|
||||
// window.location.href = urlPrefix + '/peko/modules/pay/index.html?countryCodeURL=' + countryCode;
|
||||
// }
|
||||
successUrl = updateQueryStringParameter(window.location.href, "countryCode", countryCode)
|
||||
console.log(successUrl);
|
||||
getChargePageInfoForH5(countryCode);
|
||||
})
|
||||
} else {
|
||||
logingFun(res.message)
|
||||
}
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
$('.header_top_right').click(function () {
|
||||
$('.pop_up').show();
|
||||
});
|
||||
|
||||
$('.pop_up').click(function () {
|
||||
$('.pop_up').hide();
|
||||
})
|
||||
|
||||
function coloursFun (index, type) {
|
||||
$('.pay_number .number span').remove();
|
||||
var str = '';
|
||||
console.log(arr[type]);
|
||||
arr[type].chargeWays[index].chargeProds.forEach(res => {//金幣
|
||||
// <b>${res.chargeGoldNum.toLocaleString()} ${"金幣"}</b>
|
||||
str += `
|
||||
<span channel="${res.channel}" chargeProdId="${res.chargeProdId}" seqNo="${res.seqNo}">
|
||||
<b>${res.prodName}</b>
|
||||
<i>${res.currencySign} ${res.money.toLocaleString()}</i>
|
||||
</span>
|
||||
`
|
||||
})
|
||||
$('.pay_number .number').append(str);
|
||||
// 选择支付金额按钮
|
||||
$('.pay_number .number span').click(function () {
|
||||
paymentAmount = true;
|
||||
console.log($(this));
|
||||
chargeProdId = $(this).attr('chargeProdId');
|
||||
$(this).addClass('active').siblings().removeClass('active');
|
||||
})
|
||||
}
|
||||
$('.user').on('input', function () {
|
||||
var val = $(this).val();
|
||||
// console.log(val)
|
||||
if (isNumber(val)) {
|
||||
console.log('不是数字')
|
||||
$(this).val("");
|
||||
al = $(this).val();
|
||||
$('.but1').show();
|
||||
$('.but2').hide();
|
||||
} else {
|
||||
if (val != '') {
|
||||
$('.but1').hide();
|
||||
$('.but2').show();
|
||||
erbanNo = val;
|
||||
} else {
|
||||
$('.but1').show();
|
||||
$('.but2').hide();
|
||||
}
|
||||
}
|
||||
})
|
||||
function isNumber (string) {
|
||||
var r = string.match(/^[0-9]*$/);
|
||||
if (r == null) {
|
||||
return true
|
||||
} else {
|
||||
return false
|
||||
}
|
||||
}
|
||||
function logingFun (res) {
|
||||
$('.logingActive').text(res.message == undefined ? res : res.message);
|
||||
$('.logingActive').show();
|
||||
setTimeout(function () {
|
||||
$('.logingActive').hide();
|
||||
}, 1500)
|
||||
}
|
||||
function ifCNFun () {
|
||||
var envChecks;
|
||||
const url = window.location.href;
|
||||
console.log(url)
|
||||
if (!url) return undefined;
|
||||
if (url.match(/uat/) || url.match(/127.0.0.1:/) || (url.match(/beta.api/))) { envChecks = "test" } else { envChecks = "live" };
|
||||
if (!envChecks) return undefined;
|
||||
return envChecks === 'live' ? urlProduct : urlTest;
|
||||
}
|
||||
})
|
||||
function updateQueryStringParameter (uri, key, value) {
|
||||
if (!value) {
|
||||
return uri;
|
||||
}
|
||||
var re = new RegExp("([?&])" + key + "=.*?(&|$)", "i");
|
||||
var separator = uri.indexOf('?') !== -1 ? "&" : "?";
|
||||
if (uri.match(re)) {
|
||||
return uri.replace(re, '$1' + key + "=" + value + '$2');
|
||||
}
|
||||
else {
|
||||
return uri + separator + key + "=" + value;
|
||||
}
|
||||
}
|
||||
21
view/peko/modules/pay1/local/ar.js
Normal file
21
view/peko/modules/pay1/local/ar.js
Normal file
@@ -0,0 +1,21 @@
|
||||
// 阿拉伯
|
||||
langAr = {
|
||||
// 模块
|
||||
demoModule: {
|
||||
wx_skip_img: './images/wx_skip_en.png',
|
||||
// 国际化内容对应的数据项：
|
||||
pay_title: `recharge`,
|
||||
pay_header_t_l: `HABU Recharge Center`,
|
||||
pay_header_t_r: `Taiwan`,
|
||||
pay_method_p: `Please select a recharge method:`,
|
||||
pay_number_sd: `Please select your recharge amount:`,
|
||||
pay_but: `Pay now`,
|
||||
pop_up_in_b: `Please select a recharge area`,
|
||||
pop_up_in_p1: `Taiwan`,
|
||||
pop_up_in_p2: `China`,
|
||||
pay_stance_picture: `The recharge service is about to open, please be patient`,
|
||||
wait_a_minute: 'Please wait',
|
||||
gold_id: 'gold coins',
|
||||
pay_user_id: 'Please enter your HABU account ID',
|
||||
}
|
||||
}
|
||||
21
view/peko/modules/pay1/local/en.js
Normal file
21
view/peko/modules/pay1/local/en.js
Normal file
@@ -0,0 +1,21 @@
|
||||
// 英文
|
||||
langEn = {
|
||||
// 模块
|
||||
demoModule: {
|
||||
wx_skip_img: './images/wx_skip_en.png',
|
||||
// 国际化内容对应的数据项：
|
||||
pay_title: `recharge`,
|
||||
pay_header_t_l: `HABU Recharge Center`,
|
||||
pay_header_t_r: `Taiwan`,
|
||||
pay_method_p: `Please select a recharge method:`,
|
||||
pay_number_sd: `Please select your recharge amount:`,
|
||||
pay_but: `Pay now`,
|
||||
pop_up_in_b: `Please select a recharge area`,
|
||||
pop_up_in_p1: `Taiwan`,
|
||||
pop_up_in_p2: `China`,
|
||||
pay_stance_picture: `The recharge service is about to open, please be patient`,
|
||||
wait_a_minute: 'Please wait',
|
||||
gold_id: 'gold coins',
|
||||
pay_user_id: 'Please enter your HABU account ID',
|
||||
}
|
||||
}
|
||||
21
view/peko/modules/pay1/local/in.js
Normal file
21
view/peko/modules/pay1/local/in.js
Normal file
@@ -0,0 +1,21 @@
|
||||
// 印尼语
|
||||
langIn = {
|
||||
// 模块
|
||||
demoModule: {
|
||||
wx_skip_img: './images/wx_skip_en.png',
|
||||
// 国际化内容对应的数据项：
|
||||
pay_title: `recharge`,
|
||||
pay_header_t_l: `HABU Recharge Center`,
|
||||
pay_header_t_r: `Taiwan`,
|
||||
pay_method_p: `Please select a recharge method:`,
|
||||
pay_number_sd: `Please select your recharge amount:`,
|
||||
pay_but: `Pay now`,
|
||||
pop_up_in_b: `Please select a recharge area`,
|
||||
pop_up_in_p1: `Taiwan`,
|
||||
pop_up_in_p2: `China`,
|
||||
pay_stance_picture: `The recharge service is about to open, please be patient`,
|
||||
wait_a_minute: 'Please wait',
|
||||
gold_id: 'gold coins',
|
||||
pay_user_id: 'Please enter your HABU account ID',
|
||||
}
|
||||
}
|
||||
21
view/peko/modules/pay1/local/zh-CN.js
Normal file
21
view/peko/modules/pay1/local/zh-CN.js
Normal file
@@ -0,0 +1,21 @@
|
||||
// 简体中文
|
||||
langZhCN = {
|
||||
// 模块
|
||||
demoModule: {
|
||||
wx_skip_img: './images/wx_skip_en.png',
|
||||
// 国际化内容对应的数据项：
|
||||
pay_title: `recharge`,
|
||||
pay_header_t_l: `HABU Recharge Center`,
|
||||
pay_header_t_r: `Taiwan`,
|
||||
pay_method_p: `Please select a recharge method:`,
|
||||
pay_number_sd: `Please select your recharge amount:`,
|
||||
pay_but: `Pay now`,
|
||||
pop_up_in_b: `Please select a recharge area`,
|
||||
pop_up_in_p1: `Taiwan`,
|
||||
pop_up_in_p2: `China`,
|
||||
pay_stance_picture: `The recharge service is about to open, please be patient`,
|
||||
wait_a_minute: 'Please wait',
|
||||
gold_id: 'gold coins',
|
||||
pay_user_id: 'Please enter your HABU account ID',
|
||||
}
|
||||
}
|
||||
21
view/peko/modules/pay1/local/zh-TW.js
Normal file
21
view/peko/modules/pay1/local/zh-TW.js
Normal file
@@ -0,0 +1,21 @@
|
||||
// 繁体中文
|
||||
langZhTW = {
|
||||
// 模块
|
||||
demoModule: {
|
||||
wx_skip_img: './images/wx_skip_en.png',
|
||||
// 国际化内容对应的数据项：
|
||||
pay_title: `recharge`,
|
||||
pay_header_t_l: `HABU Recharge Center`,
|
||||
pay_header_t_r: `Taiwan`,
|
||||
pay_method_p: `Please select a recharge method:`,
|
||||
pay_number_sd: `Please select your recharge amount:`,
|
||||
pay_but: `Pay now`,
|
||||
pop_up_in_b: `Please select a recharge area`,
|
||||
pop_up_in_p1: `Taiwan`,
|
||||
pop_up_in_p2: `China`,
|
||||
pay_stance_picture: `The recharge service is about to open, please be patient`,
|
||||
wait_a_minute: 'Please wait',
|
||||
gold_id: 'gold coins',
|
||||
pay_user_id: 'Please enter your HABU account ID',
|
||||
}
|
||||
}
|
||||
Reference in New Issue
Block a user