<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no"/>
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black-translucent">
<meta content="telephone=no" name="format-detection">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="wap-font-scale" content="no">
<script src="../lib/fsize.js"></script>
<script src="../lib/jquery-3.1.1.min.js"></script>
<link rel="stylesheet" href="../css/base.css">
<link rel="stylesheet" href="../css/fireflyPay.css?v='20180628'">
<title></title>
<style type="text/css">
.mol-top{
width: 8rem;
}
.mol-top li{
width: 4rem;
}
.p-w{
background-color: #11101A;
padding-top: .5rem;
}
.gash-for-ul {
margin: 0 auto;
width: 10rem;
position: absolute;
left: 0;
top: 0;
transition: 0.5s all;
}
.gash-for-ul li {
height: 1.45rem;
line-height: 1.45rem;
color: #00F8DC;
background: #11101A;
margin-bottom: 0.05rem;
border: 0.04rem solid transparent ;
text-align: left;
}
.p-active{
border: 0.04rem solid #1cebd1 !important;
}
.gash-for-ul li img {
width: 0.5rem;
vertical-align: middle;
margin-top: -0.1rem;
margin-left: 0.5rem;
}
.gash-for-ul li span {
margin-left: 0.3rem;
font-size: 0.45rem;
}
.gash-for-ul li button {
height: 0.73rem;
line-height: 0.75rem;
width: 2.2rem;
background: linear-gradient(to right, #00f088, #00a0e9);
border-radius: 2rem;
color: #fff;
float: right;
margin-top: 0.35rem;
margin-right: 0.46rem;
font-size: 0.4rem;
}
.gash-rid {
visibility: hidden;
}
.login-tips{
color:#00a0e9;
}
.mol-content{
height: 12rem;
}
.mList{
position: relative;
width: 9.28rem;
margin: 0 auto;
font-size: 0;
}
.mLsitTitle{
width: 100%;
font-size: 0.4rem;
color:#00F3D7;
text-align: left;
margin-bottom: 0.266rem;
}
.mListBox{
width: 100%;
text-align: center;
position: relative;
}
.mListDetail{
position: relative;
width: 100%;
height: 0.8rem;
line-height: 0.8rem;
}
.mListDetail:nth-child(odd){
background: #0F1E2F;
}
.mListDetail:nth-child(even){
background: #11101A;
}
.mListDetail:first-child{
background: #0A6866;
}
.mListDetail:first-child span:nth-child(1){
text-align: center;
right: auto;
left: 0;
width: 50%;
}
.mListDetail span:nth-child(1){
position: absolute;
left: 1.9rem;
top: 0;
text-align: left;
font-size: 0.346rem;
color:#00F3D7;
width: 2.5rem;
}
.mListDetail:first-child span:nth-child(2){
text-align: center;
right: 0;
left: auto;
width: 50%;
}
.mListDetail span:nth-child(2){
position: absolute;
left: 6.5rem;
top: 0;
text-align: left;
font-size: 0.346rem;
color:#00F3D7;
width: 2.5rem;
}
.mListDetail:first-child span{
color:#FFF;
}
.mListDetail span img{
width: 0.3rem;
vertical-align: middle;
margin-top: -.1rem;
margin-right: 0.106rem;
}
.mList2{
margin-top: 0.366rem;
}
</style>
</head>
<body>
<div class="p-w">
<ul class="mol-top clearfix">
<li class="mol-li1 mol-act"></li>
<li class="mol-li2"></li>
</ul>
<div class="mol-content">
<div class="mol-card">
<p class="mol-title"></p>
<div class="mList">
<div class="mLsitTitle">USA</div>
<div class="mListBox">
<div class="mListDetail">
<span>USD</span>
<span>GEMs</span>
</div>
<div class="mListDetail">
<span>$5</span>
<span><img src="../img/zuan.png"/>256</span>
</div>
<div class="mListDetail">
<span>$10</span>
<span><img src="../img/zuan.png"/>512</span>
</div>
<div class="mListDetail">
<span>$20</span>
<span><img src="../img/zuan.png"/>1024</span>
</div>
<div class="mListDetail">
<span>$50</span>
<span><img src="../img/zuan.png"/>2560</span>
</div>
<div class="mListDetail">
<span>$100</span>
<span><img src="../img/zuan.png"/>5120</span>
</div>
</div>
</div>
<div class="mList mList2">
<div class="mLsitTitle">Taiwan</div>
<div class="mListBox">
<div class="mListDetail">
<span>TWD</span>
<span>GEMs</span>
</div>
<div class="mListDetail">
<span>TWD 50</span>
<span><img src="../img/zuan.png"/>82</span>
</div>
<div class="mListDetail">
<span>TWD 100</span>
<span><img src="../img/zuan.png"/>164</span>
</div>
<div class="mListDetail">
<span>TWD 300</span>
<span><img src="../img/zuan.png"/>492</span>
</div>
<div class="mListDetail">
<span>TWD 500</span>
<span><img src="../img/zuan.png"/>820</span>
</div>
<div class="mListDetail">
<span>TWD 1000</span>
<span><img src="../img/zuan.png"/>1640</span>
</div>
<div class="mListDetail">
<span>TWD 2000</span>
<span><img src="../img/zuan.png"/>3280</span>
</div>
</div>
</div>
<div class="mList mList2">
<div class="mLsitTitle">Malaysia</div>
<div class="mListBox">
<div class="mListDetail">
<span>MYR</span>
<span>GEMs</span>
</div>
<div class="mListDetail">
<span>RM3</span>
<span><img src="../img/zuan.png"/>38</span>
</div>
<div class="mListDetail">
<span>RM5</span>
<span><img src="../img/zuan.png"/>64</span>
</div>
<div class="mListDetail">
<span>RM7</span>
<span><img src="../img/zuan.png"/>88</span>
</div>
<div class="mListDetail">
<span>RM10</span>
<span><img src="../img/zuan.png"/>128</span>
</div>
</div>
</div>
<div class="mList mList2">
<div class="mLsitTitle">Singapore</div>
<div class="mListBox">
<div class="mListDetail">
<span>SGD</span>
<span>GEMs</span>
</div>
<div class="mListDetail">
<span>S$10</span>
<span><img src="../img/zuan.png"/>360</span>
</div>
<div class="mListDetail">
<span>S$50</span>
<span><img src="../img/zuan.png"/>1800</span>
</div>
<div class="mListDetail">
<span>S$80</span>
<span><img src="../img/zuan.png"/>2880</span>
</div>
</div>
</div>
</div>
<div style="padding-top: 1rem;" class="gash-for-ul clearfix"></div>
</div>
<button style="margin-top: 0.6rem" class="login-btn login-btn-go"></button>
<p class="login-tips"></p>
</div>
</body>
<script src="../layer-v3.1.0/layer/layer.js"></script>
<script src="../lib/payLangchange.js?v=202008181024"></script>
<script>
$('title').text(langList[langType].paytitle);
$('.mol-li1').html(langList[langType].wallet+'<div class="mol-click"></div>');
$('.mol-li2').html(langList[langType].card+'<div class="mol-click"></div>');
$('.mol-title').text(langList[langType].mol);
$('.login-btn').text(langList[langType].next);
$('.login-tips').text(langList[langType].ques);
btnOk = false;
btndianka = false;
sessionStorage.pay = "MOLPAY";
$.ajax({
url: $ip + "/setting/getRecharge.html",
type: "post",
data: {
'cid': "web_gw",
'os': "WEB",
lang: sessionStorage.lang,
'vest': 0,
'paytype': sessionStorage.pay
},
error: function (msg) {
console.log('请求出错');
},
success: function (msg) {
var data = JSON.parse(msg);
var html = [];
for (var i = 0; i < data.data.length; i++) {
html+='<li>'
html+='<img src="../img/zuan.png"><span>'+data.data[i].diamond+'</span>'
html+='<button>'+data.data[i].price[0].currency+'<i style="font-style:normal">'+data.data[i].price[0].price+'</i></button>';
html+='<span class="gash-rid">'+data.data[i].rid+'</span>';
html+='</li>'
}
$(".gash-for-ul").html(html);
$(".gash-for-ul li").on("touchstart", function () {
$(this).siblings("li").removeClass("p-active");
$(this).addClass("p-active");
rid= $(this).find('.gash-rid').text();
console.log(rid);
money=$(this).find('button i').text();
console.log(money);
btnOk = true;
$(".login-btn").removeClass("login-btn-go");
// var html=[];
// html+='<div><button class="next-btn btn" id="next-go">确认</button></div>';
// $(".paypalh").html(html);
// $(".next-btn").attr("id","next-go");
// $('.next-btn').attr("disabled",false);
})
}
})
$.ajax({
url: $ip + "/setting/getRecharge.html",
type: "post",
data: {
'cid': "web_gw",
'os': "WEB",
lang: sessionStorage.lang,
'vest': 0,
'paytype': "MOLPCPAY"
},
error: function (msg) {
console.log('请求出错');
},
success: function (msg) {
var data = JSON.parse(msg);
console.log(data)
}
})
$(".mol-card").on("touchstart", function (e) {
e.preventDefault();
startX = e.originalEvent.changedTouches[0].pageX,
startY = e.originalEvent.changedTouches[0].pageY;
});
$(".mol-card").on("touchmove", function (e) {
e.preventDefault();
moveEndX = e.originalEvent.changedTouches[0].pageX,
moveEndY = e.originalEvent.changedTouches[0].pageY,
X = moveEndX - startX,
Y = moveEndY - startY;
if (Math.abs(X) > Math.abs(Y) && X > 70) {
}
else if (Math.abs(X) > Math.abs(Y) && X < -70) {
}
else if (Math.abs(Y) > Math.abs(X) && Y > 10) {
// alert("top 2 bottom");
$(".mol-card").css("top","0");
}
else if (Math.abs(Y) > Math.abs(X) && Y < 10) {
// alert("bottom 2 top");
$(".mol-card").css("top","-11.8rem");
}
else {
}
});
$(".mol-content").on("touchstart", function (e) {
e.preventDefault();
startX = e.originalEvent.changedTouches[0].pageX,
startY = e.originalEvent.changedTouches[0].pageY;
});
$(".mol-content").on("touchmove", function (e) {
e.preventDefault();
moveEndX = e.originalEvent.changedTouches[0].pageX,
moveEndY = e.originalEvent.changedTouches[0].pageY,
X = moveEndX - startX,
Y = moveEndY - startY;
if (Math.abs(X) > Math.abs(Y) && X > 100) {
$(".gash-for-ul").css("left", "0rem");
$(".mol-card").css("left", "10rem");
$(".mol-li1").addClass("mol-act");
$(".mol-li2").removeClass("mol-act")
sessionStorage.pay = 'MOLPAY'
btndianka = false;
}
else if (Math.abs(X) > Math.abs(Y) && X < -100) {
$(".gash-for-ul").css("left", "-10rem");
sessionStorage.pay = 'MOLPCPAY';
btndianka = true;
$(".mol-card").css("left", "0rem");
$(".mol-li2").addClass("mol-act");
$(".mol-li1").removeClass("mol-act")
$(".login-btn").removeClass("login-btn-go");
}
else if (Math.abs(Y) > Math.abs(X) && Y > 10) {
// alert("top 2 bottom");
}
else if (Math.abs(Y) > Math.abs(X) && Y < 10) {
// alert("bottom 2 top");
}
else {
}
});
$(".mol-li1").on("touchstart", function () {
$(".gash-for-ul").css("left", "0rem");
$(".mol-card").css("left", "10rem");
$(".mol-li1").addClass("mol-act");
$(".mol-li2").removeClass("mol-act");
sessionStorage.pay = 'MOLPAY';
btndianka = false;
})
$(".mol-li2").on("touchstart", function () {
$(".gash-for-ul").css("left", "-10rem");
$(".mol-card").css("left", "0rem");
$(".mol-li2").addClass("mol-act");
$(".mol-li1").removeClass("mol-act");
sessionStorage.pay = 'MOLPCPAY';
btndianka = true;
})
$(".login-btn").on("touchstart", function () {
if (btnOk == true||btndianka==true) {
if (sessionStorage.pay == 'MOLPAY') {
$.ajax({
url: "https://webserver.yabolive.net/pay/getPayPreid.html",
type: "post",
data: {
lang: sessionStorage.lang,
"uid": sessionStorage.uid,
"product": "橙钻货币充值",
"country": "86",
"rid": rid,
"payType": sessionStorage.pay,
"payTypeSub": "H5",
"amount": money * 100,
"extend": "0",
"returnUrl": "https://www.firefly.live/phonepay/payend.html",
},
success: function (msg) {
var data = JSON.parse(msg);
console.log(data);
window.location.href = data.payInfo.url;
}
})
}
else if (sessionStorage.pay == 'MOLPCPAY') {
$.ajax({
url: $ip + "/pay/getPayPreid.html",
type: "post",
data: {
"uid": sessionStorage.uid,
"product": "橙钻货币充值",
"country": "86",
"rid": 914,
"lang": sessionStorage.lang,
"payType": sessionStorage.pay,
"payTypeSub": "H5",
"amount": 500,
"extend": "",
"returnUrl": "https://www.firefly.live/phonepay/payend.html",
},
success: function (msg) {
var data = JSON.parse(msg);
console.log(data);
window.location.href = data.payInfo.url
}
})
}
}
else {
if(sessionStorage.lang==1) layer.msg("Please select Top-Up amount")
else layer.msg("請選擇充值金額");
layer.msg()
}
})
</script>
</html>