@ -9,6 +9,7 @@
< title > 超级签购买界面< / title >
< link href = "__CSS__/ssg/common.css" rel = "stylesheet" type = "text/css" >
< script src = "__JS__/ssg/flexible.min.js" type = "text/javascript" > < / script >
< script src = "__JS__/ssg/juicer.min.js" type = "text/javascript" > < / script >
< / head >
< style >
body {
@ -59,6 +60,19 @@
input {
background-color: #F5F5F5;
}
.pay-button div{
margin:auto;width:5.6rem;height:1.34rem;background:url('__IMG__/ssg/index/paybt.png') no-repeat top center/cover;color: #fff;text-align: center;line-height: 1.1rem;font-size: .32rem;
}
.gamechoose{
width: .3rem;height: .3rem;
}
.gamenocheck{
background:url('__IMG__/ssg/index/nocheck.png') no-repeat top center/cover;
}
.gamecheck{
background:url('__IMG__/ssg/index/check.png') no-repeat top center/cover;
}
< / style >
< body >
@ -80,7 +94,7 @@
< div class = "borderitem"
style="display: flex; justify-content: space-between;align-items:center;padding: 0 .3rem;line-height: .9rem;">
< div style = "font-size: .32rem;" > 苹果超级签< / div >
< div class = "flexitem" style = "color: #A9A9A9;" >
< div class = "flexitem" style = "color: #A9A9A9;" onclick = "window.location.href='{:U(\'rule\')}'" >
< div style = "margin-right: 5px;" > 至尊版说明< / div >
< img src = "__IMG__/ssg/index/back.png" style = "width:.3rem;height:.3rem;" >
< / div >
@ -109,73 +123,176 @@
< div class = "flexitem"
style="color: #A9A9A9;width: 4.1rem;height: .6rem;background-color: #F5F5F5;border-radius: .3rem;">
< img src = "__IMG__/ssg/index/select.png" style = "width:.4rem;height: .4rem;margin-left: .17rem;" >
< input id = " copy Val" type = "text" value = ""
< input id = " select Val" type = "text" value = ""
style="border: 0px;width: 3rem;height: .6rem;font-size: .24rem;margin-left: .2rem;">
< / div >
< / div >
< / div >
<!-- 游戏列表 -->
< div style = " padding:0 .3rem .3rem;" >
< div class = "flexitem" style = "padding-top:.3rem ;justify-content: space-between;" >
< img src = "__IMG__/ssg/detail/gamebg.png" style = "width: .7rem;height: .7rem;" >
< div style = "margin-left: .2rem;flex-grow: 1;" >
< div class = "flexitem" >
< div style = "font-size: .28rem;" > 落梦星辰-超级签< / div >
< img src = "__IMG__/ssg/index/gif.png"
style="width: .27rem;height: .27rem;margin-left: .2rem;">
< / div >
< div style = "color:#A9A9A9;font-size: .2rem;" >
至尊特权礼包(限量)
< / div >
< / div >
< img src = "__IMG__/ssg/index/check.png" style = "width: .3rem;height: .3rem;" >
< / div >
< div class = "flexitem" style = "padding-top:.3rem ;justify-content: space-between;" >
< img src = "__IMG__/ssg/detail/gamebg.png" style = "width: .7rem;height: .7rem;" >
< div style = "margin-left: .2rem;flex-grow: 1;" >
< div class = "flexitem" >
< div style = "font-size: .28rem;" > 落梦星辰-超级签< / div >
< img src = "__IMG__/ssg/index/gif.png"
style="width: .27rem;height: .27rem;margin-left: .2rem;">
< / div >
< div style = "color:#A9A9A9;font-size: .2rem;" >
至尊特权礼包(限量)
< div style = " padding:0 .3rem .3rem;" id = "gamebox" >
<!-- <volist name="data_list" id="data">
< div class = "gameitem flexitem" data-game_id = "{$data.game_id}" data-game_name = "{$data.game_name}" data-pay_status = "{$data.pay_status}" style = "padding-top:.3rem ;justify-content: space-between;" >
< img src = "{$data['icon']|get_cover='path'}" style = "width: .7rem;height: .7rem;" >
< div style = "margin-left: .2rem;flex-grow: 1;" >
< div class = "flexitem" >
< div style = "font-size: .28rem;" > {$data.game_name}-超级签< / div >
< img src = "__IMG__/ssg/index/gif.png"
style="width: .27rem;height: .27rem;margin-left: .2rem;">
< / div >
< div style = "color:#A9A9A9;font-size: .2rem;" >
至尊特权礼包(限量)
< / div >
< / div >
< div class = "gamechoose gamenocheck <if condition=" $ i eq 1 " > gamecheck < else / > gamenocheck< / if > ">< / div >
< / div >
< img src = "__IMG__/ssg/index/nocheck.png" style = "width: .3rem;height: .3rem;" >
< / div >
< / volist >
< input type = "hidden" id = "hdGameID" value = "{$data_list[0]['game_id']}" >
< input type = "hidden" id = "orderStatus" value = "{$data_list[0]['pay_status']}" > -->
< / div >
< / div >
<!-- - button - -->
< div class = "shaddowbox" style = "margin-top: .3rem;" >
< div style = "width: 6.9rem;font-size: .28rem;color:#292929;position: relative;" >
< div class = "borderitem"
style="display: flex; justify-content: space-between;align-items:center;padding: 0 .3rem;line-height: .9rem;">
< div style = "font-size: .32rem;" > 支付未到账？< / div >
< div class = "shaddowbox" style = "margin-top: .3rem;" >
< div style = "width: 6.9rem;font-size: .28rem;color:#292929;position: relative;" >
< div class = "borderitem"
style="display: flex; justify-content: space-between;align-items:center;padding: 0 .3rem;line-height: .9rem;">
< div style = "font-size: .32rem;" > 支付未到账？< / div >
< div class = "flexitem" style = "color: #A9A9A9;" >
< div style = "margin-right: 5px;" > 充值帮助< / div >
< img src = "__IMG__/ssg/index/back.png" style = "width:.3rem;height:.3rem;" >
< / div >
< / div >
< / div >
< div style = "width: 6.9rem;font-size: .28rem;color:#292929;position: relative;" >
< div style = "display: flex; justify-content: space-between;align-items:center;padding: 0 .3rem;line-height: .9rem;" >
< div style = "font-size: .32rem;" > 联系客服< / div >
< div class = "flexitem" style = "color: #A9A9A9;" >
< div style = "margin-right: 5px;" > 充值帮助< / div >
<!-- <div style="margin - right: 5px;">至尊版说明</div> --
< img src = "__IMG__/ssg/index/back.png" style = "width:.3rem;height:.3rem;" >
< / div >
< / div >
< / div >
< div style = "width: 6.9rem;font-size: .28rem;color:#292929;position: relative;" >
< div style = "display: flex; justify-content: space-between;align-items:center;padding: 0 .3rem;line-height: .9rem;" >
< div style = "font-size: .32rem;" > 联系客服< / div >
< div class = "flexitem" style = "color: #A9A9A9;" >
<!-- <div style="margin - right: 5px;">至尊版说明</div> -->
< img src = "__IMG__/ssg/index/back.png" style = "width:.3rem;height:.3rem;" >
< / div >
< / div >
< / div >
<!-- <div class="flexitem" style="height: 2.6rem;justify - content:center;">
< img class = "order" src = "__IMG__/ssg/index/ad.png" style = "width: 6.3rem;height: 2rem;" >
< / div > -->
<!-- <div class="flexitem" style="height: 2.6rem;justify - content:center;">
< img class = "order" src = "__IMG__/ssg/index/ad.png" style = "width: 6.3rem;height: 2rem;" >
< / div > -->
< / div >
< / div >
< div style = "margin:auto;width:100%;height:1.34rem;" > < / div >
< div class = "pay-button" >
< div > 确认支付￥10< / div >
< / div >
< / body >
< script type = "text/template" id = "gametpl" >
{@each list as item,index}
< div class = "gameitem flexitem" style = "padding-top:.3rem ;justify-content: space-between;" data-game_id = "${item.game_id}" >
< img src = "${item.game_icon}" style = "width: .7rem;height: .7rem;" >
< div style = "margin-left: .2rem;flex-grow: 1;" >
< div class = "flexitem" >
< div style = "font-size: .28rem;" > ${item.game_name}-超级签< / div >
< img src = "__IMG__/ssg/index/gif.png" style = "width: .27rem;height: .27rem;margin-left: .2rem;" >
< / div >
< script src = "__JS__/jquery-1.11.1.min.js" type = "text/javascript" > < / script >
< div style = "color:#A9A9A9;font-size: .2rem;" >
至尊特权礼包(限量)
< / div >
< / div >
{@if index==0}
< div class = "gamechoose gamenocheck gamecheck" > < / div >
{@else}
< div class = "gamechoose gamenocheck " > < / div >
{@/if}
< / div >
{@/each}
< / script >
< script src = "__JS__/jquery-1.11.1.min.js" type = "text/javascript" > < / script >
< script >
< / body >
var index = {
self :this,
select:{type:1},
choose:{},
pay_game_id:{},
getgamelist(){
$.ajax({
type: 'POST',
url: 'mobile.php?s=/Ssg/getGamaList.html',
dataType: 'JSON',
data:index.select,
success: function (result) {
console.log(result)
try {
if(result.pay_game_id){
index.pay_game_id = result.pay_game_id;
}
} catch (error) {}
index.jucierFun(result)
}
})
},
jucierFun(data){
var tpl = document.getElementById('gametpl').innerHTML;
var html = juicer(tpl, data);
$("#gamebox").html(html);
if(data["list"].length != 0){
index.choose.game_id = data['list'][0]['game_id']
}
index.event();
},
event(){
$(".gameitem").off("click");
$("#selectVal").off("keyup");
$(".gameitem").on("click",function(){
$(".gamechoose").removeClass("gamecheck");
$(this).find(".gamechoose").addClass("gamecheck");
var data = $(this).data();
index.choose.game_id = data.game_id;
})
$("#selectVal").on("keyup",function(){
index.select.game_name =$(this).val().replace(/\s*/g,"");
index.select.type = 0;
index.getgamelist()
})
}
}
index.getgamelist();
$(".pay-button").on("click",function(){
var inres = index.pay_game_id.indexOf(index.choose.game_id);
if(inres > -1){
alert("亲~您已购买过了~请到【订单查询】查看订单信息哟~");
}else{
location.href = "/sdk.php/Ipa365/pay/game_id/"+index.choose.game_id;
}
})
function handlePay() {
var hdGameID = $("#hdGameID").val();
var orderStatus = $("#orderStatus").val();
if (!hdGameID || hdGameID == 0) {
alert("请选择游戏");
} else if(orderStatus==1){
alert("亲~您已购买过了~请到【订单查询】查看订单信息哟~");
}else {
location.href = "/sdk.php/Ipa365/pay/game_id/"+hdGameID;
}
}
function throttle(fun, delay) {
var timer = null;
var startTime = Date.now();
return function () {
var curTime = Date.now();
var remaining = delay - (curTime - startTime); //计算出两次触发的时间间隔有没有大余delay
var context = this;
var args = arguments;
clearTimeout(timer);
if (remaining < = 0) {
fun.apply(context, args);
startTime = Date.now(); //如果两次触发时间大余delay，
} else {
timer = setTimeout(fun, remaining); //如果两次触发时间小于delay，
}
}
}
< / script >
< / html >
chenzhi
5 years ago