|
|
<!DOCTYPE html>
|
|
|
<html>
|
|
|
|
|
|
<head>
|
|
|
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
|
|
|
<meta name="apple-mobile-web-app-capable" content="yes">
|
|
|
<meta name="viewport"
|
|
|
content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">
|
|
|
<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 {
|
|
|
background-color: #F5F5F5;
|
|
|
}
|
|
|
|
|
|
.flexitem {
|
|
|
display: flex;
|
|
|
justify-content: flex-start;
|
|
|
align-items: center;
|
|
|
}
|
|
|
|
|
|
.title {
|
|
|
display: flex;
|
|
|
height: .9rem;
|
|
|
width: 100%;
|
|
|
justify-content: space-between;
|
|
|
align-items: center;
|
|
|
background-color: #21B1EB;
|
|
|
color: white;
|
|
|
font-size: .28rem;
|
|
|
}
|
|
|
|
|
|
.title img {
|
|
|
width: .3rem;
|
|
|
height: .3rem;
|
|
|
}
|
|
|
|
|
|
.borderitem::after {
|
|
|
/* margin-left: .24rem; */
|
|
|
height: 1px;
|
|
|
position: absolute;
|
|
|
z-index: 0;
|
|
|
bottom: 0;
|
|
|
left: 0;
|
|
|
content: "";
|
|
|
width: 100%;
|
|
|
background-image: -webkit-linear-gradient(bottom, #ececec 50%, transparent 0);
|
|
|
background-image: linear-gradient(0deg, #ececec 50%, transparent 0);
|
|
|
}
|
|
|
|
|
|
.shaddowbox {
|
|
|
background-color: #fff;
|
|
|
border-radius: .24rem;
|
|
|
box-shadow: 0px 0px 6px 0px rgba(89, 40, 8, 0.15);
|
|
|
}
|
|
|
|
|
|
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>
|
|
|
|
|
|
<div class="title">
|
|
|
<div class="flexitem">
|
|
|
<img class="logout" src="__IMG__/ssg/index/logout.png" style="margin-left:.29rem;">
|
|
|
<div style="margin-left: 5px;">退出登入</div>
|
|
|
</div>
|
|
|
<div style="font-size: .32rem;font-weight: 600;">至尊版购买</div>
|
|
|
<div class="flexitem" style="margin-right:.29rem;">
|
|
|
<img class="order" src="__IMG__/ssg/index/order.png">
|
|
|
<div style="margin-left: 5px;">订单查询</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
<div style="padding: .3rem;">
|
|
|
<div class="shaddowbox">
|
|
|
<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;" 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>
|
|
|
</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>
|
|
|
<div class="shaddowbox" style="margin-top: .3rem;">
|
|
|
<div style="width: 6.9rem;font-size: .24rem;color:#292929;position: relative;">
|
|
|
<p style="padding: .3rem;">
|
|
|
1.选择游戏产品时，即选择购买超级签游戏下载链接和对应
|
|
|
的游戏礼包，无法退换哦~
|
|
|
</p>
|
|
|
<p style="padding:0 .3rem .3rem;">
|
|
|
2.同个账号多个设备需要去找客服那边购买。
|
|
|
</p>
|
|
|
</div>
|
|
|
</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;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="selectVal" 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;" 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>
|
|
|
</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="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> -->
|
|
|
<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>
|
|
|
</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>
|
|
|
<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>
|
|
|
|
|
|
|
|
|
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， 则改变定时器时间保证delay时间一定触发任务函数
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
</script>
|
|
|
</html> |