You cannot select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.

339 lines
12 KiB
HTML

5 years ago
<!DOCTYPE html>
<html>
5 years ago
5 years ago
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="viewport"
5 years ago
content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">
5 years ago
<title>超级签购买界面</title>
<link href="__CSS__/ssg/common.css" rel="stylesheet" type="text/css">
5 years ago
<script src="__JS__/ssg/flexible.min.js" type="text/javascript"></script>
5 years ago
<script src="__JS__/ssg/juicer.min.js" type="text/javascript"></script>
5 years ago
</head>
5 years ago
<style>
5 years ago
.index-box {
5 years ago
background-color: #F5F5F5;
}
5 years ago
.index-box .flexitem {
5 years ago
display: flex;
justify-content: flex-start;
align-items: center;
}
5 years ago
.index-box .title {
5 years ago
display: flex;
height: .9rem;
width: 100%;
justify-content: space-between;
align-items: center;
background-color: #21B1EB;
color: white;
font-size: .28rem;
}
5 years ago
.index-box .title .logout{
margin-left:.29rem;
}
.index-box .title .back div{
margin-left: 5px;
}
.index-box .title img {
5 years ago
width: .3rem;
height: .3rem;
}
5 years ago
.index-box .title .content{
font-size: .32rem;font-weight: 600;
}
.index-box .title .orderbox{
margin-right:.29rem;
}
.index-box .title .orderbox div{
margin-left: 5px;
}
.index-box .borderitem::after {
5 years ago
/* 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);
}
5 years ago
.index-box .shaddowbox {
5 years ago
background-color: #fff;
border-radius: .24rem;
box-shadow: 0px 0px 6px 0px rgba(89, 40, 8, 0.15);
}
5 years ago
.index-box .allitembox{
padding: .3rem;
}
.index-box .allitembox .title-cell{
font-size: .28rem;color:#292929;position: relative;
}
5 years ago
/* .index-box .allitembox .title-cell >div{
} */
.index-box .allitembox .title-cell .borderitem{
5 years ago
display: flex; justify-content: space-between;align-items:center;padding: 0 .3rem;line-height: .9rem;
}
.index-box .allitembox .aditem .adimg{
height: 2.6rem;justify-content:center;
}
.index-box .allitembox .aditem .adimg img{
width: 6.3rem;height: 2rem;
}
.index-box input {
5 years ago
background-color: #F5F5F5;
}
5 years ago
.index-box .maringtop3rem{
margin-top: .3rem;
}
.index-box .title-name{
font-size: .32rem;
}
.index-box .a9color{
color: #A9A9A9;
}
.index-box .wh3rem{
width: .3rem;height: .3rem;
}
5 years ago
.index-box .inputbox{
color: #A9A9A9;width:calc(100% - 2rem);width:-webkit-calc(100% - 2rem);width:-moz-calc(100% - 2rem);height: .6rem;background-color: #F5F5F5;border-radius: .3rem;
}
.index-box .inputbox img{
width:.4rem;height: .4rem;margin-left: .17rem;
}
.index-box .inputbox input{
border: 0px;height: .6rem;font-size: .24rem;margin-left: .2rem;width:calc(100% - 1rem);width:-webkit-calc(100% - 1rem);width:-moz-calc(100% - 1rem);
}
.index-box .pay-button div{
5 years ago
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;
}
5 years ago
.index-box .gameitem{
padding-top:.3rem ;justify-content: space-between;
}
.index-box .gameitem .gameimg{
width: .7rem;height: .7rem;
}
.index-box .gamechoose{
5 years ago
width: .3rem;height: .3rem;
}
5 years ago
.index-box .gamenocheck{
background:url('__IMG__/ssg/index/nocheck.png') no-repeat top center/100% 100%;
5 years ago
}
5 years ago
.index-box .gamecheck{
background:url('__IMG__/ssg/index/check.png') no-repeat top center/100% 100%;
5 years ago
}
5 years ago
</style>
5 years ago
<body class="index-box">
5 years ago
<div class="title">
5 years ago
<div class="flexitem back" id="logout">
<img class="logout" src="__IMG__/ssg/index/logout.png">
<div>退出登入</div>
5 years ago
</div>
5 years ago
<div class="content">至尊版购买</div>
<div class="flexitem orderbox" onclick="window.location.href='{:U(\'order\')}'">
5 years ago
<img class="order" src="__IMG__/ssg/index/order.png">
5 years ago
<div>订单查询</div>
5 years ago
</div>
</div>
5 years ago
<div class="allitembox">
<div class="shaddowbox aditem">
<div class="title-cell">
<div class="borderitem">
<div class="title-name">苹果超级签</div>
<div class="flexitem a9color" onclick="window.location.href='{:U(\'rule\')}'">
5 years ago
<div style="margin-right: 5px;">至尊版说明</div>
5 years ago
<img class="wh3rem" src="__IMG__/ssg/index/back.png">
5 years ago
</div>
</div>
</div>
5 years ago
<div class="flexitem adimg">
<img class="order" src="__IMG__/ssg/index/ad.png">
5 years ago
</div>
</div>
5 years ago
<div class="shaddowbox maringtop3rem">
<div class="title-cell" style="font-size: .24rem;">
5 years ago
<p style="padding: .3rem;">
1.选择游戏产品时,即选择购买超级签游戏下载链接和对应
的游戏礼包,无法退换哦~
</p>
<p style="padding:0 .3rem .3rem;">
2.同个账号多个设备需要去找客服那边购买。
</p>
</div>
</div>
5 years ago
<div class="shaddowbox maringtop3rem">
<div class="title-cell">
5 years ago
<div class="borderitem">
<div class="title-name">选择产品</div>
<div class="flexitem inputbox">
<img src="__IMG__/ssg/index/select.png">
<input id="selectVal" type="text" value="">
5 years ago
</div>
</div>
5 years ago
</div>
<!--游戏列表-->
5 years ago
<div style=" padding:0 .3rem .3rem;" id="gamebox">
5 years ago
<div style="text-align: center;font-size: .24rem;color: #a9a9a9;line-height: 5;">游戏数据获取中....</div>
5 years ago
</div>
5 years ago
</div>
5 years ago
<!---button--->
5 years ago
<div class="shaddowbox maringtop3rem">
5 years ago
<div class="title-cell" onclick="window.location.href='{:U(\'help\')}'">
<div class="borderitem">
<div class="title-name">支付未到账?</div>
<div class="flexitem a9color">
5 years ago
<div style="margin-right: 5px;">充值帮助</div>
5 years ago
<img class="wh3rem" src="__IMG__/ssg/index/back.png">
5 years ago
</div>
</div>
</div>
5 years ago
<div class="title-cell" onclick="chatQQ()">
<div class="borderitem">
<div class="title-name">联系客服</div>
<div class="flexitem a9color">
<img class="wh3rem" src="__IMG__/ssg/index/back.png">
5 years ago
</div>
</div>
</div>
5 years ago
</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}
5 years ago
<div class="gameitem flexitem" data-game_id = "${item.game_id}">
<img class="gameimg" src="${item.game_icon}">
<div class="" style="margin-left: .2rem;flex-grow: 1;">
5 years ago
<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;">
5 years ago
</div>
5 years ago
<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>
checkSafari();
5 years ago
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(){
5 years ago
// index.select.game_name =$(this).val().replace(/\s*/g,"");
5 years ago
index.select.game_name =$(this).val().replace(/[\w\s]/g,"");
5 years ago
index.select.type = 0;
index.getgamelist()
})
}
}
index.getgamelist();
$(".pay-button").on("click",function(){
5 years ago
var inres = index.pay_game_id.indexOf(index.choose.game_id+'');
5 years ago
if(inres > -1){
alert("亲~您已购买过了~请到【订单查询】查看订单信息哟~");
}else{
5 years ago
location.href = "/sdk.php/Ipa365/pay/game_id/"+index.choose.game_id;
5 years ago
}
})
5 years ago
$("#logout").on("click",function(){
location.href = "mobile.php?s=/Ssg/logout.html";
})
5 years ago
5 years ago
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时间一定触发任务函数
}
}
}
5 years ago
function chatQQ() {
window.location.href = 'mqqwpa://im/chat?chat_type=wpa&uin={$app_qq}&version=1&src_type=web&web_src=oicqzone.com';
}
function checkSafari() {
var ua = navigator.userAgent.toLowerCase();
//判断是不是在iPhone的Safair浏览器打开的本页面
if (ua.indexOf('applewebkit') > -1 && ua.indexOf('mobile') > -1 && ua.indexOf('safari') > -1 &&
ua.indexOf('linux') === -1 && ua.indexOf('android') === -1 && ua.indexOf('chrome') === -1 &&
ua.indexOf('ios') === -1 && ua.indexOf('browser') === -1) {
return true;
}
else {
alert("请使用iPhone中的Safari浏览器打开本页面");
window.location.href = 'mobile.php?s=/Ssg/home.html';
}
}
5 years ago
</script>
5 years ago
</html>